"use client";

import { toastApiError } from "@/lib/toast-api-error";
import * as React from "react";
import Link from "next/link";
import { useRouter, useSearchParams } from "next/navigation";
import { ArrowLeft, Layers3 } from "lucide-react";
import { toast } from "sonner";

import {
  createBondChildClient,
  loadBondChildFormContextClient,
  loadBondChildUpdateFormContextClient,
  updateBondChildClient,
  type BondChildClientOptions,
} from "@/app/customer/[tenant]/derivatives-fixed-income/_lib/bond-child-api";
import { mapBondChildModelToFormValues } from "@/app/customer/[tenant]/derivatives-fixed-income/_lib/map-bond-child";
import {
  BOND_CHILD_LABELS,
  isBondChildKind,
  isBondEditableChildKind,
  supportsStandaloneBondChildCreate,
  type BondChildFormContext,
  type BondChildKind,
} from "@/app/customer/[tenant]/derivatives-fixed-income/_lib/bond-child-types";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import type { StockAccumulatorFormValues } from "@/components/form/schemas/stock-accumulator-schema";
import { useCustomerModuleListPath } from "@/components/form/transaction-workspace/list-table-form-actions";
import { StockAccumulatorTransactionForm } from "@/components/form/transaction-workspace/stock-accumulator-transaction-form";

const DERIVATIVES_CHILD_FORM_ID = "derivatives-fixed-income-child-form";
const DERIVATIVES_LIST_PATH = "/customer/derivatives-fixed-income";

function childFormIsReady(child: BondChildKind | null, pid: string): boolean {
  if (!child) {
    return false;
  }
  if (pid) {
    return true;
  }

  return supportsStandaloneBondChildCreate(child);
}

