// onboarding.jsx — 4-step first-run flow after sign-up
// Captures profile (name + license + hospital + role), cycle dates, baseline points.
// Writes to public.profiles via DB.upsertProfile and flips onboarded=true.

const { useState: oS, useEffect: oE } = React;

function OnboardingFlow({ session, lang, setLang, onDone }) {
  const userId = session.user.id;
  const email  = session.user.email;
  const [step, setStep] = oS(0);
  const [busy, setBusy] = oS(false);
  const [form, setForm] = oS({
    name_en: '', name_zh: '',
    license_no: '',
    hospital_en: '', hospital_zh: '',
    role_en: 'Registered Nurse', role_zh: '註冊護士',
    cycle_start: '2024-01-01',
    renewal_date: '2026-12-31',
    required_points: 60,
    baseline_points: 0,
  });
  const set = (k, v) => setForm(p => ({ ...p, [k]: v }));

  const steps = [
    { id: 'welcome', title: { en: 'Welcome', zh: '歡迎' } },
    { id: 'profile', title: { en: 'You',     zh: '你' } },
    { id: 'cycle',   title: { en: 'Cycle',   zh: '週期' } },
    { id: 'points',  title: { en: 'Baseline', zh: '已有積分' } },
    { id: 'done',    title: { en: 'Set',     zh: '完成' } },
  ];
  const progress = (step / (steps.length - 1)) * 100;

  const next = () => setStep(s => Math.min(s + 1, steps.length - 1));
  const back = () => setStep(s => Math.max(s - 1, 0));

  const finish = async () => {
    setBusy(true);
    const patch = {
      name_en: form.name_en || email.split('@')[0],
      name_zh: form.name_zh,
      short_name_en: (form.name_en || email.split('@')[0]).split(' ')[0],
      short_name_zh: form.name_zh,
      license_no: form.license_no,
      hospital_en: form.hospital_en,
      hospital_zh: form.hospital_zh,
      role_en: form.role_en,
      role_zh: form.role_zh,
      cycle_start: form.cycle_start,
      renewal_date: form.renewal_date,
      required_points: Number(form.required_points) || 60,
      baseline_points: Number(form.baseline_points) || 0,
      onboarded: true,
    };
    await DB.upsertProfile(userId, patch);
    setBusy(false);
    onDone();
  };

  return (
    <div className="auth-shell">
      <div className="auth-top">
        <div className="auth-brand">
          <div className="mono muted-2" style={{ fontSize: 9, letterSpacing: '0.16em', textTransform: 'uppercase' }}>
            {lang === 'zh' ? '設定' : 'Setup'} · {step + 1}/{steps.length}
          </div>
        </div>
        <LangPill lang={lang} setLang={setLang} />
      </div>

      {/* Progress bar */}
      <div style={{ padding: '0 28px' }}>
        <div className="onb-bar"><div className="onb-bar-fill" style={{ width: `${progress}%` }} /></div>
      </div>

      <div className="auth-body">
        {step === 0 && <Welcome lang={lang} email={email} onNext={next} />}
        {step === 1 && <ProfileStep lang={lang} form={form} set={set} onBack={back} onNext={next} />}
        {step === 2 && <CycleStep   lang={lang} form={form} set={set} onBack={back} onNext={next} />}
        {step === 3 && <PointsStep  lang={lang} form={form} set={set} onBack={back} onNext={next} />}
        {step === 4 && <DoneStep    lang={lang} form={form} busy={busy} onBack={back} onFinish={finish} />}
      </div>
    </div>
  );
}

function StepNav({ lang, onBack, onNext, nextLabel, disabled }) {
  return (
    <div className="onb-nav">
      {onBack
        ? <button className="auth-secondary" onClick={onBack}>{lang === 'zh' ? '上一步' : 'Back'}</button>
        : <span />}
      <button className="auth-primary" onClick={onNext} disabled={disabled}>
        {nextLabel || (lang === 'zh' ? '繼續' : 'Continue')}
      </button>
    </div>
  );
}

