"use client";

import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import { formatCuisineDisplay } from '@/lib/cuisine';

interface RestaurantRow {
  id: number;
  name: string;
  address: string | null;
  postal_code: string | null;
  suburb: string | null;
  cuisine: string | null;
  is_fast_food: number;
  admin_image_url: string | null;
  osm_image_url: string | null;
  fallback_image_url: string | null;
  image_source_used: string | null;
}

function imageStatusLabel(r: RestaurantRow): { label: string; cls: string } {
  if (r.image_source_used === 'admin') return { label: 'Admin-Bild', cls: 'bg-yumder-pink/10 text-yumder-pink' };
  if (r.image_source_used === 'osm') return { label: 'OSM-Bild', cls: 'bg-yumder-teal/10 text-yumder-teal' };
  if (r.image_source_used === 'fallback') return { label: 'Symbolbild', cls: 'bg-amber-400/15 text-amber-600' };
  return { label: 'Kein Bild', cls: 'bg-adminmuted/15 text-adminmuted' };
}

export default function AdminRestaurantsPage() {
  const router = useRouter();
  const [q, setQ] = useState('');
  const [restaurants, setRestaurants] = useState<RestaurantRow[]>([]);
  const [loading, setLoading] = useState(false);
  const [searched, setSearched] = useState(false);
  const [editingId, setEditingId] = useState<number | null>(null);
  const [form, setForm] = useState({ name: '', cuisine: '', adminImageUrl: '', isFastFood: false });
  const [saving, setSaving] = useState(false);

  async function search(nextQ?: string) {
    const query = nextQ ?? q;
    setLoading(true);
    setSearched(true);
    try {
      const params = new URLSearchParams();
      if (query) params.set('q', query);
      params.set('limit', '100');
      const res = await fetch(`/api/admin/restaurants?${params.toString()}`);
      if (res.status === 401) {
        router.push('/admin');
        return;
      }
      if (!res.ok) return;
      const data = await res.json();
      setRestaurants(data.restaurants ?? []);
    } finally {
      setLoading(false);
    }
  }

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

  function startEdit(r: RestaurantRow) {
    setEditingId(r.id);
    setForm({
      name: r.name,
      cuisine: r.cuisine ?? '',
      adminImageUrl: r.admin_image_url ?? '',
      isFastFood: r.is_fast_food === 1,
    });
  }

  async function saveEdit(id: number) {
    setSaving(true);
    try {
      await fetch(`/api/admin/restaurants/${id}`, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          name: form.name,
          cuisine: form.cuisine,
          adminImageUrl: form.adminImageUrl,
          isFastFood: form.isFastFood,
        }),
      });
      setEditingId(null);
      search();
    } finally {
      setSaving(false);
    }
  }

  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">Restaurants</h2>
          <p className="text-sm text-adminmuted">
            Gecachte Restaurant-Daten durchsuchen und Name, Küche oder Bild manuell korrigieren.
          </p>
        </div>

        <form
          onSubmit={(e) => { e.preventDefault(); search(); }}
          className="flex gap-2 mb-6"
        >
          <input
            value={q}
            onChange={(e) => setQ(e.target.value)}
            placeholder="Name, Adresse, Küche oder Stadtteil suchen..."
            className="flex-1 rounded-lg border border-adminborder bg-white px-4 py-2.5 text-sm text-admintext focus:border-yumder-pink outline-none"
          />
          <button
            type="submit"
            className="bg-yumder-pink text-white font-semibold text-sm px-5 py-2.5 rounded-lg hover:opacity-90 transition-opacity"
          >
            Suchen
          </button>
        </form>

        {loading ? (
          <p className="text-adminmuted text-sm">Lade Restaurants...</p>
        ) : restaurants.length === 0 ? (
          <p className="text-adminmuted text-sm">
            {searched ? 'Keine Restaurants gefunden.' : 'Keine Restaurants im Cache.'}
          </p>
        ) : (
          <div className="glass overflow-hidden">
            <ul className="list-none p-0 m-0 divide-y divide-adminborder">
              {restaurants.map((r) => {
                const img = imageStatusLabel(r);
                const cuisineLabels = formatCuisineDisplay(r.cuisine);
                const isEditing = editingId === r.id;
                return (
                  <li key={r.id} className="px-5 py-4">
                    <div className="flex items-start justify-between gap-4">
                      <div className="min-w-0 flex-1">
                        <div className="flex items-center gap-2 flex-wrap">
                          <p className="font-semibold text-admintext">{r.name}</p>
                          {r.is_fast_food === 1 && (
                            <span className="text-[10px] font-bold uppercase px-2 py-0.5 rounded-full bg-orange-500/10 text-orange-600">
                              Fast Food
                            </span>
                          )}
                          <span className={`text-[10px] font-bold uppercase px-2 py-0.5 rounded-full ${img.cls}`}>
                            {img.label}
                          </span>
                        </div>
                        <p className="text-xs text-adminmuted mt-1">
                          {[r.address, r.postal_code, r.suburb].filter(Boolean).join(', ') || '—'}
                        </p>
                        {cuisineLabels.length > 0 && (
                          <p className="text-xs text-adminmuted mt-0.5">{cuisineLabels.join(' · ')}</p>
                        )}
                      </div>
                      <button
                        onClick={() => (isEditing ? setEditingId(null) : startEdit(r))}
                        className="shrink-0 text-sm font-semibold text-yumder-pink hover:underline"
                      >
                        {isEditing ? 'Abbrechen' : 'Bearbeiten'}
                      </button>
                    </div>

                    {isEditing && (
                      <div className="mt-4 grid gap-3 sm:grid-cols-2 border-t border-adminborder pt-4">
                        <label className="text-xs text-adminmuted flex flex-col gap-1">
                          Name
                          <input
                            value={form.name}
                            onChange={(e) => setForm((f) => ({ ...f, name: e.target.value }))}
                            className="rounded-lg border border-adminborder bg-white px-3 py-2 text-sm text-admintext focus:border-yumder-pink outline-none"
                          />
                        </label>
                        <label className="text-xs text-adminmuted flex flex-col gap-1">
                          Küche (kommagetrennt)
                          <input
                            value={form.cuisine}
                            onChange={(e) => setForm((f) => ({ ...f, cuisine: e.target.value }))}
                            className="rounded-lg border border-adminborder bg-white px-3 py-2 text-sm text-admintext focus:border-yumder-pink outline-none"
                          />
                        </label>
                        <label className="text-xs text-adminmuted flex flex-col gap-1 sm:col-span-2">
                          Bild-URL (leer = Override entfernen)
                          <input
                            value={form.adminImageUrl}
                            onChange={(e) => setForm((f) => ({ ...f, adminImageUrl: e.target.value }))}
                            placeholder="https://..."
                            className="rounded-lg border border-adminborder bg-white px-3 py-2 text-sm text-admintext focus:border-yumder-pink outline-none"
                          />
                        </label>
                        <label className="flex items-center gap-2 text-sm text-admintext sm:col-span-2">
                          <input
                            type="checkbox"
                            checked={form.isFastFood}
                            onChange={(e) => setForm((f) => ({ ...f, isFastFood: e.target.checked }))}
                          />
                          Als Fast Food markieren
                        </label>
                        <div className="sm:col-span-2">
                          <button
                            onClick={() => saveEdit(r.id)}
                            disabled={saving}
                            className="bg-yumder-teal text-white font-semibold text-sm px-5 py-2 rounded-lg hover:opacity-90 transition-opacity disabled:opacity-50"
                          >
                            {saving ? 'Speichere...' : 'Speichern'}
                          </button>
                        </div>
                      </div>
                    )}
                  </li>
                );
              })}
            </ul>
          </div>
        )}
      </div>
    </div>
  );
}