export function DerivativesFormRoutePage() {
  const router = useRouter();
  const listPath = useCustomerModuleListPath(DERIVATIVES_LIST_PATH);
  const searchParams = useSearchParams();
  const childParam = searchParams.get("child")?.trim() ?? "";
  const pid = searchParams.get("pid")?.trim() ?? "";
  const id = searchParams.get("id")?.trim() ?? "";
  const markAsExpiredId = searchParams.get("markAsExpired")?.trim() ?? "";
  const fType = searchParams.get("f_type")?.trim() ?? "";
  const tempId = searchParams.get("temp_id")?.trim() ?? "";
  const expiredId = searchParams.get("expired_id")?.trim() ?? "";
  const hideFromTemp = searchParams.get("hide")?.trim() === "1";

  // Create-from-temp prefill (Temp Data → impersonate → `/derivatives-fixed-income/form?...`).
  const tempRouteOptions = React.useMemo<BondChildClientOptions>(
    () => ({
      tempId: tempId || undefined,
      expiredId: expiredId || undefined,
      hide: hideFromTemp || undefined,
    }),
    [expiredId, hideFromTemp, tempId],
  );

  const [context, setContext] = React.useState<BondChildFormContext | null>(null);
  const [initialValues, setInitialValues] = React.useState<StockAccumulatorFormValues | undefined>(
    undefined,
  );
  const [loadError, setLoadError] = React.useState<string | null>(null);
  const [isSaving, setIsSaving] = React.useState(false);

  const child = isBondChildKind(childParam) ? childParam : null;
  const canLoadForm = childFormIsReady(child, pid);
  const isUpdateMode = isBondEditableChildKind(child) && id !== "";

  React.useEffect(() => {
    if (!canLoadForm || !child) {
      return;
    }

    let cancelled = false;

    const loadPromise = isUpdateMode
      ? loadBondChildUpdateFormContextClient(child, id, pid)
      : loadBondChildFormContextClient(child, pid, {
          markAsExpiredId: child === "mark_expired" ? markAsExpiredId || pid : undefined,
          fType: child === "mark_expired" ? fType || undefined : undefined,
          ...tempRouteOptions,
        });

    void loadPromise
      .then((loaded) => {
        if (cancelled) return;
        setContext(loaded);
        setInitialValues(mapBondChildModelToFormValues(child, loaded.model, loaded.fieldMeta, pid));
        setLoadError(null);
      })
      .catch((error) => {
        if (cancelled) return;
        setLoadError(error instanceof Error ? error.message : "Could not load form.");
      });

    return () => {
      cancelled = true;
    };
  }, [canLoadForm, child, fType, id, isUpdateMode, markAsExpiredId, pid, tempRouteOptions]);

  const title = child ? BOND_CHILD_LABELS[child] : "Derivative action";
  const pageHeading = context?.meta?.pageHeading ?? title;
  const formKeySuffix = pid || tempId || "standalone";
  const isLoading = canLoadForm && context === null && loadError === null;

  async function handleSubmit(values: StockAccumulatorFormValues) {
    if (!child || !context || !childFormIsReady(child, pid)) {
      return;
    }

    setIsSaving(true);
    try {
      if (isUpdateMode && isBondEditableChildKind(child)) {
        await updateBondChildClient(child, id, pid, values as Record<string, unknown>, context.formName);
        toast.success(`${title} updated`, {
          description: "The derivative transaction was saved successfully.",
        });
      } else {
        await createBondChildClient(child, pid, values as Record<string, unknown>, context.formName, {
          markAsExpiredId: child === "mark_expired" ? markAsExpiredId || pid : undefined,
          fType: child === "mark_expired" ? fType || undefined : undefined,
          ...tempRouteOptions,
        });
        toast.success(`${title} created`, {
          description: "The derivative transaction was saved successfully.",
        });
      }
      router.push(listPath);
    } catch (error) {
      toastApiError(error, "Derivative transaction could not be saved.");
      throw error;
    } finally {
      setIsSaving(false);
    }
  }

  if (!child || !childFormIsReady(child, pid)) {
    return (
      <div className="flex min-h-full flex-col gap-4 px-4 py-8 lg:px-6">
        <p className="text-destructive text-sm">{loadError ?? "Missing derivative action."}</p>
        <Button variant="outline" size="sm" asChild>
          <Link href={listPath}>Back to list</Link>
        </Button>
      </div>
    );
  }

  return (
    <div className="flex min-h-full w-full min-w-0 flex-1 flex-col bg-muted/20">
      <div className="flex w-full min-w-0 flex-1 flex-col gap-6 px-4 pt-6 pb-24 lg:gap-8 lg:px-6 lg:pt-8">
        <header className="flex w-full min-w-0 flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
          <div className="flex min-w-0 items-start gap-4">
            <div className="flex size-11 shrink-0 items-center justify-center rounded-xl border border-primary/20 bg-primary/10 text-primary shadow-xs">
              <Layers3 className="size-5" />
            </div>
            <div className="min-w-0">
              <div className="flex flex-wrap items-center gap-2">
                <h1 className="font-semibold text-2xl tracking-tight text-foreground">{pageHeading}</h1>
                <Badge variant="outline" className="font-normal">
                  Draft
                </Badge>
              </div>
              {pid ? (
                <p className="mt-1.5 text-muted-foreground text-sm leading-relaxed">Parent #{pid}</p>
              ) : null}
            </div>
          </div>
          <Button variant="outline" size="sm" className="shrink-0 gap-1.5" asChild>
            <Link href={listPath}>
              <ArrowLeft className="size-3.5" />
              Back to list
            </Link>
          </Button>
        </header>

        {isLoading ? (
          <p className="text-muted-foreground text-sm">Loading form…</p>
        ) : loadError ? (
          <p className="text-destructive text-sm">{loadError}</p>
        ) : (
          <StockAccumulatorTransactionForm
            key={`${child}-${id || formKeySuffix}`}
            formId={DERIVATIVES_CHILD_FORM_ID}
            initialValues={initialValues}
            formOptionsRaw={context?.formOptions}
            fieldMeta={context?.fieldMeta}
            onSubmit={handleSubmit}
          />
        )}
      </div>

      <div className="sticky bottom-0 z-20 border-t border-border/60 bg-background/90 shadow-[0_-4px_24px_-8px_rgba(0,0,0,0.08)] backdrop-blur-md dark:shadow-[0_-4px_24px_-8px_rgba(0,0,0,0.35)]">
        <div className="flex w-full flex-wrap items-center justify-between gap-3 px-4 py-3.5 lg:px-6">
          <p className="text-muted-foreground text-xs sm:text-sm">
            All required fields must be valid before saving
          </p>
          <div className="flex flex-wrap items-center gap-2">
            <Button variant="ghost" size="sm" className="text-muted-foreground" asChild>
              <Link href={listPath}>Cancel</Link>
            </Button>
            <Button
              type="submit"
              form={DERIVATIVES_CHILD_FORM_ID}
              size="sm"
              className="min-w-[7.5rem] px-6 shadow-sm"
              disabled={isLoading || Boolean(loadError) || isSaving}
            >
              {isSaving ? "Saving…" : isUpdateMode ? "Save changes" : "Create transaction"}
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
}