"use client";

import { useMemo, useState } from "react";
import { useMutation, useQuery } from "convex/react";
import { FunctionReturnType } from "convex/server";
import { Building2, ExternalLink, Mail, MapPin, Phone, PlayCircle, ShieldAlert } from "lucide-react";

import { api } from "@/convex/_generated/api";
import { Id } from "@/convex/_generated/dataModel";
import {
  getLeadBlacklistStatusLabel,
  getLeadContactStatusLabel,
  getLeadDuplicateStatusLabel,
  getLeadPriorityLabel,
  leadBlacklistStatusOptions,
  leadContactStatusOptions,
  leadDuplicateStatusOptions,
  leadPriorityOptions,
  type LeadContactStatus,
  type LeadDuplicateStatus,
  type LeadPriority,
  type LeadBlacklistStatus,
} from "@/lib/dashboard-model";
import { Button } from "@/components/ui/button";
import { Card, CardHeader } from "@/components/ui/card";
import {
  Dialog,
  DialogCloseButton,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Badge } from "@/components/ui/badge";
import { Switch } from "@/components/ui/switch";

type LeadsListResult = FunctionReturnType<typeof api.leads.list>;
type LeadRow = NonNullable<LeadsListResult>[number];
type AuditStartStatesResult = FunctionReturnType<
  typeof api.pageSpeed.getLeadAuditStartStates
>;
type AuditStartState = NonNullable<AuditStartStatesResult>[number];

type LeadReviewDraft = {
  priority: LeadPriority;
  contactStatus: LeadContactStatus;
  priorityReason: string;
  contactStatusReason: string;
  notes: string;
  reviewEmail: string;
  reviewEmailSource: string;
  reviewContactPerson: string;
  reviewIsBusinessContactAddress: boolean;
  duplicateStatus: LeadDuplicateStatus;
  blacklistStatus: LeadBlacklistStatus;
};

type LeadReviewPayload = {
  id: Id<"leads">;
  priority?: LeadPriority;
  priorityReason?: string;
  contactStatus?: LeadContactStatus;
  contactStatusReason?: string;
  notes?: string;
  duplicateStatus?: LeadDuplicateStatus;
  duplicateReason?: string;
  blacklistStatus?: LeadBlacklistStatus;
  blacklistReason?: string;
  duplicateOfLeadId?: Id<"leads">;
  applyBlacklist?: boolean;
  reviewEmail?: string;
  reviewEmailSource?: string;
  reviewContactPerson?: string;
  reviewIsBusinessContactAddress?: boolean;
};
type LeadStatusFilter = "all" | "high" | "blocked";

function normalizeTextInput(value: string): string | undefined {
  const next = value.trim();

  return next.length > 0 ? next : undefined;
}

function toEmailHref(email?: string | null): string | null {
  const normalizedEmail = normalizeTextInput(email ?? "");

  return normalizedEmail ? `mailto:${normalizedEmail}` : null;
}

function toPhoneHref(phone?: string | null): string | null {
  const normalizedPhone = normalizeTextInput(phone ?? "");
  const dialablePhone = normalizedPhone?.replace(/[^\d+]/g, "");

  return dialablePhone ? `tel:${dialablePhone}` : null;
}

function toWebsiteHref(lead: Pick<LeadRow, "websiteDomain" | "websiteUrl">): string | null {
  const website = normalizeTextInput(lead.websiteUrl ?? "") ?? normalizeTextInput(lead.websiteDomain ?? "");

  if (!website) {
    return null;
  }

  if (/^https?:\/\//i.test(website)) {
    return website;
  }

  return `https://${website.replace(/^\/+/, "")}`;
}

function contactSourceLabel(lead: LeadRow): string {
  if (lead.sourceProvider) {
    return lead.sourceProvider;
  }

  if (lead.emailSource) {
    return lead.emailSource;
  }

  return "Unbekannt";
}

