"use client";

import { Suspense, useEffect, useState, useMemo } 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 { TextArea } from "@/components/ui/TextArea";
import { TextBox } from "@/components/ui/TextBox";
import { getTodayDate, formatDateToString } from "@/lib/date-utils";
import { parseNumber, formatCurrency } from "@/lib/number-utils";
import { CashWithdrawalFormField } 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 PlacementDatePicker from "@/fields/PlacementDate";
import CurrencySelect from "@/fields/Currency";
import WithdrawTypeSelect from "@/fields/WithdrawType";
import BankSelect from "@/fields/Bank";

function CashWithdrawalFormContent() {
  // Form state
  const [placementdate, setplacementdate] = useState("");
  const [selectedcurrency, setselectedcurrency] = useState<{ label: string; value: string } | null>(null);
  const [amount, setamount] = useState("");
  const [withdrawType, setWithdrawType] = useState<{ label: string; value: string } | null>(null);
  const [bank, setbank] = useState<{ label: string; value: string } | null>(null);
  const [bankadviserefno, setbankadviserefno] = useState("");
  const [transactioncost, settransactioncost] = useState("");
  const [bankfees, setbankfees] = useState("");
  const [tax, settax] = useState("");
  const [remarks, setRemarks] = useState("");
  const [description, setDescription] = useState("");
  const [selectedFile, setSelectedFile] = useState<File | null>(null);
  const [showBankModal, setShowBankModal] = useState(false);

  // URL params and edit mode
  const searchParams = useSearchParams();
  const editId = searchParams.get("id");
  const isEditing = Boolean(editId);
  
  // Page configuration
  const pageTitle = isEditing ? "Update Cash Withdrawal" : "Create Cash Withdrawal";
  const saveLabel = isEditing ? "Update" : "Save";
  const savingLabel = isEditing ? "Updating..." : "Saving...";

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

  // Load existing data for edit mode
  const { loadingExisting } = useFormDataLoader({
    editId,
    apiEndpoint: "/api/cashwithdrawal",
    transformData: (attributes) => {
      setplacementdate(safeDate(attributes.t_date));
      
      const pCurrency = attributes.p_currency ?? attributes.purchase_currency_code;
      const pCurrencyLabel = attributes.p_currency_label ?? attributes.purchase_currency_code;
      setselectedcurrency(
        toOption(
          pCurrency as string | number | null | undefined,
          pCurrencyLabel as string | number | null | undefined
        )
      );
      
      const dType = attributes.d_type;
      const dTypeLabel = attributes.d_type_label ?? attributes.d_type;
      setWithdrawType(toOption(
        dType as string | number | null | undefined,
        dTypeLabel as string | number | null | undefined
      ));
      
      const bankId = attributes.bank_id;
      const bankName = attributes.bank_name;
      setbank(toOption(
        bankId as string | number | null | undefined,
        bankName as string | number | null | undefined
      ));
      setamount(safeString(attributes.amount));
      setbankadviserefno(safeString(attributes.r_no));
      settransactioncost(safeString(attributes.commission));
      setbankfees(safeString(attributes.b_1));
      settax(safeString(attributes.b_2));
      setRemarks(safeString(attributes.remarks));
      setDescription(safeString(attributes.purpose));
    },
    onError: () => {
      showToast("error", "Unable to load cash withdrawal details for editing.");
    },
  });

  // Initialize placement date on mount
  useEffect(() => {
    if (!isEditing) {
      setplacementdate(getTodayDate());
    }
  }, [isEditing]);

  // Calculate financial values
  const financialValues = useMemo(() => {
    const amountValue = parseNumber(amount);
    const transactionCostValue = parseNumber(transactioncost);
    const bankFeesValue = parseNumber(bankfees);
    const taxValue = parseNumber(tax);
    const amountAtMaturity = amountValue - transactionCostValue - bankFeesValue - taxValue;

    return {
      amount: amountValue,
      transactionCost: transactionCostValue,
      bankFees: bankFeesValue,
      tax: taxValue,
      amountAtMaturity,
    };
  }, [amount, transactioncost, bankfees, tax]);

  // Footer data for display
  const footerData = useMemo(
    () => [
      { label: "Amount", value: formatCurrency(financialValues.amount) },
      { label: "Transaction Costs", value: formatCurrency(financialValues.transactionCost) },
      { label: "Bank Fees", value: formatCurrency(financialValues.bankFees) },
      { label: "Tax", value: formatCurrency(financialValues.tax) },
      { label: "Amount at Maturity", value: formatCurrency(financialValues.amountAtMaturity) },
    ],
    [financialValues]
  );

  // Reset form to initial state
  const resetForm = () => {
    setplacementdate(getTodayDate());
    setselectedcurrency(null);
    setWithdrawType(null);
    setbank(null);
    setSelectedFile(null);
    setbankadviserefno("");
    setamount("");
    settransactioncost("");
    setbankfees("");
    settax("");
    setDescription("");
    setRemarks("");
    setErrors({});
  };

  // Field validation
  const validateField = (field: CashWithdrawalFormField): string | undefined => {
    switch (field) {
      case "placementdate":
        return validateDate(placementdate, "Placement date");
      case "amount":
        return validatePositiveNumber(amount, "Amount");
      case "withdrawType":
        return validateSelectOption(withdrawType, "Type");
      case "bank":
        return validateSelectOption(bank, "Bank");
      default:
        return undefined;
    }
  };

  // Form validation
  const validateForm = (): Record<string, string> => {
    const fieldsToValidate: CashWithdrawalFormField[] = ["placementdate", "amount", "withdrawType", "bank"];
    const newErrors: Record<string, string> = {};
    
    fieldsToValidate.forEach((field) => {
      const message = validateField(field);
      if (message) {
        newErrors[field] = message;
      }
    });
    
    return newErrors;
  };

  // Form submission handler
  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();

    const validationErrors = validateForm();
    if (Object.keys(validationErrors).length > 0) {
      setErrors(validationErrors);
      showToast("error", "Please fix the validation errors before submitting.");
      return;
    }

    setErrors({});

    await submitForm({
      createEndpoint: "/api/cashwithdrawal",
      updateEndpoint: "/api/cashwithdrawal/update",
      getPayload: () => ({
        CashWithdrawl: {
          t_date: placementdate,
          p_currency: selectedcurrency?.value ?? "",
          price: amount,
          parent_id: 0,
          amount: financialValues.amount,
          d_type: withdrawType?.value ?? "",
          bank_id: bank?.value ?? "",
          r_no: bankadviserefno,
          commission: transactioncost,
          b_1: bankfees,
          b_2: tax,
          remarks,
          r_link: selectedFile,
          purpose: description,
        },
      }),
      isEditing,
      editId,
      onSuccess: (message) => {
        showToast("success", message);
        if (!isEditing) {
          resetForm();
        }
      },
      onError: (message) => {
        showToast("error", message);
      },
      createSuccessMessage: "Cash withdrawal saved successfully!",
      updateSuccessMessage: "Cash withdrawal updated successfully!",
    });
  };

  // Handle save button click
  const handleSave = () => {
    if (!isSaving && !loadingExisting) {
      formRef.current?.requestSubmit();
    }
  };

  return (
    <>
      <ToastComponent toast={toast} />
      <LoadingOverlay isLoading={loadingExisting} message="Loading cash withdrawal 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={[
              { label: "Home", href: "/" },
              { label: "Cash Withdrawal", href: "/cash/cashwithdraw" },
              { label: pageTitle },
            ]}
          />

          <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">
                {/* Placement Date */}
               <PlacementDatePicker
                placementdate={placementdate}
                setplacementdate={setplacementdate}
                clearError={clearError}
                errors={errors}
                handleFieldBlur={handleFieldBlur}
                validateField={validateField}
                formatDateToString={formatDateToString}
              />

                {/* Currency (if different) */}
                <CurrencySelect
                  p_currency={selectedcurrency}
                  setp_currency={setselectedcurrency}
                />

                {/* Amount */}
                <div className="group">
                  <TextBox
                    label="Amount"
                    placeholder="Enter withdrawal amount"
                    type="number"
                    className="text-sm transition-all duration-200 group-hover:shadow-md"
                    value={amount}
                    onChange={(e) => {
                      setamount(e.target.value);
                      clearError("amount");
                    }}
                    onBlur={() => handleFieldBlur("amount", validateField)}
                    error={errors.amount}
                  />
                </div>

                {/* Withdrawal Type */}
                <WithdrawTypeSelect<CashWithdrawalFormField>
                  withdrawType={withdrawType}
                  setWithdrawType={setWithdrawType}
                  clearError={clearError}
                  errors={errors}
                  handleFieldBlur={handleFieldBlur}
                  validateField={validateField}
                />

                {/* Bank */}
                <BankSelect<CashWithdrawalFormField>
                  bank={bank}
                  setbank={setbank}
                  setShowBankModal={setShowBankModal}
                  clearError={clearError}
                  errors={errors}
                  handleFieldBlur={handleFieldBlur}
                  validateField={validateField}
                  fieldName="bank"
                />

                {/* 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>

                {/* Transaction Costs */}
                <div className="group">
                  <TextBox
                    label="Transaction Costs"
                    placeholder="Enter transaction costs"
                    type="number"
                    className="text-sm transition-all duration-200 group-hover:shadow-md"
                    value={transactioncost}
                    onChange={(e) => settransactioncost(e.target.value)}
                  />
                </div>

                {/* Bank Fees */}
                <div className="group">
                  <TextBox
                    label="Bank Fees"
                    placeholder="Enter bank fees"
                    type="number"
                    className="text-sm transition-all duration-200 group-hover:shadow-md"
                    value={bankfees}
                    onChange={(e) => setbankfees(e.target.value)}
                  />
                </div>

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

                {/* Remarks / Comments */}
                <div className="group sm:col-span-2 lg: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-2 lg: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-2 lg: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" />
            </form>
          </div>
        </div>
      </div>
      {showBankModal && (
      <BankModal
        isOpen={showBankModal}
        onClose={() => setShowBankModal(false)}
      />
      )}
      <FloatingFooter
        data={footerData}
        onSave={handleSave}
        isSaving={isSaving || loadingExisting}
        saveLabel={saveLabel}
        savingLabel={savingLabel}
      />
    </>
  );
}

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