"use client";

import * as React from "react";

import type { DashboardAssetWidget } from "../../../_lib/dashboard-widgets-server-api";
import { BankWidgetCard } from "../asset-widget-forms";
import type { WidgetConfigPanelProps } from "../types";
import { useAssetWidgetSettings } from "../use-asset-widget-settings";

function emptyAssetDraft(
  banks: { id: string }[],
  reportTypes: Record<string, string>,
): DashboardAssetWidget {
  const defaultReport = Object.keys(reportTypes)[0] ?? "consolidated";
  return {
    widget_id: 0,
    name: "Asset Allocation",
    display_name: "Asset Allocation",
    allocation_title: "",
    report_type: defaultReport,
    selected_bank_ids: banks.map((bank) => bank.id),
  };
}

export function AssetAllocationConfigPanel({
  tenant,
  widget,
  mode = "edit",
  onClose,
  onWidgetsChanged,
}: WidgetConfigPanelProps) {
  const { data, setData, loading, error, busy, save, banks } = useAssetWidgetSettings(tenant, true);
  const isCreate = mode === "create";
  const [createDraft, setCreateDraft] = React.useState<DashboardAssetWidget | null>(null);

  React.useEffect(() => {
    if (!isCreate || !data || createDraft) return;
    setCreateDraft(emptyAssetDraft(banks, data.report_type_options));
  }, [banks, createDraft, data, isCreate]);

  const assetWidget = React.useMemo(() => {
    if (isCreate) return createDraft;
    if (!data || !widget) return null;
    const match = data.asset_widgets.find(
      (entry) => Number(entry.widget_id) === Number(widget.widget_id),
    );
    if (match) return match;
    // Settings list can open Configure before banks were ever saved for this row.
    const defaultReport = Object.keys(data.report_type_options)[0] ?? "consolidated";
    return {
      widget_id: widget.widget_id,
      name: widget.name || "Asset Allocation",
      display_name: widget.name || "Asset Allocation",
      allocation_title: "",
      report_type: defaultReport,
      selected_bank_ids: banks.map((bank) => bank.id),
    };
  }, [banks, createDraft, data, isCreate, widget]);

  if (loading) return <p className="text-muted-foreground text-sm">Loading configuration…</p>;
  if (error || !data) {
    return <p className="text-destructive text-sm">{error ?? "Widget settings are unavailable."}</p>;
  }
  if (!assetWidget) {
    return (
      <p className="text-muted-foreground text-sm">
        {isCreate
          ? "Preparing new Asset Allocation widget…"
          : "This Asset Allocation widget is not available for configuration."}
      </p>
    );
  }

  const current = assetWidget;

  function update(patch: Partial<DashboardAssetWidget>) {
    if (isCreate) {
      setCreateDraft((prev) => (prev ? { ...prev, ...patch } : prev));
      return;
    }
    const widgetId = current.widget_id;
    setData((prev) => {
      if (!prev) return prev;
      return {
        ...prev,
        asset_widgets: prev.asset_widgets.map((entry) =>
          entry.widget_id === widgetId ? { ...entry, ...patch } : entry,
        ),
      };
    });
  }

  return (
    <BankWidgetCard
      kind="asset"
      widget={current}
      banks={banks}
      reportTypes={data.report_type_options}
      busy={busy}
      embedded
      saveLabel={isCreate ? "Add Widget" : "Save Widget"}
      onChange={update}
      onSave={() => {
        const latest = isCreate
          ? current
          : (data.asset_widgets.find((entry) => entry.widget_id === current.widget_id) ?? current);
        void save(
          isCreate ? "asset-new" : `asset-${latest.widget_id}`,
          {
            operation: isCreate ? "asset-create" : "asset",
            widgetId: isCreate ? "new" : latest.widget_id,
            allocationTitle: latest.allocation_title,
            reportType: latest.report_type,
            selectedBankIds: latest.selected_bank_ids,
          },
          isCreate ? "Asset Allocation widget added" : `${latest.display_name} saved`,
          isCreate,
        ).then((ok) => {
          if (ok) {
            onWidgetsChanged?.();
            onClose();
          }
        });
      }}
    />
  );
}