// src/app/(dashboard)/layout.tsx

"use client";

import "@/app/admin/admin-globals.css";

import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { usePermissions } from "@/hooks/usePermissions";
import Sidebar from "@/components/admin/layout/sidebar";
import Header from "@/components/admin/layout/header";
import { Toaster } from "react-hot-toast";
import { useAdminStore } from "@/store/adminStore";
import { initSkin, useSkinStore } from "@/store/skinStore"; // ✅ Import
import { useCurrencyStore } from "@/store/currencyStore";
import { ThemeProvider } from "@/providers/theme-provider";

export default function DashboardLayout({ children }: { children: React.ReactNode }) {
  const router = useRouter();
  const { user, setRole } = useAdminStore();
  const { loading: permissionsLoading } = usePermissions();
  const [initialLoading, setInitialLoading] = useState(true);
  
  // ✅ Trigger re-render on skin change
  const { currentSkin, currentMode } = useSkinStore();
  const fetchCurrency = useCurrencyStore((s) => s.fetchCurrency);

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

  useEffect(() => {
    const checkAuth = async () => {
      try {
        const res = await fetch("/api/auth/me", {
          credentials: "include",
        });

        if (res.ok) {
          const data = await res.json();
          if (data.success && data.data) {
            const { employee } = data.data;
            setRole(employee.role);
            
            // ✅ Yahan initSkin() call karo
            await initSkin();
            
          } else {
            router.replace("/admin/login");
          }
        } else if (res.status === 401 || res.status === 403) {
          router.replace("/admin/login");
        } else {
          router.replace("/admin/login");
        }
      } catch (error) {
        console.error("[Dashboard] Auth check error:", error);
        router.replace("/admin/login");
      } finally {
        setInitialLoading(false);
      }
    };

    checkAuth();
  }, [router, setRole]);

  // Show loading state
  if (initialLoading || permissionsLoading) {
    return (
      <div 
        className="flex items-center justify-center h-dvh"
        style={{ background: "var(--color-background)" }}
      >
        <div className="flex flex-col items-center gap-3">
          <div
            className="w-10 h-10 rounded-full animate-spin"
            style={{
              border: "3px solid var(--color-border)",
              borderTopColor: "var(--color-cta)",
            }}
          />
          <p className="text-sm" style={{ color: "var(--color-text-tertiary)" }}>
            Loading dashboard...
          </p>
        </div>
      </div>
    );
  }

  // If no user, redirect to login
  if (!user) {
    return null;
  }

  return (
    <ThemeProvider>
    <div
      className="flex h-dvh overflow-hidden"
      style={{ 
        background: "var(--color-background)",
        color: "var(--color-text)",
      }}
    >
      {/* ✅ Key forces re-render on skin/mode change */}
      <div key={`${currentSkin?.id}-${currentMode}`} className="flex flex-1 min-w-0">
        <Sidebar />
        <div className="flex flex-col flex-1 min-w-0 overflow-hidden">
          <Header />
          <main className="flex-1 overflow-y-auto">
            <div className="p-3 sm:p-4 lg:p-6">
              {children}
            </div>
          </main>
        </div>
      </div>
      <Toaster 
        position="top-right"
        toastOptions={{
          duration: 4000,
          style: {
            background: "var(--color-surface)",
            color: "var(--color-text)",
            border: "1px solid var(--color-border)",
            borderRadius: "12px",
            padding: "12px 16px",
          },
          success: {
            iconTheme: {
              primary: "var(--color-success)",
              secondary: "white",
            },
          },
          error: {
            iconTheme: {
              primary: "var(--color-danger)",
              secondary: "white",
            },
          },
        }}
      />
    </div>
    </ThemeProvider>
  );
}