/* A0 — Studio sign in. One shared team password (checked by /api/login, which
   sets an HttpOnly session cookie). Gated console; no public sign-up. */
const Sauth = window.SparkleClassicDesignSystem_7a1470;

function SignIn({ onSignedIn }) {
  const { Button, Card, Input, Icon, Sparkle } = Sauth;
  const [pw, setPw] = React.useState('');
  const [err, setErr] = React.useState(false);
  const [busy, setBusy] = React.useState(false);

  const submit = async (e) => {
    e && e.preventDefault();
    if (!pw) { setErr(true); return; }
    setBusy(true); setErr(false);
    try {
      await apiFetch('/api/login', { method: 'POST', body: JSON.stringify({ password: pw }) });
      onSignedIn();
    } catch (e2) {
      setErr(true); setBusy(false);
    }
  };

  return (
    <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20 }}>
      <div style={{ width: '100%', maxWidth: 380 }}>
        <div style={{ textAlign: 'center', marginBottom: 18 }}>
          <img src="assets/logo/sparkle-star.png" alt="" style={{ height: 44, imageRendering: 'pixelated' }} />
          <h1 className="spk-h2" style={{ fontSize: 24, margin: '10px 0 2px' }}>Sparkle Studio <Sparkle size={18} /></h1>
          <p className="spk-muted" style={{ fontSize: 14, margin: 0 }}>The team console. Enter the team password.</p>
        </div>

        <Card surface="card" padding="lg">
          <form onSubmit={submit} style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <Input label="Team password" type="password" placeholder="••••••••"
              leftIcon={<Icon name="lock" />} value={pw} autoFocus
              onChange={(e) => { setPw(e.target.value); setErr(false); }} />
            {err && (
              <p role="alert" style={{ display: 'flex', alignItems: 'center', gap: 6, margin: 0, color: 'var(--danger)', fontSize: 13.5, fontWeight: 700 }}>
                <Icon name="alert" size={15} aria-hidden="true" /> That password didn’t work. Try again.
              </p>
            )}
            <Button variant="primary" size="lg" fullWidth type="submit" disabled={busy} rightIcon={<Icon name="arrow-right" />}>
              {busy ? 'Signing in…' : 'Sign in'}
            </Button>
          </form>
        </Card>

        <p className="spk-muted" style={{ textAlign: 'center', fontSize: 12.5, marginTop: 14 }}>
          Studio access is invite-only.
        </p>
      </div>
    </div>
  );
}

Object.assign(window, { SignIn });