"use client";

import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import {
  GoogleAuthProvider,
  signInWithPopup,
  signInWithRedirect,
  getRedirectResult,
  signOut,
  onAuthStateChanged,
  createUserWithEmailAndPassword,
  signInWithEmailAndPassword,
  sendEmailVerification,
  sendPasswordResetEmail,
} from "firebase/auth";
import { doc, getDoc } from "firebase/firestore";
import { auth, db } from "@/lib/firebase";

const PENDING_CODE_KEY = "halalens_pending_admin_code";
const ADMIN_CACHE_KEY = "halalens_admin_uid";

type Tab = "login" | "register";

export default function Home() {
  const router = useRouter();
  const [tab, setTab] = useState<Tab>("login");
  const [loading, setLoading] = useState(true);
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [code, setCode] = useState("");
  const [registerLoading, setRegisterLoading] = useState(false);
  const [loginLoading, setLoginLoading] = useState(false);
  const [registerError, setRegisterError] = useState("");
  const [loginError, setLoginError] = useState("");
  const [showForgotPassword, setShowForgotPassword] = useState(false);
  const [forgotEmail, setForgotEmail] = useState("");
  const [forgotLoading, setForgotLoading] = useState(false);
  const [forgotSuccess, setForgotSuccess] = useState("");

  useEffect(() => {
    const unsub = onAuthStateChanged(auth, async (user) => {
      if (!user) {
        setLoading(false);
        return;
      }

      const adminRef = doc(db, "admins", user.uid);
      const adminSnap = await getDoc(adminRef);
      if (adminSnap.exists()) {
        sessionStorage.setItem(ADMIN_CACHE_KEY, user.uid);
        router.replace("/dashboard");
      } else if (typeof window !== "undefined" && sessionStorage.getItem(PENDING_CODE_KEY)) {
        setLoading(false);
      } else {
        setLoginError("Not registered. Please register first.");
        await signOut(auth);
        setLoading(false);
      }
    });

    return () => unsub();
  }, [router]);

  useEffect(() => {
    getRedirectResult(auth)
      .then(async (result) => {
        if (!result?.user) return;
        const adminRef = doc(db, "admins", result.user.uid);
        const adminSnap = await getDoc(adminRef);
        if (adminSnap.exists()) {
          sessionStorage.setItem(ADMIN_CACHE_KEY, result.user.uid);
          router.replace("/dashboard");
        } else {
          const storedCode = typeof window !== "undefined" ? sessionStorage.getItem(PENDING_CODE_KEY) : null;
          if (storedCode) {
            sessionStorage.removeItem(PENDING_CODE_KEY);
            await verifyAndAddAdmin(result.user, storedCode);
          } else {
            await signOut(auth);
            setRegisterError("Session expired. Please enter admin code and try again.");
          }
        }
        setLoading(false);
      })
      .catch(() => setLoading(false));
  }, [router]);

  async function verifyAndAddAdmin(user: { getIdToken: () => Promise<string>; uid: string }, adminCode: string) {
    setRegisterLoading(true);
    setRegisterError("");
    try {
      const idToken = await user.getIdToken();
      const res = await fetch("/api/verify-admin", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ code: adminCode.trim(), idToken }),
      });
      const data = await res.json();
      if (!res.ok) {
        setRegisterError(data.error ?? "Registration failed");
        await signOut(auth);
        return;
      }
      sessionStorage.setItem(ADMIN_CACHE_KEY, user.uid);
      router.replace("/dashboard");
      router.refresh();
    } catch (error) {
      console.error(error);
      setRegisterError("Registration failed");
      await signOut(auth);
    } finally {
      setRegisterLoading(false);
    }
  }

  async function handleForgotPassword(e: React.FormEvent) {
    e.preventDefault();
    if (!forgotEmail.trim()) return;
    setLoginError("");
    setForgotLoading(true);
    setForgotSuccess("");
    try {
      await sendPasswordResetEmail(auth, forgotEmail.trim());
      setForgotSuccess("Password reset email sent. Check your inbox.");
    } catch (error) {
      const errCode = error && typeof error === "object" && "code" in error ? (error as { code: string }).code : "";
      setLoginError(errCode === "auth/user-not-found" ? "No account with this email." : "Failed to send reset email.");
    } finally {
      setForgotLoading(false);
    }
  }

  async function handleEmailLogin(e: React.FormEvent) {
    e.preventDefault();
    setLoginError("");
    setLoginLoading(true);
    try {
      await signInWithEmailAndPassword(auth, email.trim(), password);
    } catch (error) {
      console.error(error);
      const errCode = error && typeof error === "object" && "code" in error ? (error as { code: string }).code : "";
      setLoginError(errCode === "auth/invalid-credential" ? "Invalid email or password." : "Login failed.");
    } finally {
      setLoginLoading(false);
    }
  }

  async function handleEmailRegister(e: React.FormEvent) {
    e.preventDefault();
    setRegisterError("");
    setRegisterLoading(true);
    try {
      const userCred = await createUserWithEmailAndPassword(auth, email.trim(), password);
      const idToken = await userCred.user.getIdToken();
      const res = await fetch("/api/verify-admin", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ code: code.trim(), idToken }),
      });
      const data = await res.json();
      if (!res.ok) {
        try {
          await userCred.user.delete();
        } catch {}
        setRegisterError(data.error ?? "Registration failed");
        return;
      }
      await sendEmailVerification(userCred.user);
      sessionStorage.setItem(ADMIN_CACHE_KEY, userCred.user.uid);
      router.replace("/dashboard");
      router.refresh();
    } catch (error) {
      console.error(error);
      const errCode = error && typeof error === "object" && "code" in error ? (error as { code: string }).code : "";
      setRegisterError(errCode === "auth/email-already-in-use" ? "Email already registered." : "Registration failed.");
    } finally {
      setRegisterLoading(false);
    }
  }

  async function handleGoogleAuth(isRegister: boolean) {
    setLoginError("");
    setRegisterError("");
    setTab(isRegister ? "register" : "login");

    if (isRegister && !code.trim()) {
      setRegisterError("Please enter admin code first");
      return;
    }

    try {
      const provider = new GoogleAuthProvider();
      if (isRegister && typeof window !== "undefined") {
        sessionStorage.setItem(PENDING_CODE_KEY, code.trim());
      }
      try {
        const result = await signInWithPopup(auth, provider);
        if (isRegister) {
          const storedCode = sessionStorage.getItem(PENDING_CODE_KEY);
          sessionStorage.removeItem(PENDING_CODE_KEY);
          if (storedCode) {
            const adminRef = doc(db, "admins", result.user.uid);
            const adminSnap = await getDoc(adminRef);
            if (!adminSnap.exists()) {
              await verifyAndAddAdmin(result.user, storedCode);
            } else {
              sessionStorage.setItem(ADMIN_CACHE_KEY, result.user.uid);
              router.replace("/dashboard");
            }
          }
        }
      } catch (popupError: unknown) {
        if (isRegister && typeof window !== "undefined") {
          sessionStorage.removeItem(PENDING_CODE_KEY);
        }
        const msg = popupError instanceof Error ? popupError.message : String(popupError);
        const isStorageError =
          msg.includes("missing initial state") || msg.includes("sessionStorage") ||
          msg.includes("storage") || msg.includes("popup-blocked");
        if (isStorageError) {
          await signInWithRedirect(auth, provider);
        } else {
          throw popupError;
        }
      }
    } catch (error) {
      console.error(error);
      alert("Authentication failed");
    }
  }

  const LeftPanel = () => (
    <div className="flex-1 min-h-screen bg-gradient-to-b from-[#1A202C] to-[#0f1419] flex flex-col justify-between p-10 lg:p-14">
      <span className="text-white font-semibold text-lg tracking-tight">HALALENS</span>
      <div>
        <h2 className="text-white text-3xl lg:text-4xl font-bold leading-tight">
          Welcome Back to HALALENS
        </h2>
        <p className="text-white/80 mt-4 text-base lg:text-lg max-w-md">
          Manage your HALALENS admin panel from one dashboard.
        </p>
      </div>
      <p className="text-white/60 text-sm">Your admin access, powering HALALENS.</p>
    </div>
  );

  const GoogleButton = ({ onClick, label, disabled }: { onClick: () => void; label: string; disabled?: boolean }) => (
    <button
      type="button"
      onClick={onClick}
      disabled={disabled}
      className="w-full flex items-center justify-center gap-3 py-3 px-4 rounded-lg border border-gray-300 bg-white hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors font-medium text-gray-700"
    >
      <svg className="w-5 h-5" viewBox="0 0 24 24">
        <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" />
        <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" />
        <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" />
        <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" />
      </svg>
      {label}
    </button>
  );

  const inputClass =
    "w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition";

  if (loading) {
    return (
      <main className="min-h-screen flex items-center justify-center bg-gray-50">
        <p className="text-gray-500">Checking authentication...</p>
      </main>
    );
  }

  return (
    <main className="min-h-screen flex bg-white">
      <LeftPanel />

      <div className="flex-1 min-h-screen flex items-center justify-center p-8 lg:p-16 bg-white">
        <div className="w-full max-w-md">
          <h3 className="text-2xl font-bold text-gray-900">
            {tab === "login" ? "Welcome back" : "Create account"}
          </h3>
          <p className="text-gray-500 mt-1 mb-8">
            {tab === "login"
              ? "Sign in to manage your HALALENS admin panel."
              : "Register as admin. Enter admin code once."}
          </p>

          {(loginError || registerError) && (
            <div className="mb-6 p-4 rounded-lg bg-red-50 border border-red-200">
              <p className="text-red-600 text-sm">{tab === "login" ? loginError : registerError}</p>
            </div>
          )}

          {tab === "login" && showForgotPassword ? (
            <form onSubmit={handleForgotPassword} className="space-y-4">
              <div>
                <label htmlFor="forgot-email" className="block text-sm font-medium text-gray-700 mb-2">Email</label>
                <input id="forgot-email" type="email" value={forgotEmail} onChange={(e) => setForgotEmail(e.target.value)} placeholder="you@company.com" required className={inputClass} />
              </div>
              {forgotSuccess && <p className="text-green-600 text-sm">{forgotSuccess}</p>}
              <button type="submit" disabled={forgotLoading} className="w-full py-3 px-4 rounded-lg bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 text-white font-medium">
                {forgotLoading ? "Sending..." : "Send reset link"}
              </button>
              <button type="button" onClick={() => { setShowForgotPassword(false); setLoginError(""); setForgotSuccess(""); }} className="w-full text-blue-600 hover:underline text-sm">
                Back to login
              </button>
            </form>
          ) : tab === "login" ? (
            <form onSubmit={handleEmailLogin} className="space-y-4">
              <div>
                <label htmlFor="login-email" className="block text-sm font-medium text-gray-700 mb-2">Email</label>
                <input id="login-email" type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="you@company.com" required className={inputClass} />
              </div>
              <div>
                <div className="flex justify-between items-center mb-2">
                  <label htmlFor="login-password" className="block text-sm font-medium text-gray-700">Password</label>
                  <button type="button" onClick={() => setShowForgotPassword(true)} className="text-blue-600 hover:underline text-sm">
                    Forgot password?
                  </button>
                </div>
                <input id="login-password" type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="••••••••" required className={inputClass} />
              </div>
              <button type="submit" disabled={loginLoading} className="w-full py-3 px-4 rounded-lg bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 text-white font-medium transition-colors flex items-center justify-center gap-2">
                {loginLoading ? "Signing in..." : "Login"} <span aria-hidden>→</span>
              </button>
            </form>
          ) : (
            <form onSubmit={handleEmailRegister} className="space-y-4">
              <div>
                <label htmlFor="reg-code" className="block text-sm font-medium text-gray-700 mb-2">Admin code</label>
                <input id="reg-code" type="password" value={code} onChange={(e) => setCode(e.target.value)} placeholder="Enter admin code" required className={inputClass} />
              </div>
              <div>
                <label htmlFor="reg-email" className="block text-sm font-medium text-gray-700 mb-2">Email</label>
                <input id="reg-email" type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="you@company.com" required className={inputClass} />
              </div>
              <div>
                <label htmlFor="reg-password" className="block text-sm font-medium text-gray-700 mb-2">Password</label>
                <input id="reg-password" type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="••••••••" required minLength={6} className={inputClass} />
              </div>
              <button type="submit" disabled={registerLoading} className="w-full py-3 px-4 rounded-lg bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 text-white font-medium transition-colors flex items-center justify-center gap-2">
                {registerLoading ? "Registering..." : "Register"} <span aria-hidden>→</span>
              </button>
            </form>
          )}

          <div className="flex items-center gap-4 my-6">
            <div className="flex-1 h-px bg-gray-200" />
            <span className="text-gray-500 text-sm">OR CONTINUE WITH</span>
            <div className="flex-1 h-px bg-gray-200" />
          </div>

          <GoogleButton
            onClick={() => handleGoogleAuth(tab === "login")}
            label={tab === "login" ? "Continue with Google" : "Register with Google"}
            disabled={tab === "register" && !code.trim()}
          />

          <p className="mt-8 text-center text-gray-500 text-sm">
            {tab === "login" ? (
              <>
                No account?{" "}
                <button type="button" onClick={() => { setTab("register"); setLoginError(""); setRegisterError(""); setCode(""); setShowForgotPassword(false); }} className="text-blue-600 hover:underline font-medium">Register</button>
              </>
            ) : (
              <>
                Already have an account?{" "}
                <button type="button" onClick={() => { setTab("login"); setRegisterError(""); setLoginError(""); setCode(""); setShowForgotPassword(false); }} className="text-blue-600 hover:underline font-medium">Login</button>
              </>
            )}
          </p>
        </div>
      </div>
    </main>
  );
}