// ViG Command Center — mock sign-in gate (validates against the user roster)
const { useState: useStateLG, useEffect: useEffectLG } = React;

function LoginScreen({ onSignIn }) {
  const [handle, setHandle] = useStateLG('');
  const [pw, setPw] = useStateLG('');
  const [err, setErr] = useStateLG('');
  const users = (window.LS && LS.get('vig2_users', null)) || [{ id: 'u1', name: 'You (R4 Lead)', handle: 'vig-lead', role: 'Admin', status: 'active' }];

  const submit = e => {
    if (e) e.preventDefault();
    const h = handle.trim().replace(/^@/, '').toLowerCase();
    if (!h) { setErr('Enter your username.'); return; }
    if (!pw) { setErr('Enter your password.'); return; }
    const u = users.find(x => x.handle.toLowerCase() === h);
    if (!u) { setErr('No account with that username. Ask an Admin to add you.'); return; }
    if (u.status === 'suspended') { setErr('This account is suspended. Contact an Admin.'); return; }
    onSignIn(u);
  };

  return (
    <div className="flex min-h-screen items-center justify-center bg-zinc-950 p-4" style={{ background: 'radial-gradient(120% 90% at 50% -10%, #1a1c22 0%, #0c0d10 60%, #060708 100%)' }}>
      <div className="w-full max-w-sm">
        <div className="mb-7 text-center">
          <div className="mx-auto flex h-14 w-14 items-center justify-center" style={{ filter: 'drop-shadow(0 12px 30px rgba(255,107,0,.55))' }}><VigCrest size={56} /></div>
          <h1 className="mt-3.5 text-[20px] font-bold tracking-tight text-white">ViG Command Center</h1>
          <p className="mt-1 text-[12.5px] text-zinc-400">Sign in to your ViG alliance toolkit</p>
        </div>
        <form onSubmit={submit} className="rounded-2xl border border-zinc-800 bg-zinc-900/70 p-5 shadow-2xl backdrop-blur">
          <label className="mb-1.5 block text-[11px] font-semibold uppercase tracking-wide text-zinc-400">Username</label>
          <div className="relative mb-3.5">
            <span className="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-500">@</span>
            <input value={handle} onChange={e => { setHandle(e.target.value); setErr(''); }} autoFocus placeholder="your-handle"
              className="h-11 w-full rounded-lg border border-zinc-700 bg-zinc-950/60 pl-7 pr-3 text-[14px] text-white outline-none transition-colors focus:border-brand" />
          </div>
          <label className="mb-1.5 block text-[11px] font-semibold uppercase tracking-wide text-zinc-400">Password</label>
          <input type="password" value={pw} onChange={e => { setPw(e.target.value); setErr(''); }} placeholder="••••••••"
            className="mb-1 h-11 w-full rounded-lg border border-zinc-700 bg-zinc-950/60 px-3 text-[14px] text-white outline-none transition-colors focus:border-brand" />
          {err && <div className="mt-2 rounded-lg bg-rose-500/10 px-3 py-2 text-[12px] text-rose-300">{err}</div>}
          <button type="submit" className="mt-4 flex w-full items-center justify-center gap-2 rounded-lg py-3 text-[14px] font-bold text-white transition-all hover:brightness-110" style={{ background: 'linear-gradient(180deg,#ff7d1a,#FF6B00)', boxShadow: '0 8px 22px -10px rgba(255,107,0,.7)' }}>
            Sign in
          </button>
          <p className="mt-3 text-center text-[11px] text-zinc-500">Prototype sign-in — any password works. Accounts are managed in <span className="text-zinc-300">User Management</span>.</p>
        </form>
      </div>
    </div>
  );
}
window.LoginScreen = LoginScreen;