/* Signup — controlled form fields */

function ScreenSignup() {
  const t = useT();
  const [role, setRole] = React.useState(0);
  const [first, setFirst] = React.useState('Maya');
  const [last, setLast] = React.useState('Chen');
  const [email, setEmail] = React.useState('m.chen@stanford-med.edu');
  const [password, setPassword] = React.useState('');
  const [year, setYear] = React.useState('MS-2');
  const [institution, setInstitution] = React.useState('Stanford School of Medicine');
  const [interests, setInterests] = React.useState(new Set(['cardio', 'im', 'em']));
  const [accept, setAccept] = React.useState(true);
  const [submitting, setSubmitting] = React.useState(false);

  const interestList = [
    { id: 'cardio', label: t('subj_cardio') },
    { id: 'im',     label: t('subj_im') },
    { id: 'em',     label: t('subj_em') },
    { id: 'neuro',  label: t('subj_neuro') },
    { id: 'peds',   label: t('subj_peds') },
    { id: 'psych',  label: t('subj_psych') },
    { id: 'surg',   label: t('subj_surg') },
    { id: 'onc',    label: t('subj_onc') },
  ];

  const toggleInterest = (id) => {
    setInterests((curr) => {
      const next = new Set(curr);
      next.has(id) ? next.delete(id) : (next.size < 5 && next.add(id));
      return next;
    });
  };

  const onSubmit = (e) => {
    e.preventDefault();
    if (!accept || submitting) return;
    setSubmitting(true);
    setTimeout(() => goTo('dashboard'), 300);
  };

  const isEdu = /\.edu(\b|$)/.test(email);

  const roles = [
    { l: t('role_student'),      s: t('role_student_s') },
    { l: t('role_resident'),     s: t('role_resident_s') },
    { l: t('role_practitioner'), s: t('role_practitioner_s') },
    { l: t('role_nurse'),        s: t('role_nurse_s') },
  ];

  return (
    <>
      <NavBar />

      <main id="main" className="section">
        <div className="container">
          <div className="signup-split">
            {/* LEFT: form */}
            <form onSubmit={onSubmit} className="wf-border" style={{ padding: 'clamp(20px, 3vw, 32px)', background: 'var(--paper)' }}>
              <div className="sec-tag" style={{ marginBottom: 6 }}>{t('signup_step')}</div>
              <h1 className="hand" style={{ fontSize: 'var(--fs-h2)', margin: 0 }}>{t('signup_title')}</h1>
              <p style={{ fontSize: 14, color: 'var(--ink-2)', marginTop: 6, marginBottom: 22 }}>{t('signup_sub')}</p>

              {/* Role */}
              <div className="field">
                <div className="sec-tag" style={{ marginBottom: 8 }}>{t('signup_role')}</div>
                <div className="card-grid-2" style={{ gap: 8 }}>
                  {roles.map((r, i) => (
                    <label key={i} className="wf-border-thin" style={{ padding: 10, display: 'flex', gap: 10, alignItems: 'center', cursor: 'pointer', background: role === i ? 'var(--sky-tint)' : 'var(--paper)' }}>
                      <input
                        type="radio"
                        name="role"
                        checked={role === i}
                        onChange={() => setRole(i)}
                        style={{ accentColor: 'var(--ink)' }}
                      />
                      <span>
                        <div className="hand" style={{ fontSize: 17, lineHeight: 1.1 }}>{r.l}</div>
                        <div style={{ fontSize: 12, color: 'var(--muted)' }}>{r.s}</div>
                      </span>
                    </label>
                  ))}
                </div>
              </div>

              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                <label className="field">
                  <span className="field-label">{t('field_first_name')}</span>
                  <input className="field-input" value={first} onChange={(e) => setFirst(e.target.value)} required />
                </label>
                <label className="field">
                  <span className="field-label">{t('field_last_name')}</span>
                  <input className="field-input" value={last} onChange={(e) => setLast(e.target.value)} required />
                </label>
              </div>

              <label className="field">
                <span className="field-label">{t('field_email')}</span>
                <input className="field-input" type="email" value={email} onChange={(e) => setEmail(e.target.value)} required />
                {isEdu && <span style={{ display: 'block', fontSize: 12, color: 'var(--sky-deep)', marginTop: 4 }}>{t('edu_detected')}</span>}
              </label>

              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                <label className="field">
                  <span className="field-label">{t('field_password')}</span>
                  <input className="field-input" type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="••••••••" required />
                </label>
                <label className="field">
                  <span className="field-label">{t('field_year')}</span>
                  <select className="field-select" value={year} onChange={(e) => setYear(e.target.value)}>
                    <option>MS-1</option><option>MS-2</option><option>MS-3</option><option>MS-4</option>
                    <option>PGY-1</option><option>PGY-2</option><option>PGY-3+</option><option>Attending</option>
                  </select>
                </label>
              </div>

              <label className="field">
                <span className="field-label">{t('field_institution')}</span>
                <input className="field-input" value={institution} onChange={(e) => setInstitution(e.target.value)} />
              </label>

              <div className="field">
                <span className="field-label">{t('field_interests')}</span>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                  {interestList.map((it) => {
                    const on = interests.has(it.id);
                    return (
                      <span key={it.id} className={'chip ' + (on ? 'chip-solid' : '')} onClick={() => toggleInterest(it.id)}>
                        {it.label}
                      </span>
                    );
                  })}
                </div>
              </div>

              <label style={{ display: 'flex', gap: 8, alignItems: 'flex-start', fontSize: 13, color: 'var(--ink-2)', marginBottom: 16 }}>
                <input type="checkbox" checked={accept} onChange={(e) => setAccept(e.target.checked)} style={{ marginTop: 3 }} />
                <span>{t('agree_terms')}</span>
              </label>

              <button type="submit" className="btn btn-primary btn-block btn-lg" disabled={!accept || submitting}>
                {submitting ? '...' : t('create_account')}
              </button>

              <div className="wf-rule-dash" style={{ margin: '18px 0' }} />

              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
                <button type="button" className="btn" onClick={() => goTo('dashboard')}>{t('continue_google')}</button>
                <button type="button" className="btn" onClick={() => goTo('dashboard')}>{t('continue_orcid')}</button>
              </div>

              <div style={{ textAlign: 'center', marginTop: 18, fontSize: 14, color: 'var(--ink-2)' }}>
                {t('already_member')}{' '}
                <a className="hand" style={{ color: 'var(--sky-deep)', fontSize: 17, cursor: 'pointer' }} onClick={() => goTo('dashboard')}>
                  {t('log_in')}
                </a>
              </div>
            </form>

            {/* RIGHT: value props */}
            <div>
              <h2 className="hand" style={{ fontSize: 'var(--fs-h1)', lineHeight: 1.05, margin: 0 }}>
                {t('signup_value_h')}<br/>
                <span className="scribble-under">{t('signup_value_h2')}</span>
              </h2>
              <p style={{ fontSize: 16, color: 'var(--ink-2)', marginTop: 16, maxWidth: 460 }}>{t('signup_value_sub')}</p>

              <div style={{ display: 'flex', flexDirection: 'column', gap: 14, marginTop: 28 }}>
                {[
                  { h: t('signup_feat1_h'), s: t('signup_feat1_s') },
                  { h: t('signup_feat2_h'), s: t('signup_feat2_s') },
                  { h: t('signup_feat3_h'), s: t('signup_feat3_s') },
                  { h: t('signup_feat4_h'), s: t('signup_feat4_s') },
                ].map((f, i) => (
                  <div key={i} style={{ display: 'flex', gap: 12 }}>
                    <span className="hand" style={{ fontSize: 26, lineHeight: 1.05, color: 'var(--sky-deep)' }}>{`0${i + 1}`}</span>
                    <div>
                      <div className="hand" style={{ fontSize: 20, lineHeight: 1.15 }}>{f.h}</div>
                      <div style={{ fontSize: 14, color: 'var(--ink-2)' }}>{f.s}</div>
                    </div>
                  </div>
                ))}
              </div>

              <div className="wf-border-soft" style={{ padding: 16, marginTop: 28 }}>
                <div className="sec-tag" style={{ marginBottom: 6 }}>{t('trusted_by')}</div>
                <div style={{ fontSize: 14, color: 'var(--ink-2)' }}>{t('trusted_count')}</div>
              </div>
            </div>
          </div>
        </div>
      </main>

      <Footer />
    </>
  );
}

window.ScreenSignup = ScreenSignup;