// Provider / nurse onboarding — multi-step like the member intake.
// Steps: intro → about you → credentials → ID upload → self-intro video → submitted.

const PRACTICE_STEPS = [
  { id: 'intro',       label: '00 · OVERVIEW' },
  { id: 'about',       label: '01 · ABOUT YOU' },
  { id: 'credentials', label: '02 · CREDENTIALS' },
  { id: 'id',          label: '03 · ID' },
  { id: 'video',       label: '04 · SELF-INTRO' },
  { id: 'review',      label: '05 · REVIEW' },
  { id: 'done',        label: '06 · SUBMITTED' },
];

const PracticeOnboarding = ({ onBack }) => {
  const [step, setStep] = React.useState('intro');
  const [data, setData] = React.useState({
    legalName: '', email: '', phone: '', state: '',
    licenseType: 'NP', licenseNumber: '', licenseState: '', licenseExpiry: '',
    npi: '',
    yearsActive: '', currentPractice: '', why: '',
    idFront: null, idBack: null,
    videoRecorded: false,
    consent: false,
  });

  const goto = (s) => { setStep(s); window.scrollTo({ top: 0, behavior: 'smooth' }); };

  const stepIdx = PRACTICE_STEPS.findIndex(s => s.id === step);

  return (
    <div className="prac-shell" data-screen-label="Practice Onboarding">
      <div className="prac-topbar">
        <a className="prac-back" onClick={onBack}>← Back to AmazingXO</a>
        <div className="prac-counter mono">PRACTICE WITH US · {PRACTICE_STEPS[stepIdx]?.label}</div>
      </div>

      {step !== 'intro' && step !== 'done' && (
        <div className="prac-progress">
          <div className="prac-progress-bar" style={{ width: `${((stepIdx) / (PRACTICE_STEPS.length - 2)) * 100}%` }} />
        </div>
      )}

      <div className="prac-stage">
        {step === 'intro' && <PracIntro onNext={() => goto('about')} />}
        {step === 'about' && <PracAbout data={data} setData={setData} onBack={() => goto('intro')} onNext={() => goto('credentials')} />}
        {step === 'credentials' && <PracCredentials data={data} setData={setData} onBack={() => goto('about')} onNext={() => goto('id')} />}
        {step === 'id' && <PracId data={data} setData={setData} onBack={() => goto('credentials')} onNext={() => goto('video')} />}
        {step === 'video' && <PracVideo data={data} setData={setData} onBack={() => goto('id')} onNext={() => goto('review')} />}
        {step === 'review' && <PracReview data={data} setData={setData} onBack={() => goto('video')} onSubmit={() => goto('done')} />}
        {step === 'done' && <PracDone data={data} onBack={onBack} />}
      </div>
    </div>
  );
};

// ─── Step 0: Intro ──────────────────────────────────────────────────────────
const PracIntro = ({ onNext }) => (
  <div className="prac-card">
    <div className="prac-eyebrow mono">— PRACTICE WITH AMAZINGXO</div>
    <h1 className="serif prac-h1">Build your own <em>bench.</em></h1>
    <p className="prac-sub">
      For licensed nurse practitioners, RNs, and providers. Set your own hours, pick the members you connect with, and earn for what you do — not for sitting on a payroll. Onboarding takes about ten minutes. We verify everything before you go live.
    </p>

    <div className="prac-steps-list">
      {[
        { n: '01', h: 'About you', p: 'Name, contact, where you practice. Two minutes.' },
        { n: '02', h: 'Credentials', p: 'License number, type, NPI. We verify against state boards.' },
        { n: '03', h: 'Government-issued ID', p: 'Front + back. So we know it\'s actually you.' },
        { n: '04', h: 'Sixty-second self-intro', p: 'How members will see you when they\'re picking a provider. Re-record as many times as you want.' },
        { n: '05', h: 'Review and submit', p: 'Our credentialing team reviews within 2 business days. You\'ll hear from us either way.' },
      ].map(it => (
        <div key={it.n} className="prac-step-row">
          <span className="prac-step-num">{it.n}</span>
          <div>
            <h3>{it.h}</h3>
            <p>{it.p}</p>
          </div>
        </div>
      ))}
    </div>

    <div className="prac-legal mono">
      Earnings model: provider care rooms, private 1:1 support, and reviewed follow-up. We never overload your panel. You set your cap.
    </div>

    <div className="prac-actions">
      <button className="btn btn-primary btn-lg" onClick={onNext}>Start application →</button>
    </div>
  </div>
);

