import { useState } from 'react';
import { useZino } from '../api/provider';
import { ORG_ID } from '../api/config';
import { Button, ErrorNote, Input, Label } from '../components/core';
import { HdfcWordmark } from '../components/HdfcMark';
import { ThemeToggle } from '../components/ThemeToggle';

/**
 * Sign in.
 *
 * The org is fixed — this build serves one tenant — so it is not a field the
 * user has to know. It still goes over the wire as a STRING: the gateway
 * rejects a number with "cannot unmarshal number into Go struct field
 * LoginRequest.org_id", which is a confusing failure to hit from a login form.
 */
export function Login() {
  const { login } = useZino();
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [busy, setBusy] = useState(false);
  const [err, setErr] = useState<string | null>(null);

  async function submit() {
    if (!email || !password) {
      setErr('Enter your email and password');
      return;
    }
    setBusy(true);
    setErr(null);
    try {
      await login(email, password, ORG_ID);
    } catch (e) {
      setErr((e as { message?: string })?.message ?? 'Could not sign in');
    } finally {
      setBusy(false);
    }
  }

  return (
    <div className="flex min-h-full flex-col bg-bg">
      <header className="flex items-center justify-between border-b border-deepnavy bg-navy px-4 py-2.5">
        <HdfcWordmark onNavy />
        <ThemeToggle onNavy />
      </header>

      <div className="flex flex-1 items-center justify-center p-4">
        <form
          onSubmit={(e) => {
            e.preventDefault();
            void submit();
          }}
          className="lift w-full max-w-sm rounded-lg border border-line bg-panel p-6"
        >
          <h1 className="text-lg font-semibold text-ink">Sign in</h1>
          <p className="mt-1 text-sm text-muted">
            MSME and personal loan origination.
          </p>

          <div className="mt-5 space-y-3">
            {err && <ErrorNote>{err}</ErrorNote>}
            <div>
              <Label required>Email</Label>
              <Input value={email} onChange={setEmail} type="email" placeholder="name@hdfc.example" />
            </div>
            <div>
              <Label required>Password</Label>
              <Input value={password} onChange={setPassword} type="password" placeholder="••••••••" />
            </div>
            <Button kind="primary" type="submit" busy={busy} className="w-full">
              Sign in
            </Button>
          </div>
        </form>
      </div>
    </div>
  );
}