"use client";
import { useState } from "react";
import Link from "next/link";

export default function LoginPage() {
  const [email, setEmail] = useState("");
  const [status, setStatus] = useState<"idle" | "loading" | "sent" | "error">("idle");

  async function onSubmit(e: React.FormEvent) {
    e.preventDefault();
    setStatus("loading");
    try {
      const res = await fetch("/api/auth/login", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ email }),
      });
      if (!res.ok) throw new Error();
      setStatus("sent");
    } catch {
      setStatus("error");
    }
  }

  return (
    <main className="min-h-screen flex items-center justify-center px-6 bg-ink-950">
      <div className="max-w-md w-full">
        <Link href="/" className="flex items-center gap-2 justify-center mb-8">
          <div className="w-9 h-9 rounded-md bg-brand-500 grid place-items-center text-ink-950 font-bold">I</div>
          <span className="font-bold text-xl">InboxKit</span>
        </Link>
        <div className="bg-ink-900 border border-white/10 rounded-2xl p-8">
          {status === "sent" ? (
            <div className="text-center">
              <div className="text-5xl mb-3">📨</div>
              <h1 className="text-2xl font-bold mb-2">Check your email</h1>
              <p className="text-white/60 text-sm">
                Sign-in link sent to <span className="text-brand-400 font-mono">{email}</span>. Valid for 15 minutes.
              </p>
            </div>
          ) : (
            <>
              <h1 className="text-2xl font-bold mb-2">Sign in</h1>
              <p className="text-white/50 text-sm mb-6">Magic link. No passwords.</p>
              <form onSubmit={onSubmit} className="space-y-3">
                <input required type="email" value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  placeholder="you@company.com"
                  className="w-full px-4 py-3 rounded-lg bg-ink-800 border border-white/10 focus:border-brand-500 focus:outline-none" />
                <button type="submit" disabled={status === "loading"}
                  className="w-full bg-brand-500 hover:bg-brand-400 disabled:opacity-50 text-ink-950 font-bold py-3 rounded-lg">
                  {status === "loading" ? "Sending..." : "Email me a sign-in link"}
                </button>
                {status === "error" && <p className="text-red-400 text-sm text-center">Couldn't send. Try again.</p>}
              </form>
            </>
          )}
        </div>
        <p className="text-center text-xs text-white/30 mt-6">
          <Link href="/" className="hover:text-white">← back home</Link>
        </p>
      </div>
    </main>
  );
}