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

export interface AvailableWidgetsListProps {
  widgets: Widget[];
  selectedIds: Set<string>;
  loading: boolean;
  error: string | null;
  onAdd: (widget: Widget) => void;
}

function formatAddedDate(dateAdded: string | undefined): string {
  return dateAdded
    ? new Date(dateAdded).toLocaleDateString()
    : "Unknown date";
}

export function AvailableWidgetsList({
  widgets,
  selectedIds,
  loading,
  error,
  onAdd,
}: AvailableWidgetsListProps) {
  const header = (
    <WidgetListCardHeader
      label="Available"
      description="Asset allocation widgets"
      badge={
        <span className="rounded-lg bg-slate-100 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-700">
          {widgets.length} total
        </span>
      }
    />
  );

  let content: React.ReactNode;
  if (loading) {
    content = <div className="p-5 text-sm text-slate-600">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"
      >
        <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 available widgets.</div>;
  } else {
    content = (
      <div className="divide-y divide-slate-200">
        {widgets.map((widget) => {
          const isSelected = selectedIds.has(widget.widget_id);
          return (
            <div
              key={widget.widget_id}
              className="grid grid-cols-[1.6fr_1fr] items-center gap-3 px-5 py-3 text-sm"
            >
              <div>
                <p className="font-semibold text-slate-900">{widget.name}</p>
                <p className="text-xs text-slate-500">
                  Added {formatAddedDate(widget.date_added)}
                </p>
              </div>
              <div className="flex justify-end">
                <button
                  type="button"
                  disabled={isSelected}
                  aria-disabled={isSelected}
                  onClick={() => onAdd(widget)}
                  className={cn(
                    "rounded-lg px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.2em]",
                    isSelected
                      ? "bg-slate-100 text-slate-400"
                      : "bg-[#428B4D] text-white shadow-sm transition hover:bg-[#428B4D]/90"
                  )}
                >
                  {isSelected ? "Added" : "Add"}
                </button>
              </div>
            </div>
          );
        })}
      </div>
    );
  }

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