"use client";

import { useState } from "react";

import Link from "next/link";
import { useRouter } from "next/navigation";

import { zodResolver } from "@hookform/resolvers/zod";
import { Eye, EyeOff, Lock, Mail, Sparkles, Zap } from "lucide-react";
import { useForm } from "react-hook-form";
import { toast } from "sonner";
import { z } from "zod";

import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
import { Checkbox } from "@/components/ui/checkbox";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { useAuthStore } from "@/stores/auth-store";
import { STORAGE_KEYS } from "@/types/novalife";

const loginSchema = z.object({
  email: z.string().email("Please enter a valid email address"),
  password: z.string().min(1, "Password is required"),
  rememberMe: z.boolean().optional(),
});

type LoginFormValues = z.infer<typeof loginSchema>;

const DEMO_CREDENTIALS = [
  {
    label: "Sarah Müller",
    subtitle: "Stress Eater · Advanced report · No GLP-1",
    email: "sarah@demo.com",
    password: "demo1234",
    color: "bg-violet-100 text-violet-700 border-violet-200",
  },
  {
    label: "Emma Keller",
    subtitle: "Hormonal · Professional subscription · GLP-1 eligible",
    email: "emma@demo.com",
    password: "demo1234",
    color: "bg-pink-100 text-pink-700 border-pink-200",
  },
  {
    label: "Lucas Baur",
    subtitle: "Sleep Deprived · No package · Quiz done, report locked",
    email: "lucas@demo.com",
    password: "demo1234",
    color: "bg-blue-100 text-blue-700 border-blue-200",
  },
];

export default function LoginPage() {
  const router = useRouter();
  const login = useAuthStore((s) => s.login);
  const [showPassword, setShowPassword] = useState(false);
  const [isLoading, setIsLoading] = useState(false);

  const {
    register,
    handleSubmit,
    setValue,
    formState: { errors },
  } = useForm<LoginFormValues>({
    resolver: zodResolver(loginSchema),
    defaultValues: { rememberMe: false },
  });

  const fillDemo = (email: string, password: string) => {
    setValue("email", email);
    setValue("password", password);
  };

  const onSubmit = async (data: LoginFormValues) => {
    setIsLoading(true);
    await new Promise((r) => setTimeout(r, 400));

    const result = login(data.email, data.password);
    setIsLoading(false);

    if (!result.success) {
      toast.error(result.error ?? "Invalid email or password.");
      return;
    }

    // Check for quiz result in localStorage — redirect to /result if quiz done but no package
    const archetypeResult =
      typeof window !== "undefined" ? localStorage.getItem(STORAGE_KEYS.ARCHETYPE_RESULT) : null;
    const currentUser = useAuthStore.getState().user;

    if (archetypeResult && currentUser && !currentUser.purchasedPackage) {
      router.replace("/result");
      return;
    }

    router.replace("/dashboard");
  };

  return (
    <Card className="shadow-xl shadow-teal-900/5 border-gray-100">
      <CardHeader className="space-y-1 pb-4">
        <CardTitle className="text-2xl font-bold text-gray-900">Welcome back</CardTitle>
        <CardDescription className="text-gray-500">
          Sign in to access your metabolic health dashboard
        </CardDescription>
      </CardHeader>

      <CardContent className="space-y-5">
        {/* Demo credential tip cards */}
        <div className="rounded-xl border border-amber-200 bg-amber-50 p-3 space-y-2">
          <div className="flex items-center gap-1.5">
            <Zap className="h-3.5 w-3.5 text-amber-600" />
            <p className="text-xs font-semibold text-amber-700 uppercase tracking-wide">Quick demo login</p>
          </div>
          <div className="flex flex-col gap-1.5">
            {DEMO_CREDENTIALS.map((cred) => (
              <button
                key={cred.email}
                type="button"
                onClick={() => fillDemo(cred.email, cred.password)}
                className={`flex flex-col gap-0.5 rounded-lg border px-3 py-2.5 text-left transition-all hover:shadow-sm ${cred.color}`}
              >
                <span className="text-xs font-bold">{cred.label}</span>
                <span className="text-[11px] opacity-80 leading-snug">{cred.subtitle}</span>
              </button>
            ))}
          </div>
        </div>

        <div className="flex items-center gap-3">
          <div className="h-px flex-1 bg-gray-200" />
          <span className="text-xs text-gray-400">or enter manually</span>
          <div className="h-px flex-1 bg-gray-200" />
        </div>

        {/* Form */}
        <form id="login-form" onSubmit={handleSubmit(onSubmit)} className="space-y-4" noValidate>
          <div className="space-y-1.5">
            <Label htmlFor="email" className="text-sm font-medium text-gray-700">
              Email address
            </Label>
            <div className="relative">
              <Mail className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" />
              <Input
                id="email"
                type="email"
                placeholder="you@example.com"
                autoComplete="email"
                className="pl-9"
                {...register("email")}
              />
            </div>
            {errors.email && <p className="text-xs text-red-500">{errors.email.message}</p>}
          </div>

          <div className="space-y-1.5">
            <div className="flex items-center justify-between">
              <Label htmlFor="password" className="text-sm font-medium text-gray-700">
                Password
              </Label>
            </div>
            <div className="relative">
              <Lock className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" />
              <Input
                id="password"
                type={showPassword ? "text" : "password"}
                placeholder="Enter your password"
                autoComplete="current-password"
                className="pl-9 pr-10"
                {...register("password")}
              />
              <button
                type="button"
                tabIndex={-1}
                onClick={() => setShowPassword((v) => !v)}
                className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
              >
                {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
              </button>
            </div>
            {errors.password && <p className="text-xs text-red-500">{errors.password.message}</p>}
          </div>

          <div className="flex items-center gap-2">
            <Checkbox id="rememberMe" {...register("rememberMe")} />
            <Label htmlFor="rememberMe" className="text-sm text-gray-600 cursor-pointer">
              Remember me
            </Label>
          </div>
        </form>
      </CardContent>

      <CardFooter className="flex flex-col gap-3 pt-0">
        <Button
          type="submit"
          form="login-form"
          className="w-full bg-teal-600 hover:bg-teal-700 text-white font-semibold"
          disabled={isLoading}
        >
          {isLoading ? (
            <span className="flex items-center gap-2">
              <span className="h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent" />
              Signing in…
            </span>
          ) : (
            <span className="flex items-center gap-2">
              <Sparkles className="h-4 w-4" />
              Sign in
            </span>
          )}
        </Button>

        <p className="text-center text-sm text-gray-500">
          Don&apos;t have an account?{" "}
          <Link href="/auth/register" className="font-semibold text-teal-600 hover:text-teal-700 hover:underline">
            Create one free
          </Link>
        </p>

        <p className="text-center text-xs text-gray-400">
          Admin?{" "}
          <Link href="/admin/login" className="text-gray-500 hover:text-gray-700 hover:underline">
            Admin sign in →
          </Link>
        </p>
      </CardFooter>
    </Card>
  );
}