"use client";

import { useState, useCallback } from "react";
import Link from "next/link";
import { toast } from "sonner";
import { LoadingCard, type LeadResult } from "@/components/search/LoadingCard";
import { AiSearchModal } from "@/components/search/AiSearchModal";

export default function SuchePage() {
  const [query, setQuery] = useState("");
  const [region, setRegion] = useState("");
  const [count, setCount] = useState(50);
  const [loading, setLoading] = useState(false);
  const [jobId, setJobId] = useState<string | null>(null);
  const [leads, setLeads] = useState<LeadResult[]>([]);
  const [searchDone, setSearchDone] = useState(false);
  const [selected, setSelected] = useState<Set<string>>(new Set());
  const [deleting, setDeleting] = useState(false);
  const [onlyNew, setOnlyNew] = useState(false);
  const [saveOnlyNew, setSaveOnlyNew] = useState(false);
  const [aiOpen, setAiOpen] = useState(false);
  const [queueRunning, setQueueRunning] = useState(false);
  const [queueIndex, setQueueIndex] = useState(0);
  const [queueTotal, setQueueTotal] = useState(0);
  const [queueLabel, setQueueLabel] = useState("");
  const [industrieRunning, setIndustrieRunning] = useState(false);
  const [industrieIndex, setIndustrieIndex] = useState(0);
  const [industrieTotal, setIndustrieTotal] = useState(0);
  const [industrieLabel, setIndustrieLabel] = useState("");

  const INDUSTRIE_TERMS = ["Netzbetreiber", "Fernwärme", "Industriepark"];

  const BUNDESLAENDER = [
    "Bayern", "NRW", "Baden-Württemberg", "Hessen", "Niedersachsen",
    "Sachsen", "Berlin", "Hamburg", "Bremen", "Thüringen",
    "Sachsen-Anhalt", "Brandenburg", "Mecklenburg-Vorpommern",
    "Saarland", "Rheinland-Pfalz", "Schleswig-Holstein",
  ];

  function handleChange(field: "query" | "region" | "count", value: string | number) {
    if (field === "query") setQuery(value as string);
    if (field === "region") setRegion(value as string);
    if (field === "count") setCount(value as number);
  }

  async function handleSubmit() {
    if (!query.trim() || loading) return;
    setLoading(true);
    setJobId(null);
    setLeads([]);
    setSearchDone(false);
    setSelected(new Set());
    setOnlyNew(false);
    // saveOnlyNew intentionally kept — user setting persists across searches
    try {
      const res = await fetch("/api/search", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ query: query.trim(), region: region.trim(), count }),
      });
      if (!res.ok) {
        const err = await res.json() as { error?: string };
        throw new Error(err.error || "Fehler beim Starten der Suche");
      }
      const data = await res.json() as { jobId: string };
      setJobId(data.jobId);
    } catch (err) {
      const msg = err instanceof Error ? err.message : "Unbekannter Fehler";
      toast.error(msg);
      setLoading(false);
    }
  }

  const handleDone = useCallback((result: LeadResult[], warning?: string) => {
    setLoading(false);
    setLeads(result);
    setSearchDone(true);
    // Fire-and-forget KI-Anreicherung
    if (jobId) {
      fetch("/api/enrich-leads", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ jobId }),
      }).catch(() => {});
    }
    if (warning) {
      toast.warning(`${result.length} Unternehmen gefunden — E-Mail-Anreicherung fehlgeschlagen: ${warning}`, { duration: 6000 });
    } else {
      toast.success(`✓ ${result.length} Leads gefunden und im Leadspeicher gespeichert`, { duration: 4000 });
    }
  }, [jobId]);

  async function runSearchAndWait(query: string, region: string, historyMode = "stadtwerke") {
    try {
      const res = await fetch("/api/search", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ query, region, count: 50 }),
      });
      const data = await res.json() as { jobId?: string };
      if (!data.jobId) return;
      // Save to history
      fetch("/api/search-history", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ query, region, searchMode: historyMode }),
      }).catch(() => {});
      // Poll until done
      await new Promise<void>((resolve) => {
        const interval = setInterval(async () => {
          try {
            const statusRes = await fetch(`/api/jobs/${data.jobId}/status`);
            const status = await statusRes.json() as { status: string };
            if (status.status === "complete" || status.status === "failed") {
              clearInterval(interval);
              resolve();
            }
          } catch { clearInterval(interval); resolve(); }
        }, 3000);
      });
    } catch { /* continue with next */ }
  }

  async function startStadtwerkeQueue() {
    if (loading || queueRunning) return;
    setQueueRunning(true);
    setQueueIndex(0);
    setLeads([]);
    setSearchDone(false);

    // Fetch already-used regions to skip Bundesländer already done
    let usedRegions = new Set<string>();
    try {
      const hRes = await fetch("/api/search-history?mode=stadtwerke");
      if (hRes.ok) {
        const hist = await hRes.json() as Array<{ region: string }>;
        usedRegions = new Set(hist.map(h => h.region));
      }
    } catch { /* ignore */ }

    // Phase 1: Unused Bundesländer
    const unusedBL = BUNDESLAENDER.filter(bl => !usedRegions.has(bl));

    // Phase 2: Next batch of unused cities
    let cities: string[] = [];
    try {
      const cRes = await fetch("/api/stadtwerke-cities?count=50");
      if (cRes.ok) {
        const cData = await cRes.json() as { cities: string[]; exhausted: boolean };
        cities = cData.cities;
        if (cData.exhausted) {
          toast.info("Alle vordefinierten Städte durchsucht — KI generiert neue Vorschläge", { duration: 4000 });
        }
      }
    } catch { /* ignore */ }

    const allTargets = [
      ...unusedBL.map(bl => ({ label: `Bundesland: ${bl}`, query: "Stadtwerke", region: bl })),
      ...cities.map(city => ({ label: `Stadt: ${city}`, query: "Stadtwerke", region: city })),
    ];

    if (allTargets.length === 0) {
      setQueueRunning(false);
      toast.info("Alle bekannten Regionen wurden bereits durchsucht", { duration: 4000 });
      return;
    }

    setQueueTotal(allTargets.length);

    for (let i = 0; i < allTargets.length; i++) {
      const target = allTargets[i];
      setQueueIndex(i + 1);
      setQueueLabel(target.label);
      await runSearchAndWait(target.query, target.region);
    }

    setQueueRunning(false);
    const blCount = unusedBL.length;
    const cityCount = cities.length;
    const parts = [];
    if (blCount > 0) parts.push(`${blCount} Bundesländer`);
    if (cityCount > 0) parts.push(`${cityCount} Städte`);
    toast.success(`✓ ${parts.join(" + ")} durchsucht — Leads im Leadspeicher`, { duration: 5000 });
  }

  async function startIndustrieQueue() {
    if (loading || queueRunning || industrieRunning) return;
    setIndustrieRunning(true);
    setIndustrieIndex(0);

    // Load already-searched [term::location] combos
    let usedKeys = new Set<string>();
    try {
      const hRes = await fetch("/api/search-history?mode=industrie");
      if (hRes.ok) {
        const hist = await hRes.json() as Array<{ region: string }>;
        usedKeys = new Set(hist.map(h => h.region));
      }
    } catch { /* ignore */ }

    // Cities data (inline priority order)
    const BW_CITIES = [
      "Stuttgart","Karlsruhe","Mannheim","Freiburg","Heidelberg","Ulm","Heilbronn","Pforzheim","Reutlingen","Ludwigsburg",
      "Esslingen","Tübingen","Villingen-Schwenningen","Konstanz","Aalen","Friedrichshafen","Sindelfingen","Ravensburg","Offenburg","Göppingen",
      "Böblingen","Schwäbisch Gmünd","Lahr","Waiblingen","Baden-Baden","Bruchsal","Weinheim","Leonberg","Bietigheim-Bissingen","Heidenheim",
      "Schwäbisch Hall","Nagold","Singen","Nürtingen","Fellbach","Tuttlingen","Überlingen","Backnang","Ditzingen","Kirchheim",
      "Schorndorf","Filderstadt","Leinfelden-Echterdingen","Ettlingen","Weil am Rhein","Rottenburg","Rheinfelden","Leutkirch","Mosbach","Crailsheim",
    ];
    const BAYERN_CITIES = [
      "München","Nürnberg","Augsburg","Regensburg","Ingolstadt","Würzburg","Fürth","Erlangen","Bayreuth","Landshut",
      "Rosenheim","Kempten","Bamberg","Aschaffenburg","Neu-Ulm","Schweinfurt","Ansbach","Straubing","Passau","Coburg",
      "Dachau","Freising","Germering","Memmingen","Kaufbeuren","Hof","Amberg","Weiden","Pfaffenhofen","Starnberg",
      "Traunreut","Gauting","Garching","Erding","Fürstenfeldbruck","Unterschleißheim","Waldkraiburg","Marktoberdorf","Neumarkt","Altötting",
      "Weißenburg","Schwabach","Deggendorf","Traunstein","Burghausen","Bad Reichenhall","Neuburg an der Donau","Kelheim","Dillingen","Günzburg",
    ];
    const OTHER_BL = ["NRW","Hessen","Niedersachsen","Sachsen","Berlin","Hamburg","Bremen","Thüringen","Sachsen-Anhalt","Brandenburg","Mecklenburg-Vorpommern","Saarland","Rheinland-Pfalz","Schleswig-Holstein"];

    // Build priority targets: BW + Bayern first, then rest
    const priorityLocations = [
      "Baden-Württemberg",
      ...BW_CITIES,
      "Bayern",
      ...BAYERN_CITIES,
    ];
    const restLocations = OTHER_BL;

    // All [term, location] combos in priority order
    const allTargets: Array<{ label: string; term: string; location: string }> = [];
    for (const loc of [...priorityLocations, ...restLocations]) {
      for (const term of INDUSTRIE_TERMS) {
        const key = `${term}::${loc}`;
        if (!usedKeys.has(key)) {
          allTargets.push({ label: `${term} · ${loc}`, term, location: loc });
        }
      }
    }

    if (allTargets.length === 0) {
      setIndustrieRunning(false);
      toast.info("Alle Energieversorger-Suchen wurden bereits durchgeführt", { duration: 4000 });
      return;
    }

    setIndustrieTotal(allTargets.length);

    for (let i = 0; i < allTargets.length; i++) {
      const t = allTargets[i];
      setIndustrieIndex(i + 1);
      setIndustrieLabel(t.label);
      await runSearchAndWait(t.term, t.location, "industrie");
      // Override the region saved in history with the key so we can track term+location combos
      fetch("/api/search-history", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ query: t.term, region: `${t.term}::${t.location}`, searchMode: "industrie" }),
      }).catch(() => {});
    }

    setIndustrieRunning(false);
    toast.success(`✓ ${allTargets.length} Energieversorger-Suchen abgeschlossen — Leads im Leadspeicher`, { duration: 5000 });
  }

  async function handleDelete(ids: string[]) {
    if (!ids.length || deleting) return;
    setDeleting(true);
    try {
      await fetch("/api/leads/delete-from-results", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ resultIds: ids }),
      });
      setLeads(prev => prev.filter(l => !ids.includes(l.id)));
      setSelected(prev => {
        const next = new Set(prev);
        ids.forEach(id => next.delete(id));
        return next;
      });
      toast.success(`${ids.length} Lead${ids.length > 1 ? "s" : ""} gelöscht`);
    } catch {
      toast.error("Löschen fehlgeschlagen");
    } finally {
      setDeleting(false);
    }
  }

  async function handleSaveOnlyNew() {
    const existingIds = leads.filter(l => !l.isNew).map(l => l.id);
    if (!existingIds.length || deleting) return;
    setDeleting(true);
    try {
      await fetch("/api/leads/delete-from-results", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ resultIds: existingIds }),
      });
      setSaveOnlyNew(true);
      const newCount = leads.filter(l => l.isNew).length;
      toast.success(`✓ ${newCount} neue Leads behalten, ${existingIds.length} vorhandene aus Leadspeicher entfernt`, { duration: 5000 });
    } catch {
      toast.error("Fehler beim Bereinigen");
    } finally {
      setDeleting(false);
    }
  }

  const handleError = useCallback((message: string) => {
    setLoading(false);
    setJobId(null);
    toast.error(`Suche fehlgeschlagen: ${message}`);
  }, []);

  return (
    <div className="pb-12 px-8 max-w-7xl mx-auto pt-8 space-y-10">
      <style>{`
        @keyframes spin { to { transform: rotate(360deg) } }
        .del-btn:hover { opacity: 1 !important; }
        .lead-row:hover { background: rgba(255,255,255,0.02); }
        .lead-row:hover .row-del { opacity: 1 !important; }
      `}</style>

      {/* ── Strategische Kampagnen ── */}
      <section>
        <h2 className="text-2xl font-extrabold tracking-tight mb-6" style={{ fontFamily: "Manrope, sans-serif", color: "#dce3ea" }}>
          Strategische Energiewirtschafts-Kampagnen
        </h2>
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          {/* CTA Card — Stadtwerke */}
          <div className="rounded-xl p-8 relative overflow-hidden flex flex-col justify-center" style={{ background: "#161c21", border: "1px solid rgba(255,255,255,0.05)" }}>
            <div className="absolute -top-24 -right-24 w-64 h-64 rounded-full pointer-events-none" style={{ background: "rgba(26,115,232,0.2)", filter: "blur(100px)" }} />
            <div className="relative z-10">
              <p className="text-xs font-bold uppercase tracking-widest mb-4" style={{ color: "#c1c6d6", fontFamily: "Inter, sans-serif", letterSpacing: "0.1em" }}>Hauptkampagne</p>
              <h3 className="text-3xl font-extrabold mb-6 leading-tight" style={{ fontFamily: "Manrope, sans-serif" }}>
                Bundesweite<br />Lead-Gewinnung
              </h3>
              <p className="text-sm leading-relaxed mb-8 max-w-md" style={{ color: "#c1c6d6" }}>
                Startet sofort den Deep-Scrape aller Stadtwerke in allen deutschen Bundesländern.
              </p>
              {queueRunning ? (
                <div className="w-full py-4 rounded-xl flex items-center justify-center gap-3" style={{ background: "#242b30" }}>
                  <svg style={{ animation: "spin 1s linear infinite", flexShrink: 0 }} width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#adc7ff" strokeWidth="2">
                    <path d="M21 12a9 9 0 1 1-6.219-8.56" />
                  </svg>
                  <div>
                    <div className="font-bold text-sm" style={{ color: "#adc7ff", fontFamily: "Manrope, sans-serif" }}>{queueLabel || "Wird durchsucht…"} ({queueIndex}/{queueTotal})</div>
                    <div className="text-xs mt-0.5" style={{ color: "#c1c6d6" }}>Leads werden automatisch gespeichert</div>
                  </div>
                </div>
              ) : (
                <button
                  onClick={startStadtwerkeQueue}
                  disabled={loading}
                  className="w-full py-5 rounded-xl font-black text-lg text-white transition-all active:scale-[0.98] disabled:opacity-50"
                  style={{
                    fontFamily: "Manrope, sans-serif",
                    background: "linear-gradient(135deg, #adc7ff, #1a73e8)",
                    boxShadow: "0 10px 30px rgba(26,115,232,0.4)",
                  }}
                  onMouseEnter={e => { e.currentTarget.style.boxShadow = "0 15px 40px rgba(26,115,232,0.6)"; }}
                  onMouseLeave={e => { e.currentTarget.style.boxShadow = "0 10px 30px rgba(26,115,232,0.4)"; }}
                >
                  START 16 BUNDESLÄNDER STADTWERKE-SUCHE (1-Klick)
                </button>
              )}
            </div>
          </div>

          {/* CTA Card — Energieversorger */}
          <div className="rounded-xl p-8 relative overflow-hidden flex flex-col justify-center" style={{ background: "#161c21", border: "1px solid rgba(255,255,255,0.05)" }}>
            <div className="absolute -top-24 -right-24 w-64 h-64 rounded-full pointer-events-none" style={{ background: "rgba(160,216,44,0.12)", filter: "blur(100px)" }} />
            <div className="relative z-10">
              <p className="text-xs font-bold uppercase tracking-widest mb-4" style={{ color: "#c1c6d6", fontFamily: "Inter, sans-serif", letterSpacing: "0.1em" }}>Energieversorger-Kampagne</p>
              <h3 className="text-3xl font-extrabold mb-6 leading-tight" style={{ fontFamily: "Manrope, sans-serif" }}>
                Industrie &amp;<br />Energieversorger
              </h3>
              <p className="text-sm leading-relaxed mb-8 max-w-md" style={{ color: "#c1c6d6" }}>
                Sucht nach <strong style={{ color: "#a0d82c" }}>Netzbetreiber</strong>, <strong style={{ color: "#a0d82c" }}>Fernwärme</strong> und <strong style={{ color: "#a0d82c" }}>Industriepark</strong> — priorisiert BW &amp; Bayern, dann alle weiteren Bundesländer.
              </p>
              {industrieRunning ? (
                <div className="w-full py-4 rounded-xl flex items-center justify-center gap-3" style={{ background: "#242b30" }}>
                  <svg style={{ animation: "spin 1s linear infinite", flexShrink: 0 }} width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#a0d82c" strokeWidth="2">
                    <path d="M21 12a9 9 0 1 1-6.219-8.56" />
                  </svg>
                  <div>
                    <div className="font-bold text-sm" style={{ color: "#a0d82c", fontFamily: "Manrope, sans-serif" }}>{industrieLabel || "Wird durchsucht…"} ({industrieIndex}/{industrieTotal})</div>
                    <div className="text-xs mt-0.5" style={{ color: "#c1c6d6" }}>Leads werden automatisch gespeichert</div>
                  </div>
                </div>
              ) : (
                <button
                  onClick={startIndustrieQueue}
                  disabled={loading || queueRunning}
                  className="w-full py-5 rounded-xl font-black text-lg transition-all active:scale-[0.98] disabled:opacity-50"
                  style={{
                    fontFamily: "Manrope, sans-serif",
                    background: "linear-gradient(135deg, #a0d82c, #5c8200)",
                    color: "#131f00",
                    boxShadow: "0 10px 30px rgba(160,216,44,0.3)",
                  }}
                  onMouseEnter={e => { e.currentTarget.style.boxShadow = "0 15px 40px rgba(160,216,44,0.5)"; }}
                  onMouseLeave={e => { e.currentTarget.style.boxShadow = "0 10px 30px rgba(160,216,44,0.3)"; }}
                >
                  START ENERGIEVERSORGER-SUCHE
                </button>
              )}
            </div>
          </div>
        </div>
      </section>

      {/* ── Manuelle Suche ── */}
      <section>
        <div className="flex flex-col sm:flex-row sm:justify-between sm:items-end gap-3 mb-6">
          <div>
            <h2 className="text-2xl font-extrabold tracking-tight" style={{ fontFamily: "Manrope, sans-serif", color: "#dce3ea" }}>
              Manuelle Lead- &amp; Nischensuche
            </h2>
            <p className="text-sm mt-1" style={{ color: "#c1c6d6" }}>Verfeinern Sie Ihre Zielparameter für eine hochspezifische Extraktion.</p>
          </div>
          <button
            onClick={() => setAiOpen(true)}
            disabled={loading}
            className="flex items-center gap-2 px-3 py-2 md:px-4 rounded-xl transition-all disabled:opacity-50 flex-shrink-0"
            style={{ background: "#161c21", border: "1px solid rgba(173,199,255,0.2)", boxShadow: "0 0 20px rgba(26,115,232,0.1)" }}
          >
            <span className="material-symbols-outlined text-xl" style={{ color: "#adc7ff", fontVariationSettings: "'FILL' 1" }}>smart_toy</span>
            <span className="hidden sm:inline font-bold text-sm uppercase tracking-wider" style={{ fontFamily: "Manrope, sans-serif", color: "#adc7ff" }}>KI-gestützte Suche</span>
          </button>
        </div>

        <div className="rounded-2xl p-8 shadow-2xl" style={{ background: "#161c21", border: "1px solid rgba(255,255,255,0.05)" }}>
          {/* Form fields */}
          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-12 gap-4 md:gap-6 items-end">
            <div className="md:col-span-5 space-y-2">
              <label className="block text-[10px] font-bold uppercase tracking-widest ml-1" style={{ color: "#c1c6d6" }}>Suchbegriff</label>
              <div className="relative">
                <input
                  className="w-full rounded-xl px-4 py-4 text-sm transition-all outline-none"
                  style={{ background: "#080f13", border: "1px solid rgba(65,71,84,0.4)", color: "#dce3ea" }}
                  value={query}
                  onChange={e => handleChange("query", e.target.value)}
                  onKeyDown={e => { if (e.key === "Enter" && query.trim() && !loading) handleSubmit(); }}
                  placeholder="z.B. Stadtwerke"
                  onFocus={e => { e.currentTarget.style.borderColor = "#adc7ff"; e.currentTarget.style.boxShadow = "0 0 0 2px rgba(173,199,255,0.2)"; }}
                  onBlur={e => { e.currentTarget.style.borderColor = "rgba(65,71,84,0.4)"; e.currentTarget.style.boxShadow = "none"; }}
                />
                <span className="absolute right-4 top-1/2 -translate-y-1/2 material-symbols-outlined" style={{ color: "#8b909f", fontSize: 20 }}>search</span>
              </div>
            </div>
            <div className="md:col-span-4 space-y-2">
              <label className="block text-[10px] font-bold uppercase tracking-widest ml-1" style={{ color: "#c1c6d6" }}>Region</label>
              <div className="relative">
                <input
                  className="w-full rounded-xl px-4 py-4 text-sm transition-all outline-none"
                  style={{ background: "#080f13", border: "1px solid rgba(65,71,84,0.4)", color: "#dce3ea" }}
                  value={region}
                  onChange={e => handleChange("region", e.target.value)}
                  onKeyDown={e => { if (e.key === "Enter" && query.trim() && !loading) handleSubmit(); }}
                  placeholder="z.B. Bayern"
                  onFocus={e => { e.currentTarget.style.borderColor = "#adc7ff"; e.currentTarget.style.boxShadow = "0 0 0 2px rgba(173,199,255,0.2)"; }}
                  onBlur={e => { e.currentTarget.style.borderColor = "rgba(65,71,84,0.4)"; e.currentTarget.style.boxShadow = "none"; }}
                />
                <span className="absolute right-4 top-1/2 -translate-y-1/2 material-symbols-outlined" style={{ color: "#8b909f", fontSize: 20 }}>location_on</span>
              </div>
            </div>
            <div className="md:col-span-2 space-y-2">
              <label className="block text-[10px] font-bold uppercase tracking-widest ml-1" style={{ color: "#c1c6d6" }}>Anzahl</label>
              <select
                className="w-full rounded-xl px-4 py-4 text-sm outline-none appearance-none"
                style={{ background: "#080f13", border: "1px solid rgba(65,71,84,0.4)", color: "#dce3ea" }}
                value={count}
                onChange={e => handleChange("count", Number(e.target.value))}
              >
                <option value={25}>25</option>
                <option value={50}>50</option>
                <option value={100}>100</option>
              </select>
            </div>
            <div className="sm:col-span-2 md:col-span-1">
              <button
                onClick={handleSubmit}
                disabled={!query.trim() || loading || queueRunning}
                className="w-full h-[58px] rounded-xl flex items-center justify-center gap-2 transition-all active:scale-95 disabled:opacity-50"
                style={{ background: "#333a3f" }}
                onMouseEnter={e => { if (!e.currentTarget.disabled) { e.currentTarget.style.background = "#1a73e8"; } }}
                onMouseLeave={e => { e.currentTarget.style.background = "#333a3f"; }}
              >
                <span className="material-symbols-outlined" style={{ color: "#dce3ea" }}>bolt</span>
                <span className="md:hidden text-sm font-bold" style={{ color: "#dce3ea", fontFamily: "Manrope, sans-serif" }}>Suchen</span>
              </button>
            </div>
          </div>

          {/* Quick Presets */}
          <div className="mt-8 pt-8" style={{ borderTop: "1px solid rgba(255,255,255,0.05)" }}>
            <p className="text-[10px] font-bold uppercase tracking-widest mb-4" style={{ color: "#c1c6d6" }}>Quick Presets</p>
            <div className="flex flex-wrap gap-3">
              {["Stadtwerke", "Energieversorger", "Industrie-Energie", "Gemeindewerke", "Netzbetreiber"].map(preset => (
                <button
                  key={preset}
                  onClick={() => handleChange("query", preset)}
                  className="px-5 py-2 rounded-full text-sm font-medium transition-all"
                  style={{ background: "rgba(47,54,59,0.5)", border: "1px solid rgba(255,255,255,0.05)", color: "#dce3ea" }}
                  onMouseEnter={e => { e.currentTarget.style.background = "rgba(26,115,232,0.2)"; e.currentTarget.style.borderColor = "rgba(173,199,255,0.3)"; }}
                  onMouseLeave={e => { e.currentTarget.style.background = "rgba(47,54,59,0.5)"; e.currentTarget.style.borderColor = "rgba(255,255,255,0.05)"; }}
                >
                  {preset}
                </button>
              ))}
            </div>
          </div>
        </div>
      </section>


      {/* Loading Card */}
      {loading && jobId && (
        <LoadingCard
          jobId={jobId}
          targetCount={count}
          query={query}
          region={region}
          onDone={handleDone}
          onError={handleError}
        />
      )}

      {/* AI Modal */}
      {aiOpen && (
        <AiSearchModal
          searchMode="custom"
          onStart={(queries) => {
            setAiOpen(false);
            if (!queries.length) return;
            const first = queries[0];
            setQuery(first.query);
            setRegion(first.region);
            setCount(first.count);
            setLoading(true);
            setJobId(null);
            setLeads([]);
            setSearchDone(false);
            setSelected(new Set());
            // Save to history
            fetch("/api/search-history", {
              method: "POST",
              headers: { "Content-Type": "application/json" },
              body: JSON.stringify({ query: first.query, region: first.region, searchMode: "custom" }),
            }).catch(() => {});
            fetch("/api/search", {
              method: "POST",
              headers: { "Content-Type": "application/json" },
              body: JSON.stringify({ query: first.query, region: first.region, count: first.count }),
            })
              .then(r => r.json())
              .then((d: { jobId?: string; error?: string }) => {
                if (d.jobId) setJobId(d.jobId);
                else throw new Error(d.error);
              })
              .catch(err => {
                toast.error(err instanceof Error ? err.message : "Fehler");
                setLoading(false);
              });
          }}
          onClose={() => setAiOpen(false)}
        />
      )}

      {/* Results */}
      {searchDone && leads.length > 0 && (() => {
        const newCount = leads.filter(l => l.isNew).length;
        const visibleLeads = onlyNew ? leads.filter(l => l.isNew) : leads;
        const allVisibleSelected = visibleLeads.length > 0 && visibleLeads.every(l => selected.has(l.id));
        const someVisibleSelected = visibleLeads.some(l => selected.has(l.id));
        const selectedVisible = visibleLeads.filter(l => selected.has(l.id));

        return (
          <div
            style={{
              background: "#161c21",
              border: "1px solid rgba(65,71,84,0.3)",
              borderRadius: 12,
              overflow: "hidden",
            }}
          >
            <style>{`
              .del-btn:hover { opacity: 1 !important; }
              .lead-row:hover { background: rgba(255,255,255,0.02); }
              .lead-row:hover .row-del { opacity: 1 !important; }
              .filter-pill { transition: background 0.15s, color 0.15s; }
              .filter-pill:hover { background: rgba(59,130,246,0.15) !important; }
              .save-new-btn {
                transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.12s, box-shadow 0.15s;
              }
              .save-new-btn:hover:not(:disabled) {
                background: linear-gradient(135deg, rgba(59,130,246,0.22), rgba(139,92,246,0.22)) !important;
                border-color: rgba(99,102,241,0.65) !important;
                color: #c7d2fe !important;
                transform: translateY(-1px);
                box-shadow: 0 4px 12px rgba(99,102,241,0.2);
              }
              .save-new-btn:active:not(:disabled) {
                transform: translateY(0);
                box-shadow: none;
              }
            `}</style>

            {/* Header */}
            <div
              style={{
                padding: "12px 16px",
                borderBottom: "1px solid #1e1e2e",
                display: "flex",
                justifyContent: "space-between",
                alignItems: "center",
                gap: 12,
                flexWrap: "wrap",
              }}
            >
              <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                {/* Select-all checkbox */}
                <input
                  type="checkbox"
                  checked={allVisibleSelected}
                  ref={el => { if (el) el.indeterminate = someVisibleSelected && !allVisibleSelected; }}
                  onChange={e => {
                    if (e.target.checked) {
                      setSelected(prev => {
                        const next = new Set(prev);
                        visibleLeads.forEach(l => next.add(l.id));
                        return next;
                      });
                    } else {
                      setSelected(prev => {
                        const next = new Set(prev);
                        visibleLeads.forEach(l => next.delete(l.id));
                        return next;
                      });
                    }
                  }}
                  style={{ accentColor: "#3b82f6", cursor: "pointer", width: 14, height: 14 }}
                />
                <span style={{ fontSize: 13, fontWeight: 500, color: "#ffffff" }}>
                  {selectedVisible.length > 0
                    ? `${selectedVisible.length} ausgewählt`
                    : `${visibleLeads.length} Leads`}
                </span>

                {/* Filter tabs */}
                <div style={{
                  display: "flex",
                  background: "#0d0d18",
                  border: "1px solid #2e2e3e",
                  borderRadius: 8,
                  padding: 2,
                  gap: 2,
                }}>
                  {[
                    { label: `Alle (${leads.length})`, value: false },
                    { label: `Nur neue (${newCount})`, value: true },
                  ].map(tab => (
                    <button
                      key={String(tab.value)}
                      onClick={() => setOnlyNew(tab.value)}
                      style={{
                        padding: "3px 10px",
                        borderRadius: 6,
                        border: "none",
                        fontSize: 11,
                        cursor: "pointer",
                        background: onlyNew === tab.value ? "#1e1e2e" : "transparent",
                        color: onlyNew === tab.value ? "#ffffff" : "#6b7280",
                        fontWeight: onlyNew === tab.value ? 500 : 400,
                        transition: "background 0.12s, color 0.12s",
                      }}
                    >
                      {tab.label}
                    </button>
                  ))}
                </div>
              </div>

              <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                {selectedVisible.length > 0 && (
                  <button
                    className="del-btn"
                    onClick={() => handleDelete(selectedVisible.map(l => l.id))}
                    disabled={deleting}
                    style={{
                      display: "flex",
                      alignItems: "center",
                      gap: 6,
                      background: "rgba(239,68,68,0.12)",
                      border: "1px solid rgba(239,68,68,0.3)",
                      borderRadius: 7,
                      padding: "5px 12px",
                      fontSize: 12,
                      color: "#ef4444",
                      cursor: deleting ? "not-allowed" : "pointer",
                      opacity: deleting ? 0.5 : 0.85,
                    }}
                  >
                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                      <polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14H6L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/><path d="M9 6V4h6v2"/>
                    </svg>
                    {selectedVisible.length} löschen
                  </button>
                )}

                {/* Nur neue speichern — only shown when there are existing leads */}
                {!saveOnlyNew && leads.some(l => !l.isNew) && (
                  <button
                    className="save-new-btn"
                    onClick={handleSaveOnlyNew}
                    disabled={deleting}
                    style={{
                      display: "flex",
                      alignItems: "center",
                      gap: 6,
                      background: "linear-gradient(135deg, rgba(59,130,246,0.12), rgba(139,92,246,0.12))",
                      border: "1px solid rgba(99,102,241,0.35)",
                      borderRadius: 7,
                      padding: "5px 12px",
                      fontSize: 12,
                      color: "#a5b4fc",
                      cursor: deleting ? "not-allowed" : "pointer",
                      whiteSpace: "nowrap",
                      opacity: deleting ? 0.5 : 1,
                    }}
                  >
                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                      <path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20z"/>
                      <path d="M9 12h6M12 9v6"/>
                    </svg>
                    Nur neue speichern
                  </button>
                )}

                <Link href="/leadspeicher" style={{ fontSize: 12, color: "#3b82f6", textDecoration: "none" }}>
                  Im Leadspeicher →
                </Link>
              </div>
            </div>

            {/* Table */}
            <div style={{ overflowX: "auto" }}>
              <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 12 }}>
                <thead>
                  <tr style={{ borderBottom: "1px solid #1e1e2e" }}>
                    <th style={{ width: 40, padding: "8px 16px" }} />
                    {["Unternehmen", "Domain", "Kontakt", "E-Mail"].map(h => (
                      <th key={h} style={{ padding: "8px 16px", textAlign: "left", color: "#6b7280", fontWeight: 500 }}>
                        {h}
                      </th>
                    ))}
                    <th style={{ width: 40, padding: "8px 16px" }} />
                  </tr>
                </thead>
                <tbody>
                  {visibleLeads.map((lead, i) => {
                    const isSelected = selected.has(lead.id);
                    return (
                      <tr
                        key={lead.id}
                        className="lead-row"
                        style={{
                          borderBottom: i < visibleLeads.length - 1 ? "1px solid #1a1a2a" : "none",
                          background: isSelected ? "rgba(59,130,246,0.06)" : undefined,
                        }}
                      >
                        <td style={{ padding: "9px 16px", textAlign: "center" }}>
                          <input
                            type="checkbox"
                            checked={isSelected}
                            onChange={e => {
                              setSelected(prev => {
                                const next = new Set(prev);
                                e.target.checked ? next.add(lead.id) : next.delete(lead.id);
                                return next;
                              });
                            }}
                            style={{ accentColor: "#3b82f6", cursor: "pointer", width: 13, height: 13 }}
                          />
                        </td>
                        <td style={{ padding: "9px 16px", color: "#ffffff" }}>
                          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                            {lead.companyName || "—"}
                            {!lead.isNew && (
                              <span style={{
                                fontSize: 10,
                                color: "#6b7280",
                                background: "#1e1e2e",
                                borderRadius: 4,
                                padding: "1px 6px",
                                whiteSpace: "nowrap",
                              }}>
                                vorhanden
                              </span>
                            )}
                          </div>
                        </td>
                        <td style={{ padding: "9px 16px", color: "#6b7280" }}>{lead.domain || "—"}</td>
                        <td style={{ padding: "9px 16px", color: "#d1d5db" }}>
                          {lead.contactName
                            ? `${lead.contactName}${lead.contactTitle ? ` · ${lead.contactTitle}` : ""}`
                            : "—"}
                        </td>
                        <td style={{ padding: "9px 16px" }}>
                          {lead.email ? (
                            <a href={`mailto:${lead.email}`} style={{ color: "#3b82f6", textDecoration: "none" }}>
                              {lead.email}
                            </a>
                          ) : (
                            <span style={{ color: "#4b5563" }}>—</span>
                          )}
                        </td>
                        <td style={{ padding: "9px 12px", textAlign: "center" }}>
                          <button
                            className="row-del"
                            onClick={() => handleDelete([lead.id])}
                            disabled={deleting}
                            title="Lead löschen"
                            style={{
                              background: "none",
                              border: "none",
                              cursor: deleting ? "not-allowed" : "pointer",
                              color: "#6b7280",
                              opacity: 0,
                              padding: 4,
                              borderRadius: 4,
                              display: "flex",
                              alignItems: "center",
                            }}
                          >
                            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                              <polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14H6L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/><path d="M9 6V4h6v2"/>
                            </svg>
                          </button>
                        </td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
          </div>
        );
      })()}
    </div>
  );
}