// ===== Login screen =====
function LoginScreen({ onLogin }) {
  const [id, setId] = useState('admin');
  const [pw, setPw] = useState('');
  const [err, setErr] = useState('');
  const [showPw, setShowPw] = useState(false);

  const submit = (e) => {
    e.preventDefault();
    if (!id.trim() || !pw.trim()) { setErr('IDとパスワードを入力してください'); return; }
    // mock auth: any id+pw works (or check 'admin'/'pass')
    onLogin({ id, name: '院長', role: 'オーナー' });
  };

  return (
    <div className="login-shell">
      <form className="login-card" onSubmit={submit}>
        <div className="login-brand">
          <div className="login-brand-mark">整</div>
          <h1 className="login-brand-name">フィジオサロンキムラ</h1>
          <div className="login-brand-sub">ADMIN CONSOLE</div>
        </div>
        <p className="login-title">ログインして管理画面にアクセス</p>
        {err && <div className="login-error">{err}</div>}
        <div className="field">
          <label className="field-label">ID</label>
          <input className="input" value={id} onChange={e => setId(e.target.value)} autoComplete="username"/>
        </div>
        <div className="field">
          <label className="field-label">パスワード</label>
          <div style={{position:'relative'}}>
            <input className="input" type={showPw ? 'text' : 'password'} value={pw} onChange={e => setPw(e.target.value)} autoComplete="current-password" style={{paddingRight:38}}/>
            <button type="button" onClick={() => setShowPw(s => !s)} style={{position:'absolute', right:6, top:'50%', transform:'translateY(-50%)', background:'transparent', border:'none', color:'var(--ink-mute)', padding:6, cursor:'pointer'}}>
              <Icon name="eye" size={16}/>
            </button>
          </div>
        </div>
        <button className="login-submit" type="submit">ログイン</button>
        <div className="login-hint">デモ環境：任意のID/パスワードでログインできます</div>
      </form>
    </div>
  );
}
window.LoginScreen = LoginScreen;