"use client";

import { useMemo, useCallback, useState } from "react";
import { useRouter } from "next/navigation";
import { DataTable } from "@/components/datatable/data-table";
import { PageHeader } from "@/components/ui/PageHeader";
import {
  Deposit,
  createDepositColumns,
} from "@/components/datatable/listdeposits/columns";
import { useCashPage } from "@/hooks/useCashPage";
import { DepositModal } from "@/components/cash/DepositModal";
import { DepositActions } from "@/components/cash/DepositActions";
import { DeleteConfirmModal } from "@/components/cash/DeleteConfirmModal";
import { BREADCRUMBS } from "@/constants/breadcrumbs";

export default function ListDeposit() {
  const router = useRouter();
  
  const {
    data,
    loading,
    selectedRecord,
    showModal,
    showDeleteConfirm,
    loadData,
    handleView,
    closeModal,
    handleDeleteClick,
    setShowDeleteConfirm,
  } = useCashPage<Deposit>({
    apiEndpoint: "/api/deposit",
  });
  const [deleteLoading, setDeleteLoading] = useState(false);

  const depositColumns = useMemo(
    () =>
      createDepositColumns({
        onView: handleView,
      },data),
    [handleView,data]
  );

  const handleEdit = useCallback(
    (record: Deposit) => {
      const depositType = (record.f_type2 || record.f_type || "").toLowerCase();
      // const recordId = record.id ?? record.uid ?? "";
      const recordId = record.id;  // ← use only id, not uid (PHP findByPk1 uses numeric id)

      if (!recordId) return;
      
    if (depositType === "dc" || depositType.includes("fixed")) {
      router.push(`/cash/deposit/fixeddeposit?id=${recordId}`);
    } else if (depositType === "cl" || depositType.includes("call")) {
      router.push(`/cash/deposit/calldeposit?id=${recordId}`);
    } else {
      router.push(`/cash/deposit/fixeddeposit?id=${recordId}`);
    }
    },
    [router]
  );

  const handleCancelDelete = useCallback(() => {
    setShowDeleteConfirm(false);
  }, [setShowDeleteConfirm]);

  const confirmDelete = useCallback(async () => {
    if (!selectedRecord) return;

    const recordId = selectedRecord.id ?? selectedRecord.uid;
    if (!recordId) return;

    const depositType = (selectedRecord.f_type2 || selectedRecord.f_type || "").toLowerCase();
    const deleteEndpoint =
      depositType === "dc" || depositType.includes("fixed")
        ? "/api/deposit/fixeddeposit/delete"
        : "/api/deposit/calldeposit/delete";

    setDeleteLoading(true);
    try {
      const response = await fetch(`${deleteEndpoint}?id=${encodeURIComponent(recordId)}`, {
        method: "DELETE",
        credentials: "include",
      });

      if (!response.ok) {
        const errorText = await response.text();
        throw new Error(
          `Delete failed with status ${response.status}: ${errorText || response.statusText}`
        );
      }

      setShowDeleteConfirm(false);
      closeModal();
      await loadData();
    } catch (error) {
      console.error("Unable to delete deposit:", error);
    } finally {
      setDeleteLoading(false);
    }
  }, [selectedRecord, setShowDeleteConfirm, closeModal, loadData]);

  return (
    <div className="container mx-auto px-4 mt-6">
      <PageHeader
        title="Cash Deposits"
        description="Log inbound cash deposits and keep balances aligned."
        breadcrumbs={[...BREADCRUMBS.deposits]}
        actions={<DepositActions isLoading={loading} onRefresh={loadData} />}
      />

      {/* Data Table */}
      <div className="rounded-lg">
        <DataTable columns={depositColumns} data={data} />
      </div>

      {showModal && selectedRecord && (
        <DepositModal
          record={selectedRecord}
          onClose={closeModal}
          onEdit={() => handleEdit(selectedRecord)}
          onDelete={handleDeleteClick}
        />
      )}

      {showDeleteConfirm && selectedRecord && (
        <DeleteConfirmModal
          record={selectedRecord}
          onCancel={handleCancelDelete}
          onConfirm={confirmDelete}
          deleteLoading={deleteLoading}
        />
      )}
    </div>
  );
}