"use client";

import { FormEvent, useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { Eye, EyeOff, Loader2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Alert, AlertDescription } from "@/components/ui/alert";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { login } from "@/lib/api";
import { hasLoginFieldErrors, validateLoginCredentials, type LoginFieldErrors } from "@/lib/login-validation";
import { formatRole } from "@/lib/roles";

export default function LoginPage() {
  const router = useRouter();
  const [sessionExpiredNotice, setSessionExpiredNotice] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [fieldErrors, setFieldErrors] = useState<LoginFieldErrors>({});
  const [loading, setLoading] = useState(false);
  const [showPassword, setShowPassword] = useState(false);

  useEffect(() => {
    const params = new URLSearchParams(window.location.search);
    setSessionExpiredNotice(params.get("reason") === "session");
  }, []);

  async function onSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setError(null);
    const form = new FormData(event.currentTarget);
    const email = String(form.get("email") ?? "");
    const password = String(form.get("password") ?? "");
    const clientErrors = validateLoginCredentials(email, password);
    if (hasLoginFieldErrors(clientErrors)) {
      setFieldErrors(clientErrors);
      return;
    }

    setFieldErrors({});
    setLoading(true);
    try {
      const session = await login(email.trim(), password);
      if (session.user.role !== "SUPER_ADMIN") {
        setError(`This portal is for ${formatRole("SUPER_ADMIN")} only.`);
        return;
      }
      router.replace("/admin/dashboard");
    } catch (err) {
      setError(err instanceof Error ? err.message : "Login failed");
    } finally {
      setLoading(false);
    }
  }

  return (
    <main className="flex min-h-screen items-center justify-center bg-background px-4 py-12">
      <Card className="w-full max-w-md shadow-sm">
        <CardHeader className="space-y-2 text-center">
          <p className="font-display text-xl font-bold">CLERAL Admin</p>
          <CardTitle className="text-2xl">Sign in</CardTitle>
          <CardDescription>Internal {formatRole("SUPER_ADMIN")} console</CardDescription>
        </CardHeader>
        <CardContent>
          {sessionExpiredNotice ? (
            <Alert className="mb-4">
              <AlertDescription>
                Your session expired due to inactivity. Please sign in again.
              </AlertDescription>
            </Alert>
          ) : null}
          <form className="space-y-4" noValidate onSubmit={onSubmit}>
            <div className="space-y-2">
              <Label htmlFor="email">Email</Label>
              <Input
                id="email"
                name="email"
                type="email"
                required
                defaultValue="admin@cleral.local"
                aria-invalid={Boolean(fieldErrors.email)}
                aria-describedby={fieldErrors.email ? "email-error" : undefined}
                onChange={() => setFieldErrors((prev) => ({ ...prev, email: undefined }))}
              />
              {fieldErrors.email ? (
                <p id="email-error" className="text-sm text-destructive" role="alert">
                  {fieldErrors.email}
                </p>
              ) : null}
            </div>
            <div className="space-y-2">
              <Label htmlFor="password">Password</Label>
              <div className="relative">
                <Input
                  id="password"
                  name="password"
                  type={showPassword ? "text" : "password"}
                  required
                  minLength={8}
                  defaultValue="ChangeMeAdmin123!"
                  className="pr-10"
                  aria-invalid={Boolean(fieldErrors.password)}
                  aria-describedby={fieldErrors.password ? "password-error" : undefined}
                  onChange={() => setFieldErrors((prev) => ({ ...prev, password: undefined }))}
                />
                <Button
                  type="button"
                  variant="ghost"
                  size="icon"
                  className="absolute right-0 top-0 h-9 w-9"
                  onClick={() => setShowPassword((v) => !v)}
                  aria-label={showPassword ? "Hide password" : "Show password"}
                >
                  {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
                </Button>
              </div>
              {fieldErrors.password ? (
                <p id="password-error" className="text-sm text-destructive" role="alert">
                  {fieldErrors.password}
                </p>
              ) : null}
            </div>
            {error ? (
              <Alert variant="destructive">
                <AlertDescription>{error}</AlertDescription>
              </Alert>
            ) : null}
            <Button className="w-full" type="submit" disabled={loading}>
              {loading ? <Loader2 className="animate-spin" /> : null}
              {loading ? "Signing in…" : "Sign in"}
            </Button>
            <p className="text-center text-xs text-muted-foreground">
              Development credentials only. Requires API + seeded database.
            </p>
          </form>
        </CardContent>
      </Card>
    </main>
  );
}