"use client";

import { useMemo, useState } from "react";

import { useAction, useMutation, useQuery } from "convex/react";
import type { FunctionReturnType } from "convex/server";
import {
  CheckCircle2,
  ChevronDown,
  ChevronRight,
  ExternalLink,
  FileSearch,
  MailCheck,
  Save,
  ShieldCheck,
} from "lucide-react";
import Link from "next/link";

import { api } from "@/convex/_generated/api";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import {
  Dialog,
  DialogCloseButton,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Skeleton } from "@/components/ui/skeleton";
import { cn } from "@/lib/utils";

type ReviewWorkspaceListResult = FunctionReturnType<
  typeof api.outreach.listReviewWorkspace
>;
type ReviewWorkspaceItem = NonNullable<ReviewWorkspaceListResult>[number];
type UsedSkill = ReviewWorkspaceItem["usedSkills"][number];

type DraftState = {
  auditBody: string;
  auditSummary: string;
  emailBody: string;
  emailSubject: string;
  followUpDraft: string;
  phoneScript: string;
};

type PendingEmailConfirmation = {
  id: NonNullable<ReviewWorkspaceItem["latestOutreach"]>["_id"];
  recipient: string;
  subject: string;
  sender: string;
  auditSlug: string | null;
};
type ReviewStatusFilter = "all" | "ready" | "mail_open";

const emptyDraft: DraftState = {
  auditBody: "",
  auditSummary: "",
  emailBody: "",
  emailSubject: "",
  followUpDraft: "",
  phoneScript: "",
};

const textAreaClassName =
  "min-h-24 w-full rounded-md border border-input bg-background px-2.5 py-2 text-sm text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50";

function getDraft(record: ReviewWorkspaceItem): DraftState {
  const outreach = record.latestOutreach;

  return {
    auditBody: record.audit?.publicBody ?? "",
    auditSummary: record.audit?.publicSummary ?? "",
    emailBody: outreach?.emailBody ?? "",
    emailSubject: outreach?.emailSubject ?? "",
    followUpDraft: outreach?.followUpDraft ?? "",
    phoneScript: outreach?.phoneScript ?? "",
  };
}

function compactText(value?: string | null, fallback = "Offen") {
  const trimmed = value?.trim();
  return trimmed ? trimmed : fallback;
}

function toStringIfText(value: unknown) {
  return typeof value === "string" ? value.trim() : "";
}

function toNullableString(value: unknown) {
  const text = toStringIfText(value);
  return text.length > 0 ? text : null;
}

function asRecord(value: unknown) {
  return (typeof value === "object" && value !== null ? (value as Record<string, unknown>) : {});
}

function extractRecordValue(record: Record<string, unknown>, candidates: string[]) {
  for (const candidate of candidates) {
    const text = toStringIfText(record[candidate]);
    if (text) {
      return text;
    }
  }

  return "";
}

function formatStrategy(strategy?: string | null) {
  const labels: Record<string, string> = {
    call_first: "Erst anrufen",
    defer: "Zurückstellen",
    do_not_contact: "Nicht kontaktieren",
    email_first: "Erst E-Mail",
  };

  return strategy ? labels[strategy] ?? strategy : "Strategie offen";
}

function formatRaw(value: unknown) {
  if (value === undefined || value === null) {
    return "Keine Rohdaten vorhanden.";
  }

  return JSON.stringify(value, null, 2);
}

function skillLabel(skill: UsedSkill) {
  const name = compactText(skill?.name, "Skill");
  return skill.category ? `${name} · ${skill.category}` : name;
}

function isEmailDraftReady(record: ReviewWorkspaceItem) {
  const outreach = record.latestOutreach;

  return Boolean(outreach?.emailSubject?.trim() && outreach.emailBody?.trim());
}

function isReadyToSend(record: ReviewWorkspaceItem) {
  return Boolean(
    record.latestOutreach &&
      record.latestOutreach.sendStatus !== "queued" &&
      isEmailDraftReady(record),
  );
}

function DetailToggle({
  isOpen,
  label,
  onClick,
}: {
  isOpen: boolean;
  label: string;
  onClick: () => void;
}) {
  const Icon = isOpen ? ChevronDown : ChevronRight;

  return (
    <Button
      aria-expanded={isOpen}
      onClick={onClick}
      size="sm"
      type="button"
      variant="outline"
    >
      <Icon className="size-3.5" />
      {label}
    </Button>
  );
}

