"use client";

import Link from 'next/link';
import { usePathname, useRouter } from 'next/navigation';
import { useEffect, useState } from 'react';

const TABS = [
  { href: '/admin/dashboard', label: 'Übersicht' },
  { href: '/admin/dashboard/insights', label: 'Sponsor-Insights' },
  { href: '/admin/dashboard/sponsors', label: 'Sponsoring' },
  { href: '/admin/dashboard/rankings', label: 'Rankings & Toplisten' },
  { href: '/admin/dashboard/restaurants', label: 'Restaurants' },
  { href: '/admin/dashboard/abdeckung', label: 'Abdeckung' },
  { href: '/admin/dashboard/errors', label: 'Fehler-Log' },
];

const LABELS: Record<string, string> = {
  '/admin/dashboard': 'Übersicht',
  '/admin/dashboard/insights': 'Sponsor-Insights',
  '/admin/dashboard/sponsors': 'Sponsoring',
  '/admin/dashboard/rankings': 'Rankings & Toplisten',
  '/admin/dashboard/restaurants': 'Restaurants',
  '/admin/dashboard/abdeckung': 'Abdeckung',
  '/admin/dashboard/errors': 'Fehler-Log',
};

export const ADMIN_REFRESH_EVENT = 'yumder-admin-refresh';

export function triggerAdminRefresh() {
  window.dispatchEvent(new Event(ADMIN_REFRESH_EVENT));
}

function MenuIcon({ className }: { className?: string }) {
  return (
    <svg viewBox="0 0 24 24" className={className} fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
      <path strokeLinecap="round" strokeLinejoin="round" d="M4 6h16M4 12h16M4 18h16" />
    </svg>
  );
}

export function AdminSidebar({ className = '', onNavigate }: { className?: string; onNavigate?: () => void }) {
  const pathname = usePathname();
  const router = useRouter();

  async function handleLogout() {
    await fetch('/api/admin/logout', { method: 'POST' });
    router.push('/admin');
  }

  return (
    <aside className={`w-64 lg:w-72 shrink-0 border-r border-slate-200 bg-slate-50 text-slate-700 min-h-screen flex flex-col ${className}`}>
      <div className="px-6 py-6 border-b border-slate-200">
        <p className="text-lg font-extrabold tracking-tight text-slate-900">
          Yumder <span className="text-yumder-pink">Admin</span>
        </p>
      </div>

      <nav className="flex-1 flex flex-col gap-1 px-3 py-4">
        {TABS.map((tab) => {
          const active = tab.href === '/admin/dashboard/sponsors'
            ? pathname === tab.href || pathname.startsWith(`${tab.href}/`)
            : pathname === tab.href;
          return (
            <Link
              key={tab.href}
              href={tab.href}
              onClick={onNavigate}
              className={`text-sm font-semibold px-4 py-2.5 rounded-xl transition-all ${
                active
                  ? 'bg-white text-slate-900 shadow-sm border border-slate-200'
                  : 'text-slate-600 hover:text-slate-900 hover:bg-white hover:border hover:border-slate-200'
              }`}
            >
              {tab.label}
            </Link>
          );
        })}
      </nav>

      <div className="px-3 py-4 border-t border-slate-200">
        <button
          onClick={handleLogout}
          className="w-full text-sm text-slate-600 hover:text-slate-900 border border-slate-200 rounded-xl px-4 py-2.5 transition-colors bg-white hover:bg-slate-50"
        >
          Abmelden
        </button>
      </div>
    </aside>
  );
}

export function AdminHeader({ onMenuClick }: { onMenuClick?: () => void }) {
  const pathname = usePathname();
  const [serverTime, setServerTime] = useState('—');
  const [lastUpdated, setLastUpdated] = useState('—');
  const label = pathname.startsWith('/admin/dashboard/sponsors/')
    ? 'Sponsoring'
    : (LABELS[pathname] ?? 'Übersicht');

  useEffect(() => {
    async function syncServerTime(force = false) {
      try {
        const res = await fetch(force ? '/api/admin/stats?refresh=1' : '/api/admin/stats', { cache: 'no-store' });
        if (!res.ok) return;
        const data = await res.json();
        if (!data?.serverTime) return;
        const value = new Date(data.serverTime);
        const formatted = value.toLocaleString('de-DE', {
          day: '2-digit',
          month: '2-digit',
          year: 'numeric',
          hour: '2-digit',
          minute: '2-digit',
        });
        setServerTime(formatted);
        setLastUpdated(formatted);
      } catch {
        // no-op, keep previous value
      }
    }

    syncServerTime();
    const handleRefresh = () => syncServerTime(true);
    window.addEventListener(ADMIN_REFRESH_EVENT, handleRefresh);
    return () => window.removeEventListener(ADMIN_REFRESH_EVENT, handleRefresh);
  }, []);

  return (
    <header className="flex items-center justify-between gap-3 px-4 sm:px-6 lg:px-8 py-4 border-b border-slate-200 bg-white/80 backdrop-blur-sm sticky top-0 z-10">
      <div className="flex items-center gap-3">
        <button
          onClick={onMenuClick}
          className="lg:hidden shrink-0 text-slate-700 hover:text-slate-900 p-1 -ml-1"
          aria-label="Menü öffnen"
        >
          <MenuIcon className="w-6 h-6" />
        </button>
        <nav className="text-sm text-slate-500">
          <span>Dashboard</span>
          <span className="mx-1.5 text-slate-300">/</span>
          <span className="font-semibold text-slate-900">{label}</span>
        </nav>
      </div>
      <div className="flex items-center gap-3">
        <div className="hidden sm:flex items-center gap-3 text-[11px] font-semibold uppercase tracking-[0.12em] text-slate-500">
          <span>Server: {serverTime}</span>
          <span className="text-slate-300">|</span>
          <span>Aktualisiert: {lastUpdated}</span>
        </div>
        <button
          onClick={triggerAdminRefresh}
          className="text-sm bg-slate-900 text-white font-semibold px-4 py-2 rounded-lg hover:bg-slate-800 transition-colors"
        >
          Aktualisieren
        </button>
      </div>
    </header>
  );
}

export function AdminShell({ children }: { children: React.ReactNode }) {
  const [mobileOpen, setMobileOpen] = useState(false);

  return (
    <div className="flex min-h-screen bg-neutral-50">
      <AdminSidebar className="hidden lg:flex" />
      {mobileOpen && (
        <div className="fixed inset-0 z-50 lg:hidden">
          <div className="absolute inset-0 bg-black/40" onClick={() => setMobileOpen(false)} />
          <AdminSidebar className="relative z-10" onNavigate={() => setMobileOpen(false)} />
        </div>
      )}
      <div className="flex-1 flex flex-col min-w-0 text-admintext">
        <AdminHeader onMenuClick={() => setMobileOpen(true)} />
        <main className="flex-1">{children}</main>
      </div>
    </div>
  );
}