// ─── Step 1: About ──────────────────────────────────────────────────────────
const PracAbout = ({ data, setData, onBack, onNext }) => {
  const set = (k) => (v) => setData({ ...data, [k]: v });
  const ready = data.legalName && data.email && data.phone && data.state;

  return (
    <div className="prac-card">
      <div className="prac-eyebrow mono">— ABOUT YOU</div>
      <h1 className="serif prac-h1">Let's <em>start with you.</em></h1>
      <p className="prac-sub">Just the basics. Everything stays private until you go live — and even then, only your first name and self-intro are member-visible.</p>

      <div className="prac-form-grid">
        <PracField label="Full legal name" value={data.legalName} onChange={set('legalName')} placeholder="First Middle Last" required />
        <PracField label="Work email" type="email" value={data.email} onChange={set('email')} placeholder="you@practice.com" required />
        <PracField label="Mobile" value={data.phone} onChange={set('phone')} placeholder="+1 (555) 555-5555" required />
        <PracField label="State you practice in" value={data.state} onChange={set('state')} placeholder="FL, NY, etc." required />
        <PracField label="Years actively practicing" value={data.yearsActive} onChange={set('yearsActive')} placeholder="e.g. 7" />
        <PracField label="Current practice or affiliation" value={data.currentPractice} onChange={set('currentPractice')} placeholder="Solo, group, hospital, etc." />
      </div>

      <PracField label="Why you'd practice with AmazingXO" value={data.why} onChange={set('why')} placeholder="A sentence or two — what drew you to this." textarea />

      <div className="prac-actions">
        <button className="btn btn-soft" onClick={onBack}>← Back</button>
        <button className="btn btn-primary btn-lg" onClick={onNext} disabled={!ready}>Continue →</button>
      </div>
    </div>
  );
};

// ─── Step 2: Credentials ────────────────────────────────────────────────────
const PracCredentials = ({ data, setData, onBack, onNext }) => {
  const set = (k) => (v) => setData({ ...data, [k]: v });
  const ready = data.licenseNumber && data.licenseState && data.licenseExpiry;

  return (
    <div className="prac-card">
      <div className="prac-eyebrow mono">— CREDENTIALS</div>
      <h1 className="serif prac-h1">Your <em>license details.</em></h1>
      <p className="prac-sub">We verify against the state board of nursing or medicine. If anything looks off, we'll reach out before rejecting — boards make typos too.</p>

      <div className="prac-license-types">
        {['NP', 'RN', 'MD/DO', 'PA'].map(t => (
          <button
            key={t}
            className={`prac-license-pill ${data.licenseType === t ? 'is-active' : ''}`}
            onClick={() => set('licenseType')(t)}
            type="button"
          >
            {t}
          </button>
        ))}
      </div>

      <div className="prac-form-grid">
        <PracField label="License number" value={data.licenseNumber} onChange={set('licenseNumber')} placeholder="As printed on your license" required />
        <PracField label="State of license" value={data.licenseState} onChange={set('licenseState')} placeholder="e.g. FL" required />
        <PracField label="Expiry date" value={data.licenseExpiry} onChange={set('licenseExpiry')} placeholder="MM/YYYY" required />
        <PracField label="NPI (optional but speeds review)" value={data.npi} onChange={set('npi')} placeholder="10-digit NPI" />
      </div>

      <div className="prac-callout">
        <div className="mono" style={{ fontSize: 10, letterSpacing: '0.15em', color: 'var(--ink-mute)', marginBottom: 6 }}>HOW WE VERIFY</div>
        <p>We cross-check your license number, name, and state against the public board database. If your license has any active sanctions or pending complaints, we'll let you know what we found and how to clarify.</p>
      </div>

      <div className="prac-actions">
        <button className="btn btn-soft" onClick={onBack}>← Back</button>
        <button className="btn btn-primary btn-lg" onClick={onNext} disabled={!ready}>Continue →</button>
      </div>
    </div>
  );
};

