// login.jsx — 登入分流（長輩 / 機構）
const { useState: useLS } = React;

function LoginScreen({ onElder, onInstitution }) {
  const [view, setView] = useLS('pick'); // pick | inst
  const [code, setCode] = useLS('KANGNING');
  const [pass, setPass] = useLS('2026');

  return (
    <div className="screen warmbg" style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column',
      alignItems: 'center', justifyContent: 'center', padding: 24, gap: 28 }}>

      <div style={{ textAlign: 'center' }}>
        <div className="floaty" style={{ display: 'inline-block' }}><window.Mascot mood="wave" size={132} /></div>
        <h1 style={{ fontSize: 'var(--fs-h1)', fontWeight: 900, margin: '12px 0 4px', letterSpacing: 1 }}>
          樂睦 <span style={{ color: 'var(--primary)' }}>Lumo</span>
        </h1>
        <p style={{ fontSize: 'var(--fs-lead)', color: 'var(--ink-2)', margin: 0, fontWeight: 700 }}>智慧樂齡復能系統</p>
      </div>

      {view === 'pick' && (
        <div className="screen" style={{ display: 'flex', gap: 24, flexWrap: 'wrap', justifyContent: 'center', maxWidth: 760, width: '100%' }}>
          <PickCard id="pick-elder" tone="sun" art={<window.ElderAvatar tone="sun" size={108} />} title="我是長輩" sub="我要來活動、玩遊戲" onClick={onElder} />
          <PickCard id="pick-inst" tone="sky" art={<window.IcClinic size={82} color="#3C8FC0" />} title="我是機構" sub="查看長輩回饋與成效" onClick={() => setView('inst')} />
        </div>
      )}

      {view === 'inst' && (
        <window.Card pad={32} style={{ width: '100%', maxWidth: 460 }}>
          <h2 style={{ fontSize: 'var(--fs-h2)', fontWeight: 900, margin: '0 0 4px' }}>機構登入</h2>
          <p style={{ color: 'var(--ink-3)', margin: '0 0 22px', fontSize: 'var(--fs-body)' }}>輸入機構的登入資訊</p>
          <Field label="機構代碼" hint="機構申請時取得（例：KANGNING）" value={code} onChange={setCode} />
          <Field label="登入密碼" hint="由 Lumo 後台發放" value={pass} onChange={setPass} type="password" />
          <div style={{ display: 'flex', gap: 12, marginTop: 24 }}>
            <window.GhostButton onClick={() => setView('pick')}>← 返回</window.GhostButton>
            <window.BigButton size="md" full onClick={onInstitution}>登入</window.BigButton>
          </div>
        </window.Card>
      )}

      <p style={{ color: 'var(--ink-3)', fontSize: 'var(--fs-small)', marginTop: 8 }}>
        © 2026 樂睦　·　示範版本（資料為模擬）
      </p>
    </div>
  );
}

function PickCard({ id, tone, art, title, sub, onClick }) {
  const c = window.tone(tone);
  return (
    <div id={id} className="card-hover" onClick={onClick} style={{
      flex: '1 1 320px', background: 'var(--surface)', border: '2px solid var(--border)',
      borderRadius: 28, padding: '40px 28px', cursor: 'pointer', textAlign: 'center', boxShadow: 'var(--shadow-soft)',
    }}>
      <div style={{ width: 132, height: 132, borderRadius: '50%', background: c.soft, margin: '0 auto 18px',
        display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{art}</div>
      <div style={{ fontSize: 'var(--fs-h2)', fontWeight: 900, marginBottom: 6 }}>{title}</div>
      <div style={{ fontSize: 'var(--fs-lead)', color: 'var(--ink-2)', fontWeight: 700 }}>{sub}</div>
    </div>
  );
}

function Field({ label, hint, value, onChange, type = 'text' }) {
  return (
    <div style={{ marginBottom: 18 }}>
      <label style={{ display: 'block', fontSize: 'var(--fs-body)', fontWeight: 800, marginBottom: 6 }}>{label}</label>
      <input type={type} value={value} onChange={(e) => onChange(e.target.value)} style={{
        width: '100%', fontSize: 'var(--fs-lead)', padding: '14px 16px', borderRadius: 14,
        border: '2px solid var(--border)', background: 'var(--canvas)', color: 'var(--ink)', fontFamily: 'inherit',
      }} />
      {hint && <div style={{ fontSize: 'var(--fs-small)', color: 'var(--ink-3)', marginTop: 5 }}>{hint}</div>}
    </div>
  );
}

Object.assign(window, { LoginScreen });