"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { Mail, Lock, Phone, User, Building2, BookOpen, Eye, EyeOff, ArrowLeft } from "lucide-react";
import { toast } from "sonner";
import { cn } from "@/lib/utils/cn";
import { useTranslation } from "@/lib/hooks/use-translation";
import { tToast } from "@/lib/utils/translated-toast";
import { zMsg } from "@/lib/utils/translated-zod";
import { useAuthStore } from "@/lib/store/auth-store";
import { authApi } from "@/lib/api/client";
import type { User as UserType } from "@/types";

/* ───── Zod schemas ───── */

const loginSchema = z.object({
  email: z.string().email(zMsg("auth.email_invalid", "Please enter a valid email")),
  password: z.string().min(6, zMsg("auth.password_min", "Password must be at least 6 characters")),
});
type LoginValues = z.infer<typeof loginSchema>;

const registerSchema = z.object({
  email: z.string().email(zMsg("auth.email_invalid", "Please enter a valid email")),
  password: z.string().min(6, zMsg("auth.password_min", "Password must be at least 6 characters")),
  nameHi: z.string().min(1, zMsg("auth.name_hi_required", "Hindi name required")),
  nameEn: z.string().min(1, zMsg("auth.name_en_required", "English name required")),
  phone: z.string().optional(),
  designation: z.string().optional(),
  institution: z.string().optional(),
});
type RegisterValues = z.infer<typeof registerSchema>;

/* ───── Helpers ───── */

function redirectByRole(role: string, router: ReturnType<typeof useRouter>) {
  switch (role) {
    case "AUTHOR":
      router.push("/author");
      break;
    case "REVIEWER":
      router.push("/reviewer");
      break;
    case "ADMIN":
      router.push("/admin/dashboard");
      break;
    default:
      router.push("/");
  }
}

/* ───── Component ───── */

