"use client";

import { Suspense, useEffect, useState, 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 { parseNumber, formatCurrency } from "@/lib/number-utils";
import { LeverageFormField } from "@/components/validation/FormFields";
import { useToast } from "@/hooks/useToast";
import { useFormState } from "@/hooks/useFormState";
import { useFormDataLoader, toOption, safeString, safeDate } from "@/hooks/useFormDataLoader";
import { useFormSubmission } from "@/hooks/useFormSubmission";
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 CurrencySelect from "@/fields/Currency";
import LeverageAmountInput from "@/fields/LeverageAmount";
import TimePeriodInput from "@/fields/TimePeriodDuration";
import PlacementDatePicker from "@/fields/PlacementDate";
import BankAdviceRefNoInput from "@/fields/BankAdviceNo";
import InterestRateInput from "@/fields/IntrestPerAnum";
import BankSelect from "@/fields/Bank";
import TransactionCostsInput from "@/fields/TransactionCost";
import PremiumPaidInput from "@/fields/PremiumPaid";
import FederalTurnoverTaxInput from "@/fields/FederalTurnOver";
import RemarksInput from "@/fields/Remarks";
import PurposeInput from "@/fields/Purpose";
import DocumentUpload from "@/fields/FileUpload";

function LeverageFormContent() {

  const [p_currency, setp_currency] = useState<{ label: string; value: string } | null>(null);
  const [amount, setamount] = useState("");
  const [timeperiod, settimeperiod] = useState("");
  const [placementdate, setplacementdate] = useState("");
  const [bankadviserefno, setbankadviserefno] = useState("");
  const [interestrateperanum, setinterestrateperanum] = useState("");
  const [bank, setbank] = useState<{ label: string; value: string } | null>(null);
  const [transactioncost, settransactioncost] = useState("");
  const [premium, setpremium] = useState("");
  const [tax, settax] = useState("");
  const [remarks, setRemarks] = useState("");
  const [description, setDescription] = useState("");
  const [selectedFile, setSelectedFile] = useState<File | null>(null);
  const [durationUnit, setDurationUnit] = useState<{ label: string; value: string } | null>(null);

  const searchParams = useSearchParams();
  const editId = searchParams.get("id");
  
  const isEditing = useMemo(() => Boolean(editId), [editId]);
  const pageTitle = useMemo(
    () => (isEditing ? "Update Leverage" : "Create Leverage"),
    [isEditing]
  );
  const saveLabel = useMemo(() => (isEditing ? "Update" : "Save"), [isEditing]);
  const savingLabel = useMemo(() => (isEditing ? "Updating..." : "Saving..."), [isEditing]);
  const [showBankModal, setShowBankModal] = useState(false);

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

  // Load existing data for edit mode
  const { loadingExisting } = useFormDataLoader({
    editId,
    apiEndpoint: "/api/leverage",
    transformData: (attributes) => {
      setplacementdate(safeDate(attributes.t_date));
      setp_currency(toOption((attributes.p_currency ?? attributes.purchase_currency_code) as string | number | null | undefined, (attributes.p_currency_label ?? attributes.purchase_currency_code) as string | number | null | undefined));
      setbank(toOption(attributes.bank_id as string | number | null | undefined, attributes.bank_name as string | number | null | undefined));
      setbankadviserefno(safeString(attributes.r_no));
      setamount(safeString(attributes.amount));
      settimeperiod(safeString(attributes.duration));
      setinterestrateperanum(safeString(attributes.i_rate));
      settransactioncost(safeString(attributes.commission));
      setpremium(safeString(attributes.b_1));
      settax(safeString(attributes.b_2));
      setRemarks(safeString(attributes.remarks));
      setDescription(safeString(attributes.purpose));
    },
    onError: () => {
      showToast("error", "Unable to load leverage details for editing.");
    },
  });

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

  const formatDisplayDate = useCallback((dateString: string) => {
    if (!dateString) return "";
    const [year, month, day] = dateString.split("-");
    if (!year || !month || !day) return "";
    return `${day}-${month}-${year}`;
  }, []);

  const computeFutureDate = useMemo(() => {
    const normalizedPeriod = timeperiod.replace(/,/g, "").trim();
    const periodValue = Number(normalizedPeriod);
    if (!placementdate || !normalizedPeriod || !Number.isFinite(periodValue)) {
      return "";
    }
    const base = new Date(placementdate);
    if (Number.isNaN(base.getTime())) {
      return "";
    }
    const future = new Date(base);
    future.setDate(future.getDate() + periodValue);
    return future.toISOString().split("T")[0];
  }, [timeperiod, placementdate]);

  const resetForm = useCallback(() => {
    setplacementdate(getTodayDate());
    setp_currency(null);
    setbank(null);
    setSelectedFile(null);
    setbankadviserefno("");
    setamount("");
    settimeperiod("");
    setinterestrateperanum("");
    settransactioncost("");
    setpremium("");
    settax("");
    setRemarks("");
    setDescription("");
    setErrors({});
  }, []);

  const amountValue = useMemo(() => parseNumber(amount), [amount]);
  const transactionCostsValue = useMemo(() => parseNumber(transactioncost), [transactioncost]);
  const premiumValue = useMemo(() => parseNumber(premium), [premium]);
  const taxValue = useMemo(() => parseNumber(tax), [tax]);
  const interestRateValue = useMemo(() => parseNumber(interestrateperanum), [interestrateperanum]);
  const timePeriodValue = useMemo(() => parseNumber(timeperiod), [timeperiod]);

  const displayAmount = useMemo(
    () => (amountValue === 0 ? 0 : amountValue > 0 ? -amountValue : amountValue),
    [amountValue]
  );

  const interestCharge = useMemo(() => {
    if (Math.abs(amountValue) > 0 && interestRateValue > 0 && timePeriodValue > 0) {
      return (Math.abs(amountValue) * interestRateValue * timePeriodValue) / (100 * 365);
    }
    return 0;
  }, [amountValue, interestRateValue, timePeriodValue]);

  const maturityDateDisplay = useMemo(
    () => (computeFutureDate ? formatDisplayDate(computeFutureDate) : "—"),
    [computeFutureDate, formatDisplayDate]
  );

  const amountAtMaturity = useMemo(
    () => displayAmount - transactionCostsValue - premiumValue - taxValue - interestCharge,
    [displayAmount, transactionCostsValue, premiumValue, taxValue, interestCharge]
  );

  const footerData = useMemo(
    () => [
      { label: "Amount", value: formatCurrency(displayAmount) },
      { label: "Transaction Costs", value: formatCurrency(transactionCostsValue) },
      { label: "Premium", value: formatCurrency(premiumValue) },
      { label: "Tax", value: formatCurrency(taxValue) },
      { label: "Maturity Date", value: maturityDateDisplay },
      { label: "Amount at Maturity", value: formatCurrency(amountAtMaturity) },
    ],
    [displayAmount, transactionCostsValue, premiumValue, taxValue, maturityDateDisplay, amountAtMaturity]
  );



  const validateField = useCallback(
    (field: LeverageFormField): string | undefined => {
      switch (field) {
        case "placementdate":
          return validateDate(placementdate, "Placement date");
        case "amount":
          return validatePositiveNumber(amount, "Amount");
        case "timePeriod":
          return validatePositiveNumber(timeperiod, "Time period");
        case "interestRate":
          return validatePositiveNumber(interestrateperanum, "Interest rate");
        case "bank":
          return validateSelectOption(bank, "Bank");
        default:
          return undefined;
      }
    },
    [placementdate, amount, timeperiod, interestrateperanum, bank]
  );

  const validateForm = useCallback(() => {
    const fieldsToValidate: LeverageFormField[] = ["placementdate", "amount", "timePeriod", "interestRate", "bank"];
    const newErrors: Record<string, string> = {};
    fieldsToValidate.forEach((field) => {
      const message = validateField(field);
      if (message) newErrors[field] = message;
    });
    return newErrors;
  }, [validateField]);

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

      const validationErrors = validateForm();
      if (Object.keys(validationErrors).length > 0) {
        setErrors(validationErrors);
        return;
      }

      setErrors({});

      await submitForm({
        createEndpoint: "/api/leverage",
        updateEndpoint: "/api/leverage/update",
        getPayload: () => ({
          LeverageFrm: {
            p_currency: p_currency?.value ?? "",
            price: parseNumber(amount),
            parent_id: 0,
            t_o_t: 1453,
            duration: timeperiod,
            duration_other: durationUnit?.value ?? "",
            t_date: placementdate,
            r_no: bankadviserefno,
            i_rate: interestrateperanum,
            bank_id: bank?.value ?? "",
            commission: transactioncost,
            b_1: premium,
            b_2: tax,
            a_class: 1465,
            a_type: 1530,
            remarks,
            purpose: description,
            r_link: selectedFile,
          },
        }),
        isEditing,
        editId,
        onSuccess: (message) => {
          showToast("success", message);
          if (!isEditing) {
            resetForm();
          }
        },
        onError: (message) => {
          showToast("error", message);
        },
        createSuccessMessage: "Leverage saved successfully!",
        updateSuccessMessage: "Leverage updated successfully!",
      });
    },
    [
      validateForm,
      p_currency,
      amount,
      timeperiod,
      durationUnit,
      placementdate,
      bankadviserefno,
      interestrateperanum,
      bank,
      transactioncost,
      premium,
      tax,
      remarks,
      description,
      selectedFile,
      isEditing,
      editId,
      submitForm,
      showToast,
      resetForm,
      setErrors,
    ]
  );

  const handleSave = useCallback(() => {
    if (!isSaving && !loadingExisting) {
      formRef.current?.requestSubmit();
    }
  }, [isSaving, loadingExisting, formRef]);

  const breadcrumbs = useMemo(
    () => [
      { label: "Home", href: "/" },
      { label: "Leverage", href: "/cash/leverage" },
      { label: pageTitle },
    ],
    [pageTitle]
  );

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

  return (
    <>
      <ToastComponent toast={toast} />
      <LoadingOverlay isLoading={loadingExisting} message="Loading leverage 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 gap-4 sm:grid-cols-2 lg:grid-cols-4">
          {/* Currency */}
          <CurrencySelect
            p_currency={p_currency}
            setp_currency={setp_currency}
          />

          {/* Amount */}
          <LeverageAmountInput<LeverageFormField>
            amount={amount}
            setamount={setamount}
            clearError={clearError}
            errors={errors}
            handleFieldBlur={handleFieldBlur}
            validateField={validateField}
          />

          {/* Time Period + Duration Unit */}
          <TimePeriodInput<LeverageFormField>
            timeperiod={timeperiod}
            settimeperiod={settimeperiod}
            durationUnit={durationUnit}
            setDurationUnit={setDurationUnit}
            clearError={clearError}
            errors={errors}
            handleFieldBlur={handleFieldBlur}
            validateField={validateField}
          />

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

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

          {/* Interest Rate per Annum (%) */}
          <InterestRateInput<LeverageFormField>
            intrestperanum={interestrateperanum}
            setintrestperanum={setinterestrateperanum}
            clearError={clearError}
            errors={errors}
            handleFieldBlur={handleFieldBlur}
            validateField={validateField}
          />

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

          {/* Transaction Costs */}
          <TransactionCostsInput<LeverageFormField>
            chargesandfees={transactioncost}
            setchargesandfees={settransactioncost}
            clearError={clearError}
            errors={errors}
            handleFieldBlur={handleFieldBlur}
            validateField={validateField}
          />

          {/* Premium */}
          <PremiumPaidInput<LeverageFormField>
            premiumpaid={premium}
            setpremiumpaid={setpremium}
            clearError={clearError}
            errors={errors}
            handleFieldBlur={handleFieldBlur}
            validateField={validateField}
          />

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

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

          {/* Purpose */}
          <PurposeInput
            description={description}
            setDescription={setDescription}
          />

          {/* File Upload */}
          <DocumentUpload
            setSelectedFile={setSelectedFile}
          />
        </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 || loadingExisting}
        saveLabel={saveLabel}
        savingLabel={savingLabel}
      />
    </>
  );
}

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