'use client';

import React, { useState, useEffect } from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { 
  Users, 
  FileText, 
  Calendar, 
  BarChart3, 
  Settings, 
  MessageSquare,
  ShoppingCart,
  Download,
  Menu,
  X,
  LogOut,
  User,
  Shield,
  Activity,
  TrendingUp,
  DollarSign,
  BookOpen,
  Headphones,
  FileDown,
  Package,
  CreditCard,
  Mail
} from 'lucide-react';
import { AdminUser, AdminPermissions } from '../../types/admin';

interface AdminLayoutProps {
  children: React.ReactNode;
  currentUser?: AdminUser;
}

export const AdminLayout: React.FC<AdminLayoutProps> = ({ 
  children, 
  currentUser 
}) => {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  const pathname = usePathname();
  
  // Determine active tab based on current pathname
  const getActiveTab = () => {
    if (pathname?.startsWith('/admin/bookings')) return 'bookings';
    if (pathname?.startsWith('/admin/users')) return 'users';
    if (pathname?.startsWith('/admin/content')) return 'content';
    if (pathname?.startsWith('/admin/analytics')) return 'analytics';
    if (pathname?.startsWith('/admin/support')) return 'support';
    if (pathname?.startsWith('/admin/shop')) return 'shop';
    if (pathname?.startsWith('/admin/subscriptions')) return 'subscriptions';
    if (pathname?.startsWith('/admin/newsletter')) return 'newsletter';
    if (pathname?.startsWith('/admin/settings')) return 'settings';
    return 'dashboard';
  };
  
  const activeTab = getActiveTab();

  // Mock admin user - in real app this would come from auth context
  const mockAdminUser: AdminUser = {
    id: 'admin-1',
    email: 'arla@wolnaglowa.pl',
    name: 'Arla',
    role: 'super_admin',
    permissions: [
      'canManageUsers',
      'canManageContent',
      'canManageSubscriptions',
      'canManageBookings',
      'canViewAnalytics',
      'canManageSupport',
      'canManageSystem'
    ],
    lastLogin: new Date(),
    isActive: true,
    createdAt: new Date('2023-01-01'),
    updatedAt: new Date()
  };

  const adminUser = currentUser || mockAdminUser;
  
  // Ensure adminUser has permissions array
  if (!adminUser.permissions || !Array.isArray(adminUser.permissions)) {
    adminUser.permissions = mockAdminUser.permissions;
  }

  const navigationItems = [
    {
      id: 'dashboard',
      label: 'Dashboard',
      icon: <BarChart3 className="w-5 h-5" />,
      href: '/admin',
      permission: 'canViewAnalytics'
    },
    {
      id: 'users',
      label: 'Użytkownicy',
      icon: <Users className="w-5 h-5" />,
      href: '/admin/users',
      permission: 'canManageUsers'
    },
    {
      id: 'content',
      label: 'Treści',
      icon: <FileText className="w-5 h-5" />,
      href: '/admin/content',
      permission: 'canManageContent',
      subItems: [
        { id: 'episodes', label: 'Odcinki', icon: <Headphones className="w-4 h-4" /> },
        { id: 'articles', label: 'Artykuły', icon: <BookOpen className="w-4 h-4" /> },
        { id: 'downloads', label: 'Pobierania', icon: <FileDown className="w-4 h-4" /> },
        { id: 'products', label: 'Produkty', icon: <Package className="w-4 h-4" /> }
      ]
    },
    {
      id: 'bookings',
      label: 'Rezerwacje',
      icon: <Calendar className="w-5 h-5" />,
      href: '/admin/bookings',
      permission: 'canManageBookings'
    },
    {
      id: 'subscriptions',
      label: 'Subskrybcja',
      icon: <CreditCard className="w-5 h-5" />,
      href: '/admin/subscriptions',
      permission: 'canManageSubscriptions'
    },
    {
      id: 'newsletter',
      label: 'Newsletter',
      icon: <Mail className="w-5 h-5" />,
      href: '/admin/newsletter',
      permission: 'canManageContent'
    },
    {
      id: 'analytics',
      label: 'Analytics',
      icon: <TrendingUp className="w-5 h-5" />,
      href: '/admin/analytics',
      permission: 'canViewAnalytics'
    },
    {
      id: 'support',
      label: 'Wsparcie',
      icon: <MessageSquare className="w-5 h-5" />,
      href: '/admin/support',
      permission: 'canManageSupport'
    },
    {
      id: 'shop',
      label: 'Sklep',
      icon: <ShoppingCart className="w-5 h-5" />,
      href: '/admin/shop',
      permission: 'canManageContent'
    },
    {
      id: 'settings',
      label: 'Ustawienia',
      icon: <Settings className="w-5 h-5" />,
      href: '/admin/settings',
      permission: 'canManageSystem'
    }
  ];

  const hasPermission = (permission: string): boolean => {
    if (!adminUser || !adminUser.permissions || !Array.isArray(adminUser.permissions)) {
      return false;
    }
    return adminUser.permissions.includes(permission);
  };

  const filteredNavigation = navigationItems.filter(item => 
    hasPermission(item.permission)
  );

  const getRoleColor = (role: string) => {
    switch (role) {
      case 'super_admin': return 'bg-red-100 text-red-700';
      case 'admin': return 'bg-purple-100 text-purple-700';
      case 'content_manager': return 'bg-blue-100 text-blue-700';
      case 'support': return 'bg-green-100 text-green-700';
      default: return 'bg-gray-100 text-gray-700';
    }
  };

  const getRoleLabel = (role: string) => {
    switch (role) {
      case 'super_admin': return 'Super Admin';
      case 'admin': return 'Administrator';
      case 'content_manager': return 'Manager Treści';
      case 'support': return 'Wsparcie';
      default: return 'Użytkownik';
    }
  };

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

      {/* Sidebar */}
      <div
        className={`fixed inset-y-0 left-0 z-50 w-64 bg-white shadow-lg transform transition-transform duration-300 ease-in-out lg:translate-x-0 lg:static lg:inset-0 ${
          sidebarOpen ? 'translate-x-0' : '-translate-x-full'
        }`}
      >
        {/* Sidebar Header */}
        <div className="flex items-center justify-between h-16 px-6 border-b border-gray-200">
          <div className="flex items-center gap-3">
            <div className="w-8 h-8 bg-gradient-to-r from-orange-500 to-amber-500 rounded-lg flex items-center justify-center">
              <Shield className="w-5 h-5 text-white" />
            </div>
            <div>
              <h1 className="text-lg font-bold text-gray-900">Admin Panel</h1>
              <p className="text-xs text-gray-500">Wolna Głowa</p>
            </div>
          </div>
          <button
            onClick={() => setSidebarOpen(false)}
            className="lg:hidden p-1 text-gray-400 hover:text-gray-600 transition-colors cursor-pointer"
            type="button"
            aria-label="Zamknij menu"
          >
            <X className="w-5 h-5 pointer-events-none" />
          </button>
        </div>

        {/* Admin User Info */}
        <div className="p-4 border-b border-gray-200">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 bg-gradient-to-r from-orange-500 to-amber-500 rounded-full flex items-center justify-center">
              <User className="w-6 h-6 text-white" />
            </div>
            <div className="flex-1 min-w-0">
              <p className="text-sm font-medium text-gray-900 truncate">
                {adminUser.name}
              </p>
              <p className="text-xs text-gray-500 truncate">
                {adminUser.email}
              </p>
              <span className={`inline-block px-2 py-1 mt-1 text-xs font-medium rounded-full ${getRoleColor(adminUser.role)}`}>
                {getRoleLabel(adminUser.role)}
              </span>
            </div>
          </div>
        </div>

        {/* Navigation */}
        <nav className="flex-1 px-4 py-6 space-y-2 overflow-y-auto">
          {filteredNavigation.map((item) => (
            <div key={item.id}>
              <Link
                href={item.href}
                onClick={() => {
                  setSidebarOpen(false);
                }}
                className={`w-full flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-lg transition-colors ${
                  activeTab === item.id
                    ? 'bg-orange-100 text-orange-700'
                    : 'text-gray-700 hover:bg-gray-100'
                }`}
              >
                {item.icon}
                <span>{item.label}</span>
              </Link>
              
              {/* Sub-items */}
              {item.subItems && activeTab === item.id && (
                <div
                  className="ml-8 mt-2 space-y-1"
                >
                  {item.subItems.map((subItem) => (
                    <button
                      key={subItem.id}
                      className="w-full flex items-center gap-2 px-3 py-2 text-sm text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded-lg transition-colors"
                    >
                      {subItem.icon}
                      {subItem.label}
                    </button>
                  ))}
                </div>
              )}
            </div>
          ))}
        </nav>

        {/* Sidebar Footer */}
        <div className="p-4 border-t border-gray-200">
          <button className="w-full flex items-center gap-3 px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-lg transition-colors">
            <LogOut className="w-5 h-5" />
            Wyloguj się
          </button>
        </div>
      </div>

      {/* Main Content */}
      <div className="flex-1 flex flex-col lg:pl-64">
        {/* Top Bar */}
        <div className="fixed top-0 right-0 left-0 lg:left-64 z-30 bg-white border-b border-gray-200">
          <div className="flex items-center justify-between h-16 px-6">
            <div className="flex items-center gap-4">
              <button
                onClick={() => setSidebarOpen(true)}
                className="lg:hidden p-2 text-gray-400 hover:text-gray-600"
              >
                <Menu className="w-5 h-5" />
              </button>
              <h2 className="text-xl font-semibold text-gray-900">
                {filteredNavigation.find(item => item.id === activeTab)?.label || 'Dashboard'}
              </h2>
            </div>
            
            <div className="flex items-center gap-4">
              {/* Notifications */}
              <button className="p-2 text-gray-400 hover:text-gray-600 relative">
                <MessageSquare className="w-5 h-5" />
                <span className="absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full text-xs text-white flex items-center justify-center">
                  3
                </span>
              </button>
              
              {/* Activity Indicator */}
              <div className="flex items-center gap-2 text-sm text-gray-500">
                <Activity className="w-4 h-4" />
                <span>Ostatnie logowanie: {adminUser.lastLogin ? adminUser.lastLogin.toLocaleDateString('pl-PL') : 'Nigdy'}</span>
              </div>
            </div>
          </div>
        </div>

        {/* Page Content */}
        <main className="px-6 pb-6 pt-16">
          <div
            key={activeTab}
            className="animate-fade-in"
          >
            {children}
          </div>
        </main>
      </div>
    </div>
  );
};