"use client";

import * as React from "react";

import { DiyWidgetCard, type DiyDraft } from "../asset-widget-forms";
import type { WidgetConfigPanelProps } from "../types";
import { useAssetWidgetSettings } from "../use-asset-widget-settings";

export function DiyHoldingsConfigPanel({
  tenant,
  widget,
  mode = "edit",
  onClose,
  onWidgetsChanged,
}: WidgetConfigPanelProps) {
  const {
    data,
    setData,
    loading,
    error,
    busy,
    save,
    banks,
    assets,
    currencies,
    newDiyDraft,
    diyPayload,
  } = useAssetWidgetSettings(tenant, true);

  const isCreate = mode === "create" || !widget;
  const [createDraft, setCreateDraft] = React.useState<DiyDraft | null>(null);

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

  const diyWidget = React.useMemo(() => {
    if (isCreate) return createDraft;
    if (!data || !widget) return null;
    return data.diy_widgets.find((entry) => entry.widget_id === widget.widget_id) ?? null;
  }, [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 (!diyWidget) {
    return (
      <p className="text-muted-foreground text-sm">
        {isCreate
          ? "Preparing new DIY widget…"
          : "This DIY Consolidated Holdings widget is not available for configuration."}
      </p>
    );
  }

  const current = diyWidget;

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

  return (
    <DiyWidgetCard
      widget={current}
      banks={banks}
      assets={assets}
      currencies={currencies}
      levelOptions={data.level_options}
      busy={busy}
      embedded
      onChange={update}
      onSave={() =>
        void (async () => {
          if (isCreate) {
            const saved = await save(
              "diy-new",
              diyPayload(current, "diy-create"),
              "DIY widget added",
              true,
            );
            if (saved) {
              onWidgetsChanged?.();
              onClose();
            }
            return;
          }
          const saved = await save(
            `diy-${current.widget_id}`,
            diyPayload(current, "diy-save"),
            `${current.title.trim() || current.name} saved`,
          );
          if (saved) {
            onWidgetsChanged?.();
            onClose();
          }
        })()
      }
    />
  );
}