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";

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);

  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);
    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);
    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 });
    }
  }, []);

  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);
    }
  }

  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>
          <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>
      </div>

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

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

      {/* 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; }
            `}</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>

                {/* Nur neue Filter */}
                <button
                  className="filter-pill"
                  onClick={() => setOnlyNew(v => !v)}
                  style={{
                    display: "flex",
                    alignItems: "center",
                    gap: 5,
                    background: onlyNew ? "rgba(34,197,94,0.15)" : "rgba(255,255,255,0.05)",
                    border: `1px solid ${onlyNew ? "rgba(34,197,94,0.4)" : "#2e2e3e"}`,
                    borderRadius: 20,
                    padding: "3px 10px",
                    fontSize: 11,
                    color: onlyNew ? "#22c55e" : "#9ca3af",
                    cursor: "pointer",
                  }}
                >
                  <span style={{
                    width: 6, height: 6, borderRadius: 3,
                    background: onlyNew ? "#22c55e" : "#6b7280",
                    display: "inline-block",
                  }} />
                  Nur neue ({newCount})
                </button>
              </div>

              <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                {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>
                )}
                <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>
  );
}