"use client";

import React, { useState } from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { 
  LayoutDashboard, 
  Package, 
  Image as ImageIcon, 
  FileText, 
  Users, 
  MessageSquare, 
  Settings, 
  LogOut, 
  Menu, 
  X, 
  ShieldAlert
} from 'lucide-react';
import { signOut } from "next-auth/react";

export default function AdminLayout({ children }: { children: React.ReactNode }) {
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  const pathname = usePathname();

  const getLinkClasses = (path: string) => {
    // Check if the current path includes the link path, ignoring the language prefix
    const isActive = pathname.includes(path);
    return isActive
      ? 'flex items-center gap-3 px-4 py-3 bg-[#dc2626] text-white rounded-lg font-bold transition-colors shadow-lg'
      : 'flex items-center gap-3 px-4 py-3 text-gray-400 hover:bg-[#1a1a1a] hover:text-white rounded-lg font-medium transition-colors';
  };

  return (
    <div className="min-h-screen flex bg-[#f9fafb] text-gray-900 font-sans">
      {/* Mobile Sidebar Overlay */}
      {isMobileMenuOpen && (
        <div
          className="fixed inset-0 bg-black/50 z-40 md:hidden backdrop-blur-sm"
          onClick={() => setIsMobileMenuOpen(false)}
        />
      )}

      {/* Sidebar - Dark Industrial Theme */}
      <aside className={`fixed inset-y-0 left-0 z-50 w-64 bg-[#111111] border-r border-[#222222] flex flex-col transform transition-transform duration-300 ease-in-out md:static md:translate-x-0 shadow-2xl ${isMobileMenuOpen ? 'translate-x-0' : '-translate-x-full'}`}>
        <div className="h-20 flex items-center justify-center border-b border-[#222222] shrink-0">
          <Link href="/" className="text-white font-black text-xl tracking-wider flex items-center gap-2">
            <img src="/uploads/logo-dark.png" alt="K CREATION" className="h-8 w-auto bg-white/90 px-2 py-1 rounded" />
            <span className="text-[10px] bg-[#dc2626] text-white px-1.5 py-0.5 rounded font-bold ml-1">ADMIN</span>
          </Link>
          <button className="md:hidden absolute right-4 text-gray-400 hover:text-white" onClick={() => setIsMobileMenuOpen(false)}>
            <X className="w-6 h-6" />
          </button>
        </div>

        <nav className="flex-1 px-4 py-6 overflow-y-auto space-y-2 custom-scrollbar">
          <div className="mb-6">
            <p className="text-[10px] font-black tracking-widest text-gray-500 uppercase px-4 mb-2">Général</p>
            <Link href="/fr/admin" onClick={() => setIsMobileMenuOpen(false)} className={getLinkClasses('/admin')}>
              <LayoutDashboard className="w-5 h-5" /> <span>Tableau de bord</span>
            </Link>
          </div>

          <div className="mb-6">
            <p className="text-[10px] font-black tracking-widest text-gray-500 uppercase px-4 mb-2">Gestion</p>
            <Link href="/fr/admin/products" onClick={() => setIsMobileMenuOpen(false)} className={getLinkClasses('/admin/products')}>
              <Package className="w-5 h-5" /> <span>Produits</span>
            </Link>
            <Link href="/fr/admin/carousel" onClick={() => setIsMobileMenuOpen(false)} className={getLinkClasses('/admin/carousel')}>
              <ImageIcon className="w-5 h-5" /> <span>Carrousel</span>
            </Link>
            <Link href="/fr/admin/blogs" onClick={() => setIsMobileMenuOpen(false)} className={getLinkClasses('/admin/blogs')}>
              <FileText className="w-5 h-5" /> <span>Articles & Blogs</span>
            </Link>
          </div>

          <div className="mb-6">
            <p className="text-[10px] font-black tracking-widest text-gray-500 uppercase px-4 mb-2">Confiance & Preuve</p>
            <Link href="/fr/admin/clients" onClick={() => setIsMobileMenuOpen(false)} className={getLinkClasses('/admin/clients')}>
              <Users className="w-5 h-5" /> <span>Clients (Logos)</span>
            </Link>
            <Link href="/fr/admin/testimonials" onClick={() => setIsMobileMenuOpen(false)} className={getLinkClasses('/admin/testimonials')}>
              <MessageSquare className="w-5 h-5" /> <span>Témoignages</span>
            </Link>
          </div>

          <div className="mb-6">
            <p className="text-[10px] font-black tracking-widest text-gray-500 uppercase px-4 mb-2">Système</p>
            <Link href="/fr/admin/footer" onClick={() => setIsMobileMenuOpen(false)} className={getLinkClasses('/admin/footer')}>
              <Settings className="w-5 h-5" /> <span>Pied de page</span>
            </Link>
          </div>
        </nav>

        <div className="p-4 border-t border-[#222222] shrink-0">
          <button 
            onClick={() => signOut({ callbackUrl: '/fr/login' })}
            className="w-full flex items-center gap-3 px-4 py-3 text-gray-400 hover:bg-[#1a1a1a] hover:text-[#dc2626] rounded-lg font-bold transition-colors cursor-pointer"
          >
            <LogOut className="w-5 h-5" />
            <span>Quitter l'Admin</span>
          </button>
        </div>
      </aside>

      {/* Main Content Area */}
      <div className="flex-1 flex flex-col min-w-0 h-screen overflow-hidden">
        {/* Top Header */}
        <header className="h-20 bg-white border-b border-gray-200 flex items-center justify-between px-6 z-10 shrink-0 shadow-sm">
          <div className="flex items-center gap-4">
            <button className="md:hidden text-gray-600 hover:text-[#dc2626] transition-colors" onClick={() => setIsMobileMenuOpen(true)}>
              <Menu className="w-7 h-7" />
            </button>
            <h2 className="text-xl font-black text-gray-800 hidden sm:block">Administration K-Creation</h2>
          </div>
          <div className="flex items-center gap-4">
            <div className="flex items-center gap-3 bg-gray-50 border border-gray-200 px-4 py-2 rounded-full">
              <ShieldAlert className="w-4 h-4 text-[#dc2626]" />
              <span className="text-sm font-bold text-gray-700">Mode Administrateur</span>
            </div>
          </div>
        </header>

        {/* Page Content */}
        <main className="flex-1 overflow-auto p-6 md:p-8 bg-[#f4f4f5]">
          <div className="max-w-7xl mx-auto">
            {children}
          </div>
        </main>
      </div>
    </div>
  );
}