"use client";

import { ChevronDown, ChevronRight, Save } from "lucide-react";
import { useState } from "react";
import { cn } from "@/lib/utils";
import type { WidgetWithPriority } from "@/types/dashboard-widgets";
import type { DashboardWidgetBank } from "@/types/dashboard-widgets";

export interface AssetAllocationBankSelectionProps {
  widget: WidgetWithPriority;
  banks: DashboardWidgetBank[];
  isBankSelected: (widgetId: string, bankId: string) => boolean;
  onToggleBank: (widgetId: string, bankId: string, selected: boolean) => void;
  /** Save bank selection for this widget. When provided, a Save button is shown. */
  onSave?: (widgetId: string) => void;
  saving?: boolean;
  /** When true, Save button is enabled (user has changed selection). */
  hasDirtySelection?: boolean;
}

function toStr(id: number | string): string {
  return typeof id === "number" ? String(id) : id;
}

export function AssetAllocationBankSelection({
  widget,
  banks,
  isBankSelected,
  onToggleBank,
  onSave,
  saving = false,
  hasDirtySelection = false,
}: AssetAllocationBankSelectionProps) {
  const [expanded, setExpanded] = useState(false);

  if (banks.length === 0) return null;

  const selectedCount = banks.filter((b) =>
    isBankSelected(widget.widget_id, toStr(b.bank_id))
  ).length;

  return (
    <div className="rounded-lg border border-slate-200 bg-white shadow-sm">
      <div className="flex items-center gap-2 border-b border-slate-200 bg-slate-50/80 px-4 py-3">
        <button
          type="button"
          onClick={() => setExpanded((e) => !e)}
          className="flex flex-1 items-center gap-2 text-left text-sm font-medium text-slate-700 hover:bg-slate-100 rounded -m-1 p-1"
          aria-expanded={expanded}
        >
          {expanded ? (
            <ChevronDown className="h-4 w-4 shrink-0 text-slate-500" />
          ) : (
            <ChevronRight className="h-4 w-4 shrink-0 text-slate-500" />
          )}
          <span className="font-semibold text-slate-900">{widget.name}</span>
          <span className="rounded bg-slate-200 px-2 py-0.5 text-xs text-slate-600">
            {selectedCount} bank{selectedCount !== 1 ? "s" : ""} selected
          </span>
        </button>
        {onSave && (
          <button
            type="button"
            onClick={(e) => {
              e.stopPropagation();
              onSave(widget.widget_id);
            }}
            disabled={saving || !hasDirtySelection}
            className={cn(
              "inline-flex shrink-0 items-center gap-1.5 rounded-lg border px-3 py-1.5 text-xs font-semibold transition",
              hasDirtySelection
                ? "border-[#428B4D]/40 bg-[#428B4D] text-white hover:bg-[#428B4D]/90 disabled:opacity-60"
                : "border-slate-200 bg-slate-100 text-slate-500 cursor-not-allowed"
            )}
          >
            <Save className="h-3.5 w-3.5" />
            {saving ? "Saving…" : "Save"}
          </button>
        )}
      </div>
      {expanded && (
        <div className="border-t border-slate-200 px-4 py-4">
          <p className="mb-3 text-xs font-medium uppercase tracking-wider text-slate-500">
            Select banks to include in this asset allocation widget
          </p>
          <ul className="grid gap-2 sm:grid-cols-2 lg:grid-cols-3">
            {banks.map((bank) => {
              const bankId = toStr(bank.bank_id);
              const selected = isBankSelected(widget.widget_id, bankId);
              return (
                <li key={bankId}>
                  <label
                    className={cn(
                      "flex cursor-pointer items-center gap-2 rounded-lg border px-3 py-2 text-sm transition",
                      selected
                        ? "border-[#428B4D]/40 bg-[#428B4D]/10"
                        : "border-slate-200 bg-white hover:bg-slate-50"
                    )}
                  >
                    <input
                      type="checkbox"
                      checked={selected}
                      onChange={(e) =>
                        onToggleBank(widget.widget_id, bankId, e.target.checked)
                      }
                      className="h-4 w-4 rounded border-slate-300 text-[#428B4D] focus:ring-[#428B4D]"
                    />
                    <span className="font-medium text-slate-800">{bank.bank_name}</span>
                  </label>
                </li>
              );
            })}
          </ul>
        </div>
      )}
    </div>
  );
}