"use client";

import { GripVertical } from "lucide-react";
import { cn } from "@/lib/utils";
import type { ColumnConfig } from "@/hooks/useTransactionSettings";

export interface TransactionColumnListProps {
  title: string;
  columns: ColumnConfig[];
  dragColId: string | null;
  onDragStart: (id: string) => void;
  onDrop: (targetId: string) => void;
  onToggleVisibility: (id: string) => void;
}

export function TransactionColumnList({
  title,
  columns,
  dragColId,
  onDragStart,
  onDrop,
  onToggleVisibility,
}: TransactionColumnListProps) {
  return (
    <div className="animate-fadeIn rounded-lg border border-slate-200 bg-white p-5 shadow-lg">
      <h2 className="mb-3 text-xl font-semibold text-slate-900">{title}</h2>
      <p className="mb-4 text-xs text-slate-500">
        Drag to reorder • Use checkbox to show/hide a column
      </p>

      {columns.length === 0 ? (
        <p className="text-sm text-slate-500">No columns to configure.</p>
      ) : (
        <ul className="space-y-2 text-sm" role="list">
          {columns.map((col) => (
            <li
              key={col.id}
              draggable
              onDragStart={() => onDragStart(col.id)}
              onDragOver={(e) => e.preventDefault()}
              onDrop={() => onDrop(col.id)}
              className={cn(
                "flex cursor-move items-center justify-between gap-3 rounded-lg border border-slate-200 bg-slate-50 px-3 py-2",
                dragColId === col.id && "ring-2 ring-indigo-400"
              )}
            >
              <div className="flex items-center gap-3">
                <GripVertical className="h-4 w-4 text-slate-400" />
                <span className="font-medium text-slate-800">{col.label}</span>
              </div>
              <div className="flex items-center gap-2">
                <input
                  type="checkbox"
                  checked={col.visible}
                  onChange={() => onToggleVisibility(col.id)}
                  className="h-4 w-4 rounded border-slate-300"
                  aria-label={`Toggle ${col.label} column visibility`}
                />
                <span className="text-xs text-slate-600">
                  {col.visible ? "Visible" : "Hidden"}
                </span>
              </div>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}