lead-scraper/app/suche/page.tsx

"use client";

import { useState, useCallback } from "react";
import Link from "next/link";
import { toast } from "sonner";
import { SearchCard } from "@/components/search/SearchCard";
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 [searchMode, setSearchMode] = useState<"stadtwerke" | "industrie" | "custom">("stadtwerke");
  const [queueRunning, setQueueRunning] = useState(false);
  const [queueIndex, setQueueIndex] = useState(0);
  const [queueTotal, setQueueTotal] = useState(0);

  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 startStadtwerkeQueue() {
    if (loading || queueRunning) return;
    setQueueRunning(true);
    setQueueTotal(BUNDESLAENDER.length);
    setQueueIndex(0);
    setLeads([]);
    setSearchDone(false);

    for (let i = 0; i < BUNDESLAENDER.length; i++) {
      setQueueIndex(i + 1);
      const bl = BUNDESLAENDER[i];
      toast.info(`Suche ${i + 1}/${BUNDESLAENDER.length}: Stadtwerke ${bl}`, { duration: 2000 });
      try {
        const res = await fetch("/api/search", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ query: "Stadtwerke", region: bl, count: 50 }),
        });
        const data = await res.json() as { jobId?: string };
        if (data.jobId) {
          // Save to history
          fetch("/api/search-history", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ query: "Stadtwerke", region: bl, searchMode: "stadtwerke" }),
          }).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 */ }
    }

    setQueueRunning(false);
    toast.success(`✓ Alle ${BUNDESLAENDER.length} Bundesländer durchsucht — 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
      style={{
        padding: "72px 120px",
        maxWidth: 900,
        margin: "0 auto",
      }}
    >
      {/* Hero */}
      <div className="relative rounded-2xl border border-[#1e1e2e] p-6 overflow-hidden mb-6"
        style={{ background: "linear-gradient(135deg, rgba(59,130,246,0.08) 0%, rgba(139,92,246,0.08) 100%)" }}>
        <div className="absolute inset-0" style={{ background: "linear-gradient(135deg, rgba(59,130,246,0.04) 0%, transparent 60%)" }} />
        <div className="relative">
          <div className="flex items-center gap-2 text-xs mb-2" style={{ color: "#3b82f6" }}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
            <span>Lead-Suche</span>
          </div>
          <div className="flex items-start justify-between">
            <div>
              <h1 style={{ fontSize: 22, fontWeight: 500, color: "#ffffff", margin: 0, marginBottom: 6 }}>
                Leads finden
              </h1>
              <p style={{ fontSize: 13, color: "#9ca3af", margin: 0 }}>
                Suchbegriff eingeben — wir finden passende Unternehmen mit Kontaktdaten.
              </p>
            </div>
            <button
              onClick={() => setAiOpen(true)}
              disabled={loading}
              style={{
                display: "flex", alignItems: "center", gap: 7,
                padding: "8px 14px", borderRadius: 8,
                border: "1px solid rgba(139,92,246,0.35)",
                background: "rgba(139,92,246,0.1)", color: "#a78bfa",
                fontSize: 13, fontWeight: 500,
                cursor: loading ? "not-allowed" : "pointer",
                opacity: loading ? 0.5 : 1, whiteSpace: "nowrap",
              }}
              onMouseEnter={e => { if (!loading) { e.currentTarget.style.background = "rgba(139,92,246,0.18)"; e.currentTarget.style.borderColor = "rgba(139,92,246,0.6)"; }}}
              onMouseLeave={e => { e.currentTarget.style.background = "rgba(139,92,246,0.1)"; e.currentTarget.style.borderColor = "rgba(139,92,246,0.35)"; }}
            >
              ✨ KI-Suche
            </button>
          </div>
        </div>
      </div>

      {/* Mode Tabs */}
      <div style={{ display: "flex", gap: 8, marginBottom: 16 }}>
        {([
          { id: "stadtwerke" as const, icon: "⚡", label: "Stadtwerke", desc: "Kommunale Energieversorger" },
          { id: "industrie" as const, icon: "🏭", label: "Industriebetriebe", desc: "Energieintensive Betriebe" },
          { id: "custom" as const, icon: "🔍", label: "Freie Suche", desc: "Beliebige Zielgruppe" },
        ]).map(tab => (
          <button
            key={tab.id}
            onClick={() => setSearchMode(tab.id)}
            style={{
              flex: 1, padding: "12px 16px", borderRadius: 10, cursor: "pointer", textAlign: "left",
              border: searchMode === tab.id ? "1px solid rgba(59,130,246,0.5)" : "1px solid #1e1e2e",
              background: searchMode === tab.id ? "rgba(59,130,246,0.08)" : "#111118",
              transition: "all 0.15s",
            }}
          >
            <div style={{ fontSize: 16, marginBottom: 4 }}>{tab.icon}</div>
            <div style={{ fontSize: 13, fontWeight: 500, color: searchMode === tab.id ? "#93c5fd" : "#fff", marginBottom: 2 }}>{tab.label}</div>
            <div style={{ fontSize: 11, color: "#6b7280" }}>{tab.desc}</div>
          </button>
        ))}
      </div>

      {/* Stadtwerke Queue Button */}
      {searchMode === "stadtwerke" && !loading && !queueRunning && (
        <button
          onClick={startStadtwerkeQueue}
          style={{
            width: "100%", padding: "14px 20px", borderRadius: 10, marginBottom: 12,
            border: "1px solid rgba(59,130,246,0.4)", background: "rgba(59,130,246,0.06)",
            color: "#60a5fa", cursor: "pointer", textAlign: "left",
            display: "flex", flexDirection: "column", gap: 4,
          }}
          onMouseEnter={e => { e.currentTarget.style.background = "rgba(59,130,246,0.12)"; }}
          onMouseLeave={e => { e.currentTarget.style.background = "rgba(59,130,246,0.06)"; }}
        >
          <div style={{ fontSize: 13, fontWeight: 500 }}>⚡ Alle deutschen Stadtwerke durchsuchen (16 Bundesländer)</div>
          <div style={{ fontSize: 11, color: "#6b7280" }}>Startet 16 aufeinanderfolgende Suchen · ca. 800 Ergebnisse</div>
        </button>
      )}

      {/* Queue running indicator */}
      {queueRunning && (
        <div style={{
          padding: "14px 20px", borderRadius: 10, marginBottom: 12,
          border: "1px solid rgba(59,130,246,0.3)", background: "rgba(59,130,246,0.06)",
          display: "flex", alignItems: "center", gap: 12,
        }}>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#3b82f6" strokeWidth="2" style={{ animation: "spin 1s linear infinite", flexShrink: 0 }}>
            <path d="M21 12a9 9 0 1 1-6.219-8.56"/>
          </svg>
          <div>
            <div style={{ fontSize: 13, color: "#93c5fd", fontWeight: 500 }}>Bundesland {queueIndex} von {queueTotal} wird durchsucht…</div>
            <div style={{ fontSize: 11, color: "#6b7280", marginTop: 2 }}>Nicht schließen — Leads werden automatisch gespeichert</div>
          </div>
        </div>
      )}
      <style>{`@keyframes spin { to { transform: rotate(360deg) } }`}</style>

      {/* Search Card */}
      <SearchCard
        query={query}
        region={region}
        count={count}
        loading={loading || queueRunning}
        onChange={handleChange}
        onSubmit={handleSubmit}
      />


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

      {/* AI Modal */}
      {aiOpen && (
        <AiSearchModal
          searchMode={searchMode}
          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 }),
            }).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={{
              marginTop: 16,
              background: "#111118",
              border: "1px solid #1e1e2e",
              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>
  );
}