import { GripVertical, AlertCircle } from "lucide-react";
import { cn } from "@/lib/utils";
import { WidgetWithPriority } from "@/types/dashboard-widgets";
import { WidgetListCard, WidgetListCardHeader } from "./WidgetListCard";

export interface SelectedWidgetsListProps {
  widgets: WidgetWithPriority[];
  loading: boolean;
  error: string | null;
  dragId: string | null;
  onDragStart: (id: string) => void;
  onDragOver: (e: React.DragEvent<HTMLDivElement>) => void;
  onDrop: (id: string) => void;
  onRemove: (id: string) => void;
}

export function SelectedWidgetsList({
  widgets,
  loading,
  error,
  dragId,
  onDragStart,
  onDragOver,
  onDrop,
  onRemove,
}: SelectedWidgetsListProps) {
  const header = (
    <WidgetListCardHeader
      label="Active"
      description="Shown on dashboard"
      badge={
        <span className="rounded-lg bg-[#428B4D]/10 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.2em] text-[#428B4D]">
          {widgets.length} items
        </span>
      }
    />
  );

  let content: React.ReactNode;
  if (loading) {
    content = (
      <div className="p-5 text-sm text-slate-600" aria-live="polite">
        Loading widgets…
      </div>
    );
  } else if (error) {
    content = (
      <div
        className="flex items-center gap-2 border-t border-amber-200 bg-amber-50 px-5 py-4 text-sm text-amber-700"
        role="alert"
        aria-live="polite"
      >
        <AlertCircle className="h-4 w-4 shrink-0" />
        {error}
      </div>
    );
  } else if (widgets.length === 0) {
    content = (
      <div className="p-5 text-sm text-slate-500">
        No active asset allocation widgets.
      </div>
    );
  } else {
    content = (
      <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(
              "cursor-pointer grid grid-cols-[72px_1.4fr_1fr] items-center gap-3 px-5 py-3 text-left text-sm transition hover:bg-[#428B4D]/5",
              idx % 2 === 0 ? "bg-white" : "bg-slate-50/80",
              dragId === widget.widget_id && "ring-2 ring-[#428B4D] ring-offset-0"
            )}
          >
            <div className="flex items-center gap-2 text-slate-500">
              <GripVertical className="h-4 w-4" />
              <span className="min-w-[24px] text-center text-xs font-semibold uppercase tracking-[0.2em] text-[#428B4D]">
                {widget.effectivePriority}
              </span>
            </div>
            <div className="min-w-0 truncate font-semibold text-slate-900">
              {widget.name}
            </div>
            <div className="flex justify-end gap-2">
              <span className="rounded-lg bg-emerald-50 px-2 py-1 text-[11px] font-semibold uppercase tracking-[0.15em] text-emerald-600">
                {widget.status || "—"}
              </span>
              <button
                type="button"
                className="rounded-lg bg-rose-50 px-2 py-1 text-[11px] font-semibold uppercase tracking-[0.15em] text-rose-600"
                onClick={(e) => {
                  e.stopPropagation();
                  onRemove(widget.widget_id);
                }}
              >
                Remove
              </button>
            </div>
          </div>
        ))}
      </div>
    );
  }

  return <WidgetListCard header={header}>{content}</WidgetListCard>;
}