"use client";

import { Suspense, useState } from "react";
import { FormSectionHeading } from "@/components/ui/FormSectionHeading";
import { LoadingOverlay } from "@/components/common/LoadingOverlay";
import FloatingFooter from "@/components/FloatingFooter";
import { InterestDividendFormFields } from "@/components/cash/InterestDividendFormFields";
import { useInterestDividendForm } from "@/hooks/useInterestDividendForm";
import { useFormState } from "@/hooks/useFormState";
import { useFormSubmission } from "@/hooks/useFormSubmission";
import { formatDateToString } from "@/lib/common";
import { InterestDividendFormField } from "@/components/validation/FormFields";
import { BREADCRUMBS } from "@/constants/breadcrumbs";

function InterestDividendFormContent() {
  const [formError, setFormError] = useState<string | null>(null);
  
  const {
    formData,
    selectedFile,
    footerData,
    loadingExisting,
    isEditing,
    pageTitle,
    saveLabel,
    savingLabel,
    updateFormData,
    resetForm,
    validateField,
    validateForm,
    createPayload,
  } = useInterestDividendForm(null);

  const { errors, setErrors, clearError, handleFieldBlur, formRef } = useFormState<InterestDividendFormField>();
  const { isSaving, submitForm } = useFormSubmission();

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

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

    setErrors({});

    await submitForm({
      createEndpoint: "/api/intrestdividend",
      updateEndpoint: "/api/intrestdividend/update",
      getPayload: createPayload,
      isEditing,
      editId: null,
      onSuccess: (message) => {
        if (!isEditing) {
          resetForm();
        }
      },
      onError: (message) => {
        setFormError(message);
      },
      createSuccessMessage: "Interest/dividend saved successfully!",
      updateSuccessMessage: "Interest/dividend updated successfully!",
    });
  };

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

  const breadcrumbs = [
    ...BREADCRUMBS.interestDividend.slice(0, 2),
    { label: pageTitle },
  ];

  const handlePlacementDateChange = (date: Date) => {
    updateFormData({ placementdate: formatDateToString(date) });
    clearError("placementdate");
  };

  const handleTransactionRefChange = (option: { label: string; value: string } | null) => {
    updateFormData({ transactionrefno: option });
    clearError("transactionRef");
  };

  const handleQuantityChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    updateFormData({ quantity: e.target.value });
    clearError("quantity");
  };

  const handleAmountChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    updateFormData({ amount: e.target.value });
    clearError("amount");
  };

  return (
    <>
      <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">
            {formError && (
              <div className="mb-4 p-3 bg-red-50 border border-red-200 rounded-md text-red-700 text-sm">
                {formError}
              </div>
            )}
            <form ref={formRef} onSubmit={handleSubmit} method="post">
              <InterestDividendFormFields
                formData={formData}
                errors={errors}
                clearError={(field: string) => clearError(field as InterestDividendFormField)}
                handleFieldBlur={handleFieldBlur}
                validateField={validateField}
                updateFormData={updateFormData}
                formatDateToString={formatDateToString}
                handlePlacementDateChange={handlePlacementDateChange}
                handleTransactionRefChange={handleTransactionRefChange}
                handleQuantityChange={handleQuantityChange}
                handleAmountChange={handleAmountChange}
                setSelectedFile={(file) => {/* File handling managed by hook */}}
              />
              <div className="pb-10" />
            </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>
  );
}