function FieldPair({ label, value }: { label: string; value?: string | null }) {
  return (
    <div className="min-w-0">
      <dt className="text-xs font-medium text-muted-foreground">{label}</dt>
      <dd className="mt-1 break-words text-sm">{compactText(value)}</dd>
    </div>
  );
}

function WorkspaceLoading() {
  return (
    <section className="space-y-4">
      <header className="agency-panel space-y-2 p-4">
        <p className="agency-kicker">Approval Bench</p>
        <h1 className="font-heading text-2xl font-semibold tracking-normal">Review Workspace</h1>
      </header>
      <div className="space-y-3">
        {Array.from({ length: 3 }, (_, index) => (
          <Skeleton className="h-56 rounded-lg" key={index} />
        ))}
      </div>
    </section>
  );
}

export function OutreachReviewWorkspace() {
  const records = useQuery(api.outreach.listReviewWorkspace, { limit: 100 });
  const saveReviewDraft = useMutation(api.outreach.saveReviewDraft);
  const approveEmailDraft = useMutation(api.outreach.approveEmailDraft);
  const savePublicAuditContent = useMutation(api.audits.savePublicAuditContent);
  const publishPublicAudit = useMutation(api.audits.publishPublicAudit);
  const sendApprovedEmail = useAction(api.outreachSendAction.sendApprovedEmail);

  const [drafts, setDrafts] = useState<Record<string, DraftState>>({});
  const [openSources, setOpenSources] = useState<Record<string, boolean>>({});
  const [openRaw, setOpenRaw] = useState<Record<string, boolean>>({});
  const [busyAction, setBusyAction] = useState<string | null>(null);
  const [notice, setNotice] = useState<string | null>(null);
  const [activeFilter, setActiveFilter] = useState<ReviewStatusFilter>("all");
  const [selectedRecordId, setSelectedRecordId] = useState<string | null>(null);
  const [pendingEmailConfirmation, setPendingEmailConfirmation] =
    useState<PendingEmailConfirmation | null>(null);

  const rows = useMemo<ReviewWorkspaceItem[]>(() => records ?? [], [records]);
  const reviewStatusFilters: Array<{ label: string; value: ReviewStatusFilter; count: number }> = [
    { label: "Alle Reviews", value: "all", count: rows.length },
    {
      label: "Bereit zum Versand",
      value: "ready",
      count: rows.filter(isReadyToSend).length,
    },
    {
      label: "Mail offen",
      value: "mail_open",
      count: rows.filter((row) => !isEmailDraftReady(row)).length,
    },
  ];
  const filteredRows = useMemo(() => {
    if (activeFilter === "ready") {
      return rows.filter(isReadyToSend);
    }

    if (activeFilter === "mail_open") {
      return rows.filter((row) => !isEmailDraftReady(row));
    }

    return rows;
  }, [activeFilter, rows]);
  const selectedRecord =
    filteredRows.find((row) => row.id === selectedRecordId) ??
    filteredRows[0] ??
    null;

  if (records === undefined) {
    return <WorkspaceLoading />;
  }

  if (rows.length === 0) {
    return (
      <section className="space-y-4">
        <header className="agency-panel space-y-2 p-4">
          <p className="agency-kicker">Approval Bench</p>
          <h1 className="font-heading text-2xl font-semibold tracking-normal">Review Workspace</h1>
        </header>
        <Card className="agency-panel">
          <CardContent className="p-4">
            <p className="text-sm font-medium">Keine offenen Reviews</p>
            <p className="mt-1 text-sm text-muted-foreground">
              Sobald Audit- und Outreach-Entwürfe bereitstehen, erscheinen sie hier.
            </p>
          </CardContent>
        </Card>
      </section>
    );
  }

  const updateDraft = (
    id: string,
    field: keyof DraftState,
    value: string,
  ) => {
    const record = rows.find((row) => row.id === id);

    setDrafts((current) => ({
      ...current,
      [id]: {
        ...(current[id] ?? (record ? getDraft(record) : emptyDraft)),
        [field]: value,
      },
    }));
  };

  const saveAudit = async (record: ReviewWorkspaceItem) => {
    const auditId = record.audit?._id;
    if (!auditId) {
      setNotice("Audit kann ohne Audit-ID nicht gespeichert werden.");
      return;
    }

    setBusyAction(`${record.id}:audit-save`);
    setNotice(null);
    try {
      const draft = drafts[record.id] ?? getDraft(record);
      await savePublicAuditContent({
        id: auditId,
        publicBody: draft.auditBody,
        publicSummary: draft.auditSummary,
      });
      setNotice("Audit-Änderungen gespeichert.");
    } catch {
      setNotice("Audit-Änderungen konnten nicht gespeichert werden.");
    } finally {
      setBusyAction(null);
    }
  };

  const publishAudit = async (record: ReviewWorkspaceItem) => {
    const auditId = record.audit?._id;
    if (!auditId) {
      setNotice("Audit kann ohne Audit-ID nicht veröffentlicht werden.");
      return;
    }

    setBusyAction(`${record.id}:audit-publish`);
    setNotice(null);
    try {
      const draft = drafts[record.id] ?? getDraft(record);
      await savePublicAuditContent({
        id: auditId,
        publicBody: draft.auditBody,
        publicSummary: draft.auditSummary,
      });
      await publishPublicAudit({ id: auditId });
      setNotice("Audit veröffentlicht.");
    } catch {
      setNotice("Audit konnte nicht veröffentlicht werden.");
    } finally {
      setBusyAction(null);
    }
  };

  const saveOutreach = async (record: ReviewWorkspaceItem) => {
    const outreach = record.latestOutreach;
    if (!outreach) {
      setNotice("Outreach-Entwurf kann ohne Outreach-ID nicht gespeichert werden.");
      return;
    }
    if (outreach.sendStatus === "queued") {
      setNotice(
        "Aufgrund des laufenden Sendevorgangs kann der Outreach-Entwurf nicht gespeichert werden.",
      );
      return;
    }

    const draft = drafts[record.id] ?? getDraft(record);
    const strategy = outreach.strategy;
    const hasCallablePhone =
      Boolean(record.lead?.phone) &&
      (strategy === "call_first" ||
        record.lead?.contactStatus === "missing_contact");

    setBusyAction(`${record.id}:outreach-save`);
    setNotice(null);
    try {
      await saveReviewDraft({
        id: outreach._id,
        strategy,
        emailBody: draft.emailBody,
        emailSubject: draft.emailSubject,
        followUpDraft: draft.followUpDraft,
        ...(hasCallablePhone ? { phoneScript: draft.phoneScript } : {}),
      });
      setNotice("Outreach-Entwurf gespeichert.");
    } catch {
      setNotice("Outreach-Entwurf konnte nicht gespeichert werden.");
    } finally {
      setBusyAction(null);
    }
  };

  const closeEmailConfirmation = () => {
    setPendingEmailConfirmation(null);
  };

  const sendApprovedEmailFromConfirmation = async () => {
    const confirmation = pendingEmailConfirmation;
    if (!confirmation) {
      return;
    }

    const isQueuedSend = rows.some(
      (row: ReviewWorkspaceItem) =>
        row.latestOutreach?._id === confirmation.id &&
        row.latestOutreach?.sendStatus === "queued",
    );
    if (isQueuedSend) {
      setNotice(
        "Aufgrund des laufenden Sendevorgangs kann der Versand nicht erneut gestartet werden.",
      );
      return;
    }

    setBusyAction(`${confirmation.id}:email-send`);
    setNotice(null);
    try {
      await sendApprovedEmail({ id: confirmation.id });
      setNotice("E-Mail gesendet.");
      setPendingEmailConfirmation(null);
    } catch {
      setNotice(
        "E-Mail konnte nicht gesendet werden. Bitte erneut versuchen.",
      );
    } finally {
      setBusyAction(null);
    }
  };

  const approveEmail = async (record: ReviewWorkspaceItem) => {
    const outreach = record.latestOutreach;
    const lead = record.lead;
    const audit = record.audit;
    if (!outreach) {
      setNotice("E-Mail kann ohne Outreach-ID nicht freigegeben werden.");
      return;
    }
    if (outreach.sendStatus === "queued") {
      setNotice(
        "Aufgrund des laufenden Sendevorgangs kann die E-Mail nicht freigegeben werden.",
      );
      return;
    }

    const draft = drafts[record.id] ?? getDraft(record);
    const strategy = outreach.strategy;
    const hasCallablePhone =
      Boolean(record.lead?.phone) &&
      (strategy === "call_first" ||
        record.lead?.contactStatus === "missing_contact");

    setBusyAction(`${record.id}:email-approval`);
    setNotice(null);
    try {
      await saveReviewDraft({
        id: outreach._id,
        strategy,
        emailBody: draft.emailBody,
        emailSubject: draft.emailSubject,
        followUpDraft: draft.followUpDraft,
        ...(hasCallablePhone ? { phoneScript: draft.phoneScript } : {}),
      });
      const approvalResult = await approveEmailDraft({ id: outreach._id });
      const approvalData = asRecord(approvalResult);
      const recipient =
        extractRecordValue(approvalData, ["recipient", "email", "emailAddress"]) ||
        lead?.email ||
        "Offen";
      const subject =
        extractRecordValue(approvalData, [
          "emailSubject",
          "subject",
          "title",
        ]) || draft.emailSubject;
      const sender = toNullableString(approvalData.sender);
      if (!sender) {
        throw new Error("SMTP-Absender in der Freigabeantwort fehlt.");
      }
      const auditSlug =
        extractRecordValue(approvalData, ["auditSlug", "slug", "audit"]) ||
        audit?.slug ||
        null;

      setPendingEmailConfirmation({
        id: outreach._id,
        recipient,
        subject,
        sender,
        auditSlug,
      });
      setNotice("E-Mail freigegeben.");
    } catch {
      setNotice("E-Mail konnte nicht freigegeben werden.");
    } finally {
      setBusyAction(null);
    }
  };

  const confirmationAuditLink = pendingEmailConfirmation?.auditSlug
    ? `/audit/${pendingEmailConfirmation.auditSlug}`
    : null;
  const pendingQueuedOutreachId = pendingEmailConfirmation?.id;
  const isQueuedSendForConfirmation = rows.some(
    (row: ReviewWorkspaceItem) =>
      row.latestOutreach?._id === pendingQueuedOutreachId &&
      row.latestOutreach?.sendStatus === "queued",
  );

  return (
    <section className="space-y-4">
      <header className="agency-panel space-y-2 p-4">
        <p className="agency-kicker">Approval Bench</p>
        <h1 className="font-heading text-2xl font-semibold tracking-normal">Review Workspace</h1>
        <p className="max-w-3xl text-sm text-muted-foreground">
          Audits, E-Mail-Empfehlung und Telefonnotizen prüfen, bevor etwas öffentlich
          wird oder eine Freigabe erhält.
        </p>
      </header>

      {notice ? (
        <p className="rounded-md border border-border/75 bg-muted/30 px-3 py-2 text-sm" role="status">{notice}</p>
      ) : null}

      <Dialog
        open={Boolean(pendingEmailConfirmation)}
        onOpenChange={(open) => {
          if (!open) {
            closeEmailConfirmation();
          }
        }}
      >
                {pendingEmailConfirmation ? (
          <DialogContent className="space-y-4">
            <DialogHeader>
              <DialogTitle>E-Mail-Versand bestätigen</DialogTitle>
              <DialogDescription>
                Bitte prüfen Sie vor dem Senden die Finaldaten.
              </DialogDescription>
              <DialogCloseButton />
            </DialogHeader>
            <div className="space-y-3">
              <div className="min-w-0">
                <label className="text-xs font-medium text-muted-foreground">
                  Empfänger
                </label>
                <p className="break-words text-sm">{pendingEmailConfirmation.recipient}</p>
              </div>
              <div className="min-w-0">
                <label className="text-xs font-medium text-muted-foreground">
                  Betreff
                </label>
                <p className="break-words text-sm">{pendingEmailConfirmation.subject}</p>
              </div>
              <div className="min-w-0">
                <label className="text-xs font-medium text-muted-foreground">
                  Absender
                </label>
                <p className="text-sm">
                  {pendingEmailConfirmation.sender}
                </p>
              </div>
              <div className="min-w-0">
                <label className="text-xs font-medium text-muted-foreground">
                  Audit-Link
                </label>
                {confirmationAuditLink ? (
                  <Link
                    className="inline-flex items-center gap-1 break-all text-sm text-blue-600 hover:underline"
                    href={confirmationAuditLink}
                  >
                    <ExternalLink className="size-3.5" />
                    {confirmationAuditLink}
                  </Link>
                ) : (
                  <p className="text-sm text-muted-foreground">Nicht verfügbar.</p>
                )}
              </div>
            </div>
            <div className="flex flex-wrap gap-2">
              <Button
                disabled={
                  busyAction === `${pendingEmailConfirmation.id}:email-send` ||
                  isQueuedSendForConfirmation
                }
                onClick={sendApprovedEmailFromConfirmation}
                size="sm"
                type="button"
              >
                Final senden
              </Button>
              <Button onClick={closeEmailConfirmation} size="sm" type="button" variant="outline">
                Abbrechen
              </Button>
            </div>
          </DialogContent>
        ) : null}
      </Dialog>

      <div className="grid gap-4 xl:grid-cols-[minmax(18rem,0.78fr)_minmax(0,1.22fr)]">
      <section className="agency-panel space-y-3 p-3" aria-label="Review-Queue">
        <div className="flex flex-wrap items-center justify-between gap-3">
          <h2 className="text-sm font-semibold">Review-Queue</h2>
          <div className="flex flex-wrap gap-2" aria-label="Review-Filter">
            {reviewStatusFilters.map((filter) => (
              <button
                aria-pressed={activeFilter === filter.value}
                className="agency-tab"
                key={filter.value}
                onClick={() => setActiveFilter(filter.value)}
                type="button"
              >
                {filter.label}
                <Badge variant="secondary">{filter.count}</Badge>
              </button>
            ))}
          </div>
        </div>

        <div className="grid gap-3">
          {filteredRows.map((record) => {
            const lead = record.lead;
            const audit = record.audit;
            const outreach = record.latestOutreach;
            const strategy = outreach?.strategy;
            const publicAuditHref = audit?.slug ? `/audit/${audit.slug}` : null;
            const queueTitleId = `review-queue-title-${record.id}`;

            return (
              <Card
                aria-labelledby={queueTitleId}
                className={cn(
                  "flex min-w-0 flex-col overflow-hidden",
                  selectedRecord?.id === record.id
                    ? "border-primary bg-[var(--surface-evidence)]"
                    : "bg-background/60",
                )}
                key={record.id}
              >
                <CardHeader className="gap-3">
                  <div className="min-w-0 space-y-1">
                    <CardTitle className="break-words text-base" id={queueTitleId}>
                      {compactText(lead?.companyName, "Unbenannter Lead")}
                    </CardTitle>
                    <CardDescription className="break-all">
                      {compactText(lead?.websiteDomain ?? lead?.websiteUrl, "Keine Domain")}
                    </CardDescription>
                  </div>
                  <div className="flex flex-wrap gap-2">
                    <Badge variant="secondary">{formatStrategy(strategy)}</Badge>
                    <Badge variant="outline">
                      {compactText(lead?.contactStatus, "Kontaktstatus offen")}
                    </Badge>
                    <Badge variant="outline">
                      {compactText(audit?.status, "Auditstatus offen")}
                    </Badge>
                    <Badge variant={isEmailDraftReady(record) ? "secondary" : "outline"}>
                      {isEmailDraftReady(record) ? "E-Mail bereit" : "Mail offen"}
                    </Badge>
                  </div>
                </CardHeader>
                <CardContent className="flex flex-1 flex-col gap-3">
                  <p className="line-clamp-2 text-sm text-muted-foreground">
                    {compactText(lead?.priorityReason, "Kein Prioritätsgrund hinterlegt.")}
                  </p>
                  <div className="mt-auto flex flex-wrap gap-2">
                    <Button
                      aria-pressed={selectedRecord?.id === record.id}
                      onClick={() => setSelectedRecordId(record.id)}
                      size="sm"
                      type="button"
                    >
                      Details prüfen
                    </Button>
                    {publicAuditHref ? (
                      <Button asChild size="sm" type="button" variant="outline">
                        <Link href={publicAuditHref}>
                          <ExternalLink className="size-3.5" aria-hidden="true" />
                          Public-Audit
                        </Link>
                      </Button>
                    ) : null}
                  </div>
                </CardContent>
              </Card>
            );
          })}
          {filteredRows.length === 0 ? (
            <Card className="agency-panel">
              <CardHeader>
                <CardTitle>Keine Treffer</CardTitle>
                <CardDescription>
                  Für diesen Review-Filter gibt es aktuell keine Einträge.
                </CardDescription>
              </CardHeader>
            </Card>
          ) : null}
        </div>
      </section>

      <div className="space-y-3">
        {selectedRecord ? (() => {
          const record = selectedRecord;
          const draft = drafts[record.id] ?? getDraft(record);
          const lead = record.lead;
          const audit = record.audit;
          const outreach = record.latestOutreach;
          const isQueuedSend = outreach?.sendStatus === "queued";
          const strategy = outreach?.strategy;
          const contactSources = [
            lead.email ? `E-Mail: ${lead.email}` : null,
            lead.phone ? `Telefon: ${lead.phone}` : null,
            ...record.sourceSummaries.emailCandidates.map(
              (candidate) =>
                `${candidate.email} · ${candidate.emailSource}${
                  candidate.accepted ? " · akzeptiert" : ""
                }`,
            ),
          ].filter((source): source is string => Boolean(source));
          const skills = record.usedSkills;
          const hasCallablePhone =
            Boolean(lead?.phone) &&
            (strategy === "call_first" ||
              lead?.contactStatus === "missing_contact");
          const publicAuditHref = audit?.slug ? `/audit/${audit.slug}` : null;

          return (
            <Card className="agency-panel overflow-hidden" key={record.id}>
              <CardHeader className="gap-4 border-b bg-muted/20 p-4">
                <div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
                  <div className="min-w-0 space-y-1">
                    <CardTitle className="break-words text-lg">
                      {compactText(lead?.companyName, "Unbenannter Lead")}
                    </CardTitle>
                    <p className="break-all text-sm text-muted-foreground">
                      {compactText(
                        lead?.websiteDomain ?? lead?.websiteUrl,
                        "Keine Domain",
                      )}
                    </p>
                  </div>
                  <div className="flex flex-wrap gap-2">
                    <Badge variant="secondary">{formatStrategy(strategy)}</Badge>
                    <Badge variant="outline">
                      {compactText(lead?.contactStatus, "Kontaktstatus offen")}
                    </Badge>
                    <Badge variant="outline">
                      {compactText(audit?.status, "Auditstatus offen")}
                    </Badge>
                  </div>
                </div>
                <div className="grid gap-2 sm:grid-cols-4">
                  <div className="evidence-surface rounded-md px-3 py-2">
                    <span className="inline-flex items-center gap-2 text-xs font-bold uppercase text-muted-foreground">
                      <FileSearch className="size-3.5" />
                      Evidence
                    </span>
                    <p className="mt-1 text-sm font-semibold">
                      {audit ? "Audit vorhanden" : "Audit offen"}
                    </p>
                  </div>
                  <div className="review-surface rounded-md px-3 py-2">
                    <span className="inline-flex items-center gap-2 text-xs font-bold uppercase text-muted-foreground">
                      <ShieldCheck className="size-3.5" />
                      Public Audit
                    </span>
                    <p className="mt-1 text-sm font-semibold">
                      {audit?.status === "published" ? "Veröffentlicht" : "Prüfung offen"}
                    </p>
                  </div>
                  <div className="safe-surface rounded-md px-3 py-2">
                    <span className="inline-flex items-center gap-2 text-xs font-bold uppercase text-muted-foreground">
                      <MailCheck className="size-3.5" />
                      E-Mail
                    </span>
                    <p className="mt-1 text-sm font-semibold">
                      {isEmailDraftReady(record) ? "Bereit" : "Entwurf offen"}
                    </p>
                  </div>
                  <div className="rounded-md border border-border/75 bg-background/70 px-3 py-2">
                    <span className="inline-flex items-center gap-2 text-xs font-bold uppercase text-muted-foreground">
                      <CheckCircle2 className="size-3.5 text-primary" />
                      Final Send
                    </span>
                    <p className="mt-1 text-sm font-semibold">
                      {isQueuedSend ? "Wird gesendet" : "Bestätigung nötig"}
                    </p>
                  </div>
                </div>
              </CardHeader>

              <CardContent className="space-y-5 p-4">
                <section className="grid gap-4 lg:grid-cols-[minmax(0,0.8fr)_minmax(0,1.2fr)]">
                  <div className="space-y-3 rounded-md border border-border/75 bg-background/60 p-3">
                    <h2 className="text-sm font-semibold">Lead-Details</h2>
                    <dl className="grid gap-3 sm:grid-cols-2">
                      <FieldPair label="Nische" value={lead?.niche} />
                      <FieldPair
                        label="Ort"
                        value={[lead?.postalCode, lead?.city].filter(Boolean).join(" ")}
                      />
                      <FieldPair label="Ansprechperson" value={lead?.contactPerson} />
                      <FieldPair label="E-Mail" value={lead?.email} />
                      <FieldPair label="Telefon" value={lead?.phone} />
                      <FieldPair label="Quelle" value={lead?.googleMapsUrl} />
                    </dl>
                    <div className="space-y-1">
                      <h3 className="text-xs font-medium text-muted-foreground">
                        Prioritätsgrund
                      </h3>
                      <p className="break-words text-sm">
                        {compactText(lead?.priorityReason)}
                      </p>
                    </div>
                    <div className="space-y-1">
                      <h3 className="text-xs font-medium text-muted-foreground">
                        Kontaktstrategie
                      </h3>
                      <p className="text-sm">{formatStrategy(strategy)}</p>
                    </div>
                  </div>

                  <div className="space-y-3 rounded-md border border-border/75 bg-background/60 p-3">
                    <div className="flex flex-wrap items-center justify-between gap-2">
                      <h2 className="text-sm font-semibold">Audit-Zusammenfassung</h2>
                      {publicAuditHref ? (
                        <Button asChild size="sm" type="button" variant="outline">
                          <Link href={publicAuditHref}>
                            <ExternalLink className="size-3.5" />
                            Public-Audit
                          </Link>
                        </Button>
                      ) : (
                        <span className="text-sm text-muted-foreground">
                          Public-Audit ohne Slug
                        </span>
                      )}
                    </div>

                    <label className="block space-y-1">
                      <span className="text-xs font-medium text-muted-foreground">
                        Public-Audit Slug
                      </span>
                      <span className="block break-all text-sm">
                        {compactText(audit?.slug, "Slug offen")}
                      </span>
                    </label>

                    <label className="block space-y-1">
                      <span className="text-xs font-medium text-muted-foreground">
                        Audit Kurzfassung
                      </span>
                      <textarea
                        className={cn(textAreaClassName, "min-h-20")}
                        onChange={(event) =>
                          updateDraft(record.id, "auditSummary", event.target.value)
                        }
                        value={draft.auditSummary}
                      />
                    </label>

                    <label className="block space-y-1">
                      <span className="text-xs font-medium text-muted-foreground">
                        Audit öffentlicher Text
                      </span>
                      <textarea
                        className={cn(textAreaClassName, "min-h-28")}
                        onChange={(event) =>
                          updateDraft(record.id, "auditBody", event.target.value)
                        }
                        value={draft.auditBody}
                      />
                    </label>

                    <div className="flex flex-wrap gap-2">
                      <Button
                        disabled={busyAction === `${record.id}:audit-save`}
                        onClick={() => saveAudit(record)}
                        size="sm"
                        type="button"
                        variant="outline"
                      >
                        <Save className="size-3.5" />
                        Änderungen speichern
                      </Button>
                      <Button
                        disabled={busyAction === `${record.id}:audit-publish`}
                        onClick={() => publishAudit(record)}
                        size="sm"
                        type="button"
                      >
                        Audit veröffentlichen
                      </Button>
                    </div>
                  </div>
                </section>

                <section className="grid gap-4 lg:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]">
                  <div className="space-y-3 rounded-md border border-border/75 bg-background/60 p-3">
                    <h2 className="text-sm font-semibold">Empfohlene E-Mail</h2>
                    <label className="block space-y-1">
                      <span className="text-xs font-medium text-muted-foreground">
                        E-Mail-Betreff
                      </span>
                      <Input
                        aria-label="E-Mail-Betreff"
                        onChange={(event) =>
                          updateDraft(record.id, "emailSubject", event.target.value)
                        }
                        value={draft.emailSubject}
                      />
                    </label>
                    <label className="block space-y-1">
                      <span className="text-xs font-medium text-muted-foreground">
                        E-Mail-Text
                      </span>
                      <textarea
                        aria-label="E-Mail-Text"
                        className={cn(textAreaClassName, "min-h-40")}
                        onChange={(event) =>
                          updateDraft(record.id, "emailBody", event.target.value)
                        }
                        value={draft.emailBody}
                      />
                    </label>
                    <div className="flex flex-wrap gap-2">
                      <Button
                        disabled={
                          busyAction === `${record.id}:outreach-save` || isQueuedSend
                        }
                        onClick={() => saveOutreach(record)}
                        size="sm"
                        type="button"
                        variant="outline"
                      >
                        <Save className="size-3.5" />
                        Änderungen speichern
                      </Button>
                      <Button
                        disabled={
                          busyAction === `${record.id}:email-approval` || isQueuedSend
                        }
                        onClick={() => approveEmail(record)}
                        size="sm"
                        type="button"
                      >
                        <MailCheck className="size-3.5" />
                        E-Mail freigeben
                      </Button>
                    </div>
                  </div>

                  <div className="space-y-3 rounded-md border border-border/75 bg-background/60 p-3">
                    <h2 className="text-sm font-semibold">Telefon & Follow-up</h2>
                    {hasCallablePhone ? (
                      <label className="block space-y-1">
                        <span className="text-xs font-medium text-muted-foreground">
                          Telefon-Skript
                        </span>
                        <textarea
                          className={cn(textAreaClassName, "min-h-32")}
                          onChange={(event) =>
                            updateDraft(record.id, "phoneScript", event.target.value)
                          }
                          value={draft.phoneScript}
                        />
                      </label>
                    ) : (
                      <p className="rounded-md border bg-muted/20 px-3 py-2 text-sm text-muted-foreground">
                        Kein Telefon-Skript erforderlich.
                      </p>
                    )}

                    <label className="block space-y-1">
                      <span className="text-xs font-medium text-muted-foreground">
                        Follow-up-Draft
                      </span>
                      <textarea
                        className={cn(textAreaClassName, "min-h-28")}
                        onChange={(event) =>
                          updateDraft(record.id, "followUpDraft", event.target.value)
                        }
                        value={draft.followUpDraft}
                      />
                    </label>
                  </div>
                </section>

                <section className="space-y-3">
                  <div className="flex flex-wrap gap-2">
                    <DetailToggle
                      isOpen={Boolean(openSources[record.id])}
                      label="Quellen anzeigen"
                      onClick={() =>
                        setOpenSources((current) => ({
                          ...current,
                          [record.id]: !current[record.id],
                        }))
                      }
                    />
                    <DetailToggle
                      isOpen={Boolean(openRaw[record.id])}
                      label="Raw anzeigen"
                      onClick={() =>
                        setOpenRaw((current) => ({
                          ...current,
                          [record.id]: !current[record.id],
                        }))
                      }
                    />
                  </div>

                  {openSources[record.id] ? (
                    <div className="grid gap-3 rounded-md border bg-muted/20 p-3 lg:grid-cols-2">
                      <div className="min-w-0 space-y-2">
                        <h2 className="text-sm font-semibold">Kontaktquellen</h2>
                        {contactSources.length > 0 ? (
                          <ul className="space-y-1 text-sm">
                            {contactSources.map((source, index) => (
                              <li className="break-words" key={`${source}-${index}`}>
                                {source}
                              </li>
                            ))}
                          </ul>
                        ) : (
                          <p className="text-sm text-muted-foreground">
                            Keine Kontaktquellen hinterlegt.
                          </p>
                        )}
                      </div>
                      <div className="min-w-0 space-y-2">
                        <h2 className="text-sm font-semibold">Verwendete Skills</h2>
                        {skills.length > 0 ? (
                          <div className="flex flex-wrap gap-2">
                            {skills.map((skill, index) => (
                              <Badge key={index} variant="outline">
                                {skillLabel(skill)}
                              </Badge>
                            ))}
                          </div>
                        ) : (
                          <p className="text-sm text-muted-foreground">
                            Keine Skills dokumentiert.
                          </p>
                        )}
                      </div>
                    </div>
                  ) : null}

                  {openRaw[record.id] ? (
                    <pre className="max-h-72 overflow-auto rounded-md border bg-muted/20 p-3 text-xs whitespace-pre-wrap">
                      {formatRaw({
                        audit,
                        auditGenerations: record.auditGenerations,
                        latestOutreach: outreach,
                        lead,
                        skillSummaries: record.skillSummaries,
                        sourceSummaries: record.sourceSummaries,
                      })}
                    </pre>
                  ) : null}
                </section>
              </CardContent>
            </Card>
          );
        })() : null}
      </div>
      </div>
    </section>
  );
}