'use client';

import { useState } from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import {
  LayoutDashboard,
  Users,
  Building2,
  TrendingUp,
  FileText,
  ClipboardList,
  Target,
  Menu,
  X,
  Ghost,
  ChevronDown,
  Settings,
  Bell,
} from 'lucide-react';

const navItems = [
  { href: '/apps/crm', label: 'Dashboard', icon: LayoutDashboard, exact: true },
  { href: '/apps/crm/leads', label: 'Leads', icon: Target },
  { href: '/apps/crm/customers', label: 'Customers', icon: Building2 },
  { href: '/apps/crm/opportunities', label: 'Opportunities', icon: TrendingUp },
  { href: '/apps/crm/quotes', label: 'Quotes', icon: FileText },
  { href: '/apps/crm/orders', label: 'Sales Orders', icon: ClipboardList },
];

export default function CRMLayout({ children }: { children: React.ReactNode }) {
  const pathname = usePathname();
  const [sidebarOpen, setSidebarOpen] = useState(false);

  return (
    <div className="min-h-screen bg-brand-bg">
      {/* Mobile sidebar backdrop */}
      {sidebarOpen && (
        <div
          className="fixed inset-0 bg-black/60 z-40 lg:hidden"
          onClick={() => setSidebarOpen(false)}
        />
      )}

      {/* Sidebar */}
      <aside
        className={`fixed top-0 left-0 h-full w-64 bg-brand-bg-elevated border-r border-brand-bg-surface/30 transform transition-transform duration-200 z-50 ${
          sidebarOpen ? 'translate-x-0' : '-translate-x-full'
        } lg:translate-x-0`}
      >
        <div className="flex items-center gap-3 p-4 border-b border-brand-bg-surface/30">
          <div className="w-10 h-10 bg-gradient-to-br from-brand-deep to-brand-secondary-deep rounded-lg flex items-center justify-center">
            <Ghost className="w-6 h-6 text-white" />
          </div>
          <div>
            <h1 className="font-bold text-white text-sm">GFS Sales</h1>
            <p className="text-xs text-brand">CRM Module</p>
          </div>
          <button
            onClick={() => setSidebarOpen(false)}
            className="lg:hidden ml-auto p-1 text-gray-400 hover:text-white"
          >
            <X className="w-5 h-5" />
          </button>
        </div>

        <nav className="p-4 space-y-1">
          {navItems.map((item) => {
            const isActive = item.exact 
              ? pathname === item.href 
              : pathname.startsWith(item.href) && item.href !== '/apps/crm';
            const Icon = item.icon;
            return (
              <Link
                key={item.href}
                href={item.href}
                className={`flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all ${
                  isActive
                    ? 'bg-gradient-to-r from-brand-deep/20 to-brand-secondary/20 text-brand border border-brand-deep/30'
                    : 'text-gray-400 hover:bg-white/5 hover:text-white'
                }`}
              >
                <Icon className="w-5 h-5" />
                {item.label}
              </Link>
            );
          })}
        </nav>

        <div className="absolute bottom-0 left-0 right-0 p-4 border-t border-brand-bg-surface/30">
          <Link
            href="/"
            className="flex items-center gap-2 text-sm text-gray-500 hover:text-brand transition-colors"
          >
            ← Back to GFS
          </Link>
        </div>
      </aside>

      {/* Main content */}
      <div className="lg:ml-64">
        {/* Top header */}
        <header className="bg-brand-bg-elevated/80 backdrop-blur-sm border-b border-brand-bg-surface/30 sticky top-0 z-30">
          <div className="flex items-center justify-between px-4 py-3">
            <button
              onClick={() => setSidebarOpen(true)}
              className="lg:hidden p-2 text-gray-400 hover:text-white"
            >
              <Menu className="w-5 h-5" />
            </button>

            <div className="flex items-center gap-4 ml-auto">
              <button className="p-2 text-gray-400 hover:text-brand relative">
                <Bell className="w-5 h-5" />
                <span className="absolute top-1 right-1 w-2 h-2 bg-brand-deep rounded-full" />
              </button>
              <div className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-white/5 border border-brand-bg-surface/30">
                <div className="w-8 h-8 rounded-full bg-gradient-to-br from-brand-deep to-brand-secondary-deep flex items-center justify-center text-white text-sm font-medium">
                  S
                </div>
                <span className="text-sm text-gray-300 hidden sm:block">Sales Rep</span>
                <ChevronDown className="w-4 h-4 text-gray-500" />
              </div>
            </div>
          </div>
        </header>

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