"use client";

import * as React from "react";
import Image from "next/image";
import { useRouter, useSearchParams } from "next/navigation";
import { Lock, Mail, ArrowRight, ShieldCheck, ShieldAlert, KeyRound, ArrowLeft, AlertTriangle, Info } from "lucide-react";
import { FloatingInput } from "@/components/ui/floating-input";
import { Button } from "@/components/ui/button";

export default function AdminLoginPage() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const reason = searchParams.get("reason");

  const [email, setEmail] = React.useState("");
  const [password, setPassword] = React.useState("");
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState<string | null>(null);
  const [networkBlocked, setNetworkBlocked] = React.useState(false);

  // 2FA Challenge state
  const [requires2FA, setRequires2FA] = React.useState(false);
  const [tempToken, setTempToken] = React.useState<string | null>(null);
  const [otpCode, setOtpCode] = React.useState("");
  const [trustBrowser, setTrustBrowser] = React.useState(false);

  // Forgot password modal state
  const [forgotOpen, setForgotOpen] = React.useState(false);
  const [forgotEmail, setForgotEmail] = React.useState("");
  const [forgotLoading, setForgotLoading] = React.useState(false);
  const [forgotMessage, setForgotMessage] = React.useState<string | null>(null);

  const handleLogin = async (e: React.FormEvent) => {
    e.preventDefault();
    setError(null);
    setNetworkBlocked(false);
    setLoading(true);

    try {
      const res = await fetch("/api/admin/auth/login", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ email, password }),
      });

      const data = await res.json();

      if (!res.ok) {
        if (data.code === "NETWORK_BLOCKED") {
          setNetworkBlocked(true);
        }
        setError(data.error || "Authentication failed. Please check your credentials.");
        return;
      }

      // Check if 2FA challenge is triggered
      if (data.requires2FA) {
        setRequires2FA(true);
        setTempToken(data.tempToken);
        return;
      }

      if (data.requiresPasswordChange) {
        router.push("/admin/change-password");
      } else {
        router.push("/admin");
      }
      router.refresh();
    } catch {
      setError("Unable to connect to authentication service. Please try again.");
    } finally {
      setLoading(false);
    }
  };

  const handle2FAChallenge = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!tempToken) return;

    setError(null);
    setLoading(true);

    try {
      const res = await fetch("/api/admin/auth/2fa/challenge", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ tempToken, code: otpCode, trustBrowser }),
      });

      const data = await res.json();

      if (!res.ok) {
        setError(data.error || "Invalid 2FA code or backup code.");
        return;
      }

      if (data.requiresPasswordChange) {
        router.push("/admin/change-password");
      } else {
        router.push("/admin");
      }
      router.refresh();
    } catch {
      setError("Unable to verify 2FA challenge. Please try again.");
    } finally {
      setLoading(false);
    }
  };

  const handleForgotPassword = async (e: React.FormEvent) => {
    e.preventDefault();
    setForgotMessage(null);
    setForgotLoading(true);

    try {
      const res = await fetch("/api/admin/auth/forgot-password", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ email: forgotEmail }),
      });

      const data = await res.json();
      setForgotMessage(
        data.message ||
          "If your account exists, a reset request has been routed to the Main Administrator."
      );
    } catch {
      setForgotMessage("Failed to submit reset request. Please try again later.");
    } finally {
      setForgotLoading(false);
    }
  };

  return (
    <div className="w-full max-w-md">
      <div className="rounded-2xl border border-neutral-200 bg-white p-8 shadow-sm dark:border-neutral-800 dark:bg-neutral-900">
        {/* Header */}
        <div className="flex flex-col items-center text-center">
          <div className="relative mb-4 flex h-12 w-12 items-center justify-center overflow-hidden rounded-xl bg-neutral-100 dark:bg-neutral-800">
            <Image
              src="/images/quto-logo.webp"
              alt="Quto AI"
              width={40}
              height={40}
              className="object-contain"
              priority
            />
          </div>
          <h1 className="font-bold text-xl tracking-tight text-neutral-900 dark:text-white">
            {requires2FA ? "Two-Factor Verification" : "Quto AI Control Center"}
          </h1>
          <p className="mt-1 text-xs text-neutral-500">
            {requires2FA
              ? "Enter the 6-digit authenticator code or single-use backup code."
              : "Sign in to access administrator and editorial capabilities."}
          </p>
        </div>

        {/* Session revocation / access denial banners */}
        {reason === "session_revoked" && (
          <div className="mt-5 rounded-lg border border-amber-300 bg-amber-50 p-3 text-xs text-amber-800 dark:border-amber-800/60 dark:bg-amber-950/50 dark:text-amber-300 flex items-start gap-2">
            <AlertTriangle className="h-3.5 w-3.5 mt-0.5 shrink-0" />
            <span>
              <strong>Session revoked.</strong> Your administrator session was terminated by a Main Administrator. Please sign in again.
            </span>
          </div>
        )}
        {reason === "unauthorized" && (
          <div className="mt-5 rounded-lg border border-sky-200 bg-sky-50 p-3 text-xs text-sky-800 dark:border-sky-800/60 dark:bg-sky-950/50 dark:text-sky-300 flex items-start gap-2">
            <Info className="h-3.5 w-3.5 mt-0.5 shrink-0" />
            <span>Please sign in to access the administrator panel.</span>
          </div>
        )}

        {(networkBlocked || reason === "vpn_blocked") && (
          <div className="mt-5 rounded-xl border border-red-200 bg-red-50/90 p-4 text-xs text-red-800 dark:border-red-900/60 dark:bg-red-950/60 dark:text-red-300">
            <div className="flex items-center gap-2 font-semibold text-red-900 dark:text-red-200">
              <ShieldAlert className="h-4 w-4 text-red-600 shrink-0" />
              <span>VPN / Proxy Detected</span>
            </div>
            <p className="mt-1.5 leading-relaxed text-[11px] text-red-700 dark:text-red-300">
              For security reasons, Quto AI does not allow administrator access through VPN, proxy, Tor, or anonymized network connections.
            </p>
            <p className="mt-1 leading-relaxed text-[11px] text-red-700 dark:text-red-300">
              Please disable your VPN/proxy and sign in again.
            </p>
          </div>
        )}

        {error && (
          <div className="mt-6 rounded-lg border border-red-200 bg-red-50 p-3 text-xs text-red-700 dark:border-red-900/50 dark:bg-red-950/50 dark:text-red-300">
            {error}
          </div>
        )}

        {/* 2FA Challenge Form */}
        {requires2FA ? (
          <form onSubmit={handle2FAChallenge} className="mt-6 space-y-4">
            <div className="rounded-xl border border-neutral-200 bg-neutral-50/70 p-3.5 text-xs text-neutral-600 dark:border-neutral-800 dark:bg-neutral-800/40 dark:text-neutral-400">
              <div className="flex items-center gap-2 font-semibold text-neutral-900 dark:text-white">
                <KeyRound className="h-4 w-4 text-emerald-600" />
                <span>Authenticator Code</span>
              </div>
              <p className="mt-1 text-[11px] leading-relaxed">
                Check Google Authenticator, Microsoft Authenticator, or enter a backup code (e.g. 7K4L2-99BXM).
              </p>
            </div>

            <FloatingInput
              id="2fa-code"
              label="6-digit OTP or Backup Code"
              required
              autoFocus
              value={otpCode}
              onChange={(e) => setOtpCode(e.target.value)}
              className="font-mono text-center tracking-widest text-base uppercase"
            />

            <label className="flex items-center gap-2 cursor-pointer select-none text-xs text-neutral-600 dark:text-neutral-400 py-1">
              <input
                type="checkbox"
                checked={trustBrowser}
                onChange={(e) => setTrustBrowser(e.target.checked)}
                className="h-4 w-4 rounded border-neutral-300 text-neutral-900 focus:ring-neutral-900 dark:border-neutral-700 dark:bg-neutral-800 dark:focus:ring-white"
              />
              <span>Trust this browser for 30 days</span>
            </label>

            <Button
              type="submit"
              disabled={loading || !otpCode.trim()}
              className="h-11 w-full gap-2 rounded-xl bg-neutral-900 font-semibold text-xs text-white transition hover:bg-neutral-800 disabled:opacity-50 dark:bg-white dark:text-neutral-900 dark:hover:bg-neutral-100"
            >
              <span>{loading ? "Verifying..." : "Verify & Complete Login"}</span>
              <ArrowRight className="h-3.5 w-3.5" />
            </Button>

            <button
              type="button"
              onClick={() => {
                setRequires2FA(false);
                setTempToken(null);
                setOtpCode("");
                setError(null);
              }}
              className="flex w-full items-center justify-center gap-1.5 pt-2 text-xs font-medium text-neutral-500 hover:text-neutral-900 dark:hover:text-white"
            >
              <ArrowLeft className="h-3.5 w-3.5" />
              <span>Back to Login</span>
            </button>
          </form>
        ) : (
          /* Password Login Form */
          <form onSubmit={handleLogin} className="mt-6 space-y-4">
            <FloatingInput
              id="login-email"
              type="email"
              required
              label="Administrator Email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
            />

            <div>
              <div className="flex items-center justify-end pb-1.5">
                <button
                  type="button"
                  onClick={() => {
                    setForgotOpen(true);
                    setForgotEmail(email);
                    setForgotMessage(null);
                  }}
                  className="text-[11px] font-medium text-neutral-500 hover:text-neutral-900 dark:hover:text-white"
                >
                  Forgot Password?
                </button>
              </div>

              <FloatingInput
                id="login-password"
                type="password"
                required
                label="Password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
              />
            </div>

            <Button
              type="submit"
              disabled={loading}
              className="h-11 w-full gap-2 rounded-xl bg-neutral-900 font-semibold text-xs text-white transition hover:bg-neutral-800 disabled:opacity-50 dark:bg-white dark:text-neutral-900 dark:hover:bg-neutral-100"
            >
              <span>{loading ? "Authenticating..." : "Sign In to Admin"}</span>
              <ArrowRight className="h-3.5 w-3.5" />
            </Button>
          </form>
        )}

        <div className="mt-6 flex items-center justify-center gap-1.5 border-t border-neutral-100 pt-4 text-[11px] text-neutral-400 dark:border-neutral-800">
          <ShieldCheck className="h-3.5 w-3.5 text-neutral-500" />
          <span>Restricted Portal — Authorized Personnel Only</span>
        </div>
      </div>

      {/* Forgot Password Dialog */}
      {forgotOpen && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4 backdrop-blur-xs">
          <div className="w-full max-w-sm rounded-2xl border border-neutral-200 bg-white p-6 shadow-xl dark:border-neutral-800 dark:bg-neutral-900">
            <h2 className="font-bold text-base text-neutral-900 dark:text-white">
              Request Password Reset
            </h2>
            <p className="mt-1 text-xs text-neutral-500 leading-relaxed">
              Sub-admin reset requests are securely reviewed and approved by the Main Administrator.
            </p>

            {forgotMessage && (
              <div className="mt-4 rounded-lg bg-neutral-100 p-3 text-xs text-neutral-700 dark:bg-neutral-800 dark:text-neutral-300">
                {forgotMessage}
              </div>
            )}

            <form onSubmit={handleForgotPassword} className="mt-4 space-y-4">
              <FloatingInput
                id="forgot-email"
                type="email"
                required
                label="Your Registered Email"
                value={forgotEmail}
                onChange={(e) => setForgotEmail(e.target.value)}
              />

              <div className="flex items-center justify-end gap-2 pt-2">
                <Button
                  type="button"
                  variant="ghost"
                  onClick={() => setForgotOpen(false)}
                  className="text-xs"
                >
                  Cancel
                </Button>
                <Button
                  type="submit"
                  disabled={forgotLoading}
                  className="text-xs font-semibold"
                >
                  {forgotLoading ? "Submitting..." : "Submit Request"}
                </Button>
              </div>
            </form>
          </div>
        </div>
      )}
    </div>
  );
}