import ArchBadge from "@/components/ArchBadge";
import { buttonClassName } from "@/components/ui/Button";
import type { ComponentType, Region } from "@/lib/types";

export default function RegionSelectionTable({
  regions,
  selectedCount,
  selectableCount,
  selectedIds,
  onToggleRegion,
  onSelectAll,
  component,
}: {
  regions: Region[];
  selectedCount: number;
  selectableCount?: number;
  selectedIds: Set<string>;
  onToggleRegion: (id: string) => void;
  onSelectAll: () => void;
  component: ComponentType;
}) {
  const totalSelectable = selectableCount ?? regions.length;
  const allSelected = totalSelectable > 0 && selectedCount === totalSelectable;
  const bulkActionClass = buttonClassName({
    variant: allSelected ? "secondary" : "primary",
    size: "xs",
  });

  return (
    <>
      <div className="flex items-center justify-between px-4 py-2.5 bg-surface-1/50">
        <label className="text-sm font-medium">
          Select Regions{" "}
          <span className="text-text-muted font-normal">
            ({selectedCount} selected)
          </span>
        </label>
        <button
          onClick={onSelectAll}
          disabled={totalSelectable === 0}
          className={bulkActionClass}
        >
          {allSelected ? "Deselect All" : "Select All"}
        </button>
      </div>

      <div className="max-h-96 overflow-y-auto">
        <table className="w-full text-sm">
          <colgroup>
            <col className="w-10" />
            <col className="w-24" />
            <col className="w-40" />
            <col className="w-40" />
            <col className="w-40" />
            <col />
          </colgroup>
          <thead className="sticky top-0 bg-surface-0 z-10">
            <tr className="border-b border-surface-2">
              <th className="px-4 py-2.5 text-left"></th>
              <th className="px-3 py-2.5 text-left text-xs font-semibold uppercase tracking-wider text-text-muted">Arch</th>
              <th className="px-3 py-2.5 text-left text-xs font-semibold uppercase tracking-wider text-text-muted">Env</th>
              <th className="px-3 py-2.5 text-left text-xs font-semibold uppercase tracking-wider text-text-muted">Provider</th>
              <th className="px-3 py-2.5 text-left text-xs font-semibold uppercase tracking-wider text-text-muted">Region</th>
              <th className="px-3 py-2.5 text-left text-xs font-semibold uppercase tracking-wider text-text-muted">Current Tag</th>
            </tr>
          </thead>
          <tbody>
            {regions.map((r) => (
              <tr
                key={r.id}
                onClick={() => onToggleRegion(r.id)}
                className={`border-b border-surface-2/30 cursor-pointer transition-colors ${
                  selectedIds.has(r.id)
                    ? "bg-accent/8 hover:bg-accent/12"
                    : "hover:bg-surface-1"
                }`}
              >
                <td className="px-4 py-2.5" onClick={(e) => e.stopPropagation()}>
                  <input
                    type="checkbox"
                    checked={selectedIds.has(r.id)}
                    onChange={() => onToggleRegion(r.id)}
                    aria-label={`Select ${r.regionName}`}
                    className="accent-accent"
                  />
                </td>
                <td className="px-3 py-2.5">
                  <ArchBadge architecture={r.architecture} />
                </td>
                <td className="px-3 py-2.5 text-text-secondary">{r.environment}</td>
                <td className="px-3 py-2.5 text-text-secondary">{r.provider}</td>
                <td className="px-3 py-2.5 font-mono text-[13px]">{r.regionName}</td>
                <td className="px-3 py-2.5 font-mono text-[13px] text-text-secondary">
                  {r.componentTags[component] || "—"}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </>
  );
}