export default function AuthPage() {
  const router = useRouter();
  const setAuth = useAuthStore((s) => s.setAuth);

  const [tab, setTab] = useState<"login" | "register">("login");

  /**
   * Whether the server can email a reset link. Starts false so the link is never
   * shown before the answer arrives — one that appears and then vanishes is
   * worse than one that appears a moment late.
   */
  const [resetAvailable, setResetAvailable] = useState(false);

  useEffect(() => {
    let cancelled = false;
    authApi
      .passwordResetStatus()
      .then(({ data }) => {
        if (!cancelled) setResetAvailable(Boolean(data?.available));
      })
      .catch(() => {
        // An unreachable status endpoint means we cannot promise recovery works.
        if (!cancelled) setResetAvailable(false);
      });
    return () => {
      cancelled = true;
    };
  }, []);
  const [loading, setLoading] = useState(false);
  const [showPassword, setShowPassword] = useState(false);
  const [showRegPassword, setShowRegPassword] = useState(false);

  const { t: cms } = useTranslation("LOGIN");

  // ─── Login form (email+password) ───
  const loginForm = useForm<LoginValues>({ resolver: zodResolver(loginSchema) });

  async function handleLogin(values: LoginValues) {
    try {
      setLoading(true);
      const { data } = await authApi.login(values);
      const user: UserType = data.user ?? data;
      const token: string = data.token;
      setAuth(user, token);
      tToast("success", "auth.login_success", "Login successful");
      redirectByRole(user.role, router);
    } catch (err: unknown) {
      const msg =
        (err as { response?: { data?: { message?: string } } })?.response?.data?.message ??
        "Login failed";
      toast.error(msg);
    } finally {
      setLoading(false);
    }
  }

  // ─── Register form ───
  const registerForm = useForm<RegisterValues>({ resolver: zodResolver(registerSchema) });

  async function handleRegister(values: RegisterValues) {
    try {
      setLoading(true);
      const { data } = await authApi.register(values);
      const user: UserType = data.user ?? data;
      const token: string = data.token;
      setAuth(user, token);
      tToast("success", "auth.register_success", "Registration successful");
      redirectByRole(user.role, router);
    } catch (err: unknown) {
      const msg =
        (err as { response?: { data?: { message?: string } } })?.response?.data?.message ??
        "Registration failed";
      toast.error(msg);
    } finally {
      setLoading(false);
    }
  }

  /* ───── Shared input class ───── */
  const inputCls =
    "w-full rounded-md border border-gray-300 px-3 py-2 text-sm shadow-sm placeholder:text-gray-400 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500";
  const labelCls = "block text-sm font-medium text-gray-700 mb-1";
  const btnPrimary =
    "w-full rounded-md bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white shadow hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition";
  const errCls = "text-xs text-red-500 mt-1";

  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-100 px-4 py-12">
      <div className="w-full max-w-md bg-white rounded-xl shadow-lg p-8">
        {/* Header */}
        <h1 className="text-2xl font-bold text-center text-gray-900 mb-1">
          {cms("auth_header.title", "शोध संचयन")}
        </h1>
        <p className="text-sm text-center text-gray-500 mb-6">
          {cms("auth_header.subtitle", "Shodh Sanchayan — Academic Paper Platform")}
        </p>

        {/* Tabs */}
        <div className="flex border-b border-gray-200 mb-6">
          {(["login", "register"] as const).map((t) => (
            <button
              key={t}
              onClick={() => setTab(t)}
              className={cn(
                "flex-1 pb-3 text-sm font-medium transition",
                tab === t
                  ? "border-b-2 border-indigo-600 text-indigo-600"
                  : "text-gray-500 hover:text-gray-700"
              )}
            >
              {t === "login" ? cms("auth_tabs.login_tab", "लॉगिन / Login") : cms("auth_tabs.register_tab", "पंजीकरण / Register")}
            </button>
          ))}
        </div>

        {/* ════════ LOGIN TAB ════════ */}
        {tab === "login" && (
          <div>
            {/* --- Email + Password --- */}
            <form onSubmit={loginForm.handleSubmit(handleLogin)} className="space-y-4">
              <div>
                <label className={labelCls}>
                  <Mail className="inline h-4 w-4 mr-1" />
                  {cms("auth_labels.email_label", "ईमेल / Email")}
                </label>
                <input
                  type="email"
                  className={inputCls}
                  placeholder="you@example.com"
                  {...loginForm.register("email")}
                />
                {loginForm.formState.errors.email && (
                  <p className={errCls}>{loginForm.formState.errors.email.message}</p>
                )}
              </div>

              <div>
                <label className={labelCls}>
                  <Lock className="inline h-4 w-4 mr-1" />
                  {cms("auth_labels.password_label", "पासवर्ड / Password")}
                </label>
                <div className="relative">
                  <input
                    type={showPassword ? "text" : "password"}
                    className={inputCls}
                    placeholder="••••••"
                    {...loginForm.register("password")}
                  />
                  <button
                    type="button"
                    onClick={() => setShowPassword(!showPassword)}
                    className="absolute right-2 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>
                {loginForm.formState.errors.password && (
                  <p className={errCls}>{loginForm.formState.errors.password.message}</p>
                )}
              </div>

              <button type="submit" disabled={loading} className={btnPrimary}>
                {loading ? cms("auth_labels.loading_text", "कृपया प्रतीक्षा करें...") : cms("auth_labels.login_button", "लॉगिन / Login")}
              </button>

              {/* Shown only where the server can actually send the email —
                  offering recovery that ends in silence is worse than not
                  offering it. */}
              {resetAvailable && (
                <Link
                  href="/auth/forgot"
                  className="block text-center text-sm text-indigo-600 hover:underline"
                >
                  {cms("auth_labels.forgot_password", "पासवर्ड भूल गए? / Forgot password?")}
                </Link>
            )}
            </form>
          </div>
        )}

        {/* ════════ REGISTER TAB ════════ */}
        {tab === "register" && (
          <form onSubmit={registerForm.handleSubmit(handleRegister)} className="space-y-4">
            {/* Email */}
            <div>
              <label className={labelCls}>
                <Mail className="inline h-4 w-4 mr-1" />
                {cms("auth_labels.email_label", "ईमेल / Email")} <span className="text-red-500">*</span>
              </label>
              <input
                type="email"
                className={inputCls}
                placeholder="you@example.com"
                {...registerForm.register("email")}
              />
              {registerForm.formState.errors.email && (
                <p className={errCls}>{registerForm.formState.errors.email.message}</p>
              )}
            </div>

            {/* Password */}
            <div>
              <label className={labelCls}>
                <Lock className="inline h-4 w-4 mr-1" />
                {cms("auth_labels.password_label", "पासवर्ड / Password")} <span className="text-red-500">*</span>
              </label>
              <div className="relative">
                <input
                  type={showRegPassword ? "text" : "password"}
                  className={inputCls}
                  placeholder="••••••"
                  {...registerForm.register("password")}
                />
                <button
                  type="button"
                  onClick={() => setShowRegPassword(!showRegPassword)}
                  className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
                >
                  {showRegPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
                </button>
              </div>
              {registerForm.formState.errors.password && (
                <p className={errCls}>{registerForm.formState.errors.password.message}</p>
              )}
            </div>

            {/* Name Hindi */}
            <div>
              <label className={labelCls}>
                <User className="inline h-4 w-4 mr-1" />
                {cms("auth_register.name_hi_label", "नाम (हिन्दी)")} <span className="text-red-500">*</span>
              </label>
              <input
                className={inputCls}
                placeholder="अपना नाम हिन्दी में"
                {...registerForm.register("nameHi")}
              />
              {registerForm.formState.errors.nameHi && (
                <p className={errCls}>{registerForm.formState.errors.nameHi.message}</p>
              )}
            </div>

            {/* Name English */}
            <div>
              <label className={labelCls}>
                <User className="inline h-4 w-4 mr-1" />
                {cms("auth_register.name_en_label", "Name (English)")} <span className="text-red-500">*</span>
              </label>
              <input
                className={inputCls}
                placeholder="Your name in English"
                {...registerForm.register("nameEn")}
              />
              {registerForm.formState.errors.nameEn && (
                <p className={errCls}>{registerForm.formState.errors.nameEn.message}</p>
              )}
            </div>

            {/* Phone */}
            <div>
              <label className={labelCls}>
                <Phone className="inline h-4 w-4 mr-1" />
                {cms("auth_register.phone_label", "फ़ोन / Phone")}
              </label>
              <input
                className={inputCls}
                placeholder="9876543210"
                {...registerForm.register("phone")}
              />
            </div>

            {/* Designation */}
            <div>
              <label className={labelCls}>
                <BookOpen className="inline h-4 w-4 mr-1" />
                {cms("auth_register.designation_label", "पदनाम / Designation")}
              </label>
              <input
                className={inputCls}
                placeholder="e.g. Assistant Professor"
                {...registerForm.register("designation")}
              />
            </div>

            {/* Institution */}
            <div>
              <label className={labelCls}>
                <Building2 className="inline h-4 w-4 mr-1" />
                {cms("auth_register.institution_label", "संस्थान / Institution")}
              </label>
              <input
                className={inputCls}
                placeholder="e.g. Delhi University"
                {...registerForm.register("institution")}
              />
            </div>

            <button type="submit" disabled={loading} className={btnPrimary}>
              {loading ? cms("auth_labels.loading_text", "कृपया प्रतीक्षा करें...") : cms("auth_register.register_button", "पंजीकरण / Register")}
            </button>
          </form>
        )}
        <Link
          href="/"
          className="mt-6 flex items-center justify-center gap-1 text-sm text-gray-500 transition-colors hover:text-indigo-600"
        >
          <ArrowLeft className="h-4 w-4" />
          होम पर वापस जाएँ / Back to home
        </Link>
      </div>
    </div>
  );
}