"use client";

import { useEffect, useState } from "react";
import { useRouter, usePathname } from "next/navigation";
import Link from "next/link";
import { useTranslations } from "next-intl";
import { useAuthStore } from "@/stores/authStore";
import {
  LayoutDashboard,
  Cpu,
  Bell,
  Users,
  Building2,
  Settings,
  LogOut,
  Menu,
  X,
  ChevronDown,
  Globe,
  Moon,
  Sun,
  Link2,
  FileText,
  Map,
  Brain,
  BellRing,
  BarChart3,
} from "lucide-react";

interface NavItem {
  href: string;
  label: string;
  icon: React.ReactNode;
  roles?: string[];
}

export default function DashboardLayout({
  children,
  params: { locale },
}: {
  children: React.ReactNode;
  params: { locale: string };
}) {
  const t = useTranslations("nav");
  const router = useRouter();
  const pathname = usePathname();
  const { user, isAuthenticated, loadUser, logout, isLoading, isHydrated } = useAuthStore();
  const [sidebarOpen, setSidebarOpen] = useState(false);
  const [darkMode, setDarkMode] = useState(false);

  useEffect(() => {
    loadUser();
  }, [loadUser]);

  useEffect(() => {
    // الانتظار حتى يتم تحميل البيانات من localStorage
    if (isHydrated && !isLoading && !isAuthenticated) {
      router.push(`/${locale}/login`);
    }
  }, [isAuthenticated, isLoading, isHydrated, router, locale]);

  const navItems: NavItem[] = [
    { href: `/${locale}/dashboard`, label: t("dashboard"), icon: <LayoutDashboard className="w-5 h-5" /> },
    { href: `/${locale}/dashboard/devices`, label: t("devices"), icon: <Cpu className="w-5 h-5" /> },
    { href: `/${locale}/dashboard/alerts`, label: t("alerts"), icon: <Bell className="w-5 h-5" /> },
    { href: `/${locale}/dashboard/analytics`, label: "التحليلات والتقارير", icon: <BarChart3 className="w-5 h-5" /> },
    { href: `/${locale}/dashboard/map`, label: "خريطة الأجهزة", icon: <Map className="w-5 h-5" /> },
    { href: `/${locale}/dashboard/predictions`, label: "توقعات AI", icon: <Brain className="w-5 h-5" /> },
    { href: `/${locale}/dashboard/lifesmart`, label: t("lifesmart") || "LifeSmart", icon: <Link2 className="w-5 h-5" /> },
    { href: `/${locale}/dashboard/users`, label: t("users"), icon: <Users className="w-5 h-5" />, roles: ["super_admin", "tenant_admin"] },
    { href: `/${locale}/dashboard/tenants`, label: t("tenants"), icon: <Building2 className="w-5 h-5" />, roles: ["super_admin"] },
    { href: `/${locale}/dashboard/subscriptions`, label: t("subscriptions") || "الاشتراكات", icon: <Building2 className="w-5 h-5" />, roles: ["super_admin"] },
    { href: `/${locale}/dashboard/settings`, label: t("settings"), icon: <Settings className="w-5 h-5" /> },
  ];

  const filteredNavItems = navItems.filter((item) => {
    if (!item.roles) return true;
    return user && item.roles.includes(user.role);
  });

  const handleLogout = async () => {
    await logout();
    router.push(`/${locale}/login`);
  };

  const toggleDarkMode = () => {
    setDarkMode(!darkMode);
    document.documentElement.classList.toggle("dark");
  };

  // الانتظار حتى يتم تحميل البيانات من localStorage
  if (!isHydrated || isLoading || !isAuthenticated) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
      {/* Mobile Sidebar Overlay */}
      {sidebarOpen && (
        <div
          className="fixed inset-0 z-40 bg-black/50 lg:hidden"
          onClick={() => setSidebarOpen(false)}
        />
      )}

      {/* Sidebar */}
      <aside
        className={`fixed top-0 ${locale === "ar" ? "right-0" : "left-0"} z-50 h-screen w-64 bg-white dark:bg-gray-800 border-e border-gray-200 dark:border-gray-700 transform transition-transform duration-300 ease-in-out lg:translate-x-0 ${
          sidebarOpen ? "translate-x-0" : locale === "ar" ? "translate-x-full" : "-translate-x-full"
        } lg:translate-x-0`}
      >
        {/* Logo */}
        <div className="flex items-center justify-between h-16 px-4 border-b border-gray-200 dark:border-gray-700">
          <Link href={`/${locale}/dashboard`} className="flex items-center gap-2">
            <div className="w-8 h-8 rounded-lg bg-primary flex items-center justify-center">
              <Cpu className="w-5 h-5 text-white" />
            </div>
            <span className="font-bold text-lg text-gray-900 dark:text-white">SmartLife</span>
          </Link>
          <button
            onClick={() => setSidebarOpen(false)}
            className="lg:hidden p-1 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"
          >
            <X className="w-5 h-5" />
          </button>
        </div>

        {/* Navigation */}
        <nav className="p-4 space-y-1">
          {filteredNavItems.map((item) => {
            const isActive = pathname === item.href || pathname.startsWith(item.href + "/");
            return (
              <Link
                key={item.href}
                href={item.href}
                className={`flex items-center gap-3 px-3 py-2.5 rounded-lg transition-colors ${
                  isActive
                    ? "bg-primary text-white"
                    : "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"
                }`}
              >
                {item.icon}
                <span>{item.label}</span>
              </Link>
            );
          })}
        </nav>

        {/* User Info */}
        <div className="absolute bottom-0 left-0 right-0 p-4 border-t border-gray-200 dark:border-gray-700">
          <div className="flex items-center gap-3 mb-3">
            <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center">
              <span className="text-primary font-medium">
                {user?.full_name?.charAt(0) || "U"}
              </span>
            </div>
            <div className="flex-1 min-w-0">
              <p className="text-sm font-medium text-gray-900 dark:text-white truncate">
                {user?.full_name}
              </p>
              <p className="text-xs text-gray-500 dark:text-gray-400 truncate">
                {user?.email}
              </p>
            </div>
          </div>
          <button
            onClick={handleLogout}
            className="w-full flex items-center justify-center gap-2 px-3 py-2 text-sm text-red-600 hover:bg-red-50 dark:hover:bg-red-900/30 rounded-lg transition-colors"
          >
            <LogOut className="w-4 h-4" />
            <span>{t("profile")}</span>
          </button>
        </div>
      </aside>

      {/* Main Content */}
      <div className={locale === "ar" ? "lg:mr-64" : "lg:ml-64"}>
        {/* Header */}
        <header className="sticky top-0 z-30 h-16 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
          <div className="flex items-center justify-between h-full px-4">
            {/* Mobile Menu Button */}
            <button
              onClick={() => setSidebarOpen(true)}
              className="lg:hidden p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"
            >
              <Menu className="w-5 h-5" />
            </button>

            {/* Search (optional) */}
            <div className="flex-1 max-w-xl mx-4 hidden md:block">
              {/* Search input can be added here */}
            </div>

            {/* Header Actions */}
            <div className="flex items-center gap-2">
              {/* Language Switcher */}
              <Link
                href={locale === "ar" ? pathname.replace("/ar", "/en") : pathname.replace("/en", "/ar")}
                className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"
              >
                <Globe className="w-5 h-5" />
              </Link>

              {/* Dark Mode Toggle */}
              <button
                onClick={toggleDarkMode}
                className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"
              >
                {darkMode ? <Sun className="w-5 h-5" /> : <Moon className="w-5 h-5" />}
              </button>

              {/* Notifications */}
              <button className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 relative">
                <Bell className="w-5 h-5" />
                <span className="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full"></span>
              </button>
            </div>
          </div>
        </header>

        {/* Page Content */}
        <main className="p-4 lg:p-6">{children}</main>
      </div>
    </div>
  );
}