import { useState } from 'react';
import { useZino } from '../api/provider';
import { ORG_ID } from '../api/config';
import { Button, ErrorNote, Input, Label } from '../components/core';
import { HdfcAppLogo, HdfcLogo } from '../components/HdfcLogo';
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="bg-panel">
        <div className="flex items-center justify-between px-4 py-2.5">
          <HdfcAppLogo />
          <ThemeToggle />
        </div>
        <div aria-hidden="true" className="h-[3px] bg-navy" />
      </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"
        >
          {/* The lockup again, above the fold of the only screen a signed-out
              person sees. A sign-in page is where someone checks they are at
              the right bank before typing a password into it. */}
          <HdfcLogo height={30} />
          <h1 className="mt-5 text-lg font-semibold text-ink">Sign in</h1>
          <p className="mt-1 text-sm text-muted">
            Loan Desk — 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@hdfcbank.com" />
            </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>

          {/* The bank's line, set the way the bank sets it — under the mark,
              light, small, and not shouted. It belongs on the one screen that
              is purely the bank talking to its own staff, and nowhere else. */}
          <p className="mt-6 border-t border-line pt-4 text-center text-[11px] tracking-wide text-faint">
            We understand your world
          </p>
        </form>
      </div>
    </div>
  );
}