"use client";

import { useState, FormEvent } from "react";
import { useRouter } from "next/navigation";
import { ShieldCheck, Mail, Lock, UserPlus } from "lucide-react";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Button } from "@/components/ui/button";
import { AuthFormWrapper } from "@/components/auth/auth-form-wrapper";
import { useSignin } from "@/lib/api/hooks/useAuth";
import { ApiRequestError } from "@/lib/api";
import { ROUTES } from "@/lib/constants";

export default function LoginPage() {
  const router = useRouter();
  const signin = useSignin();

  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState("");
  const [focusedInput, setFocusedInput] = useState<string | null>(null);

  function handleSubmit(e: FormEvent) {
    e.preventDefault();
    setError("");

    if (!email || !password) {
      setError("Email and password are required");
      return;
    }

    signin.mutate(
      { email, password },
      {
        onSuccess: (data) => {
          if (data.user.role === "SUPER_ADMIN") {
            router.push(ROUTES.SUPER_ADMIN_DASHBOARD);
          } else {
            router.push(ROUTES.ADMIN_DASHBOARD);
          }
        },
        onError: (err) => {
          if (err instanceof ApiRequestError) {
            setError(err.message);
          } else {
            setError("Something went wrong. Please try again.");
          }
        },
      }
    );
  }

  return (
    <AuthFormWrapper
      icon={ShieldCheck}
      title="Admin Login"
      subtitle="Sign in to access the admin dashboard"
    >
      <form onSubmit={handleSubmit} className="space-y-6">
        {/* Email */}
        <div className="space-y-2">
          <Label htmlFor="email" className="text-gray-300">
            Email Address
          </Label>
          <div className="relative">
            <Mail className="absolute left-4 top-1/2 -translate-y-1/2 size-5 text-gray-400" />
            <Input
              id="email"
              type="email"
              placeholder="admin@examportal.com"
              value={email}
              onChange={(e) => {
                setEmail(e.target.value);
                setError("");
              }}
              onFocus={() => setFocusedInput("email")}
              onBlur={() => setFocusedInput(null)}
              className={`pl-12 bg-gray-800 border-gray-700 text-white placeholder:text-gray-500 ${
                focusedInput === "email"
                  ? "ring-2 ring-blue-500/50 border-blue-500"
                  : ""
              } ${error ? "border-red-500" : ""}`}
            />
          </div>
        </div>

        {/* Password */}
        <div className="space-y-2">
          <Label htmlFor="password" className="text-gray-300">
            Password
          </Label>
          <div className="relative">
            <Lock className="absolute left-4 top-1/2 -translate-y-1/2 size-5 text-gray-400" />
            <Input
              id="password"
              type="password"
              placeholder="Enter your password"
              value={password}
              onChange={(e) => {
                setPassword(e.target.value);
                setError("");
              }}
              onFocus={() => setFocusedInput("password")}
              onBlur={() => setFocusedInput(null)}
              className={`pl-12 bg-gray-800 border-gray-700 text-white placeholder:text-gray-500 ${
                focusedInput === "password"
                  ? "ring-2 ring-blue-500/50 border-blue-500"
                  : ""
              } ${error ? "border-red-500" : ""}`}
            />
          </div>
          {error && <p className="text-red-400 text-sm mt-1">{error}</p>}
        </div>

        {/* Submit */}
        <Button
          type="submit"
          disabled={signin.isPending}
          className="w-full text-lg py-6"
        >
          {signin.isPending ? "Signing in..." : "Sign In"}
        </Button>

        {/* New Admin CTA */}
        <div className="pt-2 border-t border-gray-800">
          <button
            type="button"
            onClick={() => router.push(ROUTES.ADMIN_INIT)}
            className="flex items-center justify-center gap-2 w-full py-3 text-sm text-gray-400 hover:text-blue-400 transition-colors"
          >
            <UserPlus className="size-4" />
            Login as a New Admin
          </button>
        </div>
      </form>
    </AuthFormWrapper>
  );
}