function Welcome({ lang, email, onNext }) {
  return (
    <>
      <div className="auth-eyebrow mono">{lang === 'zh' ? '建立你的紀錄' : 'Build your record'}</div>
      <h1 className="auth-title serif">
        {lang === 'zh' ? '由你開始。' : 'Let\u2019s start with you.'}
      </h1>
      <p className="auth-sub">
        {lang === 'zh'
          ? `你剛以 ${email} 註冊。接下來只需 4 步——個人資料、續期週期、現有 CNE 積分。`
          : `Signed up as ${email}. Four short steps — profile, renewal cycle, points you've already earned.`}
      </p>
      <div className="onb-list">
        <OnbBullet n="01" lang={lang} en="Your name, license and hospital" zh="姓名、執業編號及醫院" />
        <OnbBullet n="02" lang={lang} en="Your registration cycle dates"   zh="註冊週期日期" />
        <OnbBullet n="03" lang={lang} en="CNE points you already have"     zh="已取得的 CNE 積分" />
      </div>
      <StepNav lang={lang} onNext={onNext} nextLabel={lang === 'zh' ? '開始' : 'Begin'} />
    </>
  );
}

function OnbBullet({ n, lang, en, zh }) {
  return (
    <div className="onb-bullet">
      <div className="mono muted-2" style={{ fontSize: 10, letterSpacing: '0.16em' }}>{n}</div>
      <div className="onb-bullet-t">{lang === 'zh' ? zh : en}</div>
    </div>
  );
}

function ProfileStep({ lang, form, set, onBack, onNext }) {
  const canContinue = (form.name_en || form.name_zh) && form.license_no;
  return (
    <>
      <div className="auth-eyebrow mono">{lang === 'zh' ? '01 · 個人資料' : '01 · Profile'}</div>
      <h1 className="auth-title serif">
        {lang === 'zh' ? '介紹一下自己。' : 'A little about you.'}
      </h1>
      <div className="auth-form">
        <AuthField label={lang === 'zh' ? '姓名（英文）' : 'Full name (English)'}
          value={form.name_en} onChange={v => set('name_en', v)}
          placeholder="Wing Yi Chan" autoFocus />
        <AuthField label={lang === 'zh' ? '姓名（中文）' : 'Full name (中文)'}
          value={form.name_zh} onChange={v => set('name_zh', v)}
          placeholder="陳詠儀" />
        <AuthField label={lang === 'zh' ? '執業編號' : 'NCHK license number'}
          value={form.license_no} onChange={v => set('license_no', v)}
          placeholder="RN 24-12345" />
        <AuthField label={lang === 'zh' ? '工作單位' : 'Hospital / employer'}
          value={form.hospital_en} onChange={v => set('hospital_en', v)}
          placeholder="Queen Mary Hospital" />
        <div className="onb-roles">
          {[
            { en: 'Registered Nurse',  zh: '註冊護士' },
            { en: 'Enrolled Nurse',    zh: '登記護士' },
            { en: 'Advanced Practice', zh: '進階護理' },
            { en: 'Nurse Educator',    zh: '護理導師' },
            { en: 'Other',             zh: '其他' },
          ].map(r => (
            <button key={r.en} type="button"
              className={'onb-chip' + (form.role_en === r.en ? ' on' : '')}
              onClick={() => { set('role_en', r.en); set('role_zh', r.zh); }}>
              {lang === 'zh' ? r.zh : r.en}
            </button>
          ))}
        </div>
      </div>
      <StepNav lang={lang} onBack={onBack} onNext={onNext} disabled={!canContinue} />
    </>
  );
}

