import { GripVertical } from "lucide-react";
import { cn } from "@/lib/utils";
import { ReportWidgetWithPriority } from "@/types/report-settings";
import { ReportsListCard, ReportsListCardHeader } from "./ReportsListCard";

export interface SelectedReportsListProps {
  widgets: ReportWidgetWithPriority[];
  dragId: string | null;
  onDragStart: (id: string) => void;
  onDragOver: (e: React.DragEvent<HTMLDivElement>) => void;
  onDrop: (id: string) => void;
}

export function SelectedReportsList({
  widgets,
  dragId,
  onDragStart,
  onDragOver,
  onDrop,
}: SelectedReportsListProps) {
  const header = (
    <ReportsListCardHeader
      label="Active Priority List"
      description="Drag items to reorder by priority"
    />
  );

  const content =
    widgets.length === 0 ? (
      <div className="p-5 text-sm text-slate-500">
        No items in priority list. Select from available reports.
      </div>
    ) : (
      <div className="divide-y divide-slate-200">
        {widgets.map((widget, idx) => (
          <div
            key={widget.widget_id}
            draggable
            onDragStart={() => onDragStart(widget.widget_id)}
            onDragOver={onDragOver}
            onDrop={() => onDrop(widget.widget_id)}
            className={cn(
              "grid cursor-pointer grid-cols-[60px_1fr] items-center px-5 py-3 text-sm transition",
              idx % 2 === 0 ? "bg-white" : "bg-slate-50/60",
              dragId === widget.widget_id && "ring-2 ring-indigo-400"
            )}
          >
            <div className="flex items-center gap-2 text-slate-500">
              <GripVertical className="h-4 w-4" />
              <span className="text-xs font-semibold text-indigo-700">
                {widget.effectivePriority}
              </span>
            </div>
            <p className="font-semibold text-slate-900">{widget.name}</p>
          </div>
        ))}
      </div>
    );

  return (
    <ReportsListCard header={header} className="animate-fadeIn">
      {content}
    </ReportsListCard>
  );
}