"use client";

import React, { useState, useEffect } from "react";
import { Navbar } from "./navbar";
import { Sidebar } from "./sidebar";
import { ImportContactsModalProvider } from "@/modules/contacts/context/import-contacts-modal-context";

interface DashboardLayoutProps {
  children: React.ReactNode;
  user?: {
    name?: string | null;
    email?: string | null;
  };
}

export function DashboardLayout({ children, user }: DashboardLayoutProps) {
  const [isExpanded, setIsExpanded] = useState(true);
  const [isMobileOpen, setIsMobileOpen] = useState(false);
  const [isMounted, setIsMounted] = useState(false);

  useEffect(() => {
    setIsMounted(true);
    const saved = localStorage.getItem("newsletter_sidebar_expanded");
    if (saved !== null) {
      setIsExpanded(saved === "true");
    }
  }, []);

  const toggleExpand = () => {
    setIsExpanded((prev) => {
      const next = !prev;
      localStorage.setItem("newsletter_sidebar_expanded", String(next));
      return next;
    });
  };

  const toggleMobile = () => {
    setIsMobileOpen((prev) => !prev);
  };

  return (
    <ImportContactsModalProvider>
      <div className="min-h-screen bg-zinc-50 text-zinc-900 flex flex-col font-sans antialiased selection:bg-[#E7F6FD] selection:text-[#0F9FDF]">
        {/* Sticky Top Navbar */}
        <Navbar
          user={user}
          isSidebarExpanded={isExpanded}
          onToggleSidebar={toggleExpand}
          onOpenMobileMenu={toggleMobile}
        />

        {/* Main Container below Navbar */}
        <div className="flex flex-1 overflow-hidden relative">
          {/* Fixed Desktop Sidebar & Mobile Drawer */}
          <Sidebar
            isExpanded={isExpanded}
            onToggleExpand={toggleExpand}
            isMobileOpen={isMobileOpen}
            onCloseMobile={() => setIsMobileOpen(false)}
          />

          {/* Dynamic Main Content Area */}
          <main
            className={`flex-1 min-w-0 overflow-y-auto h-[calc(100vh-3.5rem)] transition-all duration-300 bg-zinc-50/50 ${
              isMounted && isExpanded ? "lg:ml-64" : "lg:ml-16"
            }`}
          >
            {children}
          </main>
        </div>
      </div>
    </ImportContactsModalProvider>
  );
}