"use client";

import { useState } from "react";
import Link from "next/link";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Card, CardContent } from "@/components/ui/card";

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

  async function onSubmit(e: React.FormEvent) {
    e.preventDefault();
    setStatus("sending");
    setErrorMsg("");
    try {
      const { createClient } = await import("@/lib/supabase/client");
      const supabase = createClient();
      const { error } = await supabase.auth.signInWithOtp({
        email,
        options: {
          emailRedirectTo: `${window.location.origin}/auth/callback`,
        },
      });
      if (error) throw error;
      setStatus("sent");
    } catch (err) {
      const message = err instanceof Error ? err.message : "Unknown error";
      if (message.includes("Missing NEXT_PUBLIC_SUPABASE_URL")) {
        setErrorMsg("Supabase not yet provisioned. Set NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY in .env.local.");
      } else {
        setErrorMsg(message);
      }
      setStatus("error");
    }
  }

  return (
    <div className="min-h-screen flex items-center justify-center bg-muted/30 p-6">
      <div className="w-full max-w-md">
        <Link href="/" className="block text-center mb-8">
          <span className="text-2xl font-semibold tracking-tight">
            South Armz <span className="text-[var(--sag-brand)]">Global</span>
          </span>
        </Link>
        <Card>
          <CardContent className="p-8">
            <h1 className="text-2xl font-semibold tracking-tight">Sign in</h1>
            <p className="mt-2 text-sm text-muted-foreground">
              We’ll send a magic link to your email. No password needed.
            </p>

            {status === "sent" ? (
              <div className="mt-6 rounded-md border border-green-200 bg-green-50 dark:bg-green-900/20 dark:border-green-900 p-4">
                <p className="text-sm font-medium text-green-900 dark:text-green-100">
                  Check your inbox.
                </p>
                <p className="mt-1 text-sm text-green-800 dark:text-green-200">
                  We sent a sign-in link to <strong>{email}</strong>. Click it to continue.
                </p>
              </div>
            ) : (
              <form onSubmit={onSubmit} className="mt-6 space-y-4">
                <div>
                  <label className="text-sm font-medium">Email</label>
                  <Input
                    className="mt-1.5"
                    type="email"
                    required
                    placeholder="you@southarmzglobal.com"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    disabled={status === "sending"}
                  />
                </div>
                {errorMsg && (
                  <div className="rounded-md border border-destructive/20 bg-destructive/5 p-3 text-sm text-destructive">
                    {errorMsg}
                  </div>
                )}
                <Button type="submit" variant="brand" className="w-full" disabled={status === "sending"}>
                  {status === "sending" ? "Sending..." : "Send magic link"}
                </Button>
              </form>
            )}

            <p className="mt-6 text-xs text-center text-muted-foreground">
              Internal access only. Public visitors can use the{" "}
              <Link href="/contact" className="text-foreground hover:underline">
                contact form
              </Link>
              .
            </p>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}