"use client";

import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import { ADMIN_REFRESH_EVENT } from '@/components/admin-nav';

interface Coverage {
  totalRestaurants: number;
  withOsmImage: number;
  withAdminImage: number;
  withFallbackImage: number;
  noImage: number;
  unresolved: number;
  pexelsKeyConfigured: boolean;
  demandByCity: { city: string; sessions: number }[];
}

export default function AdminCoveragePage() {
  const router = useRouter();
  const [coverage, setCoverage] = useState<Coverage | null>(null);
  const [loading, setLoading] = useState(true);

  async function load() {
    setLoading(true);
    try {
      const res = await fetch('/api/admin/stats');
      if (res.status === 401) {
        router.push('/admin');
        return;
      }
      if (!res.ok) return;
      const data = await res.json();
      setCoverage(data.coverage ?? null);
    } finally {
      setLoading(false);
    }
  }

  useEffect(() => { load(); }, []);

  useEffect(() => {
    const handleRefresh = () => load();
    window.addEventListener(ADMIN_REFRESH_EVENT, handleRefresh);
    return () => window.removeEventListener(ADMIN_REFRESH_EVENT, handleRefresh);
  }, []);

  const withImage = coverage
    ? coverage.withOsmImage + coverage.withAdminImage + coverage.withFallbackImage
    : 0;

  return (
    <div className="p-6 lg:p-8 pb-24">
      <div className="max-w-5xl mx-auto">
        <div className="mb-6">
          <h2 className="text-lg font-semibold text-admintext">Abdeckung & Datenqualität</h2>
          <p className="text-sm text-adminmuted">
            Bild-Verfügbarkeit des Restaurant-Caches und Nachfrage pro Stadt.
          </p>
        </div>

        {loading && !coverage ? (
          <p className="text-adminmuted text-sm">Lade Abdeckung...</p>
        ) : coverage ? (
          <div className="flex flex-col gap-6">
            <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
              <div className="glass p-5">
                <p className="text-xs text-adminmuted uppercase tracking-wide font-bold">Restaurants im Cache</p>
                <p className="text-3xl font-bold text-admintext mt-2">{coverage.totalRestaurants}</p>
              </div>
              <div className="glass p-5">
                <p className="text-xs text-adminmuted uppercase tracking-wide font-bold">Mit Bild</p>
                <p className="text-3xl font-bold text-yumder-teal mt-2">{withImage}</p>
                <p className="text-xs text-adminmuted mt-2 leading-relaxed">
                  OSM {coverage.withOsmImage} · Pexels {coverage.withFallbackImage} · Admin {coverage.withAdminImage}
                </p>
              </div>
              <div className="glass p-5">
                <p className="text-xs text-adminmuted uppercase tracking-wide font-bold">Noch nicht aufgelöst</p>
                <p className="text-3xl font-bold text-blue-600 mt-2">{coverage.unresolved}</p>
                <p className="text-xs text-adminmuted mt-2 leading-relaxed">
                  Bild wird erst beim nächsten Erscheinen in einem Deck gesucht
                </p>
              </div>
              <div className="glass p-5">
                <p className="text-xs text-adminmuted uppercase tracking-wide font-bold">Ohne Bild</p>
                <p className="text-3xl font-bold text-admindanger mt-2">{coverage.noImage}</p>
                <p className="text-xs text-adminmuted mt-2 leading-relaxed">
                  weder OSM noch Pexels lieferten ein Bild
                </p>
              </div>
            </div>

            {!coverage.pexelsKeyConfigured && (
              <div className="rounded-xl border border-amber-400/30 bg-amber-400/10 px-4 py-3 text-sm text-amber-700">
                Hinweis: <code>PEXELS_API_KEY</code> ist in der Produktion nicht gesetzt. Der bestehende
                Bildervorrat ({coverage.withFallbackImage} verknüpfte + Pool) wird weiter genutzt, aber neue
                Kategorien können nicht nachgefüllt werden. Für frische Städte/Küchen bleiben Restaurants dann
                ohne Bild.
              </div>
            )}

            <div className="glass p-5">
              <p className="text-xs text-adminmuted uppercase tracking-wide font-bold mb-4">
                Nachfrage nach Stadt (Sessions, Lifetime)
              </p>
              {coverage.demandByCity.length === 0 ? (
                <p className="text-sm text-adminmuted">Noch keine Session-Daten.</p>
              ) : (
                <div className="overflow-x-auto">
                  <table className="w-full text-sm">
                    <thead>
                      <tr className="text-left text-adminmuted border-b border-adminborder">
                        <th className="py-2 pr-4 font-semibold">Stadt</th>
                        <th className="py-2 pr-4 font-semibold text-right">Sessions</th>
                      </tr>
                    </thead>
                    <tbody>
                      {coverage.demandByCity.map((c) => (
                        <tr key={c.city} className="border-b border-adminborder/60 last:border-b-0">
                          <td className="py-2 pr-4 text-admintext">{c.city}</td>
                          <td className="py-2 pr-4 text-right font-semibold tabular-nums text-admintext">{c.sessions}</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              )}
            </div>
          </div>
        ) : (
          <p className="text-adminmuted text-sm">Abdeckung nicht verfügbar.</p>
        )}
      </div>
    </div>
  );
}