lead-scraper/app/airscale/page.tsx

"use client";

import { useState, useCallback } from "react";
import { Card } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { FileDropZone } from "@/components/shared/FileDropZone";
import { RoleChipsInput } from "@/components/shared/RoleChipsInput";
import { ProgressCard } from "@/components/shared/ProgressCard";
import { ResultsTable, type ResultRow } from "@/components/shared/ResultsTable";
import { ExportButtons } from "@/components/shared/ExportButtons";
import { EmptyState } from "@/components/shared/EmptyState";
import { parseCSV, detectDomainColumn, type ExportRow } from "@/lib/utils/csv";
import { cleanDomain } from "@/lib/utils/domains";
import { toast } from "sonner";
import { Building2, ChevronRight, AlertCircle } from "lucide-react";
import { useAppStore } from "@/lib/store";
import type { DecisionMakerCategory } from "@/lib/services/anymailfinder";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";

const CATEGORY_OPTIONS: { value: DecisionMakerCategory; label: string; recommended?: boolean }[] = [
  { value: "ceo", label: "CEO / Owner / President / Founder", recommended: true },
  { value: "operations", label: "COO" },
  { value: "engineering", label: "CTO" },
  { value: "marketing", label: "CMO" },
  { value: "finance", label: "CFO" },
  { value: "sales", label: "Vertriebsleiter" },
];

interface CompanyRow {
  name: string;
  domain: string;
}

