import { AlertCircle } from "lucide-react";
import { Widget } from "@/types/dashboard-widgets";

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

export function AvailableWidgetsList({
  widgets,
  selectedIds,
  loading,
  error,
  onAdd,
}: AvailableWidgetsListProps) {
  return (
    <div className="rounded-lg border border-slate-200 bg-white shadow-sm">
      <div className="flex items-center justify-between border-b border-slate-200 px-5 py-3">
        <div>
          <p className="text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-500">
            Available
          </p>
          <p className="text-sm text-slate-700">Asset allocation widgets</p>
        </div>

        <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>
      </div>

      {loading ? (
        <div className="p-5 text-sm text-slate-600">Loading widgets…</div>
      ) : error ? (
        <div className="flex items-center gap-2 border-t border-amber-200 bg-amber-50 px-5 py-4 text-sm text-amber-700">
          <AlertCircle className="h-4 w-4" />
          {error}
        </div>
      ) : widgets.length === 0 ? (
        <div className="p-5 text-sm text-slate-500">No available widgets.</div>
      ) : (
        <div className="divide-y divide-slate-200">
          {widgets.map((widget) => {
            const isSelected = selectedIds.has(widget.widget_id);
            const addedLabel = widget.date_added
              ? new Date(widget.date_added).toLocaleDateString()
              : "Unknown date";

            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 {addedLabel}</p>
                </div>

                <div className="flex justify-end">
                  <button
                    type="button"
                    disabled={isSelected}
                    onClick={() => onAdd(widget)}
                    className={`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>
      )}
    </div>
  );
}