"use client";

import { useEffect, useState, Suspense, useMemo, useCallback } from "react";
import { useSearchParams } from "next/navigation";
import FloatingFooter from "@/components/FloatingFooter";
import { FormSectionHeading } from "@/components/ui/FormSectionHeading";
import { getTodayDate, formatDateToString } from "@/lib/date-utils";
import { DerivativeAccumulatorFormField } from "@/components/validation/FormFields";
import { parseNumber, formatCurrency } from "@/lib/number-utils";
import { useToast } from "@/hooks/useToast";
import { useFormState } from "@/hooks/useFormState";
import { useFormDataLoader, toOption, safeString, safeDate } from "@/hooks/useFormDataLoader";
import { validatePositiveNumber, validateSelectOption, validateDate } from "@/lib/form-validation";
import { ToastComponent } from "@/components/common/Toast";
import { LoadingOverlay } from "@/components/common/LoadingOverlay";
import BankModal from "@/components/common/BankModel";
import PlacementDatePicker from "@/fields/PlacementDate";
import SecurityTickerInput from "@/fields/SecurityTicker";
import SecurityNameInput from "@/fields/SecurityName";
import ObservationDatePicker from "@/fields/ObservationDate";
import TransactionTypeSelect from "@/fields/TypeOfTransaction";
import ExecutionTypeSelect from "@/fields/ExecutionType";
import BankAdviceRefNoInput from "@/fields/BankAdviceNo";
import PeriodsWithUnit from "@/fields/PeriodsDuration";
import StartDatePicker from "@/fields/StartDate";
import MaturityDatePicker from "@/fields/MaturityDate";
import QuantityInput from "@/fields/Quantity";
import BankNotesInput from "@/fields/BankNotes";
import SpotRateInput from "@/fields/SpotPrice";
import StrikePriceInput from "@/fields/StrikePrice";
import ProfitTakingInput from "@/fields/ProfiltTaking";
import MaxExposureInput from "@/fields/MaxExpourse";
import CommissionInput from "@/fields/Comission";
import ChargesAndFeesInput from "@/fields/ChargesFeesAbroad";
import FederalTurnoverTaxInput from "@/fields/FederalTurnOver";
import CurrencySelect from "@/fields/Currency";
import BankSelect from "@/fields/Bank";
import RelationshipManagerInput from "@/fields/RelationshipManager";
import RemarksInput from "@/fields/Remarks";
import DocumentUpload from "@/fields/FileUpload";
import KnockAmountWithSelect from "@/fields/KnockAmount";
import KnockTypeToggle from "@/fields/KnockAmountRadio";

