'use client';

import React from 'react';
import Link from 'next/link';
import Image from 'next/image';
import { usePathname } from 'next/navigation';
import {
  LayoutDashboard,
  Radio,
  Package,
  MapPin,
  CreditCard,
  ShoppingBag,
  ArrowLeft,
  Store,
  Users,
  MessageSquare,
  Building2,
  ShieldAlert,
  FileText,
  LogIn,
  Sparkles,
  MessageCircle,
} from 'lucide-react';
import { useAuth } from '@/context/AuthContext';
import { AuthModal } from '@/components/auth/AuthModal';

export default function AdminLayout({ children }: { children: React.ReactNode }) {
  const pathname = usePathname();
  const { user, isAdmin: authIsAdmin, openAuthModal } = useAuth();
  const isAdmin = Boolean(
    authIsAdmin ||
    (user && (
      user.role === 'admin' ||
      user.role === 'operator' ||
      (user.phone && user.phone.replace(/\D/g, '').endsWith('3167455877')) ||
      (user.email && (user.email.toLowerCase() === 'carlos.andres.lasso@gmail.com' || user.email.toLowerCase() === 'info@drip-zone.online'))
    ))
  );

  const NAV_ITEMS = [
    { href: '/admin', label: 'Resumen & KPIs', icon: LayoutDashboard },
    { href: '/admin/proveedores', label: 'Proveedores & Bodegas', icon: Building2, badge: 'Activos/Inactivos' },
    { href: '/admin/grupos-whatsapp', label: 'Grupos WhatsApp', icon: MessageSquare, badge: 'Monitoreo 24/7' },
    { href: '/admin/usuarios', label: 'Control de Usuarios', icon: Users, badge: 'Roles & Accesos' },
    { href: '/admin/plantillas', label: 'Plantillas de Mensajes', icon: FileText, badge: 'WhatsApp & OTP' },
    { href: '/admin/configuracion', label: 'Datos de la Tienda', icon: Store },
    { href: '/admin/feed-whatsapp', label: 'Feed WhatsApp & IA', icon: Radio, badge: 'Anti-Duplicados' },
    { href: '/admin/productos', label: 'Catálogo de Zapatillas', icon: Package },
    { href: '/admin/catalogo-whatsapp', label: 'Catálogo de WhatsApp', icon: MessageCircle, badge: 'Meta Commerce' },
    { href: '/admin/encargos', label: 'Encargos Especiales', icon: Sparkles, badge: 'Clientes' },
    { href: '/admin/ciudades', label: 'Ciudades & Fletes', icon: MapPin },
    { href: '/admin/metodos-pago', label: 'Medios de Pago & Anticipos', icon: CreditCard },
    { href: '/admin/pedidos', label: 'Pedidos & Logística', icon: ShoppingBag },
  ];


  if (!isAdmin) {
    return (
      <div className="min-h-screen bg-neutral-950 text-white flex flex-col items-center justify-center p-4">
        <div className="max-w-md w-full bg-neutral-900/90 border border-purple-500/30 rounded-3xl p-8 text-center space-y-6 shadow-2xl backdrop-blur-xl">
          <div className="w-16 h-16 rounded-2xl bg-purple-500/10 border border-purple-500/30 text-purple-400 flex items-center justify-center mx-auto shadow-inner">
            <ShieldAlert className="w-8 h-8" />
          </div>

          <div className="space-y-2">
            <h2 className="text-xl font-black tracking-tight text-white">Acceso Restringido para Administradores</h2>
            <p className="text-xs text-neutral-400 leading-relaxed">
              Este panel de control es de uso exclusivo para el equipo administrativo y operadores logísticos autorizados.
            </p>
          </div>

          <div className="space-y-3 pt-2">
            <button
              onClick={openAuthModal}
              className="w-full bg-gradient-to-r from-purple-600 to-fuchsia-500 hover:opacity-95 text-white font-black text-xs py-3.5 px-4 rounded-xl flex items-center justify-center gap-2 shadow-lg shadow-purple-600/30 cursor-pointer transition-all active:scale-95"
            >
              <LogIn className="w-4 h-4" />
              <span>Ingresar como Administrador</span>
            </button>

            <Link
              href="/"
              className="w-full bg-neutral-800 hover:bg-neutral-700 text-neutral-300 font-bold text-xs py-3 px-4 rounded-xl flex items-center justify-center gap-2 transition-all block"
            >
              <ArrowLeft className="w-4 h-4" />
              <span>Volver a la Tienda</span>
            </Link>
          </div>
        </div>

        <AuthModal />
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-neutral-950 text-neutral-100 flex flex-col md:flex-row font-sans">
      {/* Sidebar */}
      <aside className="w-full md:w-64 bg-neutral-900/90 backdrop-blur-xl border-r border-purple-500/20 flex flex-col justify-between shrink-0 p-4">
        <div className="space-y-6">
          {/* Logo */}
          <div className="flex items-center space-x-3 px-2">
            <div className="relative w-10 h-10 rounded-xl overflow-hidden border border-purple-500/40 shadow-[0_0_15px_rgba(168,85,247,0.4)] shrink-0 bg-neutral-950">
              <Image
                src="/d-emblem.png"
                alt="DripZone Admin"
                width={40}
                height={40}
                priority
                className="object-cover w-full h-full"
              />
            </div>
            <div>
              <h2 className="font-black text-sm text-white tracking-wider">DRIPZONE</h2>
              <p className="text-[10px] text-purple-400 font-bold uppercase tracking-widest">Backoffice Admin</p>
            </div>
          </div>

          {/* Navigation */}
          <nav className="space-y-1">
            {NAV_ITEMS.map((item) => {
              const Icon = item.icon;
              const isActive = pathname === item.href;
              return (
                <Link
                  key={item.href}
                  href={item.href}
                  className={`flex items-center justify-between px-3 py-2.5 rounded-xl text-xs font-bold transition-all ${
                    isActive
                      ? 'bg-gradient-to-r from-purple-600 to-fuchsia-500 text-white shadow-[0_0_15px_rgba(168,85,247,0.4)]'
                      : 'text-neutral-400 hover:text-white hover:bg-neutral-800'
                  }`}
                >
                  <div className="flex items-center space-x-2.5">
                    <Icon className="w-4 h-4" />
                    <span>{item.label}</span>
                  </div>
                  {item.badge && (
                    <span className="text-[9px] bg-purple-950 text-purple-300 border border-purple-500/30 px-1.5 py-0.5 rounded font-mono">
                      {item.badge}
                    </span>
                  )}
                </Link>
              );
            })}
          </nav>
        </div>

        {/* Return to Store */}
        <div className="pt-4 border-t border-neutral-800">
          <Link
            href="/"
            className="flex items-center space-x-2 text-xs font-semibold text-neutral-400 hover:text-purple-400 px-3 py-2 rounded-xl hover:bg-neutral-800 transition-all"
          >
            <ArrowLeft className="w-4 h-4" />
            <span>Volver a la Tienda</span>
          </Link>
        </div>
      </aside>

      {/* Main Content Area */}
      <main className="flex-1 p-4 sm:p-8 overflow-y-auto bg-neutral-950">
        {children}
      </main>

      <AuthModal />
    </div>
  );
}