// ─── Step 3: ID Upload ──────────────────────────────────────────────────────
const PracId = ({ data, setData, onBack, onNext }) => {
  const set = (k) => (v) => setData({ ...data, [k]: v });
  const handleUpload = (which) => () => {
    // Simulated upload — in real flow this hits storage.
    set(which)({ name: `${which}-${Date.now()}.jpg`, size: '2.4 MB' });
  };
  const ready = data.idFront && data.idBack;

  return (
    <div className="prac-card">
      <div className="prac-eyebrow mono">— GOVERNMENT-ISSUED ID</div>
      <h1 className="serif prac-h1">Photo of <em>your ID.</em></h1>
      <p className="prac-sub">Driver's license, passport, or state ID. We compare it to your license record. This is how we make sure the person practicing is actually the person credentialed.</p>

      <div className="prac-id-grid">
        <PracIdSlot label="ID FRONT" file={data.idFront} onUpload={handleUpload('idFront')} onClear={() => set('idFront')(null)} />
        <PracIdSlot label="ID BACK" file={data.idBack} onUpload={handleUpload('idBack')} onClear={() => set('idBack')(null)} />
      </div>

      <div className="prac-callout">
        <div className="mono" style={{ fontSize: 10, letterSpacing: '0.15em', color: 'var(--ink-mute)', marginBottom: 6 }}>HOW WE STORE THIS</div>
        <p>Your ID is encrypted at rest and used only to verify your identity. It is never shared with members. If your application is rejected, we delete it within 30 days; if accepted, we retain it for the life of your practice with us, plus the period required for credentialing audits.</p>
      </div>

      <div className="prac-actions">
        <button className="btn btn-soft" onClick={onBack}>← Back</button>
        <button className="btn btn-primary btn-lg" onClick={onNext} disabled={!ready}>Continue →</button>
      </div>
    </div>
  );
};

const PracIdSlot = ({ label, file, onUpload, onClear }) => (
  <div className={`prac-id-slot ${file ? 'is-filled' : ''}`}>
    <div className="prac-id-label mono">— {label}</div>
    {file ? (
      <div className="prac-id-filled">
        <div className="prac-id-check">✓</div>
        <div>
          <div style={{ fontSize: 14, fontWeight: 500 }}>{file.name}</div>
          <div className="mono" style={{ fontSize: 11, color: 'var(--ink-mute)' }}>{file.size}</div>
        </div>
        <button className="prac-id-clear mono" onClick={onClear} type="button">REPLACE</button>
      </div>
    ) : (
      <button className="prac-id-upload" onClick={onUpload} type="button">
        <div className="prac-id-upload-icon">+</div>
        <div className="prac-id-upload-text">Upload {label.toLowerCase()}</div>
        <div className="mono" style={{ fontSize: 10, letterSpacing: '0.12em', color: 'var(--ink-mute)' }}>JPG, PNG, or PDF · UP TO 10MB</div>
      </button>
    )}
  </div>
);