function AccumulatorFormContent() {

  const [t_o_t, sett_o_t] = useState<{ label: string; value: string } | null>(null);
  const [e_t, sete_t] = useState<{ label: string; value: string } | null>(null);

  // ✅ Fixed: Added correct states so e_t is not reused
  const [durationUnit, setDurationUnit] = useState<{ label: string; value: string } | null>(null);
  const [knockList, setKnockList] = useState<{ label: string; value: string } | null>(null);

  const [p_currency, setp_currency] = useState<{ label: string; value: string } | null>(null);
  const [bank, setbank] = useState<{ label: string; value: string } | null>(null);
  const [selectedFile, setSelectedFile] = useState<File | null>(null);
  const [bankadviserefno, setbankadviserefno] = useState("");
  const [placementdate, setplacementdate] = useState("");
  const [observationdate, setobservationdate] = useState("");
  const [startdate, setstartdate] = useState("");
  const [maturitydate, setmaturitydate] = useState("");
  const [knockT, setKnockT] = useState("1");
  const [quantity, setquantity] = useState("");
  const [ticker, setticker] = useState("");
  const [noofperiods, setnoofperiods] = useState("");
  const [spotrate, setspotrate] = useState("");
  const [profittaking, setprofittaking] = useState("");
  const [maxexposure, setmaxexposure] = useState("");
  const [securityname, setsecurityname] = useState("");
  const [strikeprice, setstrikeprice] = useState("");
  const [amount, setamount] = useState("");
  const [knockamount, setknockamount] = useState("");
  const [commission, setcommission] = useState("");
  const [chargesandfees, setchargesandfees] = useState("");
  const [federalturnovertax, setfederalturnovertax] = useState("");
  const [relationshipmanager, setrelationshipmanager] = useState("");
  const [banknotes, setbanknotes] = useState("");
  const [remarks, setRemarks] = useState("");
  const [showBankModal, setShowBankModal] = useState(false);

  const searchParams = useSearchParams();
  const editId = searchParams.get("id");
  const isEditing = useMemo(() => Boolean(editId), [editId]);
  const [isSaving, setIsSaving] = useState(false);
  const [touchedFields, setTouchedFields] = useState<Set<DerivativeAccumulatorFormField>>(new Set());

  // Common hooks
  const { toast, showToast } = useToast();
  const { errors, setErrors, clearError, handleFieldBlur, formRef } = useFormState<DerivativeAccumulatorFormField>();

  // Load existing data for edit mode
  const { loadingExisting } = useFormDataLoader({
    editId,
    apiEndpoint: "/api/equity/derivatives/accumulator",
    transformData: (attributes) => {
      setplacementdate(safeDate(attributes.t_date));
      sett_o_t(toOption(attributes.t_o_t as string | number | null | undefined, attributes.t_o_t_label as string | number | null | undefined));
      sete_t(toOption(attributes.e_t as string | number | null | undefined, attributes.e_t_label as string | number | null | undefined));
      setDurationUnit(toOption(attributes.duration_unit as string | number | null | undefined, attributes.duration_unit_label as string | number | null | undefined));
      setKnockList(toOption(attributes.knock as string | number | null | undefined, attributes.knock_label as string | number | null | undefined));
      setbank(toOption(attributes.bank_id as string | number | null | undefined, attributes.bank_name as string | number | null | undefined));
      setp_currency(toOption(attributes.p_currency as string | number | null | undefined, attributes.p_currency_label as string | number | null | undefined));
      setquantity(safeString(attributes.quantity));
      setticker(safeString(attributes.ticker));
      setsecurityname(safeString(attributes.isin));
      setnoofperiods(safeString(attributes.duration));
      setstartdate(safeDate(attributes.c_date, ""));
      setobservationdate(safeDate(attributes.o_date, ""));
      setmaturitydate(safeDate(attributes.m_date, ""));
      setstrikeprice(safeString(attributes.price));
      setspotrate(safeString(attributes.t_price));
      setprofittaking(safeString(attributes.maturity));
      setamount(safeString(attributes.amount));
      setcommission(safeString(attributes.commission));
      setchargesandfees(safeString(attributes.b_1));
      setfederalturnovertax(safeString(attributes.b_2));
      setrelationshipmanager(safeString(attributes.r_m));
      setbanknotes(safeString(attributes.b_notes));
      setRemarks(safeString(attributes.remarks));
      setbankadviserefno(safeString(attributes.r_no));
      setknockamount(safeString(attributes.knock));
      setKnockT(safeString(attributes.knock_t, "1"));
      
      // Mark fields as touched if they have values (for edit mode)
      const touched = new Set<DerivativeAccumulatorFormField>();
      if (attributes.t_date) touched.add("placementdate");
      if (attributes.t_o_t) touched.add("t_o_t");
      if (attributes.e_t) touched.add("e_t");
      if (attributes.ticker) touched.add("ticker");
      if (attributes.isin) touched.add("securityname");
      if (attributes.duration) touched.add("noofperiods");
      if (attributes.c_date) touched.add("startdate");
      if (attributes.quantity) touched.add("quantity");
      if (attributes.price) touched.add("strikeprice");
      if (attributes.t_price) touched.add("spotrate");
      setTouchedFields(touched);
    },
    onError: () => {
      showToast("error", "Failed to load accumulator data. Please refresh the page.");
    },
  });

  useEffect(() => {
    setplacementdate(getTodayDate());
  }, []);

  const hasQuantity = useMemo(() => quantity.trim() !== "", [quantity]);
  const hasSpotRate = useMemo(() => spotrate.trim() !== "", [spotrate]);
  const hasAmountInput = useMemo(() => amount.trim() !== "", [amount]);

  const quantityNumber = useMemo(() => parseNumber(quantity), [quantity]);
  const spotRateNumber = useMemo(() => parseNumber(spotrate), [spotrate]);
  const amountNumber = useMemo(() => (hasAmountInput ? parseNumber(amount) : 0), [hasAmountInput, amount]);

  const computedAmount = useMemo(
    () => (hasQuantity && hasSpotRate ? quantityNumber * spotRateNumber : 0),
    [hasQuantity, hasSpotRate, quantityNumber, spotRateNumber]
  );
  const totalAmount = useMemo(
    () => (hasAmountInput ? amountNumber : computedAmount),
    [hasAmountInput, amountNumber, computedAmount]
  );

  useEffect(() => {
    if (totalAmount > 0) {
      setmaxexposure(formatCurrency(totalAmount));
    } else {
      setmaxexposure("");
    }
  }, [totalAmount]);

  const commissionValue = useMemo(() => parseNumber(commission), [commission]);
  const chargesValue = useMemo(() => parseNumber(chargesandfees), [chargesandfees]);
  const taxValue = useMemo(() => parseNumber(federalturnovertax), [federalturnovertax]);
  const netAmount = useMemo(
    () => totalAmount - commissionValue - chargesValue - taxValue,
    [totalAmount, commissionValue, chargesValue, taxValue]
  );

  const footerData = useMemo(
    () => [
      { label: "Total Amount", value: formatCurrency(totalAmount) },
      { label: "Commission", value: formatCurrency(commissionValue) },
      { label: "Charges", value: formatCurrency(chargesValue) },
      { label: "Tax", value: formatCurrency(taxValue) },
      { label: "Net Amount", value: formatCurrency(netAmount) },
    ],
    [totalAmount, commissionValue, chargesValue, taxValue, netAmount]
  );

  const resetForm = useCallback(() => {
    setplacementdate(getTodayDate());
    sett_o_t(null);
    sete_t(null);
    setDurationUnit(null);
    setKnockList(null);
    setp_currency(null);
    setbank(null);
    setSelectedFile(null);
    setbankadviserefno("");
    setquantity("");
    setticker("");
    setsecurityname("");
    setamount("");
    setcommission("");
    setchargesandfees("");
    setfederalturnovertax("");
    setrelationshipmanager("");
    setbanknotes("");
    setRemarks("");
    setspotrate("");
    setstrikeprice("");
    setnoofperiods("");
    setstartdate("");
    setobservationdate("");
    setmaturitydate("");
    setprofittaking("");
    setmaxexposure("");
    setknockamount("");
    setKnockT("1");
    setErrors({});
    setTouchedFields(new Set());
  }, [setErrors]);

  const validateField = useCallback((field: DerivativeAccumulatorFormField): string | undefined => {
    switch (field) {
      case "placementdate":
        return validateDate(placementdate, "Placement date");
      case "t_o_t":
        return validateSelectOption(t_o_t, "Type of transaction");
      case "e_t":
        return validateSelectOption(e_t, "Execution type");
      case "ticker":
        if (!ticker.trim()) return "Security ticker/ISIN is required.";
        return;
      case "securityname":
        if (!securityname.trim()) return "Security name is required.";
        return;
      case "noofperiods": {
        const normalized = noofperiods.replace(/,/g, "").trim();
        if (!normalized) return "No. of periods is required.";
        if (!/^\d+$/.test(normalized)) return "No. of periods must be a whole number.";
        if (Number(normalized) <= 0) return "No. of periods must be greater than zero.";
        return;
      }
      case "startdate":
        return validateDate(startdate, "Start date");
      case "quantity":
        return validatePositiveNumber(quantity, "Quantity");
      case "strikeprice":
        return validatePositiveNumber(strikeprice, "Strike price");
      case "spotrate":
        return validatePositiveNumber(spotrate, "Spot rate");
      default:
        return undefined;
    }
  }, [placementdate, t_o_t, e_t, ticker, securityname, noofperiods, startdate, quantity, strikeprice, spotrate]);

  const handleFieldBlurCustom = useCallback((field: DerivativeAccumulatorFormField) => {
    const hasValue = 
      (field === "placementdate" && placementdate.trim()) ||
      (field === "t_o_t" && t_o_t) ||
      (field === "e_t" && e_t) ||
      (field === "ticker" && ticker.trim()) ||
      (field === "securityname" && securityname.trim()) ||
      (field === "noofperiods" && noofperiods.trim()) ||
      (field === "startdate" && startdate.trim()) ||
      (field === "quantity" && quantity.trim()) ||
      (field === "strikeprice" && strikeprice.trim()) ||
      (field === "spotrate" && spotrate.trim());
    
    if (touchedFields.has(field) || hasValue) {
      handleFieldBlur(field, validateField);
    }
  }, [placementdate, t_o_t, e_t, ticker, securityname, noofperiods, startdate, quantity, strikeprice, spotrate, touchedFields, handleFieldBlur, validateField]);

  const handleFieldBlurWrapper = useCallback((
    field: DerivativeAccumulatorFormField,
    validateFn: (field: DerivativeAccumulatorFormField) => string | undefined
  ) => {
    handleFieldBlurCustom(field);
  }, [handleFieldBlurCustom]);

  const validateForm = useCallback(() => {
    const fields: DerivativeAccumulatorFormField[] = [
      "placementdate",
      "t_o_t",
      "e_t",
      "ticker",
      "securityname",
      "noofperiods",
      "startdate",
      "quantity",
      "strikeprice",
      "spotrate",
    ];
    const newErrors: Record<string, string> = {};
    fields.forEach((f) => {
      const msg = validateField(f);
      if (msg) newErrors[f] = msg;
    });
    return newErrors;
  }, [validateField]);

  const handleSubmit = useCallback(async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();

    const validationErrors = validateForm();
    if (Object.keys(validationErrors).length > 0) {
      setErrors(validationErrors);
      
      // Get the first error field name and message
      const firstErrorField = Object.keys(validationErrors)[0];
      const firstErrorMessage = validationErrors[firstErrorField as DerivativeAccumulatorFormField];
      
      // Scroll to the first error field
      setTimeout(() => {
        const errorElement = document.querySelector(`[name="${firstErrorField}"], [data-field="${firstErrorField}"]`) ||
                            document.querySelector(`input[id*="${firstErrorField}"], select[id*="${firstErrorField}"]`);
        if (errorElement) {
          errorElement.scrollIntoView({ behavior: "smooth", block: "center" });
          // Try to focus the input if it's focusable
          if (errorElement instanceof HTMLElement && 'focus' in errorElement) {
            (errorElement as HTMLElement).focus();
          }
        }
      }, 100);
      
      const errorCount = Object.keys(validationErrors).length;
      showToast("error", `Please fix ${errorCount} required field${errorCount > 1 ? 's' : ''} before saving.`);
      return;
    }

    setIsSaving(true);

    // Convert file to base64 if file is selected
    let fileBase64 = "";
    if (selectedFile) {
      try {
        fileBase64 = await new Promise<string>((resolve, reject) => {
          const reader = new FileReader();
          reader.onload = () => {
            const result = reader.result as string;
            // Remove data URL prefix (e.g., "data:application/pdf;base64,")
            const base64 = result.split(",")[1] || result;
            resolve(base64);
          };
          reader.onerror = (error) => reject(error);
          reader.readAsDataURL(selectedFile);
        });
      } catch (fileError) {
        console.error("Error converting file to base64:", fileError);
        showToast("error", "Failed to process the uploaded file. Please try again.");
        setIsSaving(false);
        return;
      }
    }

    // Payload - Wrapped in StockAccumulator object
    const payload = {
      StockAccumulator: {
        ticker,
        isin: securityname,
        t_date: placementdate,
        o_date: observationdate,
        t_o_t: t_o_t?.value ?? "",
        e_t: e_t?.value ?? "",
        r_no: bankadviserefno,
        duration: noofperiods,
        duration_other: durationUnit?.value ?? "",
        duration_unit: durationUnit?.value ?? "",
        c_date: startdate,
        m_date: maturitydate,
        quantity: quantity, // Keep as string to match example format
        b_notes: banknotes,
        price: strikeprice, // Keep as string to match example format
        t_price: spotrate,
        maturity: profittaking,
        amount: amount,
        commission: commission,
        b_1: chargesandfees,
        b_2: federalturnovertax,
        p_currency: p_currency?.value ?? "",
        bank_id: bank?.value ?? "",
        r_m: relationshipmanager,
        r_link: fileBase64, // Base64 encoded file string
        knock_ft: "",
        knock: knockList?.value ?? "",
        knock_t: knockT,
      },
    };

    try {
      const url = isEditing && editId
        ? `/api/equity/derivatives/accumulator/update?id=${encodeURIComponent(editId)}`
        : "/api/equity/derivatives/accumulator/create";
      const method = isEditing ? "PUT" : "POST";
      
      const response = await fetch(url, {
        method,
        credentials: "include",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload),
      });

      if (!response.ok) {
        const errorText = await response.text();
        console.error("API Error:", errorText);
        let errorMessage = "Failed to save";
        try {
          const errorJson = JSON.parse(errorText);
          errorMessage = errorJson.error || errorJson.message || errorMessage;
        } catch {
          errorMessage = errorText || errorMessage;
        }
        showToast("error", errorMessage);
        setIsSaving(false);
        return;
      }

      const result = await response.json();

      if (result?.success || result?.status === "success" || response.status === 200) {
        showToast("success", isEditing ? "Accumulator updated successfully!" : "Accumulator saved successfully!");
        if (!isEditing) {
          resetForm();
        }
      } else {
        const errorMessage = result?.error || result?.message || "Unexpected server response.";
        showToast("error", errorMessage);
      }
    } catch (error) {
      console.error("Save error:", error);
      const errorMessage = error instanceof Error ? error.message : "Failed to save accumulator. Please check your connection and try again.";
      showToast("error", errorMessage);
    } finally {
      setIsSaving(false);
    }
  }, [isEditing, editId, validateForm, setErrors, showToast, selectedFile, ticker, securityname, placementdate, observationdate, t_o_t, e_t, bankadviserefno, noofperiods, durationUnit, startdate, maturitydate, quantity, banknotes, strikeprice, spotrate, profittaking, amount, commission, chargesandfees, federalturnovertax, p_currency, bank, relationshipmanager, knockList, knockT, resetForm]);

  const handleSave = useCallback(() => {
    if (isSaving) {
      return;
    }
    
    if (!formRef.current) {
      console.error("Form ref is not available");
      showToast("error", "Form not ready. Please refresh the page.");
      return;
    }

    formRef.current.requestSubmit();
  }, [isSaving, formRef, showToast]);

  const handleCloseBankModal = useCallback(() => {
    setShowBankModal(false);
  }, []);

  const pageTitle = useMemo(
    () => (isEditing ? "Update Stock Accumulator" : "Accumulator Information"),
    [isEditing]
  );

  const breadcrumbs = useMemo(
    () => [
      { label: "Home", href: "/" },
      { label: "Accumulator", href: "/equity/derivative" },
      { label: isEditing ? "Update Stock Accumulator" : "Create New Stock Accumulator" },
    ],
    [isEditing]
  );

  return (
    <>
      <ToastComponent toast={toast} />
      <LoadingOverlay isLoading={loadingExisting} message="Loading accumulator data..." />

      <div className="container mx-auto mt-6">
        <div className="bg-white rounded-lg shadow-md border-0">
          <FormSectionHeading
            title={pageTitle}
            eyebrow="Key Details"
            showBackButton
            icon={<i className="bx bx-line-chart" aria-hidden="true" />}
            breadcrumbs={breadcrumbs}
          />

          <div className="p-6 md:p-8 bg-slate-50/60">
            <form ref={formRef} onSubmit={handleSubmit} method="post">
              <div className="grid grid-cols-1 sm:grid-cols-4 gap-6">

                  {/* Ticker */}
                  <SecurityTickerInput<DerivativeAccumulatorFormField>
                    ticker={ticker}
                    setticker={setticker}
                    clearError={clearError}
                    errors={errors}
                    handleFieldBlur={handleFieldBlurWrapper}
                    validateField={validateField}
                  />

                  {/* Security Name */}
                  <SecurityNameInput<DerivativeAccumulatorFormField>
                    securityname={securityname}
                    setsecurityname={setsecurityname}
                    clearError={clearError}
                    errors={errors}
                    handleFieldBlur={handleFieldBlurWrapper}
                    validateField={validateField}
                  />

                  {/* Placement Date */}
                  <PlacementDatePicker<DerivativeAccumulatorFormField>
                    placementdate={placementdate}
                    setplacementdate={setplacementdate}
                    clearError={clearError}
                    errors={errors}
                    handleFieldBlur={handleFieldBlurWrapper}
                    validateField={validateField}
                    formatDateToString={formatDateToString}
                  />

                  {/* Observation Date */}
                  <ObservationDatePicker
                    observationdate={observationdate}
                    setobservationdate={setobservationdate}
                    formatDateToString={formatDateToString}
                  />

                  {/* Type of Transaction */}
                  <TransactionTypeSelect<DerivativeAccumulatorFormField>
                    t_o_t={t_o_t}
                    sett_o_t={sett_o_t}
                    clearError={clearError}
                    errors={errors}
                    handleFieldBlur={handleFieldBlurWrapper}
                    validateField={validateField}
                  />

                  {/* Execution Type */}
                  <ExecutionTypeSelect<DerivativeAccumulatorFormField>
                    e_t={e_t}
                    sete_t={sete_t}
                    clearError={clearError}
                    errors={errors}
                    handleFieldBlur={handleFieldBlurWrapper}
                    validateField={validateField}
                  />

                  {/* Bank Advice Ref */}
                  <BankAdviceRefNoInput
                    bankadviserefno={bankadviserefno}
                    setbankadviserefno={setbankadviserefno}
                  />

                  {/* Periods + Duration Unit */}
                  <PeriodsWithUnit<DerivativeAccumulatorFormField>
                    noofperiods={noofperiods}
                    setnoofperiods={setnoofperiods}
                    durationUnit={durationUnit}
                    setDurationUnit={setDurationUnit}
                    errors={errors}
                    clearError={clearError}
                    handleFieldBlur={handleFieldBlurWrapper}
                    validateField={validateField}
                  />

                  {/* Start Date */}
                  <StartDatePicker<DerivativeAccumulatorFormField>
                    startdate={startdate}
                    setstartdate={setstartdate}
                    formatDateToString={formatDateToString}
                    clearError={clearError}
                    handleFieldBlur={handleFieldBlurWrapper}
                    validateField={validateField}
                    errors={errors}
                  />

                  {/* Maturity Date */}
                  <MaturityDatePicker
                    maturitydate={maturitydate}
                    setmaturitydate={setmaturitydate}
                    formatDateToString={formatDateToString}
                  />

                  {/* Quantity */}
                  <QuantityInput<DerivativeAccumulatorFormField>
                    quantity={quantity}
                    setquantity={setquantity}
                    clearError={clearError}
                    errors={errors}
                    handleFieldBlur={handleFieldBlurWrapper}
                    validateField={validateField}
                  />

                  {/* Bank Notes */}
                  <BankNotesInput
                    banknotes={banknotes}
                    setbanknotes={setbanknotes}
                  />

                  {/* Spot Rate */}
                  <SpotRateInput<DerivativeAccumulatorFormField>
                    spotrate={spotrate}
                    setspotrate={setspotrate}
                    clearError={clearError}
                    errors={errors}
                    handleFieldBlur={handleFieldBlurWrapper}
                    validateField={validateField}
                  />

                  {/* Strike Price */}
                  <StrikePriceInput<DerivativeAccumulatorFormField>
                    strikeprice={strikeprice}
                    setstrikeprice={setstrikeprice}
                    clearError={clearError}
                    errors={errors}
                    handleFieldBlur={handleFieldBlurWrapper}
                    validateField={validateField}
                  />

                  {/* Profit Taking */}
                  <ProfitTakingInput
                    profittaking={profittaking}
                    setprofittaking={setprofittaking}
                  />

                  {/* Max Exposure */}
                  <MaxExposureInput
                    maxexposure={maxexposure}
                  />

                  {/* Commission */}
                  <CommissionInput
                    commission={commission}
                    setcommission={setcommission}
                  />

                  {/* Charges */}
                  <ChargesAndFeesInput
                    chargesandfees={chargesandfees}
                    setchargesandfees={setchargesandfees}
                  />

                  {/* Tax */}
                  <FederalTurnoverTaxInput
                    federalturnovertax={federalturnovertax}
                    setfederalturnovertax={setfederalturnovertax}
                  />

                  {/* Currency */}
                  <CurrencySelect
                    p_currency={p_currency}
                    setp_currency={setp_currency}
                  />

                  {/* Bank */}
                  <BankSelect
                    bank={bank}
                    setbank={setbank}
                    setShowBankModal={setShowBankModal}
                  />

                  {/* Relationship Manager */}
                  <RelationshipManagerInput
                    relationshipmanager={relationshipmanager}
                    setrelationshipmanager={setrelationshipmanager}
                  />

                  {/* Remarks / Comments */}
                  <RemarksInput
                    remarks={remarks}
                    setRemarks={setRemarks}
                  />

                  {/* File Upload */}
                  <DocumentUpload
                    setSelectedFile={setSelectedFile}
                  />

                  {/* Knock Amount + Knock List */}
                  <KnockAmountWithSelect
                    knockamount={knockamount}
                    setknockamount={setknockamount}
                    knockList={knockList}
                    setKnockList={setKnockList}
                  />

                  {/* Knock Type Radio */}
                  <KnockTypeToggle
                    knockT={knockT}
                    setKnockT={setKnockT}
                  />

              </div>

              <div className="pb-10">
                {/* Spacing for FloatingFooter */}
              </div>
            </form>
          </div>
        </div>
      </div>
      {showBankModal && (
        <BankModal
          isOpen={showBankModal}
          onClose={handleCloseBankModal}
        />
      )}
      <FloatingFooter data={footerData} onSave={handleSave} isSaving={isSaving} />
    </>
  );
}

export default function AccumulatorForm() {
  return (
    <Suspense fallback={<div className="p-6 text-center text-sm text-slate-500">Loading form…</div>}>
      <AccumulatorFormContent />
    </Suspense>
  );
}