import { startTransition, useDeferredValue, useState } from 'react'
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
import {
  ArrowLeft,
  CheckCircle2,
  ChevronLeft,
  ChevronRight,
  Clock,
  Eye,
  FilterX,
  Loader2,
  Mail,
  Phone,
  RefreshCw,
  Search,
  Trash2,
  UserCheck,
  XCircle,
} from 'lucide-react'
import { toast } from 'sonner'
import { deleteLead, fetchLeads, updateLead } from '@/lib/api/leads'
import type { AdminLeadRecord } from '@/lib/api/types'
import { handleServerError } from '@/lib/handle-server-error'
import { getPageNumbers } from '@/lib/utils'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table'
import { Textarea } from '@/components/ui/textarea'
import { ConfirmDialog } from '@/components/confirm-dialog'
import { Main } from '@/components/layout/main'
import { LeadsHeader } from './components/leads-header'

const perPage = 15

/* ------------------------------------------------------------------ */
/*  Config                                                             */
/* ------------------------------------------------------------------ */

const statusConfig: Record<
  string,
  { label: string; color: string; bg: string; icon: React.ElementType }
> = {
  new: {
    label: 'Yeni',
    color: 'text-amber-700 dark:text-amber-400',
    bg: 'bg-amber-100 border-amber-200 dark:bg-amber-900/30 dark:border-amber-800',
    icon: Clock,
  },
  contacted: {
    label: 'İletişim Kuruldu',
    color: 'text-blue-700 dark:text-blue-400',
    bg: 'bg-blue-100 border-blue-200 dark:bg-blue-900/30 dark:border-blue-800',
    icon: Phone,
  },
  enrolled: {
    label: 'Kayıt Oldu',
    color: 'text-emerald-700 dark:text-emerald-400',
    bg: 'bg-emerald-100 border-emerald-200 dark:bg-emerald-900/30 dark:border-emerald-800',
    icon: CheckCircle2,
  },
  cancelled: {
    label: 'İptal',
    color: 'text-red-700 dark:text-red-400',
    bg: 'bg-red-100 border-red-200 dark:bg-red-900/30 dark:border-red-800',
    icon: XCircle,
  },
}

const sourceConfig: Record<string, { label: string; color: string }> = {
  kurs_kayit: { label: 'Kurs Kayıt', color: 'bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300' },
  danismanlik: { label: 'Danışmanlık', color: 'bg-purple-100 text-purple-800 dark:bg-purple-900/40 dark:text-purple-300' },
  duyuru: { label: 'Duyuru', color: 'bg-orange-100 text-orange-800 dark:bg-orange-900/40 dark:text-orange-300' },
  iletisim: { label: 'İletişim', color: 'bg-teal-100 text-teal-800 dark:bg-teal-900/40 dark:text-teal-300' },
  hero_form: { label: 'Hero Form', color: 'bg-indigo-100 text-indigo-800 dark:bg-indigo-900/40 dark:text-indigo-300' },
  whatsapp_widget: { label: 'WhatsApp', color: 'bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-300' },
}

function getSourceBadge(source: string | null) {
  const cfg = sourceConfig[source ?? '']
  return cfg ?? { label: source ?? '-', color: 'bg-muted text-muted-foreground' }
}

function getStatusConfig(status: string) {
  return statusConfig[status] ?? statusConfig.new
}

function timeAgo(dateStr: string) {
  const diff = Date.now() - new Date(dateStr).getTime()
  const mins = Math.floor(diff / 60000)
  if (mins < 1) return 'Az önce'
  if (mins < 60) return `${mins} dk önce`
  const hours = Math.floor(mins / 60)
  if (hours < 24) return `${hours} saat önce`
  const days = Math.floor(hours / 24)
  if (days < 7) return `${days} gün önce`
  return new Date(dateStr).toLocaleDateString('tr-TR', { day: 'numeric', month: 'short' })
}

/* ------------------------------------------------------------------ */
/*  Stat card                                                          */
/* ------------------------------------------------------------------ */