// ─── Step 4: Self-intro Video ───────────────────────────────────────────────
const PracVideo = ({ data, setData, onBack, onNext }) => {
  const [recording, setRecording] = React.useState(false);
  const [seconds, setSeconds] = React.useState(0);
  const set = (k) => (v) => setData({ ...data, [k]: v });

  React.useEffect(() => {
    if (!recording) return;
    const t = setInterval(() => {
      setSeconds(s => {
        if (s >= 60) { setRecording(false); set('videoRecorded')(true); return 60; }
        return s + 1;
      });
    }, 1000);
    return () => clearInterval(t);
  }, [recording]);

  const start = () => { setSeconds(0); setRecording(true); };
  const stop = () => { setRecording(false); set('videoRecorded')(true); };
  const retake = () => { set('videoRecorded')(false); setSeconds(0); };

  return (
    <div className="prac-card">
      <div className="prac-eyebrow mono">— SELF-INTRO · 60 SECONDS</div>
      <h1 className="serif prac-h1">How <em>members will see you.</em></h1>
      <p className="prac-sub">A short video. Members watch this when they're picking a provider. Be yourself — they're not picking on credentials, they're picking on whether they'd want to talk to you about something hard.</p>

      <div className="prac-script">
        <div className="mono" style={{ fontSize: 10, letterSpacing: '0.15em', color: 'var(--ink-mute)', marginBottom: 8 }}>A LIGHT PROMPT — NOT A SCRIPT</div>
        <p>"Hi, I'm <strong>{(data.legalName || 'your name').split(' ')[0]}</strong>. I've been practicing for <strong>{data.yearsActive || 'X'} years</strong> in <strong>{data.state || 'your state'}</strong>. The thing I care most about in a member call is _____. If you're someone who _____, we'll probably get along."</p>
      </div>

      <div className="prac-recorder">
        {data.videoRecorded ? (
          <div className="prac-recorder-done">
            <div className="prac-recorder-check">✓</div>
            <div>
              <div style={{ fontSize: 16, fontWeight: 500, marginBottom: 4 }}>Recording saved · {seconds}s</div>
              <div className="mono" style={{ fontSize: 11, letterSpacing: '0.1em', color: 'var(--ink-mute)' }}>YOU CAN RE-RECORD AS MANY TIMES AS YOU WANT</div>
            </div>
            <button className="btn btn-soft btn-sm" onClick={retake}>Retake</button>
          </div>
        ) : (
          <div className="prac-recorder-stage">
            <div className="prac-recorder-frame">
              <div className="prac-recorder-blob" />
              <div className="prac-recorder-overlay mono">
                {recording ? <span><span className="prac-rec-dot" /> REC · 0:{String(seconds).padStart(2, '0')} / 1:00</span> : 'CAMERA OFF'}
              </div>
            </div>
            <div style={{ display: 'flex', gap: 12, justifyContent: 'center', marginTop: 20 }}>
              {recording ? (
                <button className="btn btn-primary btn-lg" onClick={stop}>Stop & save</button>
              ) : (
                <button className="btn btn-primary btn-lg" onClick={start}>● Start recording</button>
              )}
            </div>
          </div>
        )}
      </div>

      <div className="prac-actions">
        <button className="btn btn-soft" onClick={onBack}>← Back</button>
        <button className="btn btn-primary btn-lg" onClick={onNext} disabled={!data.videoRecorded}>Continue →</button>
      </div>
    </div>
  );
};

// ─── Step 5: Review ─────────────────────────────────────────────────────────
const PracReview = ({ data, setData, onBack, onSubmit }) => {
  const set = (k) => (v) => setData({ ...data, [k]: v });

  return (
    <div className="prac-card">
      <div className="prac-eyebrow mono">— REVIEW & SUBMIT</div>
      <h1 className="serif prac-h1">One last <em>look.</em></h1>
      <p className="prac-sub">Make sure it's all right before we send it to credentialing. You can come back and edit anything after submission, but it pauses the review.</p>

      <div className="prac-review-grid">
        <PracReviewRow label="Name" value={data.legalName} />
        <PracReviewRow label="Email" value={data.email} />
        <PracReviewRow label="Phone" value={data.phone} />
        <PracReviewRow label="State" value={data.state} />
        <PracReviewRow label="License" value={`${data.licenseType} · ${data.licenseNumber} · ${data.licenseState} · exp ${data.licenseExpiry}`} />
        <PracReviewRow label="NPI" value={data.npi || '—'} />
        <PracReviewRow label="Years active" value={data.yearsActive || '—'} />
        <PracReviewRow label="Current practice" value={data.currentPractice || '—'} />
        <PracReviewRow label="ID upload" value={`Front + back · ${data.idFront ? '✓' : '—'}`} />
        <PracReviewRow label="Self-intro video" value={data.videoRecorded ? 'Recorded ✓' : '—'} />
      </div>

      <label className="prac-consent">
        <input type="checkbox" checked={data.consent} onChange={(e) => set('consent')(e.target.checked)} />
        <span>I confirm everything above is accurate. I authorize AmazingXO to verify my license and ID against state and federal databases, and to contact me about my application.</span>
      </label>

      <div className="prac-actions">
        <button className="btn btn-soft" onClick={onBack}>← Back</button>
        <button className="btn btn-primary btn-lg" onClick={onSubmit} disabled={!data.consent}>Submit application →</button>
      </div>
    </div>
  );
};

