import { GripVertical } from "lucide-react";
import { BankWithPriority } from "@/types/common";

interface BankTableProps {
  banks: BankWithPriority[];
  loading: boolean;
  error: string | null;
  onDragStart: (id: string) => void;
  onDragOver: (e: React.DragEvent<HTMLButtonElement>) => void;
  onDrop: (id: string) => void;
}

export function BankTable({
  banks,
  loading,
  error,
  onDragStart,
  onDragOver,
  onDrop,
}: BankTableProps) {
  if (loading) {
    return (
      <div className="p-6 text-sm text-slate-600" aria-live="polite">
        Loading banks…
      </div>
    );
  }

  if (error) {
    return (
      <div
        className="p-6 text-sm text-amber-700 bg-amber-50 border-t border-amber-200"
        aria-live="polite"
      >
        {error}
      </div>
    );
  }

  return (
    <div className="divide-y divide-slate-200">
      {banks.map((bank) => (
        <button
          key={bank.bank_id}
          type="button"
          draggable
          onDragStart={() => onDragStart(bank.bank_id)}
          onDragOver={onDragOver}
          onDrop={() => onDrop(bank.bank_id)}
          className="grid w-full grid-cols-[60px_1.4fr_1fr_1fr] items-center gap-2 px-4 py-3 text-left text-sm transition hover:bg-indigo-50"
        >
          <div className="flex items-center gap-2 text-slate-500">
            <GripVertical className="h-4 w-4" />
            <span className="font-semibold text-slate-900">
              {bank.effectivePriority}
            </span>
          </div>
          <div className="truncate font-semibold text-slate-900">
            {bank.bank_name}
          </div>
          <div className="text-xs font-semibold uppercase tracking-[0.1em] text-emerald-600">
            {bank.status || "—"}
          </div>
          <div className="text-xs text-slate-500">
            {bank.last_updated
              ? new Date(bank.last_updated).toLocaleDateString()
              : "—"}
          </div>
        </button>
      ))}
    </div>
  );
}