function formatLocation(lead: LeadRow): string {
  if (lead.postalCode && lead.city) {
    return `${lead.postalCode} ${lead.city}`;
  }

  if (lead.city || lead.address) {
    return lead.city ?? lead.address ?? "";
  }

  return lead.address ?? "Ort offen";
}

function priorityBadgeClass(priority: LeadPriority): string {
  switch (priority) {
    case "high":
      return "text-destructive border-destructive/30 bg-destructive/15";
    case "medium":
      return "text-muted-foreground border-muted-foreground/30 bg-muted/20";
    case "low":
      return "text-muted-foreground border-muted/40 bg-muted/35";
    case "defer":
      return "text-muted-foreground border-secondary/50 bg-secondary/30";
    case "blocked":
      return "text-destructive border-destructive/40 bg-destructive/15";
    default:
      return "text-muted-foreground border-muted bg-muted/20";
  }
}

function duplicateBadgeVariant(
  duplicateStatus: LeadDuplicateStatus,
): "secondary" | "default" | "outline" | "destructive" {
  if (duplicateStatus === "duplicate") {
    return "destructive";
  }

  if (duplicateStatus === "possible_duplicate") {
    return "outline";
  }

  if (duplicateStatus === "unique") {
    return "secondary";
  }

  return "outline";
}

function auditStartDisabledReason({
  lead,
  auditStartState,
  isLoading,
  isStarting,
}: {
  lead: LeadRow;
  auditStartState?: AuditStartState;
  isLoading: boolean;
  isStarting: boolean;
}) {
  if (isStarting) {
    return "Audit läuft";
  }

  if (!lead.websiteUrl) {
    return "Keine Website hinterlegt.";
  }

  if (
    lead.priority === "blocked" ||
    lead.priority === "defer" ||
    lead.blacklistStatus === "blocked" ||
    lead.contactStatus === "do_not_contact"
  ) {
    return "Lead ist gesperrt oder zurückgestellt.";
  }

  if (isLoading) {
    return "Audit-Status wird geladen.";
  }

  if (auditStartState && !auditStartState.canStart) {
    return auditStartState.reason ?? "Audit kann aktuell nicht gestartet werden.";
  }

  return null;
}

