"use client";

import { mutationCsrfHeaders } from "@/lib/mutation-csrf.client";
import { toastApiError } from "@/lib/toast-api-error";
import { useRouter } from "next/navigation";
import * as React from "react";
import { toast } from "sonner";

import { Button } from "@/components/ui/button";

import type { OrderBlotterDetail, OrderBlotterFieldData } from "./detail-types";
import { OrderBlotterViewDocument } from "./order-blotter-view-document";

type OrderBlotterUpdateFormProps = {
  detail: OrderBlotterDetail;
  /** When true, POST creates a new blotter (no id yet). */
  isCreate?: boolean;
  /** BFF save route (defaults to admin dashboard). */
  savePath?: string;
  /** Base path for post-save redirect, e.g. /customer/datatest/order-blotter */
  redirectBase?: string;
};

export function OrderBlotterUpdateForm({
  detail,
  isCreate = false,
  savePath = "/dashboard/order-blotter/save",
  redirectBase = "/dashboard/order-blotter",
}: OrderBlotterUpdateFormProps) {
  const router = useRouter();
  const [fields, setFields] = React.useState<OrderBlotterFieldData>(detail.fields);
  const [saving, setSaving] = React.useState(false);

  const onFieldChange = (key: string, value: string) => {
    setFields((prev) => ({ ...prev, [key]: value }));
  };

  const handleSave = async () => {
    setSaving(true);
    try {
      const response = await fetch(savePath, {
        method: "POST",
        credentials: "same-origin",
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
          ...mutationCsrfHeaders(savePath),
        },
        body: JSON.stringify({
          id: isCreate ? null : detail.id,
          ref: detail.ref ?? null,
          OrderBlotterData: fields,
          OrderBlotter: {
            transaction_id: detail.transactionId,
            transaction_corporate_db: detail.portfolio ?? null,
          },
        }),
      });
      const payload = (await response.json().catch(() => null)) as {
        status?: string;
        message?: string;
        id?: number;
        ref?: string;
      } | null;
      if (!response.ok || payload?.status === "error") {
        throw new Error(payload?.message || "Save failed");
      }
      toast.success("Order blotter saved");
      const nextId = payload?.id ?? detail.id;
      const refQs = payload?.ref ? `&ref=${encodeURIComponent(payload.ref)}` : "";
      router.push(`${redirectBase}/${nextId}?action=view${refQs}`);
      router.refresh();
    } catch (error) {
      toastApiError(error, "Save failed");
    } finally {
      setSaving(false);
    }
  };

  return (
    <div className="flex flex-col gap-4">
      <div className="flex justify-end gap-2">
        <Button type="button" onClick={() => void handleSave()} disabled={saving}>
          {saving ? "Saving…" : isCreate ? "Create blotter" : "Save changes"}
        </Button>
      </div>
      <OrderBlotterViewDocument
        detail={{ ...detail, fields }}
        editable
        onFieldChange={onFieldChange}
      />
    </div>
  );
}