"use client";

import Link from "next/link";
import { useRouter, useSearchParams } from "next/navigation";
import { Suspense, useEffect, useState, type FormEvent } from "react";
import { PageShell } from "@/components/layout/PageShell";
import { Reveal } from "@/components/motion/Reveal";
import { Button } from "@/components/ui/Button";
import { Input } from "@/components/ui/Input";
import { useAuth } from "@/context/auth-context";

function LoginForm() {
  const { login, user, loading } = useAuth();
  const router = useRouter();
  const searchParams = useSearchParams();
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [submitting, setSubmitting] = useState(false);

  useEffect(() => {
    if (!loading && user) {
      router.replace(user.role === "admin" ? "/admin" : "/account");
    }
  }, [loading, user, router]);

  const onSubmit = async (event: FormEvent) => {
    event.preventDefault();
    setSubmitting(true);
    const result = await login(email, password);
    setSubmitting(false);
    if (!result.ok) return;
    const next = searchParams.get("next");
    // Block open redirects (//evil.com, https://..., etc.)
    if (
      next &&
      next.startsWith("/") &&
      !next.startsWith("//") &&
      !next.includes("://")
    ) {
      router.push(next);
      return;
    }
    router.push(result.redirectTo ?? "/account");
  };

  return (
    <PageShell
      crumbs={[{ label: "Home", href: "/" }, { label: "Login" }]}
      eyebrow="Account"
      title="Welcome back"
      description="Sign in to track orders and manage your account."
      wide={false}
    >
      <Reveal>
        <form
          onSubmit={onSubmit}
          className="space-y-4 rounded-[1.35rem] border border-border bg-card p-5 sm:p-7"
        >
          <Input
            label="Email"
            type="email"
            value={email}
            onChange={(event) => setEmail(event.target.value)}
            autoComplete="email"
            required
          />
          <Input
            label="Password"
            type="password"
            value={password}
            onChange={(event) => setPassword(event.target.value)}
            autoComplete="current-password"
            required
          />
          <Button type="submit" className="w-full" disabled={submitting}>
            {submitting ? "Signing in…" : "Sign in"}
          </Button>
        </form>
        <p className="mt-4 text-sm text-muted">
          No account?{" "}
          <Link href="/register" className="text-foreground underline underline-offset-4">
            Register as a customer
          </Link>
        </p>
      </Reveal>
    </PageShell>
  );
}

export default function LoginPage() {
  return (
    <Suspense fallback={<div className="p-10 text-sm text-muted">Loading…</div>}>
      <LoginForm />
    </Suspense>
  );
}