function StatCard({
  icon: Icon,
  label,
  value,
  className,
}: {
  icon: React.ElementType
  label: string
  value: number
  className: string
}) {
  return (
    <div className={`flex items-center gap-3 rounded-2xl border px-4 py-3 ${className}`}>
      <Icon className='size-5 shrink-0' />
      <div>
        <p className='text-xl font-bold tabular-nums'>{value}</p>
        <p className='text-xs'>{label}</p>
      </div>
    </div>
  )
}

/* ------------------------------------------------------------------ */
/*  Detail panel                                                       */
/* ------------------------------------------------------------------ */

function LeadDetailPanel({
  lead,
  onClose,
}: {
  lead: AdminLeadRecord
  onClose: () => void
}) {
  const queryClient = useQueryClient()
  const [status, setStatus] = useState(lead.status)
  const [adminNote, setAdminNote] = useState(lead.adminNote ?? '')

  const updateMutation = useMutation({
    mutationFn: async () =>
      updateLead(lead.id, {
        status,
        admin_note: adminNote || null,
        is_read: true,
      }),
    onSuccess: async () => {
      toast.success('Başvuru güncellendi')
      await queryClient.invalidateQueries({ queryKey: ['leads'] })
      onClose()
    },
    onError: handleServerError,
  })

  const sc = getStatusConfig(lead.status)
  const srcBadge = getSourceBadge(lead.source)

  return (
    <Card className='border-border/70 shadow-sm'>
      <CardHeader className='border-b border-border/70 bg-muted/20 px-5 py-4'>
        <div className='flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between'>
          <div className='space-y-1'>
            <div className='flex items-center gap-2'>
              <CardTitle className='text-lg'>{lead.name}</CardTitle>
              <Badge className={`rounded-full border-0 text-xs ${srcBadge.color}`}>
                {srcBadge.label}
              </Badge>
            </div>
            <CardDescription className='flex items-center gap-3'>
              <span className='flex items-center gap-1'>
                <Phone className='size-3' />
                {lead.phone}
              </span>
              {lead.email && (
                <span className='flex items-center gap-1'>
                  <Mail className='size-3' />
                  {lead.email}
                </span>
              )}
            </CardDescription>
          </div>
          <Button
            type='button'
            variant='ghost'
            size='sm'
            className='h-8 rounded-lg px-2 text-muted-foreground sm:shrink-0'
            onClick={onClose}
          >
            <ArrowLeft />
            Listeye dön
          </Button>
        </div>
      </CardHeader>
      <CardContent className='space-y-4 p-4 md:p-5'>
        {/* Başvuru bilgileri */}
        <div className='rounded-2xl border border-border/70 bg-card p-4 shadow-sm'>
          <p className='mb-3 border-b border-border/70 pb-3 text-sm font-semibold'>
            Başvuru Bilgileri
          </p>
          <div className='grid gap-4 sm:grid-cols-2'>
            <InfoRow label='Ad Soyad' value={lead.name} />
            <InfoRow label='Telefon' value={lead.phone} />
            <InfoRow label='E-posta' value={lead.email} />
            <InfoRow label='Kaynak' badge={{ text: srcBadge.label, color: srcBadge.color }} />
            <InfoRow label='Hedef Eğitim' value={lead.targetCourse} />
            <InfoRow label='Eğitim Seviyesi' value={lead.educationLevel} />
            <InfoRow label='Konu' value={lead.subject} />
            <InfoRow
              label='Tarih'
              value={
                lead.createdAt
                  ? new Date(lead.createdAt).toLocaleString('tr-TR')
                  : null
              }
            />
          </div>
          {lead.message && (
            <div className='mt-4'>
              <p className='mb-1 text-xs font-medium text-muted-foreground'>Mesaj</p>
              <p className='rounded-xl bg-muted/30 p-3 text-sm leading-relaxed whitespace-pre-wrap'>
                {lead.message}
              </p>
            </div>
          )}
        </div>

        {/* Onay & UTM */}
        <div className='grid gap-4 sm:grid-cols-2'>
          <div className='rounded-2xl border border-border/70 bg-card p-4 shadow-sm'>
            <p className='mb-3 border-b border-border/70 pb-3 text-sm font-semibold'>
              Onay Durumu
            </p>
            <div className='space-y-3'>
              <div className='flex items-center justify-between text-sm'>
                <span className='text-muted-foreground'>KVKK Onayı</span>
                <Badge
                  variant={lead.kvkkConsent ? 'default' : 'destructive'}
                  className='rounded-full'
                >
                  {lead.kvkkConsent ? 'Evet' : 'Hayır'}
                </Badge>
              </div>
              <div className='flex items-center justify-between text-sm'>
                <span className='text-muted-foreground'>Pazarlama Onayı</span>
                <Badge
                  variant={lead.marketingConsent ? 'default' : 'secondary'}
                  className='rounded-full'
                >
                  {lead.marketingConsent ? 'Evet' : 'Hayır'}
                </Badge>
              </div>
            </div>
          </div>
          <div className='rounded-2xl border border-border/70 bg-card p-4 shadow-sm'>
            <p className='mb-3 border-b border-border/70 pb-3 text-sm font-semibold'>
              UTM Bilgileri
            </p>
            <div className='space-y-2'>
              <UtmRow label='Source' value={lead.utmSource} />
              <UtmRow label='Medium' value={lead.utmMedium} />
              <UtmRow label='Campaign' value={lead.utmCampaign} />
            </div>
          </div>
        </div>

        {/* İşlem */}
        <div className='rounded-2xl border border-border/70 bg-card p-4 shadow-sm'>
          <p className='mb-3 border-b border-border/70 pb-3 text-sm font-semibold'>
            İşlem
          </p>
          <div className='space-y-4'>
            <div>
              <Label className='mb-2 text-sm'>Durum</Label>
              <Select value={status} onValueChange={setStatus}>
                <SelectTrigger className='w-full rounded-xl'>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {Object.entries(statusConfig).map(([key, cfg]) => (
                    <SelectItem key={key} value={key}>
                      {cfg.label}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
            <div>
              <Label className='mb-2 text-sm'>Admin Notu</Label>
              <Textarea
                value={adminNote}
                onChange={(e) => setAdminNote(e.target.value)}
                rows={4}
                placeholder='İç notunuzu buraya yazın...'
              />
            </div>
          </div>
        </div>

        <div className='flex justify-end border-t border-border/70 pt-4'>
          <Button
            className='rounded-xl'
            disabled={updateMutation.isPending}
            onClick={() => updateMutation.mutate()}
          >
            {updateMutation.isPending && <Loader2 className='animate-spin' />}
            Kaydet
          </Button>
        </div>
      </CardContent>
    </Card>
  )
}

function InfoRow({
  label,
  value,
  badge,
}: {
  label: string
  value?: string | null
  badge?: { text: string; color: string }
}) {
  return (
    <div>
      <p className='text-xs font-medium text-muted-foreground'>{label}</p>
      {badge ? (
        <Badge className={`mt-0.5 rounded-full border-0 text-xs ${badge.color}`}>
          {badge.text}
        </Badge>
      ) : (
        <p className='mt-0.5 text-sm'>{value || '\u2014'}</p>
      )}
    </div>
  )
}

function UtmRow({ label, value }: { label: string; value: string | null }) {
  return (
    <div className='flex items-center justify-between text-sm'>
      <span className='font-mono text-xs text-muted-foreground'>{label}</span>
      <span className={value ? 'font-medium' : 'text-muted-foreground'}>
        {value || '\u2014'}
      </span>
    </div>
  )
}

/* ------------------------------------------------------------------ */
/*  List page                                                          */
/* ------------------------------------------------------------------ */

export function LeadsPage() {
  const queryClient = useQueryClient()
  const [page, setPage] = useState(1)
  const [search, setSearch] = useState('')
  const deferredSearch = useDeferredValue(search)
  const [statusFilter, setStatusFilter] = useState('all')
  const [sourceFilter, setSourceFilter] = useState('all')
  const [readFilter, setReadFilter] = useState('all')
  const [activeLead, setActiveLead] = useState<AdminLeadRecord | null>(null)
  const [leadToDelete, setLeadToDelete] = useState<AdminLeadRecord | null>(null)

  const hasActiveFilters =
    search !== '' ||
    statusFilter !== 'all' ||
    sourceFilter !== 'all' ||
    readFilter !== 'all'

  const leadsQuery = useQuery({
    queryKey: [
      'leads',
      page,
      deferredSearch,
      statusFilter,
      sourceFilter,
      readFilter,
    ],
    queryFn: () =>
      fetchLeads({
        page,
        perPage,
        search: deferredSearch || undefined,
        status: statusFilter === 'all' ? undefined : statusFilter,
        source: sourceFilter === 'all' ? undefined : sourceFilter,
        is_read: readFilter === 'all' ? undefined : readFilter === 'read',
      }),
  })

  const deleteMutation = useMutation({
    mutationFn: async (id: number | string) => deleteLead(id),
    onSuccess: async () => {
      toast.success('Başvuru silindi')
      await queryClient.invalidateQueries({ queryKey: ['leads'] })
      setLeadToDelete(null)
    },
    onError: handleServerError,
  })

  const markReadMutation = useMutation({
    mutationFn: async (lead: AdminLeadRecord) =>
      updateLead(lead.id, { is_read: true }),
    onSuccess: async () => {
      await queryClient.invalidateQueries({ queryKey: ['leads'] })
    },
    onError: handleServerError,
  })

  const pageNumbers = getPageNumbers(
    page,
    leadsQuery.data?.meta.lastPage ?? 1
  )

  // İstatistik sayıları (mevcut sorgudan)
  const items = leadsQuery.data?.items ?? []
  const totalCount = leadsQuery.data?.meta.total ?? 0
  const unreadCount = items.filter((l) => !l.isRead).length

  return (
    <>
      <LeadsHeader />

      <Main className='space-y-6'>
        {activeLead ? (
          <LeadDetailPanel
            lead={activeLead}
            onClose={() => setActiveLead(null)}
          />
        ) : (
          <>
            {/* İstatistik kartları */}
            <section className='grid gap-3 grid-cols-2 lg:grid-cols-4'>
              <StatCard
                icon={Clock}
                label='Yeni'
                value={unreadCount}
                className={statusConfig.new.bg + ' ' + statusConfig.new.color}
              />
              <StatCard
                icon={Phone}
                label='İletişim Kuruldu'
                value={items.filter((l) => l.status === 'contacted').length}
                className={statusConfig.contacted.bg + ' ' + statusConfig.contacted.color}
              />
              <StatCard
                icon={UserCheck}
                label='Kayıt Oldu'
                value={items.filter((l) => l.status === 'enrolled').length}
                className={statusConfig.enrolled.bg + ' ' + statusConfig.enrolled.color}
              />
              <StatCard
                icon={Mail}
                label='Toplam'
                value={totalCount}
                className='border-border/70 bg-muted/30 text-foreground'
              />
            </section>

            <Card>
              <CardHeader className='gap-4'>
                <div className='flex flex-col gap-4 xl:flex-row xl:items-start xl:justify-between'>
                  <div>
                    <CardTitle>Başvurular</CardTitle>
                    <CardDescription>
                      Web sitesinden gelen tüm form başvuruları
                    </CardDescription>
                  </div>
                  <Button
                    variant='outline'
                    className='rounded-xl'
                    onClick={() => leadsQuery.refetch()}
                  >
                    <RefreshCw
                      className={
                        leadsQuery.isFetching ? 'animate-spin' : ''
                      }
                    />
                    Yenile
                  </Button>
                </div>

                {/* Filtreler */}
                <div className='rounded-2xl border border-dashed border-border/70 bg-muted/20 p-4 space-y-3'>
                  <div className='relative'>
                    <Search className='pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground' />
                    <Input
                      placeholder='Ad, telefon veya e-posta ara...'
                      className='pl-9'
                      value={search}
                      onChange={(e) => {
                        setSearch(e.target.value)
                        setPage(1)
                      }}
                    />
                  </div>
                  <div className='grid gap-3 grid-cols-2 lg:grid-cols-[1fr_1fr_1fr_auto]'>
                    <Select
                      value={statusFilter}
                      onValueChange={(v) =>
                        startTransition(() => {
                          setStatusFilter(v)
                          setPage(1)
                        })
                      }
                    >
                      <SelectTrigger>
                        <SelectValue placeholder='Durum' />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value='all'>Tüm durumlar</SelectItem>
                        {Object.entries(statusConfig).map(([key, cfg]) => (
                          <SelectItem key={key} value={key}>
                            {cfg.label}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                    <Select
                      value={sourceFilter}
                      onValueChange={(v) =>
                        startTransition(() => {
                          setSourceFilter(v)
                          setPage(1)
                        })
                      }
                    >
                      <SelectTrigger>
                        <SelectValue placeholder='Kaynak' />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value='all'>Tüm kaynaklar</SelectItem>
                        {Object.entries(sourceConfig).map(([key, cfg]) => (
                          <SelectItem key={key} value={key}>
                            {cfg.label}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                    <Select
                      value={readFilter}
                      onValueChange={(v) =>
                        startTransition(() => {
                          setReadFilter(v)
                          setPage(1)
                        })
                      }
                    >
                      <SelectTrigger>
                        <SelectValue placeholder='Okunma' />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value='all'>Tümü</SelectItem>
                        <SelectItem value='unread'>Okunmamış</SelectItem>
                        <SelectItem value='read'>Okunmuş</SelectItem>
                      </SelectContent>
                    </Select>
                    {hasActiveFilters && (
                      <Button
                        variant='outline'
                        className='rounded-xl'
                        onClick={() => {
                          setSearch('')
                          setStatusFilter('all')
                          setSourceFilter('all')
                          setReadFilter('all')
                          setPage(1)
                        }}
                      >
                        <FilterX />
                        Temizle
                      </Button>
                    )}
                  </div>
                </div>
              </CardHeader>
              <CardContent className='space-y-4'>
                <div className='rounded-2xl border border-border/70'>
                  <Table>
                    <TableHeader>
                      <TableRow>
                        <TableHead className='w-8 px-3' />
                        <TableHead className='px-2'>Ad Soyad</TableHead>
                        <TableHead>Telefon</TableHead>
                        <TableHead>E-posta</TableHead>
                        <TableHead>Kaynak</TableHead>
                        <TableHead>Durum</TableHead>
                        <TableHead>Tarih</TableHead>
                        <TableHead className='w-40 text-right'>
                          İşlemler
                        </TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {leadsQuery.isLoading ? (
                        <TableRow>
                          <TableCell
                            colSpan={8}
                            className='h-28 text-center text-muted-foreground'
                          >
                            <Loader2 className='mx-auto mb-2 size-5 animate-spin' />
                            Yükleniyor...
                          </TableCell>
                        </TableRow>
                      ) : items.length ? (
                        items.map((lead) => {
                          const sc = getStatusConfig(lead.status)
                          const srcBadge = getSourceBadge(lead.source)
                          return (
                            <TableRow
                              key={lead.id}
                              className={
                                !lead.isRead
                                  ? 'bg-amber-50/60 dark:bg-amber-900/10'
                                  : ''
                              }
                            >
                              <TableCell className='px-3'>
                                {!lead.isRead && (
                                  <span className='flex h-2.5 w-2.5 rounded-full bg-amber-500' />
                                )}
                              </TableCell>
                              <TableCell className='px-2 py-3'>
                                <p
                                  className={`text-sm ${!lead.isRead ? 'font-semibold' : ''}`}
                                >
                                  {lead.name}
                                </p>
                                {lead.targetCourse && (
                                  <p className='text-xs text-muted-foreground'>
                                    {lead.targetCourse}
                                  </p>
                                )}
                              </TableCell>
                              <TableCell className='text-sm'>
                                {lead.phone}
                              </TableCell>
                              <TableCell className='text-sm text-muted-foreground'>
                                {lead.email || '\u2014'}
                              </TableCell>
                              <TableCell>
                                <Badge
                                  className={`rounded-full border-0 text-[11px] ${srcBadge.color}`}
                                >
                                  {srcBadge.label}
                                </Badge>
                              </TableCell>
                              <TableCell>
                                <Badge
                                  className={`rounded-full border text-[11px] ${sc.bg} ${sc.color}`}
                                >
                                  {sc.label}
                                </Badge>
                              </TableCell>
                              <TableCell className='text-xs text-muted-foreground'>
                                {lead.createdAt ? timeAgo(lead.createdAt) : '\u2014'}
                              </TableCell>
                              <TableCell>
                                <div className='flex justify-end gap-1'>
                                  <Button
                                    variant='outline'
                                    size='sm'
                                    className='rounded-xl'
                                    onClick={() => {
                                      if (!lead.isRead)
                                        markReadMutation.mutate(lead)
                                      setActiveLead(lead)
                                    }}
                                  >
                                    <Eye />
                                  </Button>
                                  <Button
                                    variant='destructive'
                                    size='sm'
                                    className='rounded-xl'
                                    onClick={() => setLeadToDelete(lead)}
                                  >
                                    <Trash2 />
                                  </Button>
                                </div>
                              </TableCell>
                            </TableRow>
                          )
                        })
                      ) : (
                        <TableRow>
                          <TableCell
                            colSpan={8}
                            className='h-28 text-center text-muted-foreground'
                          >
                            Başvuru bulunamadı.
                          </TableCell>
                        </TableRow>
                      )}
                    </TableBody>
                  </Table>
                </div>

                {/* Pagination */}
                <div className='flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between'>
                  <p className='text-sm text-muted-foreground'>
                    Toplam {totalCount} kayıt. Sayfa {page} /{' '}
                    {leadsQuery.data?.meta.lastPage ?? 1}
                  </p>
                  <div className='flex flex-wrap items-center gap-2'>
                    <Button
                      variant='outline'
                      size='sm'
                      onClick={() =>
                        startTransition(() =>
                          setPage((c) => Math.max(1, c - 1))
                        )
                      }
                      disabled={page === 1}
                    >
                      <ChevronLeft />
                    </Button>
                    {pageNumbers.map((item, index) =>
                      item === '...' ? (
                        <span
                          key={`${item}-${index}`}
                          className='px-2 text-sm text-muted-foreground'
                        >
                          ...
                        </span>
                      ) : (
                        <Button
                          key={item}
                          size='sm'
                          variant={item === page ? 'default' : 'outline'}
                          onClick={() =>
                            startTransition(() => setPage(Number(item)))
                          }
                        >
                          {item}
                        </Button>
                      )
                    )}
                    <Button
                      variant='outline'
                      size='sm'
                      onClick={() =>
                        startTransition(() =>
                          setPage((c) =>
                            Math.min(
                              leadsQuery.data?.meta.lastPage ?? 1,
                              c + 1
                            )
                          )
                        )
                      }
                      disabled={
                        page === (leadsQuery.data?.meta.lastPage ?? 1)
                      }
                    >
                      <ChevronRight />
                    </Button>
                  </div>
                </div>
              </CardContent>
            </Card>
          </>
        )}
      </Main>

      <ConfirmDialog
        open={!!leadToDelete}
        onOpenChange={(open) => {
          if (!open) setLeadToDelete(null)
        }}
        title='Başvuruyu silmek istediğinize emin misiniz?'
        desc={`${leadToDelete?.name ?? ''} \u2014 bu kayıt kalıcı olarak silinecek.`}
        confirmText='Evet, sil'
        cancelBtnText='İptal'
        destructive
        isLoading={deleteMutation.isPending}
        handleConfirm={() => {
          if (leadToDelete) {
            deleteMutation.mutate(leadToDelete.id)
          }
        }}
      />
    </>
  )
}