export function LeadsReviewTable() {
  const leads = useQuery(api.leads.list, { limit: 120 });
  const [actionMessage, setActionMessage] = useState<string | null>(null);
  const [activeFilter, setActiveFilter] = useState<LeadStatusFilter>("all");

  const sortedLeads = useMemo(() => {
    if (!leads) {
      return [];
    }

    return [...leads].sort((a, b) => b.createdAt - a.createdAt);
  }, [leads]);
  const auditStartStates = useQuery(
    api.pageSpeed.getLeadAuditStartStates,
    leads
      ? {
          leadIds: sortedLeads.map((lead) => lead._id),
        }
      : "skip",
  );
  const auditStartStateByLeadId = useMemo(() => {
    const next = new Map<string, AuditStartState>();
    for (const state of auditStartStates ?? []) {
      next.set(state.leadId, state);
    }
    return next;
  }, [auditStartStates]);
  const filteredLeads = useMemo(() => {
    if (activeFilter === "high") {
      return sortedLeads.filter((lead) => lead.priority === "high");
    }

    if (activeFilter === "blocked") {
      return sortedLeads.filter((lead) => lead.blacklistStatus === "blocked");
    }

    return sortedLeads;
  }, [activeFilter, sortedLeads]);
  const leadStatusFilters: Array<{ label: string; value: LeadStatusFilter; count: number }> = [
    { label: "Alle Leads", value: "all", count: sortedLeads.length },
    {
      label: "Hohe Priorität",
      value: "high",
      count: sortedLeads.filter((lead) => lead.priority === "high").length,
    },
    {
      label: "Gesperrt",
      value: "blocked",
      count: sortedLeads.filter((lead) => lead.blacklistStatus === "blocked").length,
    },
  ];

  return (
    <section className="space-y-4 px-4 py-5 sm:px-6 lg:px-8">
      <div className="agency-panel mx-auto flex w-full max-w-7xl flex-col gap-2 p-4">
        <p className="agency-kicker">Lead Intake</p>
        <h1 className="font-heading text-2xl font-semibold tracking-normal">Leads prüfen</h1>
        <p className="max-w-3xl text-sm leading-6 text-muted-foreground">
          Kontaktlage, Sperrlisten, Duplikate und Audit-Start bleiben vor jedem
          Outreach als überprüfbare Entscheidungen sichtbar.
        </p>
      </div>

      <div className="mx-auto flex w-full max-w-7xl flex-wrap gap-2" aria-label="Lead-Filter">
        {leadStatusFilters.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 className="mx-auto grid w-full max-w-7xl gap-3">
        {leads === undefined ? (
          Array.from({ length: 4 }, (_, index) => (
            <Card className="agency-panel" key={index}>
              <CardHeader>
                <div className="h-5 w-2/3 rounded-md bg-muted" />
                <div className="h-4 w-1/2 rounded-md bg-muted" />
                <div className="mt-2 h-12 rounded-md bg-muted" />
              </CardHeader>
            </Card>
          ))
        ) : sortedLeads.length === 0 ? (
          <Card className="agency-panel">
            <CardHeader>
              <p className="text-sm font-medium">Keine Leads vorhanden</p>
              <p className="text-sm text-muted-foreground">
                Bitte zuerst eine Kampagne starten oder importieren.
              </p>
            </CardHeader>
          </Card>
        ) : filteredLeads.length === 0 ? (
          <Card className="agency-panel">
            <CardHeader>
              <p className="text-sm font-medium">Keine Treffer</p>
              <p className="text-sm text-muted-foreground">
                Für diesen Filter sind aktuell keine Leads vorhanden.
              </p>
            </CardHeader>
          </Card>
        ) : (
          filteredLeads.map((lead) => (
            <LeadReviewRow
              key={lead._id}
              lead={lead}
              auditStartState={auditStartStateByLeadId.get(lead._id)}
              auditStartStateLoading={auditStartStates === undefined}
              onActionMessage={setActionMessage}
            />
          ))
        )}
      </div>

      {actionMessage ? (
        <p className="mx-auto max-w-7xl text-sm text-muted-foreground" role="status">
          {actionMessage}
        </p>
      ) : null}
    </section>
  );
}

function LeadReviewRow({
  lead,
  auditStartState,
  auditStartStateLoading,
  onActionMessage,
}: {
  lead: LeadRow;
  auditStartState?: AuditStartState;
  auditStartStateLoading: boolean;
  onActionMessage: (value: string) => void;
}) {
  const [isDialogOpen, setIsDialogOpen] = useState(false);
  const [draft, setDraft] = useState<LeadReviewDraft>(() => ({
    priority: lead.priority,
    contactStatus: lead.contactStatus,
    priorityReason: lead.priorityReason ?? "",
    contactStatusReason: lead.contactStatusReason ?? "",
    notes: lead.notes ?? "",
    reviewEmail: lead.email ?? "",
    reviewEmailSource: lead.emailSource ?? "",
    reviewContactPerson: lead.contactPerson ?? "",
    reviewIsBusinessContactAddress: false,
    duplicateStatus: (lead.duplicateStatus as LeadDuplicateStatus) ?? "unchecked",
    blacklistStatus: lead.blacklistStatus,
  }));
  const [isSaving, setIsSaving] = useState(false);
  const [isBlocking, setIsBlocking] = useState(false);
  const [isStartingAudit, setIsStartingAudit] = useState(false);
  const [rowMessage, setRowMessage] = useState<string | null>(null);
  const reviewUpdate = useMutation(api.leads.reviewUpdate);
  const requestLeadAudit = useMutation(api.pageSpeed.requestLeadAudit);

  const location = formatLocation(lead);
  const emailHref = toEmailHref(lead.email);
  const phoneHref = toPhoneHref(lead.phone);
  const websiteHref = toWebsiteHref(lead);
  const websiteLabel = lead.websiteDomain ?? lead.websiteUrl;
  const reasonParts = [
    lead.priorityReason,
    lead.contactStatusReason,
    lead.duplicateReason,
    lead.blacklistReason,
  ].filter((item): item is string => Boolean(item));
  const manualAuditDisabledReason = auditStartDisabledReason({
    lead,
    auditStartState,
    isLoading: auditStartStateLoading,
    isStarting: isStartingAudit,
  });

  const update = async (
    payload?: Omit<LeadReviewPayload, "id">,
  ) => {
    setIsSaving(true);
    setRowMessage(null);
    onActionMessage("");

    try {
      await reviewUpdate({ id: lead._id, ...payload } as LeadReviewPayload);
      setRowMessage("Gespeichert");
      onActionMessage("Aktualisierung übernommen");
    } catch {
      setRowMessage("Speichern fehlgeschlagen");
    } finally {
      setIsSaving(false);
      setTimeout(() => setRowMessage(null), 1400);
    }
  };

  const saveRow = async () => {
    const reviewEmail = normalizeTextInput(draft.reviewEmail);
    const reviewEmailSource = normalizeTextInput(draft.reviewEmailSource);
    const reviewContactPerson = draft.reviewContactPerson.trim();
    const shouldUpdateEmailReview =
      reviewEmail !== normalizeTextInput(lead.email ?? "") ||
      reviewEmailSource !== normalizeTextInput(lead.emailSource ?? "") ||
      reviewContactPerson !== normalizeTextInput(lead.contactPerson ?? "");

    if (shouldUpdateEmailReview && !reviewEmail && !lead.email) {
      setRowMessage("Review-E-Mail setzen, um Kontaktinfos zu ändern.");
      return;
    }

    const payload = {
      id: lead._id,
      priority: draft.priority,
      priorityReason: draft.priorityReason,
      contactStatus: draft.contactStatus,
      contactStatusReason: draft.contactStatusReason,
      notes: draft.notes,
      duplicateStatus: draft.duplicateStatus,
      duplicateReason: lead.duplicateReason,
      blacklistStatus: draft.blacklistStatus,
      blacklistReason: lead.blacklistReason,
      reviewIsBusinessContactAddress: draft.reviewIsBusinessContactAddress,
      ...(shouldUpdateEmailReview ? {
        reviewEmail: reviewEmail ?? lead.email,
        reviewEmailSource: reviewEmailSource ?? lead.emailSource,
        reviewContactPerson,
      } : {}),
    };

    await update(payload);
  };

  const blockLead = async () => {
    setIsBlocking(true);
    await update({ applyBlacklist: true });
    setIsBlocking(false);
  };

  const startAudit = async () => {
    if (manualAuditDisabledReason) {
      setRowMessage(manualAuditDisabledReason);
      return;
    }

    setIsStartingAudit(true);
    setRowMessage(null);
    onActionMessage("");

    try {
      const result = await requestLeadAudit({ leadId: lead._id });
      setRowMessage(result.message);
      onActionMessage(result.message);
    } catch {
      setRowMessage("Audit-Start fehlgeschlagen");
    } finally {
      setIsStartingAudit(false);
      setTimeout(() => setRowMessage(null), 1800);
    }
  };

  const updateDraft = <T extends keyof LeadReviewDraft>(
    field: T,
    value: LeadReviewDraft[T],
  ) => {
    setDraft((current) => ({ ...current, [field]: value }));
  };

  const detailsId = `lead-review-details-${lead._id}`;
  const titleId = `lead-review-title-${lead._id}`;
  const priorityId = `lead-priority-${lead._id}`;
  const contactStatusId = `lead-contact-status-${lead._id}`;
  const priorityReasonId = `lead-priority-reason-${lead._id}`;
  const contactReasonId = `lead-contact-reason-${lead._id}`;
  const notesId = `lead-notes-${lead._id}`;
  const reviewEmailId = `lead-review-email-${lead._id}`;
  const reviewSourceId = `lead-review-source-${lead._id}`;
  const contactPersonId = `lead-contact-person-${lead._id}`;
  const businessContactId = `lead-business-contact-${lead._id}`;
  const duplicateStatusId = `lead-duplicate-status-${lead._id}`;
  const blacklistStatusId = `lead-blacklist-status-${lead._id}`;

  return (
    <Card aria-labelledby={titleId} className="agency-panel overflow-hidden">
      <CardHeader className="pb-3">
        <div className="grid min-w-0 gap-2">
          <div className="flex min-w-0 flex-wrap items-start justify-between gap-2">
            <div className="min-w-0 flex-1">
              <p className="max-w-full truncate font-medium" id={titleId}>
                {lead.companyName}
              </p>
              <p className="mt-1 inline-flex items-center gap-1 text-xs text-muted-foreground">
                <Building2 className="size-3 shrink-0" />
                <span className="inline-flex min-w-0 max-w-full break-words">
                  {lead.niche ?? "Nische offen"}
                </span>
              </p>
              <p className="mt-2 inline-flex items-center gap-1 text-xs text-muted-foreground">
                <MapPin className="size-3 shrink-0" />
                <span className="inline-flex min-w-0 max-w-full truncate">
                  {location}
                </span>
              </p>
            </div>

            <p
              className={`inline-flex shrink-0 rounded-md border px-2 py-1 text-xs font-medium ${priorityBadgeClass(
                draft.priority,
              )}`}
            >
              {getLeadPriorityLabel(draft.priority)}
            </p>
          </div>

          <div className="grid min-w-0 gap-1 text-xs text-muted-foreground">
            <p className="inline-flex min-w-0 items-center gap-1">
              <Mail className="size-3 shrink-0" />
              {emailHref ? (
                <a className="max-w-full min-w-0 break-all hover:text-foreground hover:underline" href={emailHref}>
                  {lead.email}
                </a>
              ) : (
                <span className="max-w-full min-w-0 break-all">Keine E-Mail</span>
              )}
            </p>
            {lead.phone && phoneHref ? (
              <p className="inline-flex min-w-0 items-center gap-1">
                <Phone className="size-3 shrink-0" />
                <a className="max-w-full min-w-0 break-all hover:text-foreground hover:underline" href={phoneHref}>
                  {lead.phone}
                </a>
              </p>
            ) : null}
            <p className="truncate max-w-full">
              Quelle: {contactSourceLabel(lead)}
            </p>
            {websiteHref && websiteLabel ? (
              <p className="inline-flex min-w-0 max-w-full items-center gap-1">
                <ExternalLink className="size-3 shrink-0" />
                <span className="shrink-0">Website:</span>
                <a
                  className="min-w-0 truncate hover:text-foreground hover:underline"
                  href={websiteHref}
                  rel="noreferrer"
                  target="_blank"
                >
                  {websiteLabel}
                </a>
              </p>
            ) : null}
          </div>
        </div>
      </CardHeader>

      <div className="flex flex-wrap gap-2 border-t bg-muted/25 p-4 pt-3">
        <div className="grid gap-1">
          <Button
            type="button"
            variant="default"
            onClick={startAudit}
            disabled={manualAuditDisabledReason !== null}
            size="sm"
            title={manualAuditDisabledReason ?? "Audit manuell starten"}
          >
            <PlayCircle className="size-4" />
            Audit starten
          </Button>
          {manualAuditDisabledReason ? (
            <p className="max-w-56 text-xs text-muted-foreground">
              {manualAuditDisabledReason}
            </p>
          ) : null}
        </div>
        <Button
          type="button"
          variant="outline"
          onClick={() => setIsDialogOpen(true)}
          size="sm"
        >
          Mehr anzeigen
        </Button>
      </div>

      <Dialog
        open={isDialogOpen}
        onOpenChange={setIsDialogOpen}
      >
        <DialogContent
          className="max-h-[calc(100dvh-2rem)] max-w-5xl overflow-y-auto"
          id={detailsId}
        >
          <DialogHeader>
            <div>
              <DialogTitle>{lead.companyName} prüfen</DialogTitle>
              <DialogDescription>
                Priorität, Kontaktstatus, Duplikate und Kontaktinformationen bearbeiten.
              </DialogDescription>
            </div>
            <DialogCloseButton />
          </DialogHeader>

        <div className="grid gap-3 xl:grid-cols-2">
          <section className="grid gap-2">
            <div>
              <Label className="text-xs text-muted-foreground" htmlFor={priorityId}>Priorität</Label>
              <div className="mt-2">
                <Select
                  value={draft.priority}
                  onValueChange={(nextPriority) =>
                    updateDraft("priority", nextPriority as LeadPriority)
                  }
                >
                  <SelectTrigger id={priorityId}>
                    <SelectValue placeholder="Priorität" />
                  </SelectTrigger>
                  <SelectContent>
                    {leadPriorityOptions.map((value) => (
                      <SelectItem value={value} key={value}>
                        {getLeadPriorityLabel(value)}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
            </div>

            <div>
              <Label className="text-xs text-muted-foreground" htmlFor={contactStatusId}>Kontaktstatus</Label>
              <div className="mt-2">
                <Select
                  value={draft.contactStatus}
                  onValueChange={(nextStatus) =>
                    updateDraft("contactStatus", nextStatus as LeadContactStatus)
                  }
                >
                  <SelectTrigger id={contactStatusId}>
                    <SelectValue placeholder="Kontaktstatus" />
                  </SelectTrigger>
                  <SelectContent>
                    {leadContactStatusOptions.map((status) => (
                      <SelectItem value={status} key={status}>
                        {getLeadContactStatusLabel(status)}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
            </div>
          </section>

          <section className="grid gap-2">
            <div>
              <Label className="text-xs text-muted-foreground" htmlFor={priorityReasonId}>Prioritätsgrund</Label>
              <Input
                id={priorityReasonId}
                value={draft.priorityReason}
                onChange={(event) => {
                  updateDraft("priorityReason", event.target.value);
                }}
              />
            </div>
            <div>
              <Label className="mt-2 text-xs text-muted-foreground" htmlFor={contactReasonId}>
                Kontaktstatus-Notiz
              </Label>
              <Input
                id={contactReasonId}
                value={draft.contactStatusReason}
                onChange={(event) => {
                  updateDraft("contactStatusReason", event.target.value);
                }}
              />
            </div>
            <div>
              <Label className="mt-2 text-xs text-muted-foreground" htmlFor={notesId}>Notiz</Label>
              <Input
                id={notesId}
                value={draft.notes}
                onChange={(event) => {
                  updateDraft("notes", event.target.value);
                }}
              />
            </div>
            <div className="mt-2 space-y-1 text-xs text-muted-foreground">
              {reasonParts.length === 0 ? (
                <p>Keine Zusatzhinweise</p>
              ) : (
                reasonParts.map((reason) => <p key={reason}>• {reason}</p>)
              )}
            </div>
          </section>

          <section className="grid gap-2">
            <div>
              <Label className="text-xs text-muted-foreground" htmlFor={reviewEmailId}>Review-E-Mail</Label>
              <Input
                id={reviewEmailId}
                value={draft.reviewEmail}
                onChange={(event) => {
                  updateDraft("reviewEmail", event.target.value);
                }}
              />
            </div>

            <div>
              <Label className="mt-2 text-xs text-muted-foreground" htmlFor={reviewSourceId}>Review-Quelle</Label>
              <Input
                id={reviewSourceId}
                value={draft.reviewEmailSource}
                onChange={(event) => {
                  updateDraft("reviewEmailSource", event.target.value);
                }}
              />
            </div>
            <div>
              <Label className="mt-2 text-xs text-muted-foreground" htmlFor={contactPersonId}>Ansprechperson</Label>
              <Input
                id={contactPersonId}
                value={draft.reviewContactPerson}
                onChange={(event) => {
                  updateDraft("reviewContactPerson", event.target.value);
                }}
              />
            </div>
            <Label className="mt-2 inline-flex items-center gap-2 text-xs text-muted-foreground" htmlFor={businessContactId}>
              <Switch
                id={businessContactId}
                checked={draft.reviewIsBusinessContactAddress}
                onCheckedChange={(checked) => {
                  updateDraft("reviewIsBusinessContactAddress", checked);
                }}
              />
              Genannte E-Mail als Business-Kontakt
            </Label>
          </section>

          <section className="grid gap-2">
            <div>
              <Label className="text-xs text-muted-foreground" htmlFor={duplicateStatusId}>Duplikatstatus</Label>
              <div className="mt-2">
                <Select
                  value={draft.duplicateStatus}
                  onValueChange={(nextStatus) =>
                    updateDraft("duplicateStatus", nextStatus as LeadDuplicateStatus)
                  }
                >
                  <SelectTrigger id={duplicateStatusId}>
                    <SelectValue placeholder="Duplikatstatus" />
                  </SelectTrigger>
                  <SelectContent>
                    {leadDuplicateStatusOptions.map((status) => (
                      <SelectItem value={status} key={status}>
                        {getLeadDuplicateStatusLabel(status)}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
            </div>

            <div>
              <Label className="text-xs text-muted-foreground" htmlFor={blacklistStatusId}>Sperrstatus</Label>
              <div className="mt-2">
                <Select
                  value={draft.blacklistStatus}
                  onValueChange={(nextStatus) =>
                    updateDraft("blacklistStatus", nextStatus as LeadBlacklistStatus)
                  }
                >
                  <SelectTrigger id={blacklistStatusId}>
                    <SelectValue placeholder="Sperrstatus" />
                  </SelectTrigger>
                  <SelectContent>
                    {leadBlacklistStatusOptions.map((status) => (
                      <SelectItem value={status} key={status}>
                        {getLeadBlacklistStatusLabel(status)}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
            </div>

            <div className="mt-2 grid gap-2 sm:grid-cols-2">
              <Badge
                variant={duplicateBadgeVariant(draft.duplicateStatus)}
                title={lead.duplicateReason ?? undefined}
              >
                {getLeadDuplicateStatusLabel(draft.duplicateStatus)}
              </Badge>
              <Badge
                variant={lead.blacklistStatus === "blocked" ? "destructive" : "secondary"}
              >
                {getLeadBlacklistStatusLabel(lead.blacklistStatus)}
              </Badge>
            </div>

            <div className="mt-2 grid gap-2 sm:grid-cols-2">
              <Button onClick={saveRow} disabled={isSaving || isBlocking} size="sm">
                <span>Speichern</span>
              </Button>
              <Button
                variant="destructive"
                onClick={blockLead}
                disabled={isSaving || isBlocking}
                size="sm"
              >
                <ShieldAlert className="size-4" />
                Sperren
              </Button>
            </div>
            {rowMessage ? (
              rowMessage === "Speichern fehlgeschlagen" ? (
                <p className="text-xs text-destructive" role="alert">{rowMessage}</p>
              ) : (
                <p className="text-xs text-muted-foreground" role="status">{rowMessage}</p>
              )
            ) : null}
          </section>
        </div>
        </DialogContent>
      </Dialog>
    </Card>
  );
}