"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");
  const [error, setError] = useState("");

  async function onSubmit(e: React.FormEvent) {
    e.preventDefault();
    setStatus("loading");
    setError("");
    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("Failed");
      setStatus("sent");
    } catch (e) {
      setStatus("error");
      setError("Couldn't send link. Try again.");
    }
  }

  return (
    <main className="min-h-screen grid-bg gradient-bg flex items-center justify-center px-6">
      <div className="max-w-md w-full">
        <Link href="/" className="flex items-center gap-2 mb-8 justify-center">
          <div className="w-9 h-9 rounded-md bg-gradient-to-br from-accent-500 to-emerald-400 grid place-items-center text-ink-950 font-bold">▲</div>
          <span className="font-display font-bold text-xl">AltSignal</span>
        </Link>

        <div className="bg-ink-900/80 backdrop-blur border border-white/10 rounded-2xl p-8">
          {status === "sent" ? (
            <div className="text-center">
              <div className="text-5xl mb-4">📨</div>
              <h1 className="text-2xl font-bold mb-2">Check your email</h1>
              <p className="text-white/60 text-sm">
                We sent a sign-in link to <span className="text-accent-glow font-mono">{email}</span>.
                Click it to continue. The link is valid for 15 minutes.
              </p>
            </div>
          ) : (
            <>
              <h1 className="text-2xl font-bold mb-2">Sign in to AltSignal</h1>
              <p className="text-white/50 text-sm mb-6">Magic-link only. No passwords.</p>
              <form onSubmit={onSubmit} className="space-y-3">
                <input
                  required
                  type="email"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  placeholder="you@trader.com"
                  className="w-full px-4 py-3 rounded-lg bg-ink-800 border border-white/10 focus:border-accent-500 focus:outline-none text-white placeholder-white/30"
                  disabled={status === "loading"}
                />
                <button
                  type="submit"
                  disabled={status === "loading"}
                  className="w-full bg-accent-500 hover:bg-accent-400 disabled:opacity-50 text-ink-950 font-bold py-3 rounded-lg"
                >
                  {status === "loading" ? "Sending..." : "Email me a sign-in link"}
                </button>
                {error && <p className="text-red-400 text-sm text-center">{error}</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>
  );
}