import { useVirtualizer } from "@tanstack/react-virtual";
import { useRef } from "react";
import { Badge } from "@/components/ui/badge";
import { Checkbox } from "@/components/ui/checkbox";
import { cn } from "@/lib/utils";
import type { Voter } from "@/lib/audience-data";
import { CheckCircle2, Clock, XCircle } from "lucide-react";

const consentMeta: Record<Voter["consent"], { className: string; icon: typeof CheckCircle2 }> = {
  "Opted-in": { className: "bg-success/10 text-success border-success/30", icon: CheckCircle2 },
  Pending: { className: "bg-warning/10 text-warning-foreground border-warning/30", icon: Clock },
  "Opted-out": {
    className: "bg-destructive/10 text-destructive border-destructive/30",
    icon: XCircle,
  },
};

interface Props {
  voters: Voter[];
  selected: Set<string>;
  onToggle: (id: string) => void;
  onToggleAll: () => void;
  height?: number;
}

export function VoterTable({ voters, selected, onToggle, onToggleAll, height = 560 }: Props) {
  const parentRef = useRef<HTMLDivElement>(null);
  const rowVirtualizer = useVirtualizer({
    count: voters.length,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 52,
    overscan: 12,
  });

  const allSelected = voters.length > 0 && voters.every((v) => selected.has(v.id));
  const someSelected = voters.some((v) => selected.has(v.id)) && !allSelected;

  return (
    <div className="rounded-lg border bg-card overflow-hidden">
      {/* Header */}
      <div className="grid grid-cols-[40px_2fr_1.2fr_1.4fr_0.8fr_1fr_120px_1fr] gap-3 px-4 py-2.5 border-b bg-muted/40 text-[11px] font-medium text-muted-foreground uppercase tracking-wide">
        <div className="flex items-center">
          <Checkbox
            checked={allSelected ? true : someSelected ? "indeterminate" : false}
            onCheckedChange={onToggleAll}
            aria-label="Select all"
          />
        </div>
        <div>Voter</div>
        <div className="hidden sm:block">Phone</div>
        <div className="hidden md:block">Location</div>
        <div className="hidden md:block">Age</div>
        <div className="hidden lg:block">Language</div>
        <div>Consent</div>
        <div className="hidden xl:block">Source</div>
      </div>

      {/* Virtualized body */}
      <div ref={parentRef} className="overflow-auto" style={{ height }}>
        <div style={{ height: rowVirtualizer.getTotalSize(), position: "relative" }}>
          {rowVirtualizer.getVirtualItems().map((vi) => {
            const v = voters[vi.index];
            const meta = consentMeta[v.consent];
            const isSelected = selected.has(v.id);
            return (
              <div
                key={v.id}
                className={cn(
                  "absolute left-0 right-0 grid grid-cols-[40px_2fr_1.2fr_1.4fr_0.8fr_1fr_120px_1fr] gap-3 px-4 items-center border-b text-sm transition-colors hover:bg-muted/40",
                  isSelected && "bg-primary/[0.04]",
                )}
                style={{ transform: `translateY(${vi.start}px)`, height: vi.size }}
              >
                <div className="flex items-center">
                  <Checkbox
                    checked={isSelected}
                    onCheckedChange={() => onToggle(v.id)}
                    aria-label={`Select ${v.name}`}
                  />
                </div>
                <div className="min-w-0">
                  <div className="font-medium truncate">{v.name}</div>
                  <div className="text-[11px] text-muted-foreground truncate font-mono">{v.id}</div>
                </div>
                <div className="hidden sm:block text-xs text-muted-foreground font-mono truncate">
                  {v.phone}
                </div>
                <div className="hidden md:block min-w-0">
                  <div className="text-xs truncate">
                    {v.state} · {v.lga}
                  </div>
                  <div className="text-[11px] text-muted-foreground truncate">{v.ward}</div>
                </div>
                <div className="hidden md:block text-xs tabular-nums">
                  {v.age} <span className="text-muted-foreground">· {v.gender[0]}</span>
                </div>
                <div className="hidden lg:block text-xs text-muted-foreground truncate">
                  {v.language}
                </div>
                <div>
                  <Badge
                    variant="outline"
                    className={cn("text-[10px] gap-1 font-medium", meta.className)}
                  >
                    <meta.icon className="h-3 w-3" /> {v.consent}
                  </Badge>
                </div>
                <div className="hidden xl:block text-[11px] text-muted-foreground truncate">
                  {v.source}
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}