"use client";

import { Suspense, useCallback, useState, FormEvent } from "react";
import FloatingFooter from "@/components/FloatingFooter";
import { FormSectionHeading } from "@/components/ui/FormSectionHeading";
import { formatDateToString } from "@/lib/common";
import { StockFormField } from "@/components/validation/FormFields";
import { useToast } from "@/hooks/useToast";
import { useFormState } from "@/hooks/useFormState";
import { ToastComponent } from "@/components/common/Toast";
import { LoadingOverlay } from "@/components/common/LoadingOverlay";
import BankModal from "@/components/common/BankModel";
import AssetTypeModal from "@/components/common/AssetTypeModel";
import { EquityStockFormFields } from "@/components/equity/EquityStockFormFields";
import { useEquityStockForm } from "@/hooks/useEquityStockForm";

function StockFormContent() {
  const { toast, showToast } = useToast();
  const { errors, setErrors, clearError, handleFieldBlur, formRef } = useFormState<StockFormField>();
  const [isSaving, setIsSaving] = useState(false);

  const {
    formData,
    stockValues,
    footerData,
    amountDisplayValue,
    isEditing,
    editId,
    loadingExisting,
    showBankModal,
    setShowBankModal,
    showAssetTypeModal,
    setShowAssetTypeModal,
    updateFormData,
    resetForm,
    validateField,
    validateForm,
    createPayload,
    pageTitle,
    saveLabel,
    savingLabel,
  } = useEquityStockForm();

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

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

    setErrors({});
    setIsSaving(true);

    const payload = createPayload();
    const formDataObj = new FormData();

    if (formData.selectedFile) {
      formDataObj.append("r_link", formData.selectedFile);
    }

    formDataObj.append("payload", JSON.stringify(payload));

    try {
      const url = isEditing && editId
        ? `/api/stock/update?id=${encodeURIComponent(editId)}`
        : "/api/stock/create";
      const method = isEditing ? "PUT" : "POST";
      
      const response = await fetch(url, {
        method,
        credentials: "include",
        body: formDataObj,
      });

      if (!response.ok) {
        const errorBody = await response.text();
        const action = isEditing ? "update" : "create";
        throw new Error(
          `Stock ${action} failed with status ${response.status} (${response.statusText}): ${errorBody || "No response body"}`
        );
      }

      const result = await response.json();
      const isSuccess = result?.success === true || result?.status === "success";

      if (isSuccess) {
        const successMessage = isEditing ? "Stock updated successfully!" : "Stock saved successfully!";
        showToast("success", successMessage);
        if (!isEditing) {
          resetForm();
        }
      } else {
        const errorMessage =
          typeof result?.message === "string"
            ? result.message
            : "Unexpected response received from the server.";
        showToast("error", errorMessage);
        console.error(result);
      }
    } catch (error) {
      console.error("Error submitting form:", error);
      const action = isEditing ? "update" : "save";
      const fallbackMessage =
        error instanceof Error && error.message ? error.message : `Failed to ${action} Stock`;
      showToast("error", fallbackMessage);
    } finally {
      setIsSaving(false);
    }
  }, [isEditing, editId, validateForm, setErrors, showToast, formData.selectedFile, createPayload, resetForm]);

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

  const handleCloseAssetTypeModal = useCallback(() => {
    setShowAssetTypeModal(false);
  }, []);

  const [bankListRefreshTrigger, setBankListRefreshTrigger] = useState(0);
  const handleCloseBankModal = useCallback(() => {
    setShowBankModal(false);
  }, []);
  const handleBankCreated = useCallback(() => {
    setBankListRefreshTrigger((t) => t + 1);
  }, []);

  return (
    <>
      <ToastComponent toast={toast} />
      <LoadingOverlay isLoading={loadingExisting} message="Loading stock data..." />
      <div className="container mx-auto mt-6 px-4 pb-24">
        <div className="overflow-hidden rounded-2xl border border-slate-200/60 bg-white shadow-sm">
          <FormSectionHeading
            title={pageTitle}
            eyebrow="Key Details"
            showBackButton
            icon={<i className="bx bx-line-chart" aria-hidden="true" />}
            breadcrumbs={[
              { label: "Home", href: "/" },
              { label: "Stocks", href: "/equity/stock" },
              { label: pageTitle },
            ]}
          />

          <div className="p-6 md:p-8 bg-slate-50/40">
            <form ref={formRef} onSubmit={handleSubmit} method="post">
              <EquityStockFormFields
                formData={formData}
                amountDisplayValue={amountDisplayValue}
                errors={errors}
                clearError={(field: string) => clearError(field as StockFormField)}
                handleFieldBlur={handleFieldBlur}
                validateField={validateField}
                updateFormData={updateFormData}
                formatDateToString={formatDateToString}
                setShowBankModal={setShowBankModal}
                setShowAssetTypeModal={setShowAssetTypeModal}
                bankListRefreshTrigger={bankListRefreshTrigger}
              />

              <div className="pb-4" />
            </form>
          </div>
        </div>
      </div>
      {showAssetTypeModal && (
        <AssetTypeModal
          isOpen={showAssetTypeModal}
          onClose={handleCloseAssetTypeModal}
        />
      )}
      {showBankModal && (
        <BankModal
          isOpen={showBankModal}
          onClose={handleCloseBankModal}
          onSuccess={handleBankCreated}
        />
      )}
      <FloatingFooter
        data={footerData}
        onSave={handleSave}
        isSaving={isSaving || loadingExisting}
        saveLabel={saveLabel}
        savingLabel={savingLabel}
      />
    </>
  );
}

export default function StockForm() {
  return (
    <Suspense
      fallback={
        <div className="container mx-auto mt-6 px-4">
          <div className="h-[72px] animate-pulse rounded-2xl bg-slate-100" />
          <div className="mt-1 h-[400px] animate-pulse rounded-2xl bg-slate-50" />
        </div>
      }
    >
      <StockFormContent />
    </Suspense>
  );
}