import { GripVertical } from "lucide-react";
import { BankWithPriority } from "@/types/common";
import { formatBankStatusForDisplay, getBankLifecycle } from "@/lib/bank-status-utils";

interface BankTableProps {
  banks: BankWithPriority[];
  loading: boolean;
  error: string | null;
  onDragStart: (id: string) => void;
  onDragOver: (e: React.DragEvent<HTMLButtonElement>) => void;
  onDrop: (id: string) => void;
  onToggleStatus?: (id: string, currentStatus?: string) => void;
  /** When true, rows are not draggable (e.g. while a status filter is applied). */
  dragDisabled?: boolean;
  /** When true, empty state copy refers to the filter (no matches) vs no data at all. */
  statusFilterActive?: boolean;
}

export function BankTable({
  banks,
  loading,
  error,
  onDragStart,
  onDragOver,
  onDrop,
  onToggleStatus,
  dragDisabled = false,
  statusFilterActive = false,
}: 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.length === 0 && (
        <div className="px-4 py-8 text-center text-sm text-slate-500" aria-live="polite">
          {statusFilterActive
            ? "No banks match this filter."
            : "No banks to display."}
        </div>
      )}
      {banks.map((bank) => {
        const life = getBankLifecycle(bank);
        const isActive = life === "active";
        const isInactive = life === "inactive";

        return (
          <div
            key={bank.bank_id}
            className="grid w-full grid-cols-[60px_1.4fr_1fr_1fr] items-center gap-2 px-4 py-3 text-sm transition hover:bg-indigo-50"
          >
            {/* Order + drag handle */}
            <button
              type="button"
              draggable={!dragDisabled}
              onDragStart={dragDisabled ? undefined : () => onDragStart(bank.bank_id)}
              onDragOver={dragDisabled ? undefined : onDragOver}
              onDrop={dragDisabled ? undefined : () => onDrop(bank.bank_id)}
              className={`flex items-center gap-2 text-slate-500 ${
                dragDisabled ? "cursor-default" : "cursor-grab active:cursor-grabbing"
              }`}
              aria-label={dragDisabled ? undefined : `Drag to reorder ${bank.bank_name}`}
            >
              <GripVertical
                className={`h-4 w-4 ${dragDisabled ? "text-slate-300" : ""}`}
                aria-hidden
              />
              <span className="font-semibold text-slate-900">
                {bank.effectivePriority}
              </span>
            </button>

            {/* Name */}
            <div className="truncate font-semibold text-slate-900">
              {bank.bank_name}
            </div>

            {/* Status toggle */}
            <div>
              <button
                type="button"
                onClick={() => onToggleStatus?.(bank.bank_id, bank.status)}
                disabled={!onToggleStatus}
                title={
                  onToggleStatus
                    ? `Click to set ${isActive ? "Inactive" : "Active"}`
                    : undefined
                }
                className={`inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-semibold uppercase tracking-[0.08em] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 ${
                  !onToggleStatus
                    ? "cursor-default"
                    : "cursor-pointer hover:opacity-80 focus-visible:ring-slate-400"
                } ${
                  isActive
                    ? "bg-emerald-100 text-emerald-700 hover:bg-emerald-200"
                    : isInactive
                    ? "bg-amber-100 text-amber-700 hover:bg-amber-200"
                    : "bg-slate-100 text-slate-600 hover:bg-slate-200"
                }`}
              >
                <span
                  className={`h-1.5 w-1.5 rounded-full ${
                    isActive
                      ? "bg-emerald-500"
                      : isInactive
                      ? "bg-amber-500"
                      : "bg-slate-400"
                  }`}
                  aria-hidden
                />
                {formatBankStatusForDisplay(bank.status)}
              </button>
            </div>

            {/* Last updated */}
            <div className="text-xs text-slate-500">
              {bank.last_updated
                ? new Date(bank.last_updated).toLocaleDateString()
                : "—"}
            </div>
          </div>
        );
      })}
    </div>
  );
}