"use client";

import { useEffect, useState, Suspense, useMemo, useCallback } from "react";
import { useSearchParams } from "next/navigation";
import FloatingFooter from "@/components/FloatingFooter";
import { FileUploader } from "@/components/ui/FileUploader";
import { FormSectionHeading } from "@/components/ui/FormSectionHeading";
import SearchableSelect from "@/components/ui/SearchableSelect";
import { TextArea } from "@/components/ui/TextArea";
import { TextBox } from "@/components/ui/TextBox";
import OptionRow from "@/components/ui/OptionRow";
import DatePicker from "@/components/ui/DatePicker";
import { getTodayDate, formatDateToString } from "@/lib/date-utils";
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 { validateDate } from "@/lib/form-validation";
import { ToastComponent } from "@/components/common/Toast";
import { LoadingOverlay } from "@/components/common/LoadingOverlay";
import { Plus } from "lucide-react";
import BankModal from "@/components/common/BankModel";
import PlacementDatePicker from "@/fields/PlacementDate";

type FormField = "placementdate" | "ticker" | "securityname";

function StructureFormContent() {
  const searchParams = useSearchParams();
  const editId = searchParams.get("id");
  const isEditing = useMemo(() => Boolean(editId), [editId]);

  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);
  const [p_currency, setp_currency] = useState<{ label: string; value: string } | null>(null);
  const [durationUnit, setDurationUnit] = 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 [couponpercentage, setcouponpercentage] = useState("");
  const [expirydate, setexpirydate] = useState("");
  const [observationdate, setobservationdate] = useState("");
  const [kobarrier, setkobarrier] = useState("");
  const [producttype, setproducttype] = useState("");
  const [structureamount, setstructureamount] = useState("");
  const [nocallperiod, setnocallperiod] = useState("");
  const [strikepercentage, setstrikepercentage] = useState("");
  const [startdate, setstartdate] = useState("");
  const [ticker, setticker] = useState("");
  const [securityname, setsecurityname] = useState("");
  const [effectivedate, seteffectivedate] = useState("");
  const [amount, setamount] = useState("");
  const [commission, setcommission] = useState("");
  const [chargesandfees, setchargesandfees] = useState("");
  const [federalturnovertax, setfederalturnovertax] = useState("");
  const [relationshipmanager, setrelationshipmanager] = useState("");
  const [description, setDescription] = useState("");
  const [remarks, setRemarks] = useState("");
  const [showBankModal, setShowBankModal] = useState(false);

  const [isSaving, setIsSaving] = useState(false);
  const [rows, setRows] = useState([0]);
  const [currencies, setCurrencies] = useState<{ value: string; label: string }[]>([]);

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

  // Load existing data for edit mode
  const { loadingExisting } = useFormDataLoader({
    editId,
    apiEndpoint: "/api/equity/structure",
    transformData: (attributes) => {
      setplacementdate(safeDate(attributes.t_date));
      setcouponpercentage(safeString(attributes.i_rate || attributes.s_percentage));
      setexpirydate(safeDate(attributes.m_date, ""));
      setobservationdate(safeDate(attributes.o_date, ""));
      setkobarrier(safeString(attributes.ko_barrirer));
      setproducttype(safeString(attributes.product_type));
      setsecurityname(safeString(attributes.s_isin || attributes.isin));
      setticker(safeString(attributes.structure_name || attributes.ticker));
      setstructureamount(safeString(attributes.price));
      setnocallperiod(safeString(attributes.total_days));
      setstrikepercentage(safeString(attributes.duration));
      setstartdate(safeDate(attributes.duration_other || attributes.startdate, ""));
      setamount(safeString(Math.abs(parseNumber(String(attributes.amount || 0)))));
      setcommission(safeString(attributes.commission));
      setchargesandfees(safeString(attributes.b_1));
      setfederalturnovertax(safeString(attributes.b_2));
      setrelationshipmanager(safeString(attributes.r_m));
      setDescription(safeString(attributes.purpose));
      setRemarks(safeString(attributes.remarks));
      setbankadviserefno(safeString(attributes.r_no));
      seteffectivedate(safeDate(attributes.p_date || attributes.effectivedate, ""));
      setDurationUnit(toOption((attributes.duration_unit || attributes.duration_other) as string | number | null | undefined, attributes.duration_unit_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));
    },
    onError: () => {
      showToast("error", "Failed to load structure data. Please refresh the page.");
    },
  });

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

  useEffect(() => {
    (async () => {
      try {
        const res = await fetch("/api/searchabledropdown/currencylist");
        const data = await res.json();
        setCurrencies(data);
      } catch (error) {
        console.error("Failed to load currencies:", error);
      }
    })();
  }, []);

  const hasAmountInput = useMemo(() => amount.trim() !== "", [amount]);
  const amountNumber = useMemo(() => (hasAmountInput ? parseNumber(amount) : 0), [hasAmountInput, amount]);
  const totalAmount = useMemo(() => amountNumber, [amountNumber]);

  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 amountDisplayValue = useMemo(
    () => (hasAmountInput ? amount : ""),
    [hasAmountInput, amount]
  );

  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());
    setp_currency(null);
    setDurationUnit(null);
    setbank(null);
    setSelectedFile(null);
    setbankadviserefno("");
    setcouponpercentage("");
    setexpirydate("");
    setobservationdate("");
    setkobarrier("");
    setproducttype("");
    setstructureamount("");
    setnocallperiod("");
    setstrikepercentage("");
    setstartdate("");
    setticker("");
    setsecurityname("");
    seteffectivedate("");
    setamount("");
    setcommission("");
    setchargesandfees("");
    setfederalturnovertax("");
    setrelationshipmanager("");
    setDescription("");
    setRemarks("");
    setRows([0]);
    setErrors({});
  }, [setErrors]);

  const validateField = useCallback((field: FormField): string | undefined => {
    switch (field) {
      case "placementdate":
        return validateDate(placementdate, "Placement date");
      case "ticker":
        if (!ticker.trim()) return "Security ticker/ISIN is required.";
        return;
      case "securityname":
        if (!securityname.trim()) return "Structure name is required.";
        return;
      default:
        return undefined;
    }
  }, [placementdate, ticker, securityname]);

  const validateForm = useCallback(() => {
    const newErrors: Record<string, string> = {};

    const placementdateError = validateDate(placementdate, "Placement date");
    if (placementdateError) newErrors.placementdate = placementdateError;

    if (!ticker.trim()) {
      newErrors.ticker = "Security ticker/ISIN is required.";
    }

    if (!securityname.trim()) {
      newErrors.securityname = "Structure name is required.";
    }

    return newErrors;
  }, [placementdate, ticker, securityname]);

  const formatDate = useCallback((dateStr: string) => {
    if (!dateStr) return "";
    const [year, month, day] = dateStr.split("-");
    return day && month && year ? `${day}-${month}-${year}` : dateStr;
  }, []);

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

    const validationErrors = validateForm();
    if (Object.keys(validationErrors).length > 0) {
      setErrors(validationErrors);
      
      const errorCount = Object.keys(validationErrors).length;
      const errorFields = Object.keys(validationErrors).join(", ");
      showToast("error", `Please fix ${errorCount} required field${errorCount > 1 ? 's' : ''}: ${errorFields}`);
      
      setTimeout(() => {
        const firstErrorField = Object.keys(validationErrors)[0];
        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" });
          if (errorElement instanceof HTMLElement && 'focus' in errorElement) {
            (errorElement as HTMLElement).focus();
          }
        }
      }, 100);
      
      return;
    }

    setErrors({});
    setIsSaving(true);

    const formElement = formRef.current || (e.currentTarget as HTMLFormElement);
    if (!formElement || !(formElement instanceof HTMLFormElement)) {
      showToast("error", "Form error. Please refresh the page.");
      setIsSaving(false);
      return;
    }

    const payload = {
      Structure: {
        ...(isEditing && editId ? { id: editId } : {}),
        t_date: formatDate(placementdate),
        i_rate: couponpercentage || "",
        m_date: formatDate(expirydate) || "",
        o_date: formatDate(observationdate) || "",
        ko_barrirer: kobarrier || "",
        product_type: producttype || "",
        s_isin: securityname || "",
        structure_name: ticker || "",
        price: parseNumber(structureamount) || 0,
        total_days: nocallperiod || "",
        duration: strikepercentage || "",
        duration_other: durationUnit?.value || startdate || "",
        duration_unit: durationUnit?.value || "",
        parent_id: "0",
        amount: totalAmount < 0 ? String(totalAmount) : String(-totalAmount),
        p_currency: p_currency?.value || "",
        r_no: bankadviserefno || "",
        s_percentage: couponpercentage || "",
        bank_id: bank?.value || "",
        commission: commissionValue || "",
        b_1: chargesValue || "",
        b_2: taxValue || "",
        remarks: remarks || "",
        purpose: description || "",
        r_m: relationshipmanager || "",
        knock_ft: "1",
        knock: "",
        knock_t: "",
        p_date: formatDate(effectivedate) || formatDate(placementdate) || "",
        r_link: "",
      },
    };

    try {
      const url = isEditing && editId
        ? `/api/equity/structure/update?id=${encodeURIComponent(editId)}`
        : "/api/equity/structure/form";
      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 errorBody = await response.text();
        let errorMessage = `Structure ${isEditing ? "update" : "create"} failed with status ${response.status}`;
        try {
          const errorJson = JSON.parse(errorBody);
          errorMessage = errorJson.error || errorJson.message || errorMessage;
        } catch {
          errorMessage = errorBody || errorMessage;
        }
        
        showToast("error", errorMessage);
        setIsSaving(false);
        return;
      }

      const result = await response.json();
      const isSuccess = result?.success === true || result?.status === "success";

      if (isSuccess) {
        showToast("success", isEditing ? "Structure updated successfully!" : "Structure saved successfully!");
        if (!isEditing) {
          resetForm();
        }
      } else {
        const errorMessage =
          typeof result?.message === "string"
            ? result.message
            : typeof result?.error === "string"
            ? result.error
            : "Unexpected response received from the server.";
        showToast("error", errorMessage);
      }
    } catch (error) {
      const fallbackMessage =
        error instanceof Error && error.message 
          ? error.message 
          : `Failed to ${isEditing ? "update" : "save"} Structure. Please check your connection and try again.`;
      showToast("error", fallbackMessage);
    } finally {
      setIsSaving(false);
    }
  }, [isEditing, editId, validateForm, setErrors, showToast, formRef, placementdate, couponpercentage, expirydate, observationdate, kobarrier, producttype, securityname, ticker, structureamount, nocallperiod, strikepercentage, durationUnit, startdate, totalAmount, p_currency, bankadviserefno, bank, commissionValue, chargesValue, taxValue, remarks, description, relationshipmanager, effectivedate, formatDate, resetForm]);

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

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

  const addRow = useCallback(() => setRows((prev) => [...prev, prev.length]), []);
  const removeRow = useCallback((index: number) =>
    setRows((prev) => {
      if (prev.length <= 1) {
        return prev;
      }
      return prev.filter((_, i) => i !== index);
    }), []);

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

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

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


  return (
    <>
      <ToastComponent toast={toast} />
      <LoadingOverlay isLoading={loadingExisting} message="Loading structure 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">
                
                {/* Placement Date */}
                <PlacementDatePicker
                placementdate={placementdate}
                setplacementdate={setplacementdate}
                clearError={clearError}
                errors={errors}
                handleFieldBlur={handleFieldBlur}
                validateField={validateField}
                formatDateToString={formatDateToString}
              />

                {/* Coupon % */}
                <div className="group">
                  <TextBox
                    label="Coupon %"
                    type="text"
                    placeholder="Enter coupon percentage"
                    className="text-sm transition-all duration-200 group-hover:shadow-md"
                    value={couponpercentage}
                    onChange={(e) => {
                      setcouponpercentage(e.target.value);
                    }}
                  />
                </div>

                {/* Expiry Date */}
                <div className="group">
                  <DatePicker
                    label="Expiry Date"
                    value={expirydate}
                    onChange={(date: Date) => {
                      setexpirydate(formatDateToString(date));
                    }}
                    className="text-sm transition-all duration-200 group-hover:shadow-md"
                  />
                </div>

                {/* Observation Date */}
                <div className="group">
                  <DatePicker
                    label="Observation Date"
                    value={observationdate}
                    onChange={(date: Date) => {
                      setobservationdate(formatDateToString(date));
                    }}
                    className="text-sm transition-all duration-200 group-hover:shadow-md"
                  />
                </div>

                {/* KO Barrier */}
                <div className="group">
                  <TextBox
                    label="KO Barrier"
                    type="text"
                    placeholder="Enter KO barrier"
                    className="text-sm transition-all duration-200 group-hover:shadow-md"
                    value={kobarrier}
                    onChange={(e) => {
                      setkobarrier(e.target.value);
                    }}
                  />
                </div>

                {/* Product Type */}
                <div className="group">
                  <TextBox
                    label="Product Type"
                    type="text"
                    placeholder="Enter product type"
                    className="text-sm transition-all duration-200 group-hover:shadow-md"
                    value={producttype}
                    onChange={(e) => {
                      setproducttype(e.target.value);
                    }}
                  />
                </div>
                
                {/* Security Ticker/ISIN */}
                <div className="group">
                  <TextBox
                    label="Security Ticker/ISIN"
                    placeholder="Enter ticker or ISIN"
                    className="text-sm transition-all duration-200 group-hover:shadow-md"
                    value={ticker}
                    onChange={(e) => {
                      setticker(e.target.value);
                      clearError("ticker");
                    }}
                    onBlur={() => {
                      if (!ticker.trim()) {
                        setErrors((prev) => ({ ...prev, ticker: "Security ticker/ISIN is required." }));
                      }
                    }}
                    error={errors.ticker}
                  />
                </div>

                {/* Structure Name */}
                <div className="group">
                  <TextBox
                    label="Structure Name"
                    placeholder="Enter structure name"
                    className="text-sm transition-all duration-200 group-hover:shadow-md"
                    value={securityname}
                    onChange={(e) => {
                      setsecurityname(e.target.value);
                      clearError("securityname");
                    }}
                    onBlur={() => {
                      if (!securityname.trim()) {
                        setErrors((prev) => ({ ...prev, securityname: "Structure name is required." }));
                      }
                    }}
                    error={errors.securityname}
                  />
                </div>
                
                {/* Structure Amount */}
                <div className="group">
                  <TextBox
                    label="Structure Amount"
                    placeholder="Enter structure amount"
                    className="text-sm transition-all duration-200 group-hover:shadow-md"
                    value={structureamount}
                    onChange={(e) => {
                      setstructureamount(e.target.value);
                    }}
                  />
                </div>

                {/* Non Call Period + Duration Unit */}
                <div className="group sm:col-span-2">
                  <div className="flex gap-4 items-end">
                    <div className="flex-1">
                      <TextBox
                        label="Non Call Period"
                        placeholder="Enter non call period"
                        className="text-sm transition-all duration-200 group-hover:shadow-md"
                        value={nocallperiod}
                        onChange={(e) => {
                          setnocallperiod(e.target.value);
                        }}
                      />
                    </div>
                    <div className="flex-1">
                      <SearchableSelect
                        label=" "
                        apiUrl="/api/searchabledropdown/daysduration"
                        value={durationUnit}
                        onChange={setDurationUnit}
                        placeholder="Select unit..."
                      />
                    </div>
                  </div>
                </div>

                {/* Amount (Disabled) */}
                <div className="group">
                  <div className="relative">
                    <TextBox
                      label="Amount"
                      placeholder="Auto-calculated"
                      type="number"
                      className="text-sm bg-gradient-to-r from-slate-50 to-slate-100/50 border-slate-300/50 font-semibold text-slate-700"
                      value={amountDisplayValue}
                      onChange={(e) => setamount(e.target.value)}
                      disabled
                      readOnly
                    />
                    <div className="absolute inset-0 pointer-events-none rounded-lg bg-gradient-to-br from-[#428B4D]/5 to-transparent"></div>
                  </div>
                </div>

                {/* Currency */}
                <div className="group">
                  <SearchableSelect
                    label="Currency (if different)"
                    apiUrl="/api/searchabledropdown/currencylist"
                    value={p_currency}
                    onChange={setp_currency}
                    placeholder="Select currency..."
                  />
                </div>

                {/* Bank Advice Ref No */}
                <div className="group">
                  <TextBox
                    label="Bank Advice Ref No"
                    placeholder="Enter reference number"
                    className="text-sm transition-all duration-200 group-hover:shadow-md"
                    value={bankadviserefno}
                    onChange={(e) => setbankadviserefno(e.target.value)}
                  />
                </div>

                {/* Strike Percentage */}
                <div className="group">
                  <TextBox
                    label="Strike Percentage"
                    placeholder="Enter strike percentage"
                    type="number"
                    className="text-sm transition-all duration-200 group-hover:shadow-md"
                    value={strikepercentage}
                    onChange={(e) => {
                      setstrikepercentage(e.target.value);
                    }}
                  />
                </div>

                {/* Bank */}
                <div className="group flex items-end gap-2 transition-all duration-200 hover:shadow-md hover:shadow-[#428B4D]/10">
                <div className="flex-1">
                  <SearchableSelect
                    label="Bank"
                    apiUrl="/api/searchabledropdown/banklist"
                    value={bank}
                    onChange={setbank}
                    placeholder="Select bank..."
                  />
                  </div>
                  <button
                    type="button"
                    onClick={() => setShowBankModal(true)}
                    className="mb-[2px] h-8 w-8 flex items-center justify-center rounded-md border border-gray-300 hover:border-[#428B4D] hover:bg-[#428B4D]/10 transition"
                    title="Add new Bank"
                  >
                    <Plus className="h-5 w-5 text-[#428B4D]" />
                  </button>
                  </div>

                {/* Start Date */}
                <div className="group">
                  <DatePicker
                    label="Start Date"
                    value={startdate}
                    onChange={(date: Date) => {
                      setstartdate(formatDateToString(date));
                    }}
                    className="text-sm transition-all duration-200 group-hover:shadow-md"
                  />
                </div>

                {/* Underlying Options Section */}
                <div className="relative sm:col-span-4 overflow-hidden rounded-lg border border-slate-200 bg-white p-6 shadow-sm transition-all duration-200 hover:shadow-md">
                  <div className="relative flex flex-wrap items-center justify-between gap-4 border-b border-slate-200 pb-4 mb-4">
                    <div className="space-y-1">
                      <p className="text-sm font-semibold uppercase tracking-[0.35em] text-slate-400">
                        Underlying Options
                      </p>
                      <p className="text-xs text-slate-500">
                        Capture the full breakdown for each structure leg below.
                      </p>
                    </div>
                    <span className="inline-flex items-center gap-2 rounded-lg bg-gradient-to-r from-slate-50 to-slate-100 px-3 py-1.5 text-xs font-semibold uppercase tracking-wide text-slate-600 border border-slate-200/60">
                      <span className="flex h-5 w-5 items-center justify-center rounded-lg bg-[#428B4D]/10 text-[#428B4D] font-bold">
                        {rows.length}
                      </span>
                      Rows Active
                    </span>
                  </div>

                  <div className="relative mt-4 space-y-4">
                    {rows.map((_, index) => (
                      <OptionRow
                        key={index}
                        currencies={currencies}
                        onAdd={addRow}
                        onRemove={() => removeRow(index)}
                        canRemove={rows.length > 1}
                      />
                    ))}
                  </div>
                </div>
                
                {/* Commission */}
                <div className="group">
                  <TextBox
                    label="Commission"
                    placeholder="Enter commission amount"
                    type="number"
                    className="text-sm transition-all duration-200 group-hover:shadow-md"
                    value={commission}
                    onChange={(e) => setcommission(e.target.value)}
                  />
                </div>
                
                {/* Charges & Fees Abroad */}
                <div className="group">
                  <TextBox
                    label="Charges and Fees Abroad"
                    placeholder="Enter charges amount"
                    type="number"
                    className="text-sm transition-all duration-200 group-hover:shadow-md"
                    value={chargesandfees}
                    onChange={(e) => setchargesandfees(e.target.value)}
                  />
                </div>

                {/* Federal Turnover Tax */}
                <div className="group">
                  <TextBox
                    label="Federal Turnover Tax"
                    placeholder="Enter tax amount"
                    type="number"
                    className="text-sm transition-all duration-200 group-hover:shadow-md"
                    value={federalturnovertax}
                    onChange={(e) => setfederalturnovertax(e.target.value)}
                  />
                </div>

                {/* Relationship Manager */}
                <div className="group">
                  <TextBox
                    label="Relationship Manager"
                    placeholder="Enter manager name"
                    type="text"
                    className="text-sm transition-all duration-200 group-hover:shadow-md"
                    value={relationshipmanager}
                    onChange={(e) => setrelationshipmanager(e.target.value)}
                  />
                </div>

                {/* Remarks / Comments */}
                <div className="group sm:col-span-4">
                  <TextArea
                    label="Remarks / Comments"
                    placeholder="Enter detailed remarks or comments..."
                    value={remarks}
                    onChange={(e) => setRemarks(e.target.value)}
                    rows={4}
                    textareaClass="transition-all duration-200 group-hover:shadow-md"
                  />
                </div>

                {/* Purpose */}
                <div className="group sm:col-span-4">
                  <TextArea
                    label="Purpose"
                    placeholder="Enter purpose or description..."
                    value={description}
                    onChange={(e) => setDescription(e.target.value)}
                    rows={4}
                    textareaClass="transition-all duration-200 group-hover:shadow-md"
                  />
                </div>

                {/* File Upload */}
                <div className="group sm:col-span-4">
                  <div className="relative p-6 rounded-lg bg-gradient-to-br from-slate-50/80 to-white border-2 border-dashed border-slate-200 hover:border-[#428B4D]/40 transition-all duration-300">
                    <FileUploader
                      label="Upload Document"
                      onFileChange={setSelectedFile}
                      maxSizeMB={1}
                      allowedTypes={["application/pdf", "image/png", "image/jpg", "image/jpeg"]}
                    />
                  </div>
                </div>

              </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 StructureForm() {
  return (
    <Suspense fallback={<div className="p-6 text-center text-sm text-slate-500">Loading form…</div>}>
      <StructureFormContent />
    </Suspense>
  );
}