const PracReviewRow = ({ label, value }) => (
  <div className="prac-review-row">
    <div className="mono" style={{ fontSize: 10, letterSpacing: '0.15em', color: 'var(--ink-mute)' }}>{label.toUpperCase()}</div>
    <div style={{ fontSize: 16, marginTop: 4 }}>{value}</div>
  </div>
);

// ─── Step 6: Done ───────────────────────────────────────────────────────────
const PracDone = ({ data, onBack }) => (
  <div className="prac-card prac-done">
    <div className="prac-done-mark">✓</div>
    <h1 className="serif prac-h1" style={{ textAlign: 'center' }}>Application <em>submitted.</em></h1>
    <p className="prac-sub" style={{ textAlign: 'center' }}>
      Thanks, {(data.legalName || 'there').split(' ')[0]}. We've sent a copy to {data.email || 'your inbox'}. Our credentialing team reviews every application within <strong>2 business days</strong>. You'll hear from us either way — accepted or not.
    </p>

    <div className="prac-done-timeline">
      <div className="prac-done-step is-done">
        <div className="prac-done-dot">✓</div>
        <div>
          <div style={{ fontWeight: 500 }}>Submitted</div>
          <div className="mono" style={{ fontSize: 11, color: 'var(--ink-mute)' }}>JUST NOW</div>
        </div>
      </div>
      <div className="prac-done-step is-active">
        <div className="prac-done-dot">2</div>
        <div>
          <div style={{ fontWeight: 500 }}>License + ID verification</div>
          <div className="mono" style={{ fontSize: 11, color: 'var(--ink-mute)' }}>WITHIN 24 HOURS</div>
        </div>
      </div>
      <div className="prac-done-step">
        <div className="prac-done-dot">3</div>
        <div>
          <div style={{ fontWeight: 500 }}>Credentialing call (15 min)</div>
          <div className="mono" style={{ fontSize: 11, color: 'var(--ink-mute)' }}>WITHIN 2 BUSINESS DAYS</div>
        </div>
      </div>
      <div className="prac-done-step">
        <div className="prac-done-dot">4</div>
        <div>
          <div style={{ fontWeight: 500 }}>You go live</div>
          <div className="mono" style={{ fontSize: 11, color: 'var(--ink-mute)' }}>SAME WEEK</div>
        </div>
      </div>
    </div>

    <div className="prac-actions" style={{ justifyContent: 'center' }}>
      <button className="btn btn-soft" onClick={onBack}>← Back to AmazingXO</button>
    </div>
  </div>
);

// ─── Field primitive ────────────────────────────────────────────────────────
const PracField = ({ label, value, onChange, placeholder, type = 'text', textarea, required }) => (
  <label className="prac-field">
    <span className="prac-field-label mono">{label}{required && ' *'}</span>
    {textarea ? (
      <textarea
        value={value}
        onChange={(e) => onChange(e.target.value)}
        placeholder={placeholder}
        rows={4}
        className="prac-field-input prac-field-textarea"
      />
    ) : (
      <input
        type={type}
        value={value}
        onChange={(e) => onChange(e.target.value)}
        placeholder={placeholder}
        className="prac-field-input"
      />
    )}
  </label>
);

Object.assign(window, { PracticeOnboarding });