function CycleStep({ lang, form, set, onBack, onNext }) {
  return (
    <>
      <div className="auth-eyebrow mono">{lang === 'zh' ? '02 · 註冊週期' : '02 · Registration cycle'}</div>
      <h1 className="auth-title serif">
        {lang === 'zh' ? '你的 3 年週期。' : 'Your three-year cycle.'}
      </h1>
      <p className="auth-sub">
        {lang === 'zh'
          ? 'NCHK 要求每 3 年累積最少 60 CNE 分。請輸入你的週期。'
          : 'NCHK requires 60 CNE points every 3-year cycle. Set your cycle below.'}
      </p>
      <div className="auth-form">
        <AuthField label={lang === 'zh' ? '週期開始' : 'Cycle starts'} type="date"
          value={form.cycle_start} onChange={v => set('cycle_start', v)} />
        <AuthField label={lang === 'zh' ? '續期到期' : 'Renew by'} type="date"
          value={form.renewal_date} onChange={v => set('renewal_date', v)} />
        <AuthField label={lang === 'zh' ? '所需總分' : 'Total points required'} type="number"
          value={form.required_points} onChange={v => set('required_points', v)} />
      </div>
      <StepNav lang={lang} onBack={onBack} onNext={onNext} />
    </>
  );
}

function PointsStep({ lang, form, set, onBack, onNext }) {
  const pct = Math.min(100, Math.round((Number(form.baseline_points) || 0) / (Number(form.required_points) || 60) * 100));
  return (
    <>
      <div className="auth-eyebrow mono">{lang === 'zh' ? '03 · 已有積分' : '03 · Baseline'}</div>
      <h1 className="auth-title serif">
        {lang === 'zh' ? '你已經累積了多少？' : 'Where are you so far?'}
      </h1>
      <p className="auth-sub">
        {lang === 'zh'
          ? '如未確定，可填 0，稍後再從紀錄補上。'
          : 'Not sure? Leave it at 0 — you can log each course later in Record.'}
      </p>
      <div className="onb-points-card">
        <div className="serif onb-points-num">{form.baseline_points || 0}</div>
        <div className="mono muted-2" style={{ fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase' }}>
          / {form.required_points} {lang === 'zh' ? '分' : 'pts'}
        </div>
        <div className="onb-points-bar"><div className="onb-points-fill" style={{ width: `${pct}%` }} /></div>
      </div>
      <div className="auth-form">
        <AuthField label={lang === 'zh' ? '已取得 CNE 分' : 'CNE points already earned'} type="number"
          value={form.baseline_points} onChange={v => set('baseline_points', v)} autoFocus />
      </div>
      <StepNav lang={lang} onBack={onBack} onNext={onNext} />
    </>
  );
}

function DoneStep({ lang, form, busy, onBack, onFinish }) {
  return (
    <>
      <div className="auth-eyebrow mono">{lang === 'zh' ? '完成' : 'Ready'}</div>
      <h1 className="auth-title serif">
        {lang === 'zh' ? '一切就緒。' : "You're all set."}
      </h1>
      <p className="auth-sub">
        {lang === 'zh' ? `歡迎，${form.name_zh || form.name_en}。` : `Welcome aboard, ${form.name_en || form.name_zh}.`}
      </p>
      <div className="onb-summary">
        <SumRow lang={lang} en="License" zh="執業編號" v={form.license_no || '—'} />
        <SumRow lang={lang} en="Hospital" zh="工作單位" v={form.hospital_en || '—'} />
        <SumRow lang={lang} en="Role" zh="職位" v={lang === 'zh' ? form.role_zh : form.role_en} />
        <SumRow lang={lang} en="Cycle" zh="週期" v={`${form.cycle_start} → ${form.renewal_date}`} />
        <SumRow lang={lang} en="Baseline" zh="已有積分" v={`${form.baseline_points || 0} / ${form.required_points} pts`} />
      </div>
      <StepNav lang={lang} onBack={onBack} onNext={onFinish}
        nextLabel={busy ? (lang === 'zh' ? '儲存中…' : 'Saving…') : (lang === 'zh' ? '進入應用程式' : 'Enter app')}
        disabled={busy} />
    </>
  );
}
function SumRow({ lang, en, zh, v }) {
  return (
    <div className="onb-sum-row">
      <span className="mono muted-2" style={{ fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase' }}>
        {lang === 'zh' ? zh : en}
      </span>
      <span style={{ fontSize: 13.5 }}>{v}</span>
    </div>
  );
}

Object.assign(window, { OnboardingFlow });