// src/components/dashboard/DashboardSidebar.tsx
'use client';

import { useState } from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import {
  LayoutDashboard,
  Package,
  CreditCard,
  Settings,
  HelpCircle,
  LogOut,
  Menu,
  X,
} from 'lucide-react';
import { useUserStore } from '@/stores/userStore';

const navigation = [
  { name: 'Overview', href: '/dashboard', icon: LayoutDashboard },
  { name: 'My Orders', href: '/dashboard/orders', icon: Package },
  { name: 'Payments', href: '/dashboard/payments', icon: CreditCard },
  { name: 'Profile Settings', href: '/dashboard/profile', icon: Settings },
  { name: 'Support', href: '/dashboard/support', icon: HelpCircle },
];

interface User {
  id: string;
  first_name?: string;
  last_name?: string;
  email: string;
  avatar_url?: string;
}

interface DashboardSidebarProps {
  user: User;
}

function SidebarContent({ user, onClose }: { user: User; onClose?: () => void }) {
  const pathname = usePathname();
  const { logout } = useUserStore();

  return (
    <div className="flex flex-col h-full">
      {/* Brand */}
      <div className="h-16 flex items-center justify-between px-6 border-b border-gray-200 shrink-0">
        <Link href="/dashboard" className="flex items-center space-x-2">
          <div className="w-8 h-8 bg-linear-to-r from-[#0066FF] to-[#00D4FF] rounded-lg flex items-center justify-center">
            <span className="text-white font-bold text-lg">OE</span>
          </div>
          <span className="text-xl font-bold text-gray-900">OutreachExpert</span>
        </Link>
        {onClose && (
          <button
            onClick={onClose}
            className="lg:hidden p-2 text-gray-500 hover:text-gray-700 rounded-lg hover:bg-gray-100"
          >
            <X className="h-5 w-5" />
          </button>
        )}
      </div>

      {/* Nav */}
      <nav className="flex-1 overflow-y-auto py-6 px-4">
        <div className="space-y-1">
          {navigation.map((item) => {
            const isActive = pathname === item.href;
            return (
              <Link
                key={item.name}
                href={item.href}
                onClick={() => onClose?.()}
                className={`flex items-center space-x-3 px-4 py-3 text-sm font-medium rounded-xl transition-all ${
                  isActive
                    ? 'bg-linear-to-r from-[#0066FF]/10 to-[#00D4FF]/10 text-[#0066FF]'
                    : 'text-gray-700 hover:bg-gray-100'
                }`}
              >
                <item.icon className={`h-5 w-5 shrink-0 ${isActive ? 'text-[#0066FF]' : ''}`} />
                <span>{item.name}</span>
              </Link>
            );
          })}
        </div>
      </nav>

      {/* Footer */}
      <div className="p-4 border-t border-gray-200 shrink-0">
        <div className="flex items-center space-x-3 mb-4">
          <div className="w-10 h-10 bg-linear-to-r from-[#0066FF] to-[#00D4FF] rounded-full flex items-center justify-center shrink-0">
            <span className="text-white font-medium text-lg">
              {user.first_name?.[0] || user.email[0].toUpperCase()}
            </span>
          </div>
          <div className="flex-1 min-w-0">
            <p className="text-sm font-medium text-gray-900 truncate">
              {user.first_name ? `${user.first_name} ${user.last_name || ''}` : user.email.split('@')[0]}
            </p>
            <p className="text-xs text-gray-500 truncate">{user.email}</p>
          </div>
        </div>
        <button
          onClick={() => logout()}
          className="w-full flex items-center justify-center space-x-2 px-4 py-2 text-sm text-red-600 hover:bg-red-50 rounded-lg transition-colors"
        >
          <LogOut className="h-4 w-4" />
          <span>Sign Out</span>
        </button>
      </div>
    </div>
  );
}

export default function DashboardSidebar({ user }: DashboardSidebarProps) {
  const [isMobileOpen, setIsMobileOpen] = useState(false);

  return (
    <>
      {/*
        Desktop sidebar — NOT fixed, stays in normal flex flow.
        The parent wrapper (DashboardClientWrapper) is a flex row,
        so this sidebar sits to the left and the content fills the rest.
      */}
      <aside className="hidden lg:flex flex-col w-64 shrink-0 bg-white border-r border-gray-200 min-h-screen sticky top-0 h-screen overflow-y-auto">
        <SidebarContent user={user} />
      </aside>

      {/* Mobile hamburger button */}
      <button
        onClick={() => setIsMobileOpen(true)}
        className="lg:hidden fixed top-4 left-4 z-50 p-2 bg-white rounded-lg shadow-md border border-gray-200"
      >
        <Menu className="h-5 w-5" />
      </button>

      {/* Mobile sidebar overlay */}
      {isMobileOpen && (
        <>
          <div
            className="fixed inset-0 bg-black/50 z-40 lg:hidden"
            onClick={() => setIsMobileOpen(false)}
          />
          <aside className="fixed inset-y-0 left-0 z-50 w-64 bg-white shadow-xl lg:hidden flex flex-col">
            <SidebarContent user={user} onClose={() => setIsMobileOpen(false)} />
          </aside>
        </>
      )}
    </>
  );
}