"use client";

import { Suspense } from "react";
import { FormSectionHeading } from "@/components/ui/FormSectionHeading";
import { ToastComponent } from "@/components/common/Toast";
import { LoadingOverlay } from "@/components/common/LoadingOverlay";
import FloatingFooter from "@/components/FloatingFooter";
import BankModal from "@/components/common/BankModel";
import { CommodityOptionFormFields } from "@/components/commodity/CommodityOptionFormFields";
import { useCommodityOptionForm } from "@/hooks/useCommodityOptionForm";
import { useToast } from "@/hooks/useToast";
import { useFormState } from "@/hooks/useFormState";
import { useFormSubmission } from "@/hooks/useFormSubmission";
import { formatDateToString } from "@/lib/common";
import { CommodityOptionFormField } from "@/components/validation/FormFields";
import { logger } from "@/lib/logger";

function CommodityOptionFormContent() {
  const { toast, showToast } = useToast();
  const { errors, setErrors, clearError, handleFieldBlur, formRef } = useFormState<CommodityOptionFormField>();
  const { isSaving, submitForm } = useFormSubmission();

  const {
    formData,
    optionValues,
    footerData,
    isEditing,
    editId,
    loadingExisting,
    showBankModal,
    setShowBankModal,
    updateFormData,
    resetForm,
    validateField,
    validateForm,
    createPayload,
    pageTitle,
    saveLabel,
    savingLabel,
  } = useCommodityOptionForm();

  // 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({});

    // Handle file conversion before submission
    const payload = createPayload();
    
    // Convert file to base64 if file is selected
    if (formData.selectedFile) {
      try {
        const fileBase64 = await new Promise<string>((resolve, reject) => {
          const reader = new FileReader();
          reader.onload = () => {
            const result = reader.result as string;
            // Remove data URL prefix (e.g., "data:application/pdf;base64,")
            const base64 = result.split(",")[1] || result;
            resolve(base64);
          };
          reader.onerror = (error) => reject(error);
          reader.readAsDataURL(formData.selectedFile!);
        });
        
        // Update payload with file data
        payload.CommodityOptions.r_link = fileBase64;
      } catch (fileError) {
        logger.error("Error converting file to base64", fileError);
        showToast("error", "Failed to process uploaded file. Please try again.");
        return;
      }
    }

    const result = await submitForm({
      createEndpoint: "/api/commodity/derivatives/option/create",
      updateEndpoint: `/api/commodity/derivatives/option/update?id=${encodeURIComponent(editId || "")}`,
      getPayload: () => payload,
      isEditing,
      editId,
      onSuccess: (message) => {
        showToast("success", message);
        if (!isEditing) {
          resetForm();
        }
      },
      onError: (message) => {
        showToast("error", message);
      },
      createSuccessMessage: "Commodity Options saved successfully!",
      updateSuccessMessage: "Commodity Options updated successfully!",
    });
  };

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

  // Handle close bank modal
  const handleCloseBankModal = () => {
    setShowBankModal(false);
  };

  return (
    <>
      <ToastComponent toast={toast} />
      <LoadingOverlay isLoading={loadingExisting} message="Loading commodity option 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: "Derivative", href: "/commodity/derivative" },
              { label: pageTitle },
            ]}
          />

          <div className="p-6 md:p-8 bg-slate-50/60">
            <form ref={formRef} onSubmit={handleSubmit} method="post">
              <CommodityOptionFormFields
                formData={formData}
                errors={errors}
                clearError={(field: string) => clearError(field as CommodityOptionFormField)}
                handleFieldBlur={(field: string, validator: (field: string) => string | undefined) => handleFieldBlur(field as CommodityOptionFormField, validator)}
                validateField={validateField}
                updateFormData={updateFormData}
                formatDateToString={formatDateToString}
                setShowBankModal={setShowBankModal}
              />

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