import { useState, type ReactNode } from 'react';
import { Sidebar } from './Sidebar';
import { Bell, Menu, X } from 'lucide-react';

interface DashboardLayoutProps {
  children: (activeTab: string) => ReactNode;
  defaultTab?: string;
}

export function DashboardLayout({
  children,
  defaultTab = 'overview',
}: DashboardLayoutProps) {
  const [activeTab, setActiveTab] = useState(defaultTab);
  const [mobileOpen, setMobileOpen] = useState(false);

  return (
    <div className="min-h-screen bg-surface-0">
      {/* Desktop sidebar */}
      <div className="hidden lg:block">
        <Sidebar activeTab={activeTab} onTabChange={setActiveTab} />
      </div>

      {/* Mobile sidebar overlay */}
      {mobileOpen && (
        <div className="lg:hidden fixed inset-0 z-50">
          <div
            className="absolute inset-0 bg-black/50"
            onClick={() => setMobileOpen(false)}
          />
          <div className="relative w-64">
            <Sidebar
              activeTab={activeTab}
              onTabChange={(tab) => {
                setActiveTab(tab);
                setMobileOpen(false);
              }}
            />
          </div>
        </div>
      )}

      {/* Main content */}
      <div className="lg:pl-64">
        {/* Top bar */}
        <header className="sticky top-0 z-30 glass border-b border-surface-300">
          <div className="flex items-center justify-between px-6 py-3">
            <button
              className="lg:hidden p-2 rounded-lg hover:bg-surface-200 text-zinc-400 cursor-pointer"
              onClick={() => setMobileOpen(!mobileOpen)}
            >
              {mobileOpen ? (
                <X className="h-5 w-5" />
              ) : (
                <Menu className="h-5 w-5" />
              )}
            </button>
            <div className="flex-1" />
            <button className="p-2 rounded-lg hover:bg-surface-200 text-zinc-400 transition-colors relative cursor-pointer">
              <Bell className="h-5 w-5" />
              <span className="absolute top-1.5 right-1.5 h-2 w-2 rounded-full bg-brand-500" />
            </button>
          </div>
        </header>

        {/* Page content */}
        <main className="p-6 lg:p-8">{children(activeTab)}</main>
      </div>
    </div>
  );
}
