"use client";

import { usePathname } from "next/navigation";
import { useTranslation } from "react-i18next";
import Link from "next/link";
import Image from "next/image";
import { NavLink, MobileNavLink } from "./components/NavLinks";
import {
  Globe,
  LogIn,
  UserPlus,
  UserCircle,
  LogOut,
  Calendar,
  Building,
  PlusCircle,
  Heart,
  MessageCircle,
  Settings,
  Edit,
  Phone,
  Mail,
  MapPin,
  Camera,
  Shield,
  Bell,
  Home,
  ChevronDown,
  Menu,
  X,
  TrendingUp,
  CalendarDays,
  Clock,
  Users,
  DollarSign,
} from "lucide-react";
import { useState, useEffect, useRef } from "react";
import { motion, AnimatePresence } from "framer-motion";
import "./i18n/config";

export default function ClientLayout({ children }) {
  const { t, i18n } = useTranslation();
  const pathname = usePathname();
  const [currentLanguage, setCurrentLanguage] = useState("en");
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  const [showUserMenu, setShowUserMenu] = useState(false);
  const [user, setUser] = useState(null);
  const [isMounted, setIsMounted] = useState(false);
  const currentYear = new Date().getFullYear();
  const menuRef = useRef(null);

  useEffect(() => {
    setIsMounted(true);
    const savedLanguage = localStorage.getItem("language") || "ar";
    setCurrentLanguage(savedLanguage);
    i18n.changeLanguage(savedLanguage);

    const storedUser = localStorage.getItem("user");
    if (storedUser) {
      const userData = JSON.parse(storedUser);
      console.log("User data loaded:", userData);
      setUser(userData);
    }

    if (savedLanguage === "ar") {
      document.documentElement.dir = "rtl";
      document.documentElement.lang = "ar";
    } else {
      document.documentElement.dir = "ltr";
      document.documentElement.lang = "en";
    }
  }, [i18n]);

  useEffect(() => {
    const handleClickOutside = (event) => {
      if (menuRef.current && !menuRef.current.contains(event.target)) {
        setShowUserMenu(false);
      }
    };
    document.addEventListener("mousedown", handleClickOutside);
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, []);

  const changeLanguage = (lng) => {
    i18n.changeLanguage(lng);
    setCurrentLanguage(lng);
    localStorage.setItem("language", lng);

    if (lng === "ar") {
      document.documentElement.dir = "rtl";
      document.documentElement.lang = "ar";
    } else {
      document.documentElement.dir = "ltr";
      document.documentElement.lang = "en";
    }
  };

  const toggleMobileMenu = () => {
    setIsMobileMenuOpen(!isMobileMenuOpen);
  };

  const closeMobileMenu = () => {
    setIsMobileMenuOpen(false);
  };

  const logout = () => {
    localStorage.removeItem("user");
    setUser(null);
    setShowUserMenu(false);
    window.location.href = "/";
  };

  const isAuthPage = [
    "/login",
    "/register",
    "/forgot-password",
    "/auth/choose-role",
  ].includes(pathname);

  const isProfilePage = pathname === "/profile";

  const isOwner = user?.role === "owner";
  const isAdmin = user?.role === "admin";

  console.log("User role:", user?.role);
  console.log("Is Admin:", isAdmin);

  const getUserInitial = () => {
    if (user?.name) {
      return user.name.charAt(0).toUpperCase();
    }
    return <UserCircle className="w-5 h-5" />;
  };

  if (!isMounted) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="text-center">
          <div className="w-16 h-16 border-4 border-amber-500 border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
          <p className="text-gray-600">جاري التحميل...</p>
        </div>
      </div>
    );
  }

  return (
    <>
      {!isAuthPage && (
        <nav className="fixed top-0 left-0 right-0 bg-white/95 backdrop-blur-sm border-b border-gray-200 z-50 transition-all duration-300 shadow-sm">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div
              className={`flex justify-between items-center h-20 ${currentLanguage === "ar" ? "flex-row-reverse" : ""}`}
            >
              <div className="flex items-center">
                <Link href="/" className="flex items-center space-x-3 group">
                  <div className="relative w-[150px] h-[60px]">
                    <Image
                      src="/logo.png"
                      alt={t("logoAlt")}
                      fill
                      className="object-contain"
                      priority
                    />
                  </div>
                  <span className="text-3xl font-bold text-gray-800 hidden md:block">
                    {t("brandNamePart1")}
                    <span className="text-amber-600">
                      {t("brandNamePart2")}
                    </span>
                  </span>
                </Link>
              </div>

              <div className="hidden md:flex items-center space-x-4">
                <div
                  className={`flex items-center space-x-1 ${currentLanguage === "ar" ? "flex-row-reverse space-x-reverse" : ""}`}
                >
                  <NavLink href="/">الرئيسية</NavLink>
                  <NavLink href="/properties">عقاراتنا</NavLink>

                  {isAdmin && (
                    <NavLink href="/admin">
                      <span className="flex items-center gap-2">
                        <Shield className="w-4 h-4" />
                        الإدارة
                      </span>
                    </NavLink>
                  )}

                  {isOwner && (
                    <>
                      <NavLink href="/owner/properties">
                        <span className="flex items-center gap-2">
                          <Building className="w-4 h-4" />
                          عقاراتي
                        </span>
                      </NavLink>
                      <NavLink href="/owner/bookings">
                        <span className="flex items-center gap-2">
                          <Calendar className="w-4 h-4" />
                          الحجوزات
                        </span>
                      </NavLink>
                      <NavLink href="/owner/calendar">
                        <span className="flex items-center gap-2">
                          <CalendarDays className="w-4 h-4" />
                          التقويم
                        </span>
                      </NavLink>
                      <NavLink href="/owner/profits">
                        <span className="flex items-center gap-2">
                          <TrendingUp className="w-4 h-4" />
                          الأرباح
                        </span>
                      </NavLink>
                    </>
                  )}

                  {!user && !isAuthPage && (
                    <>
                      <NavLink href="/login">
                        <span className="flex items-center gap-2">
                          <LogIn className="w-4 h-4" />
                          تسجيل الدخول
                        </span>
                      </NavLink>
                      <NavLink href="/auth/choose-role">
                        <span className="flex items-center gap-2">
                          <UserPlus className="w-4 h-4" />
                          إنشاء حساب
                        </span>
                      </NavLink>
                    </>
                  )}
                </div>

                {/* <motion.button
                  whileHover={{ scale: 1.1, rotate: 360 }}
                  whileTap={{ scale: 0.9 }}
                  onClick={() =>
                    changeLanguage(currentLanguage === "en" ? "ar" : "en")
                  }
                  className="flex items-center justify-center w-10 h-10 bg-gray-100 hover:bg-gray-200 rounded-full transition-all duration-200 ml-4"
                >
                  <Globe className="w-5 h-5 text-gray-700" />
                </motion.button> */}

                {user && (
                  <div className="relative" ref={menuRef}>
                    <motion.button
                      onClick={() => setShowUserMenu(!showUserMenu)}
                      className="w-10 h-10 bg-gradient-to-br from-amber-500 to-amber-600 rounded-full flex items-center justify-center text-white font-bold text-lg shadow-lg hover:shadow-xl transition-all hover:scale-105 focus:outline-none"
                      whileHover={{ scale: 1.1 }}
                      whileTap={{ scale: 0.95 }}
                    >
                      {getUserInitial()}
                    </motion.button>

                    <AnimatePresence>
                      {showUserMenu && (
                        <motion.div
                          initial={{ opacity: 0, y: -10 }}
                          animate={{ opacity: 1, y: 0 }}
                          exit={{ opacity: 0, y: -10 }}
                          className="absolute left-0 mt-2 w-72 bg-white rounded-xl shadow-xl border border-gray-200 overflow-hidden z-50"
                        >
                          <div className="bg-gradient-to-r from-amber-500 to-amber-600 p-4 text-white">
                            <div className="flex items-center gap-3">
                              <div className="w-12 h-12 bg-white/20 rounded-full flex items-center justify-center text-xl font-bold">
                                {getUserInitial()}
                              </div>
                              <div>
                                <p className="font-bold">
                                  {user?.name || "مستخدم"}
                                </p>
                                <p className="text-xs text-amber-100">
                                  {user?.email || ""}
                                </p>
                                <p className="text-xs text-amber-100 mt-1">
                                  {isOwner
                                    ? "مالك عقار"
                                    : isAdmin
                                      ? "مدير النظام"
                                      : "مستأجر"}
                                </p>
                              </div>
                            </div>
                          </div>

                          <div className="p-2">
                            <Link
                              href="/profile"
                              className="flex items-center gap-3 px-4 py-3 text-gray-700 hover:bg-amber-50 rounded-lg transition-colors"
                              onClick={() => setShowUserMenu(false)}
                            >
                              <UserCircle className="w-5 h-5 text-amber-500" />
                              <div>
                                <p className="font-medium">الملف الشخصي</p>
                                <p className="text-xs text-gray-500">
                                  عرض وتعديل معلوماتك
                                </p>
                              </div>
                            </Link>

                            <Link
                              href="/favorites"
                              className="flex items-center gap-3 px-4 py-3 text-gray-700 hover:bg-amber-50 rounded-lg transition-colors"
                              onClick={() => setShowUserMenu(false)}
                            >
                              <Heart className="w-5 h-5 text-amber-500" />
                              <div>
                                <p className="font-medium">المفضلة</p>
                                <p className="text-xs text-gray-500">
                                  العقارات المحفوظة
                                </p>
                              </div>
                            </Link>

                            {isOwner && (
                              <>
                                <div className="border-t border-gray-100 my-2"></div>

                                <Link
                                  href="/owner/properties"
                                  className="flex items-center gap-3 px-4 py-3 text-gray-700 hover:bg-amber-50 rounded-lg transition-colors"
                                  onClick={() => setShowUserMenu(false)}
                                >
                                  <Building className="w-5 h-5 text-amber-500" />
                                  <div>
                                    <p className="font-medium">عقاراتي</p>
                                    <p className="text-xs text-gray-500">
                                      إدارة عقاراتك
                                    </p>
                                  </div>
                                </Link>

                                <Link
                                  href="/owner/properties/add"
                                  className="flex items-center gap-3 px-4 py-3 text-gray-700 hover:bg-amber-50 rounded-lg transition-colors"
                                  onClick={() => setShowUserMenu(false)}
                                >
                                  <PlusCircle className="w-5 h-5 text-amber-500" />
                                  <div>
                                    <p className="font-medium">إضافة عقار</p>
                                    <p className="text-xs text-gray-500">
                                      أضف عقاراً جديداً
                                    </p>
                                  </div>
                                </Link>

                                <Link
                                  href="/owner/bookings"
                                  className="flex items-center gap-3 px-4 py-3 text-gray-700 hover:bg-amber-50 rounded-lg transition-colors"
                                  onClick={() => setShowUserMenu(false)}
                                >
                                  <Calendar className="w-5 h-5 text-amber-500" />
                                  <div>
                                    <p className="font-medium">الحجوزات</p>
                                    <p className="text-xs text-gray-500">
                                      إدارة حجوزاتك
                                    </p>
                                  </div>
                                </Link>

                                <Link
                                  href="/owner/calendar"
                                  className="flex items-center gap-3 px-4 py-3 text-gray-700 hover:bg-amber-50 rounded-lg transition-colors"
                                  onClick={() => setShowUserMenu(false)}
                                >
                                  <CalendarDays className="w-5 h-5 text-amber-500" />
                                  <div>
                                    <p className="font-medium">التقويم</p>
                                    <p className="text-xs text-gray-500">
                                      جدول توفر العقارات
                                    </p>
                                  </div>
                                </Link>

                                <Link
                                  href="/owner/profits"
                                  className="flex items-center gap-3 px-4 py-3 text-gray-700 hover:bg-amber-50 rounded-lg transition-colors"
                                  onClick={() => setShowUserMenu(false)}
                                >
                                  <TrendingUp className="w-5 h-5 text-amber-500" />
                                  <div>
                                    <p className="font-medium">الأرباح</p>
                                    <p className="text-xs text-gray-500">
                                      إحصائيات وأرباح
                                    </p>
                                  </div>
                                </Link>
                              </>
                            )}

                            {isAdmin && (
                              <>
                                <div className="border-t border-gray-100 my-2"></div>

                                <Link
                                  href="/admin"
                                  className="flex items-center gap-3 px-4 py-3 text-gray-700 hover:bg-amber-50 rounded-lg transition-colors"
                                  onClick={() => setShowUserMenu(false)}
                                >
                                  <Shield className="w-5 h-5 text-amber-500" />
                                  <div>
                                    <p className="font-medium">لوحة التحكم</p>
                                    <p className="text-xs text-gray-500">
                                      إدارة المنصة
                                    </p>
                                  </div>
                                </Link>

                                <Link
                                  href="/admin/users"
                                  className="flex items-center gap-3 px-4 py-3 text-gray-700 hover:bg-amber-50 rounded-lg transition-colors"
                                  onClick={() => setShowUserMenu(false)}
                                >
                                  <Users className="w-5 h-5 text-amber-500" />
                                  <div>
                                    <p className="font-medium">المستخدمين</p>
                                    <p className="text-xs text-gray-500">
                                      إدارة المستخدمين
                                    </p>
                                  </div>
                                </Link>

                                <Link
                                  href="/admin/properties"
                                  className="flex items-center gap-3 px-4 py-3 text-gray-700 hover:bg-amber-50 rounded-lg transition-colors"
                                  onClick={() => setShowUserMenu(false)}
                                >
                                  <Building className="w-5 h-5 text-amber-500" />
                                  <div>
                                    <p className="font-medium">العقارات</p>
                                    <p className="text-xs text-gray-500">
                                      إدارة جميع العقارات
                                    </p>
                                  </div>
                                </Link>

                                <Link
                                  href="/admin/bookings"
                                  className="flex items-center gap-3 px-4 py-3 text-gray-700 hover:bg-amber-50 rounded-lg transition-colors"
                                  onClick={() => setShowUserMenu(false)}
                                >
                                  <Calendar className="w-5 h-5 text-amber-500" />
                                  <div>
                                    <p className="font-medium">الحجوزات</p>
                                    <p className="text-xs text-gray-500">
                                      إدارة الحجوزات
                                    </p>
                                  </div>
                                </Link>

                                <Link
                                  href="/admin/ledger"
                                  className="flex items-center gap-3 px-4 py-3 text-gray-700 hover:bg-amber-50 rounded-lg transition-colors"
                                  onClick={() => setShowUserMenu(false)}
                                >
                                  <DollarSign className="w-5 h-5 text-amber-500" />
                                  <div>
                                    <p className="font-medium">دفتر الحسابات</p>
                                    <p className="text-xs text-gray-500">
                                      إدارة المعاملات المالية
                                    </p>
                                  </div>
                                </Link>
                              </>
                            )}

                            {!isOwner && !isAdmin && user && (
                              <>
                                <div className="border-t border-gray-100 my-2"></div>

                                <Link
                                  href="/tenant/bookings"
                                  className="flex items-center gap-3 px-4 py-3 text-gray-700 hover:bg-amber-50 rounded-lg transition-colors"
                                  onClick={() => setShowUserMenu(false)}
                                >
                                  <Calendar className="w-5 h-5 text-amber-500" />
                                  <div>
                                    <p className="font-medium">حجوزاتي</p>
                                    <p className="text-xs text-gray-500">
                                      عرض حجوزاتك
                                    </p>
                                  </div>
                                </Link>
                              </>
                            )}

                            <div className="border-t border-gray-100 my-2"></div>

                            <button
                              onClick={logout}
                              className="w-full flex items-center gap-3 px-4 py-3 text-red-600 hover:bg-red-50 rounded-lg transition-colors"
                            >
                              <LogOut className="w-5 h-5" />
                              <div>
                                <p className="font-medium">تسجيل الخروج</p>
                                <p className="text-xs text-red-400">
                                  إنهاء الجلسة الحالية
                                </p>
                              </div>
                            </button>
                          </div>
                        </motion.div>
                      )}
                    </AnimatePresence>
                  </div>
                )}
              </div>

              <div className="md:hidden flex items-center gap-3">
                <motion.button
                  whileHover={{ scale: 1.1, rotate: 360 }}
                  whileTap={{ scale: 0.9 }}
                  onClick={() =>
                    changeLanguage(currentLanguage === "en" ? "ar" : "en")
                  }
                  className="flex items-center justify-center w-10 h-10 bg-gray-100 hover:bg-gray-200 rounded-full transition-colors"
                >
                  <Globe className="w-5 h-5 text-gray-700" />
                </motion.button>

                {user && (
                  <button
                    onClick={() => setShowUserMenu(!showUserMenu)}
                    className="w-10 h-10 bg-gradient-to-br from-amber-500 to-amber-600 rounded-full flex items-center justify-center text-white font-bold shadow-lg"
                  >
                    {getUserInitial()}
                  </button>
                )}

                <button
                  type="button"
                  onClick={toggleMobileMenu}
                  className="inline-flex items-center justify-center p-2 rounded-md text-gray-700 hover:text-amber-600 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-amber-500"
                >
                  <span className="sr-only">{t("openMainMenu")}</span>
                  {isMobileMenuOpen ? (
                    <X className="w-6 h-6" />
                  ) : (
                    <Menu className="w-6 h-6" />
                  )}
                </button>
              </div>
            </div>
          </div>

          {isMobileMenuOpen && (
            <motion.div
              initial={{ opacity: 0, y: -10 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: -10 }}
              className="md:hidden bg-white border-t border-gray-200 shadow-lg"
            >
              <div className="px-2 pt-2 pb-3 space-y-1">
                <MobileNavLink href="/" onClick={closeMobileMenu}>
                  {t("home")}
                </MobileNavLink>
                <MobileNavLink href="/properties" onClick={closeMobileMenu}>
                  {t("ourProducts")}
                </MobileNavLink>

                {isAdmin && (
                  <MobileNavLink href="/admin" onClick={closeMobileMenu}>
                    <span className="flex items-center gap-2">
                      <Shield className="w-4 h-4" />
                      الإدارة
                    </span>
                  </MobileNavLink>
                )}

                {isOwner && (
                  <>
                    <MobileNavLink
                      href="/owner/properties"
                      onClick={closeMobileMenu}
                    >
                      <span className="flex items-center gap-2">
                        <Building className="w-4 h-4" />
                        عقاراتي
                      </span>
                    </MobileNavLink>
                    <MobileNavLink
                      href="/owner/bookings"
                      onClick={closeMobileMenu}
                    >
                      <span className="flex items-center gap-2">
                        <Calendar className="w-4 h-4" />
                        الحجوزات
                      </span>
                    </MobileNavLink>
                    <MobileNavLink
                      href="/owner/calendar"
                      onClick={closeMobileMenu}
                    >
                      <span className="flex items-center gap-2">
                        <CalendarDays className="w-4 h-4" />
                        التقويم
                      </span>
                    </MobileNavLink>
                    <MobileNavLink
                      href="/owner/profits"
                      onClick={closeMobileMenu}
                    >
                      <span className="flex items-center gap-2">
                        <TrendingUp className="w-4 h-4" />
                        الأرباح
                      </span>
                    </MobileNavLink>
                  </>
                )}

                {!user && (
                  <>
                    <div className="border-t border-gray-200 my-2"></div>
                    <MobileNavLink href="/login" onClick={closeMobileMenu}>
                      <span className="flex items-center gap-2">
                        <LogIn className="w-4 h-4" />
                        تسجيل الدخول
                      </span>
                    </MobileNavLink>
                    <MobileNavLink
                      href="/auth/choose-role"
                      onClick={closeMobileMenu}
                    >
                      <span className="flex items-center gap-2">
                        <UserPlus className="w-4 h-4" />
                        إنشاء حساب
                      </span>
                    </MobileNavLink>
                  </>
                )}
              </div>
            </motion.div>
          )}
        </nav>
      )}

      <main
        className={`${!isAuthPage && !isProfilePage ? "pt-20" : ""} min-h-screen bg-gradient-to-b from-gray-50 to-white ${currentLanguage === "ar" ? "text-right" : "text-left"}`}
      >
        {children}
      </main>

      {!isAuthPage && !isProfilePage && (
        <footer className="bg-gray-900 text-white py-12">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div
              className={`grid grid-cols-1 md:grid-cols-4 gap-8 ${currentLanguage === "ar" ? "text-right" : "text-left"}`}
            >
              <div className="space-y-4">
                <div
                  className={`flex items-center ${currentLanguage === "ar" ? "flex-row-reverse" : "space-x-3"}`}
                >
                  <div className="relative w-10 h-10">
                    <Image
                      src="/logo.png"
                      alt={t("logoAlt")}
                      fill
                      className="object-contain"
                      sizes="40px"
                    />
                  </div>
                  <span className="text-3xl font-bold">
                    {t("brandNamePart1")}
                    <span className="text-amber-400">
                      {t("brandNamePart2")}
                    </span>
                  </span>
                </div>
                <p className="text-gray-400 text-sm">
                  {t("footerDescription")}
                </p>
              </div>
              <div>
                <h3 className="text-lg font-semibold mb-4">
                  {t("quickLinks")}
                </h3>
                <ul className="space-y-2">
                  <li>
                    <Link
                      href="/"
                      className="text-gray-400 hover:text-white transition-colors block py-1"
                    >
                      {t("home")}
                    </Link>
                  </li>
                  <li>
                    <Link
                      href="/properties"
                      className="text-gray-400 hover:text-white transition-colors block py-1"
                    >
                      {t("ourProducts")}
                    </Link>
                  </li>
                  {isAdmin && (
                    <li>
                      <Link
                        href="/admin"
                        className="text-gray-400 hover:text-white transition-colors block py-1"
                      >
                        الإدارة
                      </Link>
                    </li>
                  )}
                </ul>
              </div>
              <div>
                <h3 className="text-lg font-semibold mb-4">{t("contactUs")}</h3>
                <ul className="space-y-3 text-gray-400">
                  <li className="flex items-center gap-2">
                    <Phone className="w-5 h-5" />
                    <span>{t("phone")}</span>
                  </li>
                  <li className="flex items-center gap-2">
                    <Mail className="w-5 h-5" />
                    <span>{t("footerEmail")}</span>
                  </li>
                </ul>
              </div>
            </div>
            <div className="mt-8 pt-8 border-t border-gray-800 text-center text-gray-400 text-sm">
              <p>
                &copy; {currentYear} {t("copyright")}. {t("allRightsReserved")}
              </p>
            </div>
          </div>
        </footer>
      )}
    </>
  );
}
