"use client";

import { Suspense, useEffect, useState, 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 { TextBox } from "@/components/ui/TextBox";
import DatePicker from "@/components/ui/DatePicker";
import { getTodayDate, formatDateToString } from "@/lib/date-utils";
import { parseNumber, formatCurrency } from "@/lib/number-utils";
import { InterestDividendFormField } 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";

function InterestDividendFormContent() {

  const [placementdate, setplacementdate] = useState("");
  const [transactiontype, settransactiontype] = useState<{ label: string; value: string } | null>(null);
  const [type, settype] = useState<{ label: string; value: string } | null>(null);
  const [transactionrefno, settransactionrefno] = useState<{ label: string; value: string } | null>(null);
  const [md, setmd] = useState<{ label: string; value: string } | null>(null);
  const [bankadviserefno, setbankadviserefno] = useState("");
  const [commission, setcommission] = useState("");
  const [chargesandfees, setchargesandfees] = useState("");
  const [federalturnovertax, setfederalturnovertax] = useState("");
  const [quantity, setquantity] = useState("");
  const [amount, setamount] = useState("");
  const [total, settotal] = useState("");
  const [selectedFile, setSelectedFile] = useState<File | null>(null);

  const searchParams = useSearchParams();
  const editId = searchParams.get("id");
  
  const isEditing = useMemo(() => Boolean(editId), [editId]);
  const pageTitle = useMemo(
    () => (isEditing ? "Update Interest / Dividend Transaction" : "Create Interest / Dividend Transaction"),
    [isEditing]
  );
  const saveLabel = useMemo(() => (isEditing ? "Update" : "Save"), [isEditing]);
  const savingLabel = useMemo(() => (isEditing ? "Updating..." : "Saving..."), [isEditing]);

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

  // Load existing data for edit mode
  const { loadingExisting } = useFormDataLoader({
    editId,
    apiEndpoint: "/api/intrestdividend",
    transformData: (attributes) => {
      setplacementdate(safeDate(attributes.t_date));
      settransactiontype(toOption(attributes.d_p as string | number | null | undefined, (attributes.d_p_label ?? attributes.d_p) as string | number | null | undefined));
      settype(toOption(attributes.d_type as string | number | null | undefined, (attributes.d_type_label ?? attributes.d_type) as string | number | null | undefined));
      settransactionrefno(toOption(attributes.parent_id as string | number | null | undefined, (attributes.parent_id_label ?? attributes.parent_id) as string | number | null | undefined));
      setbankadviserefno(safeString(attributes.r_no));
      setcommission(safeString(attributes.commission));
      setchargesandfees(safeString(attributes.b_1));
      setfederalturnovertax(safeString(attributes.b_2));
      setquantity(safeString(attributes.quantity));
      setamount(safeString(attributes.amount));
      settotal(safeString(attributes.price));
    },
    onError: () => {
      showToast("error", "Unable to load transaction details for editing.");
    },
  });

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

  const commissionValue = useMemo(() => parseNumber(commission), [commission]);
  const chargesValue = useMemo(() => parseNumber(chargesandfees), [chargesandfees]);
  const taxValue = useMemo(() => parseNumber(federalturnovertax), [federalturnovertax]);
  const amountValue = useMemo(() => parseNumber(amount), [amount]);
  const totalAmount = useMemo(() => amountValue, [amountValue]);
  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());
    settransactiontype(null);
    settype(null);
    settransactionrefno(null);
    setbankadviserefno("");
    setcommission("");
    setchargesandfees("");
    setfederalturnovertax("");
    setquantity("");
    setamount("");
    settotal("");
    setSelectedFile(null);
    setErrors({});
  }, []);

  const validateField = useCallback(
    (field: InterestDividendFormField): string | undefined => {
      switch (field) {
        case "placementdate":
          return validateDate(placementdate, "Placement date");
        case "transactionRef":
          return validateSelectOption(transactionrefno, "Transaction reference");
        case "quantity":
          return validatePositiveNumber(quantity, "Quantity");
        case "amount":
          return validatePositiveNumber(amount, "Amount");
        default:
          return undefined;
      }
    },
    [placementdate, transactionrefno, quantity, amount]
  );

  const validateForm = useCallback(() => {
    const fieldsToValidate: InterestDividendFormField[] = ["placementdate", "transactionRef", "quantity", "amount"];
    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/intrestdividend",
        updateEndpoint: "/api/intrestdividend/update",
        getPayload: () => ({
          InterestDivident: {
            t_date: placementdate,
            d_p: transactiontype?.value ?? "",
            d_type: type?.value ?? "",
            parent_id: transactionrefno?.value ?? "",
            r_no: bankadviserefno,
            commission,
            b_1: chargesandfees,
            b_2: federalturnovertax,
            quantity: parseNumber(quantity),
            amount: parseNumber(amount),
            price: parseNumber(total),
            md: md?.value ?? "",
            r_link: selectedFile,
          },
        }),
        isEditing,
        editId,
        onSuccess: (message) => {
          showToast("success", message);
          if (!isEditing) {
            resetForm();
          }
        },
        onError: (message) => {
          showToast("error", message);
        },
        createSuccessMessage: "Interest/dividend saved successfully!",
        updateSuccessMessage: "Interest/dividend updated successfully!",
      });
    },
    [
      validateForm,
      placementdate,
      transactiontype,
      type,
      transactionrefno,
      bankadviserefno,
      commission,
      chargesandfees,
      federalturnovertax,
      quantity,
      amount,
      total,
      md,
      selectedFile,
      isEditing,
      editId,
      submitForm,
      showToast,
      resetForm,
    ]
  );

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

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

  const handlePlacementDateChange = useCallback(
    (date: Date) => {
      setplacementdate(formatDateToString(date));
      clearError("placementdate");
    },
    [clearError]
  );

  const handleTransactionRefChange = useCallback(
    (option: { label: string; value: string } | null) => {
      settransactionrefno(option);
      clearError("transactionRef");
    },
    [clearError]
  );

  const handleQuantityChange = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>) => {
      setquantity(e.target.value);
      clearError("quantity");
    },
    [clearError]
  );

  const handleAmountChange = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>) => {
      setamount(e.target.value);
      clearError("amount");
    },
    [clearError]
  );

  return (
    <>
      <ToastComponent toast={toast} />
      <LoadingOverlay isLoading={loadingExisting} message="Loading transaction 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">
                {/* Placement Date */}
                <div className="group">
                  <DatePicker
                    label="Placement Date"
                    value={placementdate}
                    onChange={handlePlacementDateChange}
                    error={errors.placementdate}
                    onBlur={() => handleFieldBlur("placementdate", validateField)}
                    className="text-sm transition-all duration-200 group-hover:shadow-md"
                  />
                </div>

                {/* Transaction Type */}
                <div className="group">
                  <SearchableSelect
                    label="Transaction Type"
                    apiUrl="/api/searchabledropdown/dplist"
                    value={transactiontype}
                    onChange={settransactiontype}
                    placeholder="Select transaction type..."
                  />
                </div>

                {/* Type */}
                <div className="group">
                  <SearchableSelect
                    label="Type"
                    apiUrl="/api/searchabledropdown/dtypelist"
                    value={type}
                    onChange={settype}
                    placeholder="Select type..."
                  />
                </div>

                {/* Transaction Ref. # */}
                <div className="group">
                  <SearchableSelect
                    label="Transaction Ref. #"
                    apiUrl="/api/searchabledropdown/transactionlist"
                    value={transactionrefno}
                    onChange={handleTransactionRefChange}
                    placeholder="Select transaction ref..."
                    onBlur={() => handleFieldBlur("transactionRef", validateField)}
                    error={errors.transactionRef}
                  />
                </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>

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

                {/* Quantity (No. of Shares) */}
                <div className="group">
                  <TextBox
                    label="Quantity (No. of Shares)"
                    placeholder="Enter quantity"
                    type="number"
                    className="text-sm transition-all duration-200 group-hover:shadow-md"
                    value={quantity}
                    onChange={handleQuantityChange}
                    onBlur={() => handleFieldBlur("quantity", validateField)}
                    error={errors.quantity}
                  />
                </div>

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

                {/* MD */}
                <div className="group">
                  <SearchableSelect
                    label="MD"
                    apiUrl="/api/searchabledropdown/mdlist"
                    value={md}
                    onChange={setmd}
                    placeholder="Select MD..."
                  />
                </div>

                {/* Net Amount per Share */}
                <div className="group">
                  <TextBox
                    label="Net Amount per Share"
                    placeholder="Enter amount per share"
                    type="number"
                    className="text-sm transition-all duration-200 group-hover:shadow-md"
                    value={total}
                    onChange={(e) => settotal(e.target.value)}
                  />
                </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">
                {/* Spacing for FloatingFooter */}
              </div>
            </form>
          </div>
        </div>
      </div>
      <FloatingFooter
        data={footerData}
        onSave={handleSave}
        isSaving={isSaving || loadingExisting}
        saveLabel={saveLabel}
        savingLabel={savingLabel}
      />
    </>
  );
}

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