"use client";

import type { WidgetItem } from "@/types/dashboard";

export interface AddWidgetModalProps {
  available: WidgetItem[];
  onSelect: (widget: WidgetItem) => void;
  onClose: () => void;
}

export function AddWidgetModal({
  available,
  onSelect,
  onClose,
}: AddWidgetModalProps) {
  if (available.length === 0) {
    return (
      <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
        <div className="w-full max-w-md rounded-xl bg-white p-6 shadow-xl text-slate-900">
          <h3 className="text-lg font-semibold">Add Widget</h3>
          <p className="mt-2 text-sm text-slate-500">
            All available asset allocation widgets are already on your dashboard.
          </p>
          <button
            type="button"
            onClick={onClose}
            className="mt-4 w-full rounded-lg border border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50"
          >
            Close
          </button>
        </div>
      </div>
    );
  }

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
      <div className="w-full max-w-md rounded-xl bg-white p-6 shadow-xl text-slate-900">
        <h3 className="text-lg font-semibold">Add Widget</h3>
        <p className="mt-1 text-sm text-slate-500">
          Choose a widget to add to your dashboard.
        </p>
        <ul className="mt-4 space-y-2">
          {available.map((widget) => (
            <li key={widget.widget_id}>
              <button
                type="button"
                onClick={() => onSelect(widget)}
                className="w-full rounded-lg border border-slate-200 bg-white px-4 py-3 text-left text-sm font-medium text-slate-700 hover:border-slate-300 hover:bg-slate-50 transition-colors"
              >
                <span className="font-semibold">
                  {widget.name || "Asset Allocation"}
                </span>
              </button>
            </li>
          ))}
        </ul>
        <button
          type="button"
          onClick={onClose}
          className="mt-4 w-full rounded-lg border border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-600 hover:bg-slate-50"
        >
          Cancel
        </button>
      </div>
    </div>
  );
}