"use client";

import * as React from "react";

import type { DashboardConsolidatedWidget } 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 emptyConsolidatedDraft(
  banks: { id: string }[],
  reportTypes: Record<string, string>,
): DashboardConsolidatedWidget {
  const defaultReport = Object.keys(reportTypes)[0] ?? "consolidated";
  return {
    widget_id: 0,
    name: "Consolidated Holdings",
    title: "",
    report_type: defaultReport,
    selected_bank_ids: banks.map((bank) => bank.id),
  };
}

export function ConsolidatedHoldingsConfigPanel({
  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<DashboardConsolidatedWidget | null>(null);

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

  const consolidatedWidget = React.useMemo(() => {
    if (isCreate) return createDraft;
    if (!data || !widget) return null;
    const match = data.consolidated_widgets.find(
      (entry) => Number(entry.widget_id) === Number(widget.widget_id),
    );
    if (match) return match;
    const defaultReport = Object.keys(data.report_type_options)[0] ?? "consolidated";
    return {
      widget_id: widget.widget_id,
      name: widget.name || "Consolidated Holdings",
      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 (!consolidatedWidget) {
    return (
      <p className="text-muted-foreground text-sm">
        {isCreate
          ? "Preparing new Consolidated Holdings widget…"
          : "This Consolidated Holdings widget is not available for configuration."}
      </p>
    );
  }

  const current = consolidatedWidget;

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

  return (
    <BankWidgetCard
      kind="consolidated"
      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.consolidated_widgets.find((entry) => entry.widget_id === current.widget_id) ??
            current);
        void save(
          isCreate ? "ch-new" : `ch-${latest.widget_id}`,
          {
            operation: isCreate ? "consolidated-create" : "consolidated",
            widgetId: isCreate ? "new" : latest.widget_id,
            title: latest.title,
            reportType: latest.report_type,
            selectedBankIds: latest.selected_bank_ids,
          },
          isCreate
            ? "Consolidated Holdings widget added"
            : `${latest.title.trim() || latest.name} saved`,
          isCreate,
        ).then((ok) => {
          if (ok) {
            onWidgetsChanged?.();
            onClose();
          }
        });
      }}
    />
  );
}