export default function AirScalePage() {
  const [csvData, setCsvData] = useState<Record<string, string>[]>([]);
  const [headers, setHeaders] = useState<string[]>([]);
  const [domainCol, setDomainCol] = useState<string>("");
  const [nameCol, setNameCol] = useState<string>("");
  const [category, setCategory] = useState<DecisionMakerCategory>("ceo");
  const [jobId, setJobId] = useState<string | null>(null);
  const [jobStatus, setJobStatus] = useState<string>("idle");
  const [progress, setProgress] = useState({ current: 0, total: 0 });
  const [results, setResults] = useState<ResultRow[]>([]);
  const [running, setRunning] = useState(false);
  const { addJob, updateJob, removeJob } = useAppStore();

  const onFile = useCallback((content: string) => {
    const { data, headers: h } = parseCSV(content);
    setCsvData(data);
    setHeaders(h);
    const detected = detectDomainColumn(h);
    if (detected) setDomainCol(detected);
    const nameGuess = h.find(x => /company|name|firma/i.test(x));
    if (nameGuess) setNameCol(nameGuess);
  }, []);

  const companies: CompanyRow[] = csvData
    .map(row => ({
      name: nameCol ? (row[nameCol] || "") : "",
      domain: cleanDomain(row[domainCol] || ""),
    }))
    .filter(c => c.domain);

  const withDomain = companies.length;
  const withoutDomain = csvData.length - withDomain;

  const startEnrichment = async () => {
    if (!companies.length) return toast.error("Keine Unternehmen mit Domains gefunden");

    setRunning(true);
    setResults([]);
    setJobStatus("running");

    try {
      const res = await fetch("/api/jobs/airscale-enrich", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ companies, categories: [category] }),
      });
      const data = await res.json() as { jobId?: string; error?: string };
      if (!res.ok || !data.jobId) throw new Error(data.error || "Failed to start job");

      setJobId(data.jobId);
      addJob({ id: data.jobId, type: "airscale", status: "running", progress: 0, total: companies.length });
      toast.success("Anreicherung gestartet!");
      pollJob(data.jobId);
    } catch (err) {
      toast.error(err instanceof Error ? err.message : "Failed to start");
      setRunning(false);
      setJobStatus("failed");
    }
  };

  const pollJob = (id: string) => {
    const interval = setInterval(async () => {
      try {
        const res = await fetch(`/api/jobs/${id}/status`);
        const data = await res.json() as {
          status: string; totalLeads: number; emailsFound: number;
          results: ResultRow[]; error?: string;
        };

        setProgress({ current: data.emailsFound, total: data.totalLeads });
        setResults(data.results || []);
        updateJob(id, { status: data.status, progress: data.emailsFound, total: data.totalLeads });

        if (data.status === "complete" || data.status === "failed") {
          clearInterval(interval);
          setJobStatus(data.status);
          setRunning(false);
          removeJob(id);
          if (data.status === "complete") {
            toast.success(`Fertig! ${data.emailsFound} E-Mails aus ${data.totalLeads} Unternehmen gefunden`);
          } else {
            toast.error(`Job fehlgeschlagen: ${data.error || "Unbekannter Fehler"}`);
          }
        }
      } catch {
        clearInterval(interval);
        setRunning(false);
      }
    }, 2000);
  };

  const exportRows: ExportRow[] = results.map(r => ({
    company_name: r.companyName,
    domain: r.domain,
    contact_name: r.contactName,
    contact_title: r.contactTitle,
    email: r.email,
    confidence_score: r.confidence !== undefined ? Math.round(r.confidence * 100) : undefined,
    source_tab: "airscale",
    job_id: jobId || "",
    found_at: new Date().toISOString(),
  }));

  const hitRate = results.length > 0
    ? Math.round((results.filter(r => r.email).length / results.length) * 100)
    : 0;

  return (
    <div className="space-y-6 max-w-5xl">
      {/* Header */}
      <div className="relative rounded-2xl bg-gradient-to-r from-blue-600/10 to-purple-600/10 border border-[#1e1e2e] p-6 overflow-hidden">
        <div className="absolute inset-0 bg-gradient-to-br from-blue-500/5 to-transparent" />
        <div className="relative">
          <div className="flex items-center gap-2 text-sm text-blue-400 mb-2">
            <Building2 className="w-4 h-4" />
            <span>Tab 1</span>
            <ChevronRight className="w-3 h-3" />
            <span>AirScale Companies</span>
          </div>
          <h1 className="text-2xl font-bold text-white">AirScale → E-Mail Anreicherung</h1>
          <p className="text-gray-400 mt-1 text-sm">
            Lade einen AirScale CSV-Export hoch und finde Entscheider-E-Mails über Anymailfinder.
          </p>
        </div>
      </div>

      {/* Step 1: Upload */}
      <Card className="bg-[#111118] border-[#1e1e2e] p-6 space-y-5">
        <h2 className="text-base font-semibold text-white flex items-center gap-2">
          <span className="w-6 h-6 rounded-full bg-blue-500/20 text-blue-400 text-xs flex items-center justify-center font-bold">1</span>
          Upload AirScale CSV
        </h2>
        <FileDropZone onFile={onFile} label="AirScale CSV-Export hier ablegen" />

        {csvData.length > 0 && (
          <div className="space-y-4">
            {/* Stats */}
            <div className="flex gap-4">
              {[
                { label: "Zeilen gesamt", value: csvData.length, color: "text-white" },
                { label: "Mit Domain", value: withDomain, color: "text-green-400" },
                { label: "Ohne Domain", value: withoutDomain, color: "text-yellow-400" },
              ].map(stat => (
                <div key={stat.label} className="bg-[#0d0d18] rounded-lg px-4 py-2.5 border border-[#1e1e2e]">
                  <p className={`text-lg font-bold ${stat.color}`}>{stat.value}</p>
                  <p className="text-xs text-gray-500">{stat.label}</p>
                </div>
              ))}
            </div>

            {/* Column mapper */}
            <div className="grid grid-cols-2 gap-4">
              <div>
                <Label className="text-gray-300 text-sm mb-1.5 block">Domain-Spalte</Label>
                <Select value={domainCol} onValueChange={v => setDomainCol(v ?? "")}>
                  <SelectTrigger className="bg-[#0d0d18] border-[#2e2e3e] text-white">
                    <SelectValue placeholder="Domain-Spalte auswählen..." />
                  </SelectTrigger>
                  <SelectContent className="bg-[#111118] border-[#2e2e3e]">
                    {headers.map(h => (
                      <SelectItem key={h} value={h} className="text-gray-300">{h}</SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
              <div>
                <Label className="text-gray-300 text-sm mb-1.5 block">Firmenname-Spalte (optional)</Label>
                <Select value={nameCol} onValueChange={v => setNameCol(v ?? "")}>
                  <SelectTrigger className="bg-[#0d0d18] border-[#2e2e3e] text-white">
                    <SelectValue placeholder="Namensspalte auswählen..." />
                  </SelectTrigger>
                  <SelectContent className="bg-[#111118] border-[#2e2e3e]">
                    <SelectItem value="" className="text-gray-400">Keine</SelectItem>
                    {headers.map(h => (
                      <SelectItem key={h} value={h} className="text-gray-300">{h}</SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
            </div>

            {/* Preview */}
            <div className="rounded-lg border border-[#1e1e2e] overflow-hidden">
              <div className="bg-[#0d0d18] px-4 py-2 text-xs text-gray-500 border-b border-[#1e1e2e]">
                Vorschau (erste 5 Zeilen)
              </div>
              <div className="overflow-x-auto">
                <table className="w-full text-xs">
                  <thead>
                    <tr className="border-b border-[#1e1e2e]">
                      {headers.slice(0, 6).map(h => (
                        <th key={h} className="px-3 py-2 text-left text-gray-400">{h}</th>
                      ))}
                    </tr>
                  </thead>
                  <tbody>
                    {csvData.slice(0, 5).map((row, i) => (
                      <tr key={i} className="border-b border-[#1e1e2e]/50">
                        {headers.slice(0, 6).map(h => (
                          <td key={h} className="px-3 py-2 text-gray-300 truncate max-w-[150px]">
                            {row[h] || "—"}
                          </td>
                        ))}
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        )}
      </Card>

      {/* Step 2: Configure */}
      <Card className="bg-[#111118] border-[#1e1e2e] p-6 space-y-5">
        <h2 className="text-base font-semibold text-white flex items-center gap-2">
          <span className="w-6 h-6 rounded-full bg-blue-500/20 text-blue-400 text-xs flex items-center justify-center font-bold">2</span>
          Entscheider-Kategorien
        </h2>

        <div className="space-y-3">
          <div className="flex flex-wrap gap-2">
            {CATEGORY_OPTIONS.map(opt => (
              <button
                key={opt.value}
                onClick={() => setCategory(opt.value)}
                className={`flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm font-medium border transition-all ${
                  category === opt.value
                    ? "bg-blue-500/20 text-blue-300 border-blue-500/40"
                    : "bg-[#0d0d18] text-gray-400 border-[#2e2e3e] hover:border-blue-500/30"
                }`}
              >
                {opt.label}
                {opt.recommended && (
                  <span className="text-[10px] bg-blue-500/30 text-blue-300 px-1.5 py-0.5 rounded font-semibold">Empfohlen</span>
                )}
              </button>
            ))}
          </div>
        </div>
      </Card>

      {/* Step 3: Run */}
      <Card className="bg-[#111118] border-[#1e1e2e] p-6 space-y-5">
        <h2 className="text-base font-semibold text-white flex items-center gap-2">
          <span className="w-6 h-6 rounded-full bg-blue-500/20 text-blue-400 text-xs flex items-center justify-center font-bold">3</span>
          Anreicherung starten
        </h2>

        {!running && jobStatus === "idle" && (
          csvData.length === 0 ? (
            <EmptyState
              icon={Building2}
              title="CSV hochladen um zu starten"
              description="Lade deinen AirScale-Export oben hoch, konfiguriere und starte die Anreicherung."
            />
          ) : (
            <Button
              onClick={startEnrichment}
              disabled={!withDomain || !domainCol}
              className="bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white font-medium px-8 shadow-lg hover:shadow-blue-500/25 transition-all"
            >
              Anreicherung starten ({withDomain} Unternehmen)
            </Button>
          )
        )}

        {(running || jobStatus === "running") && (
          <ProgressCard
            title="Unternehmen werden angereichert..."
            current={progress.current}
            total={progress.total || withDomain}
            subtitle="Entscheider-E-Mails werden über Anymailfinder gesucht"
            status="running"
          />
        )}

        {jobStatus === "complete" && (
          <ProgressCard
            title="Anreicherung abgeschlossen"
            current={progress.current}
            total={progress.total}
            subtitle={`Trefferquote: ${hitRate}%`}
            status="complete"
          />
        )}

        {jobStatus === "failed" && (
          <div className="flex items-center gap-2 text-red-400 text-sm">
            <AlertCircle className="w-4 h-4" />
            Anreicherung fehlgeschlagen. Bitte API-Key in den Einstellungen prüfen.
          </div>
        )}
      </Card>

      {/* Results */}
      {results.length > 0 && (
        <Card className="bg-[#111118] border-[#1e1e2e] p-6 space-y-4">
          <div className="flex items-center justify-between flex-wrap gap-3">
            <h2 className="text-base font-semibold text-white flex items-center gap-2">
              <span className="w-6 h-6 rounded-full bg-blue-500/20 text-blue-400 text-xs flex items-center justify-center font-bold">4</span>
              Ergebnisse
            </h2>
            <ExportButtons
              rows={exportRows}
              filename={`airscale-leads-${jobId?.slice(0, 8) || "export"}`}
              summary={`${results.filter(r => r.email).length} E-Mails gefunden • ${hitRate}% Trefferquote`}
            />
          </div>
          <ResultsTable rows={results} loading={running && results.length === 0} />
        </Card>
      )}
    </div>
  );
}