'use client'

import ProtectedRoute from '@/components/ProtectedRoute'
import { useAuth } from '@/contexts/AuthContext'
import Link from 'next/link'
import { usePathname } from 'next/navigation'
import {
  Users,
  Shield,
  UsersRound,
  Database,
  Settings,
  FileText,
  Activity,
  Mail,
  Key,
  Clock,
  Building2,
  LogOut,
  LayoutDashboard
} from 'lucide-react'

function AdminLayoutContent({ children }: { children: React.ReactNode }) {
  const { user, logout } = useAuth()
  const pathname = usePathname()

  const menuItems = [
    { icon: LayoutDashboard, label: 'لوحة التحكم', href: '/admin', exact: true },
    { icon: Users, label: 'إدارة المستخدمين', href: '/admin/users' },
    { icon: Shield, label: 'الأدوار والصلاحيات', href: '/admin/roles' },
    { icon: UsersRound, label: 'مجموعات الصلاحيات', href: '/admin/permission-groups' },
    { icon: Database, label: 'النسخ الاحتياطي', href: '/admin/backup' },
    { icon: Settings, label: 'إعدادات النظام', href: '/admin/settings' },
    { icon: FileText, label: 'سجل العمليات', href: '/admin/audit-logs' },
    { icon: Activity, label: 'صحة النظام', href: '/admin/health' },
    { icon: Mail, label: 'إعدادات البريد', href: '/admin/email' },
    { icon: Key, label: 'مفاتيح API', href: '/admin/api-keys' },
    { icon: Clock, label: 'المهام المجدولة', href: '/admin/scheduled-jobs' }
  ]

  const isActive = (href: string, exact?: boolean) => {
    if (exact) {
      return pathname === href
    }
    return pathname.startsWith(href)
  }

  return (
    <div className="min-h-screen bg-gray-50 flex">
      {/* Sidebar */}
      <aside className="w-64 bg-white border-l shadow-lg fixed h-full overflow-y-auto">
        <div className="p-6 border-b">
          <div className="flex items-center gap-3 mb-4">
            <div className="bg-red-600 p-2 rounded-lg">
              <Shield className="h-6 w-6 text-white" />
            </div>
            <div>
              <h2 className="text-lg font-bold text-gray-900">لوحة الإدارة</h2>
              <p className="text-xs text-gray-600">System Admin</p>
            </div>
          </div>
          <div className="bg-red-50 border border-red-200 rounded-lg p-3">
            <p className="text-xs font-semibold text-red-900">{user?.username}</p>
            <p className="text-xs text-red-700">{user?.role?.name}</p>
          </div>
        </div>

        <nav className="p-4">
          {menuItems.map((item) => {
            const Icon = item.icon
            const active = isActive(item.href, item.exact)
            return (
              <Link
                key={item.href}
                href={item.href}
                className={`flex items-center gap-3 px-4 py-3 rounded-lg mb-2 transition-all ${
                  active
                    ? 'bg-red-600 text-white shadow-md'
                    : 'text-gray-700 hover:bg-gray-100'
                }`}
              >
                <Icon className="h-5 w-5" />
                <span className="font-medium">{item.label}</span>
              </Link>
            )
          })}

          <hr className="my-4 border-gray-200" />

          <Link
            href="/dashboard"
            className="flex items-center gap-3 px-4 py-3 rounded-lg mb-2 text-gray-700 hover:bg-gray-100 transition-all"
          >
            <Building2 className="h-5 w-5" />
            <span className="font-medium">العودة للنظام</span>
          </Link>

          <button
            onClick={logout}
            className="w-full flex items-center gap-3 px-4 py-3 rounded-lg text-red-600 hover:bg-red-50 transition-all"
          >
            <LogOut className="h-5 w-5" />
            <span className="font-medium">تسجيل الخروج</span>
          </button>
        </nav>
      </aside>

      {/* Main Content */}
      <main className="mr-64 flex-1 p-8">
        {children}
      </main>
    </div>
  )
}

export default function AdminLayout({ children }: { children: React.ReactNode }) {
  return (
    <ProtectedRoute>
      <AdminLayoutContent>{children}</AdminLayoutContent>
    </ProtectedRoute>
  )
}

