'use client';

import { useState } from 'react';
import Link from 'next/link';
import Image from 'next/image';
import { usePathname } from 'next/navigation';
import { 
  LayoutDashboard, 
  Users, 
  Clock, 
  Receipt, 
  Server,
  Menu,
  X,
  ArrowLeft,
  ExternalLink,
  ShieldCheck,
  Terminal
} from 'lucide-react';

interface AdminUser {
  id: string;
  email: string | null;
  name: string | null;
}

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

  const navigation = [
    { name: 'Übersicht', href: '/admin', icon: LayoutDashboard },
    { name: 'Benutzer', href: '/admin/users', icon: Users },
    { name: 'Warteliste', href: '/admin/waitlist', icon: Clock },
    { name: 'Belege & OCR', href: '/admin/receipts', icon: Receipt },
    { name: 'System-Status', href: '/admin/system', icon: Server },
    { name: 'Docker Logs', href: '/admin/logs', icon: Terminal },
  ];

  return (
    <div className="min-h-screen bg-[#F8FAFC] flex font-sans text-slate-900">
      {/* Mobile menu toggle */}
      <button
        className="lg:hidden fixed top-4 right-4 z-50 p-2.5 bg-white text-slate-700 border border-[#E2E8F0] rounded-xl shadow-md"
        onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
        aria-label="Admin Navigation umschalten"
      >
        {isMobileMenuOpen ? <X size={20} /> : <Menu size={20} />}
      </button>

      {/* Sidebar (Light Mode) */}
      <aside className={`
        fixed inset-y-0 left-0 z-40 w-64 bg-white border-r border-[#E2E8F0] transform transition-transform duration-200 ease-in-out lg:translate-x-0 lg:static lg:block shadow-xs flex flex-col justify-between
        ${isMobileMenuOpen ? 'translate-x-0' : '-translate-x-full'}
      `}>
        <div className="flex flex-col flex-1 min-h-0">
          {/* Header & Logo */}
          <div className="h-20 flex items-center justify-between px-6 border-b border-[#E2E8F0]">
            <Link href="/admin" className="flex items-center gap-2.5 group">
              <div className="w-8 h-8 rounded-lg bg-black text-white flex items-center justify-center font-mono font-bold text-xs">
                SR
              </div>
              <div className="flex flex-col">
                <div className="flex items-center gap-1.5">
                  <span className="font-bold text-base tracking-tight text-slate-900">ScanReceipts</span>
                  <span className="font-mono text-[10px] uppercase tracking-wider bg-emerald-50 text-emerald-700 border border-emerald-200 px-1.5 py-0.2 rounded font-bold">
                    Admin
                  </span>
                </div>
                <span className="text-[11px] text-slate-600 font-mono">Operations Cockpit</span>
              </div>
            </Link>
          </div>

          {/* Navigation Links */}
          <nav className="flex-1 px-3 py-6 space-y-1.5 overflow-y-auto">
            <div className="px-3 pb-2 text-[11px] font-mono uppercase tracking-wider text-slate-600 font-semibold">
              Verwaltung
            </div>
            {navigation.map((item) => {
              const isActive = pathname === item.href;
              const Icon = item.icon;
              return (
                <Link
                  key={item.name}
                  href={item.href}
                  onClick={() => setIsMobileMenuOpen(false)}
                  className={`
                    flex items-center gap-3 px-3.5 py-2.5 rounded-xl text-sm font-medium transition-all
                    ${isActive 
                      ? 'bg-slate-900 text-white font-semibold shadow-xs' 
                      : 'text-slate-600 hover:text-slate-900 hover:bg-slate-100/80'
                    }
                  `}
                >
                  <Icon size={18} className={isActive ? 'text-white' : 'text-slate-600'} />
                  <span>{item.name}</span>
                </Link>
              );
            })}

            <div className="pt-6 px-3 pb-2 text-[11px] font-mono uppercase tracking-wider text-slate-600 font-semibold">
              App Links
            </div>
            <Link
              href="/dashboard"
              className="flex items-center justify-between px-3.5 py-2 rounded-xl text-xs font-mono text-slate-600 hover:text-slate-900 hover:bg-slate-100/80 transition-colors"
            >
              <span className="flex items-center gap-2">
                <ArrowLeft size={14} />
                User Dashboard
              </span>
              <ExternalLink size={12} className="text-slate-600" />
            </Link>
            <Link
              href="/de"
              className="flex items-center justify-between px-3.5 py-2 rounded-xl text-xs font-mono text-slate-600 hover:text-slate-900 hover:bg-slate-100/80 transition-colors"
            >
              <span>Landing Page</span>
              <ExternalLink size={12} className="text-slate-600" />
            </Link>
          </nav>

          {/* User Footer Profile */}
          <div className="p-4 border-t border-[#E2E8F0] bg-slate-50/60">
            <div className="flex items-center gap-3 px-2 py-1.5 rounded-xl">
              <div className="w-9 h-9 rounded-full bg-emerald-100 border border-emerald-200 flex items-center justify-center text-emerald-800 font-bold text-xs shrink-0">
                {user.email?.charAt(0).toUpperCase() || 'A'}
              </div>
              <div className="flex-1 min-w-0">
                <div className="flex items-center gap-1">
                  <p className="text-xs font-semibold text-slate-800 truncate">
                    {user.name || 'Admin'}
                  </p>
                  <ShieldCheck size={12} className="text-emerald-600 shrink-0" />
                </div>
                <p className="text-[11px] text-slate-600 font-mono truncate">
                  {user.email}
                </p>
              </div>
            </div>
          </div>
        </div>
      </aside>

      {/* Main Content Area */}
      <div className="flex-1 min-w-0 overflow-auto">
        <main className="p-4 sm:p-6 lg:p-8 max-w-7xl mx-auto">
          {children}
        </main>
      </div>
    </div>
  );
}
