import React, { ReactNode } from 'react';
import { Link, useLocation } from 'react-router-dom';
import { LayoutDashboard, ShoppingBag, Download, MapPin, Heart, User, LogOut } from 'lucide-react';
import { useModules } from '@/hooks/useModules';

interface AccountLayoutProps {
  children: ReactNode;
}

export function AccountLayout({ children }: AccountLayoutProps) {
  const location = useLocation();
  const user = (window as any).woonoowCustomer?.user;
  const { isEnabled } = useModules();
  const wishlistEnabled = (window as any).woonoowCustomer?.settings?.wishlist_enabled !== false;
  
  const allMenuItems = [
    { id: 'dashboard', label: 'Dashboard', path: '/my-account', icon: LayoutDashboard },
    { id: 'orders', label: 'Orders', path: '/my-account/orders', icon: ShoppingBag },
    { id: 'downloads', label: 'Downloads', path: '/my-account/downloads', icon: Download },
    { id: 'addresses', label: 'Addresses', path: '/my-account/addresses', icon: MapPin },
    { id: 'wishlist', label: 'Wishlist', path: '/my-account/wishlist', icon: Heart },
    { id: 'account-details', label: 'Account Details', path: '/my-account/account-details', icon: User },
  ];
  
  // Filter out wishlist if module disabled or settings disabled
  const menuItems = allMenuItems.filter(item => 
    item.id !== 'wishlist' || (isEnabled('wishlist') && wishlistEnabled)
  );

  const handleLogout = () => {
    window.location.href = '/wp-login.php?action=logout';
  };

  const isActive = (path: string) => {
    if (path === '/my-account') {
      return location.pathname === '/my-account';
    }
    return location.pathname.startsWith(path);
  };

  // Sidebar Navigation
  const SidebarNav = () => (
    <aside className="bg-white rounded-lg border p-4">
      <div className="mb-6">
        <div className="flex items-center gap-3 pb-4 border-b">
          <div className="w-12 h-12 rounded-full bg-gray-200 flex items-center justify-center">
            <User className="w-6 h-6 text-gray-600" />
          </div>
          <div>
            <p className="font-semibold">{user?.display_name || 'User'}</p>
            <p className="text-sm text-gray-500">{user?.email}</p>
          </div>
        </div>
      </div>
      
      <nav className="space-y-1">
        {menuItems.map((item) => {
          const Icon = item.icon;
          return (
            <Link
              key={item.id}
              to={item.path}
              className={`flex items-center gap-3 px-4 py-2.5 rounded-lg transition-colors ${
                isActive(item.path)
                  ? 'bg-primary text-primary-foreground'
                  : 'text-gray-700 hover:bg-gray-100'
              }`}
            >
              <Icon className="w-5 h-5" />
              <span className="font-medium">{item.label}</span>
            </Link>
          );
        })}
        
        <button
          onClick={handleLogout}
          className="w-full font-[inherit] flex items-center gap-3 px-4 py-2.5 rounded-lg text-gray-700 hover:bg-gray-100 transition-colors"
        >
          <LogOut className="w-5 h-5" />
          <span className="font-medium">Logout</span>
        </button>
      </nav>
    </aside>
  );

  // Tab Navigation (Mobile)
  const TabNav = () => (
    <div className="bg-white rounded-lg border mb-6 lg:hidden">
      <nav className="flex overflow-x-auto">
        {menuItems.map((item) => {
          const Icon = item.icon;
          return (
            <Link
              key={item.id}
              to={item.path}
              className={`flex items-center gap-2 px-6 py-4 border-b-2 transition-colors whitespace-nowrap text-sm ${
                isActive(item.path)
                  ? 'border-primary text-primary font-medium'
                  : 'border-transparent text-gray-600 hover:text-gray-900'
              }`}
            >
              <Icon className="w-5 h-5" />
              <span>{item.label}</span>
            </Link>
          );
        })}
      </nav>
    </div>
  );

  // Responsive layout: Tabs on mobile, Sidebar on desktop
  return (
    <div className="py-8">
      {/* Mobile: Tab Navigation */}
      <TabNav />
      
      {/* Desktop: Sidebar + Content */}
      <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
        <div className="hidden lg:block lg:col-span-1">
          <SidebarNav />
        </div>
        <div className="lg:col-span-3">
          <div className="bg-white rounded-lg border p-6">
            {children}
          </div>
        </div>
      </div>
    </div>
  );
}
