import React, { useState } from "react";
import { ShieldCheck, User, Mail, Lock, ArrowRight, Loader2, BadgeAlert } from "lucide-react";
import { motion } from "motion/react";

interface ClientLoginProps {
  lang: "en" | "id";
  onLoginSuccess: (user: { name: string; email: string }) => void;
  onBackToHome: () => void;
}

export default function ClientLogin({ lang, onLoginSuccess, onBackToHome }: ClientLoginProps) {
  const isEn = lang === "en";
  const [activeTab, setActiveTab] = useState<"login" | "register">("login");
  
  // Form states
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");
  
  // UI States
  const [loading, setLoading] = useState(false);
  const [errorMsg, setErrorMsg] = useState("");
  const [successMsg, setSuccessMsg] = useState("");

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setErrorMsg("");
    setSuccessMsg("");

    // Simple robust clientside checks before flight
    if (!email || !password) {
      setErrorMsg(isEn ? "Email and password are required." : "Email dan kata sandi wajib diisi.");
      return;
    }

    if (activeTab === "register") {
      if (!name) {
        setErrorMsg(isEn ? "Full name is required." : "Nama lengkap wajib diisi.");
        return;
      }
      if (password.length < 6) {
        setErrorMsg(isEn ? "Password must accompany at least 6 characters." : "Kata sandi minimal harus terdiri dari 6 karakter.");
        return;
      }
      if (password !== confirmPassword) {
        setErrorMsg(isEn ? "Passwords do not match." : "Konfirmasi kata sandi tidak cocok.");
        return;
      }
    }

    setLoading(true);
    const endpoint = activeTab === "login" ? "/api/auth/login-client" : "/api/auth/register-client";
    const payload = activeTab === "login" 
      ? { email, password } 
      : { name, email, password };

    try {
      const response = await fetch(endpoint, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload)
      });

      const data = await response.json();
      if (!response.ok) {
        throw new Error(data.error || (isEn ? "Communication error with authentication server." : "Terjadi kesalahan komunikasi dengan server otentikasi."));
      }

      if (activeTab === "register") {
        setSuccessMsg(isEn ? "Registration successful! Please log in above." : "Pendaftaran berhasil! Silakan masuk dengan akun baru Anda.");
        setActiveTab("login");
        setPassword("");
        setConfirmPassword("");
      } else {
        // Logged in! Write to localStorage for instant hydration on page reloads
        localStorage.setItem("luniar_client_session", JSON.stringify(data.user));
        onLoginSuccess(data.user);
      }
    } catch (err: any) {
      setErrorMsg(err.message || (isEn ? "Server failed to authorize session credentials." : "Server gagal mengotorisasi kredensial masuk Anda."));
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="max-w-md mx-auto my-12 animate-fade-in" id="client-login-component">
      <div className="bg-[#FDFCFB] border border-[#EEECE6] p-8 md:p-10 shadow-sm relative overflow-hidden">
        
        {/* Subtle decorative gold top bar */}
        <div className="absolute top-0 left-0 w-full h-[3px] bg-[#C5A572]"></div>

        {/* Content Header */}
        <div className="text-center space-y-3 mb-8">
          <span className="font-sans text-[10px] font-bold uppercase tracking-[0.25em] text-[#C5A572] block">
            {isEn ? "CLIENT PORTAL" : "PORTAL KLIEN"}
          </span>
          <h2 className="font-serif text-3xl font-light text-[#1A1A1A] tracking-tight">
            {activeTab === "login" 
              ? (isEn ? "Client Access Session" : "Sesi Masuk Klien") 
              : (isEn ? "Create Account" : "Daftar Akun Baru")}
          </h2>
          <p className="font-sans text-[11px] text-[#888888] leading-relaxed">
            {activeTab === "login" 
              ? (isEn ? "Access your private investment desk & favorited catalog files." : "Akses meja pelaburan pribadi & arsip properti favorit Anda.")
              : (isEn ? "Build an official portfolio archive to track property consultations." : "Buat akun resmi untuk memantau konsultasi portofolio properti Anda.")}
          </p>
        </div>

        {/* Sub-tab Toggle */}
        <div className="flex border-b border-[#EEECE6] mb-8 relative">
          <button
            onClick={() => {
              setActiveTab("login");
              setErrorMsg("");
              setSuccessMsg("");
            }}
            className={`w-1/2 py-3 text-[10px] font-bold uppercase tracking-[0.2em] text-center cursor-pointer transition-colors duration-300 ${
              activeTab === "login" ? "text-[#C5A572]" : "text-[#888888] hover:text-[#1A1A1A]"
            }`}
          >
            {isEn ? "Log In" : "Masuk"}
          </button>
          <button
            onClick={() => {
              setActiveTab("register");
              setErrorMsg("");
              setSuccessMsg("");
            }}
            className={`w-1/2 py-3 text-[10px] font-bold uppercase tracking-[0.2em] text-center cursor-pointer transition-colors duration-300 ${
              activeTab === "register" ? "text-[#C5A572]" : "text-[#888888] hover:text-[#1A1A1A]"
            }`}
          >
            {isEn ? "Register" : "Pendaftaran"}
          </button>
          
          {/* Active border slide animation */}
          <div 
            className="absolute bottom-0 h-[1.5px] bg-[#C5A572] transition-all duration-500"
            style={{ 
              width: "50%", 
              left: activeTab === "login" ? "0%" : "50%" 
            }}
          ></div>
        </div>

        {/* Notifications and Alerts */}
        {errorMsg && (
          <motion.div 
            initial={{ opacity: 0, y: -8 }}
            animate={{ opacity: 1, y: 0 }}
            className="mb-6 p-4 bg-[#FDF8F7] border border-[#F2D6D3] text-[#A8392F] text-xs font-sans flex items-start gap-2.5 text-left"
          >
            <BadgeAlert size={16} className="mt-0.5 shrink-0" />
            <div>{errorMsg}</div>
          </motion.div>
        )}

        {successMsg && (
          <motion.div 
            initial={{ opacity: 0, y: -8 }}
            animate={{ opacity: 1, y: 0 }}
            className="mb-6 p-4 bg-[#F8FAF8] border border-[#D5EAD5] text-[#347634] text-xs font-sans flex items-start gap-2.5 text-left"
          >
            <ShieldCheck size={16} className="mt-0.5 shrink-0" />
            <div>{successMsg}</div>
          </motion.div>
        )}

        {/* Core Input Form */}
        <form onSubmit={handleSubmit} className="space-y-5">
          {activeTab === "register" && (
            <div className="space-y-1.5 text-left">
              <label className="block font-sans text-[10px] font-bold uppercase tracking-wider text-[#555555]">
                {isEn ? "FULL NAME" : "NAMA LENGKAP"}
              </label>
              <div className="relative">
                <span className="absolute left-3.5 top-1/2 -translate-y-1/2 text-[#888888] pointer-events-none">
                  <User size={14} />
                </span>
                <input
                  type="text"
                  required
                  placeholder={isEn ? "e.g. Fadjar Setiawan" : "cth. Fadjar Setiawan"}
                  value={name}
                  onChange={(e) => setName(e.target.value)}
                  className="w-full pl-10 pr-4 py-3 bg-[#FDFCFB] border border-[#EEECE6] focus:border-[#C5A572] outline-none text-xs font-sans transition-all duration-300 rounded-none text-[#1A1A1A]"
                />
              </div>
            </div>
          )}

          <div className="space-y-1.5 text-left">
            <label className="block font-sans text-[10px] font-bold uppercase tracking-wider text-[#555555]">
              {isEn ? "EMAIL ADDRESS" : "ALAMAT EMAIL"}
            </label>
            <div className="relative">
              <span className="absolute left-3.5 top-1/2 -translate-y-1/2 text-[#888888] pointer-events-none">
                <Mail size={14} />
              </span>
              <input
                type="email"
                required
                placeholder={isEn ? "buyer@domain.com" : "nama@domain.com"}
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                className="w-full pl-10 pr-4 py-3 bg-[#FDFCFB] border border-[#EEECE6] focus:border-[#C5A572] outline-none text-xs font-sans transition-all duration-300 rounded-none text-[#1A1A1A]"
              />
            </div>
            {activeTab === "login" && email === "" && (
              <p className="text-[10px] text-[#A59F95] italic leading-normal">
                {isEn 
                  ? "Quick Tip: Use your personal account or guest account client@demo.com (pass: client123)"
                  : "Petunjuk: Gunakan email Anda sendiri atau akun demo client@demo.com (sandi: client123)"}
              </p>
            )}
          </div>

          <div className="space-y-1.5 text-left">
            <label className="block font-sans text-[10px] font-bold uppercase tracking-wider text-[#555555]">
              {isEn ? "PASSWORD" : "KATA SANDI"}
            </label>
            <div className="relative">
              <span className="absolute left-3.5 top-1/2 -translate-y-1/2 text-[#888888] pointer-events-none">
                <Lock size={14} />
              </span>
              <input
                type="password"
                required
                placeholder="••••••••"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                className="w-full pl-10 pr-4 py-3 bg-[#FDFCFB] border border-[#EEECE6] focus:border-[#C5A572] outline-none text-xs font-sans transition-all duration-300 rounded-none text-[#1A1A1A]"
              />
            </div>
          </div>

          {activeTab === "register" && (
            <div className="space-y-1.5 text-left">
              <label className="block font-sans text-[10px] font-bold uppercase tracking-wider text-[#555555]">
                {isEn ? "CONFIRM PASSWORD" : "KONFIRMASI KATA SANDI"}
              </label>
              <div className="relative">
                <span className="absolute left-3.5 top-1/2 -translate-y-1/2 text-[#888888] pointer-events-none">
                  <Lock size={14} />
                </span>
                <input
                  type="password"
                  required
                  placeholder="••••••••"
                  value={confirmPassword}
                  onChange={(e) => setConfirmPassword(e.target.value)}
                  className="w-full pl-10 pr-4 py-3 bg-[#FDFCFB] border border-[#EEECE6] focus:border-[#C5A572] outline-none text-xs font-sans transition-all duration-300 rounded-none text-[#1A1A1A]"
                />
              </div>
            </div>
          )}

          {/* Action Trigger Row */}
          <div className="pt-3">
            <button
              type="submit"
              disabled={loading}
              className="w-full bg-[#1A1A1A] hover:bg-[#C5A572] hover:text-[#1A1A1A] text-white py-3.5 font-sans text-[10px] font-bold uppercase tracking-[0.25em] transition-all duration-500 inline-flex items-center justify-center gap-2 cursor-pointer rounded-none disabled:opacity-50"
            >
              {loading ? (
                <>
                  <Loader2 size={12} className="animate-spin" />
                  <span>{isEn ? "PROCESSING..." : "MEMPROSES..."}</span>
                </>
              ) : (
                <>
                  <span>
                    {activeTab === "login" 
                      ? (isEn ? "LOG IN" : "MASUK KE AKUN") 
                      : (isEn ? "REGISTER NOW" : "DAFTAR SEKARANG")}
                  </span>
                  <ArrowRight size={12} />
                </>
              )}
            </button>
          </div>
        </form>

        {/* Back Link */}
        <div className="text-center mt-6">
          <button
            onClick={onBackToHome}
            className="text-[10px] text-[#888888] hover:text-[#C5A572] uppercase tracking-[0.15em] font-sans transition-all duration-200 cursor-pointer focus:outline-none"
          >
            {isEn ? "← Back to Home Page" : "← Kembali ke Laman Utama"}
          </button>
        </div>

      </div>
    </div>
  );
}