"use client";

import { Save, Plus, X } from "lucide-react";
import { cn } from "@/lib/utils";
import type { Widget } from "@/types/dashboard-widgets";
import type { DashboardWidgetBank } from "@/types/dashboard-widgets";

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

export interface AssetAllocationWidgetCardProps {
  widget: Widget;
  banks: DashboardWidgetBank[];
  isBankSelected: (widgetId: string, bankId: string) => boolean;
  onToggleBank: (widgetId: string, bankId: string, selected: boolean) => void;
  onSaveBanks: (widgetId: string) => void;
  saving: boolean;
  hasDirtySelection: boolean;
  isOnDashboard: boolean;
  onAddToDashboard: (widget: Widget) => void;
  onRemoveFromDashboard: (widgetId: string) => void;
}

export function AssetAllocationWidgetCard({
  widget,
  banks,
  isBankSelected,
  onToggleBank,
  onSaveBanks,
  saving,
  hasDirtySelection,
  isOnDashboard,
  onAddToDashboard,
  onRemoveFromDashboard,
}: AssetAllocationWidgetCardProps) {
  const selectedCount = banks.filter((b) =>
    isBankSelected(widget.widget_id, toStr(b.bank_id))
  ).length;

  return (
    <div
      className={cn(
        "relative flex flex-col rounded-2xl border bg-white overflow-hidden transition-shadow hover:shadow-lg",
        isOnDashboard
          ? "border-emerald-200/80 shadow-md shadow-slate-200/30"
          : "border-slate-200/80 shadow-lg shadow-slate-200/20"
      )}
    >
      {/* Accent bar when on dashboard */}
      {isOnDashboard && (
        <div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-emerald-500 to-emerald-400" />
      )}

      {/* Card header */}
      <div className="border-b border-slate-100 bg-gradient-to-br from-slate-50 to-white px-5 py-4">
        <h3 className="font-semibold text-slate-900 truncate" title={widget.name}>
          {widget.name}
        </h3>
        <p className="mt-1 text-xs text-slate-500">
          <span className="font-medium text-slate-600">{selectedCount}</span>
          <span className="text-slate-400"> of {banks.length} banks selected</span>
        </p>
      </div>

      {/* Banks list – always visible inside card */}
      <div className="flex-1 min-h-0 px-5 py-4 border-b border-slate-50">
        <p className="text-[11px] font-semibold uppercase tracking-wider text-slate-400 mb-3">
          Banks
        </p>
        <div className="max-h-52 overflow-y-auto space-y-2 pr-0.5 scrollbar-light">
          {banks.length === 0 ? (
            <p className="text-sm text-slate-500 py-3">No banks available</p>
          ) : (
            banks.map((bank) => {
              const bankId = toStr(bank.bank_id);
              const selected = isBankSelected(widget.widget_id, bankId);
              return (
                <label
                  key={bankId}
                  className={cn(
                    "flex cursor-pointer items-center gap-2.5 rounded-xl border px-3 py-2 text-sm transition-all duration-150",
                    selected
                      ? "border-emerald-200 bg-emerald-50/80 shadow-sm"
                      : "border-slate-100 bg-slate-50/60 hover:bg-slate-100 hover:border-slate-200"
                  )}
                >
                  <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-emerald-600 focus:ring-emerald-500/40"
                  />
                  <span className="truncate text-slate-800 font-medium">
                    {bank.bank_name}
                  </span>
                </label>
              );
            })
          )}
        </div>
      </div>

      {/* Card footer: Add/Remove + Save */}
      <div className="flex flex-wrap items-center gap-2 px-5 py-4 bg-slate-50/60 border-t border-slate-100">
        {isOnDashboard ? (
          <button
            type="button"
            onClick={() => onRemoveFromDashboard(widget.widget_id)}
            className="inline-flex items-center gap-1.5 rounded-xl border border-rose-200 bg-white px-3 py-2 text-xs font-semibold text-rose-600 hover:bg-rose-50 transition-colors"
          >
            <X className="h-3.5 w-3.5" />
            Remove from dashboard
          </button>
        ) : (
          <button
            type="button"
            onClick={() => onAddToDashboard(widget)}
            className="inline-flex items-center gap-1.5 rounded-xl bg-emerald-600 px-3 py-2 text-xs font-semibold text-white shadow-sm hover:bg-emerald-500 transition-colors"
          >
            <Plus className="h-3.5 w-3.5" />
            Add to dashboard
          </button>
        )}
        <button
          type="button"
          onClick={() => onSaveBanks(widget.widget_id)}
          disabled={saving || !hasDirtySelection}
          className={cn(
            "inline-flex items-center gap-1.5 rounded-xl px-3 py-2 text-xs font-semibold transition-colors ml-auto",
            hasDirtySelection
              ? "bg-emerald-600 text-white shadow-sm hover:bg-emerald-500 disabled:opacity-60"
              : "bg-slate-100 text-slate-400 cursor-not-allowed"
          )}
        >
          <Save className="h-3.5 w-3.5" />
          {saving ? "Saving…" : "Save banks"}
        </button>
      </div>
    </div>
  );
}