"use client";

import { useState } from "react";
import { useFeedbackModal } from "@/app/components/providers/feedback-modal-provider";
import { useLoadingModal } from "@/app/components/providers/loading-modal-provider";
import type { DiningTableCategory } from "@/lib/api/dining-table-categories";
import { getErrorMessage } from "@/lib/api/types";
import {
  useCreateDiningTableCategory,
  useDeleteDiningTableCategory,
  useDiningTableCategories,
  useUpdateDiningTableCategory,
  type DiningTableCategoryFormData,
} from "@/lib/query/hooks/dining-table-categories";
import { useClientPagination } from "@/lib/hooks/use-client-pagination";
import { DataPagination } from "../ui/data-pagination";
import { DataTableSection } from "../ui/data-table-section";
import { PageEnter, PageTextEnter } from "../ui/page-enter";
import { IconButton } from "../ui/button";
import { IconAdd } from "../ui/icons";
import { KategoriMejaFormModal } from "./kategori-meja-form-modal";
import { KategoriMejaTable } from "./kategori-meja-table";

const EMPTY_ITEMS: DiningTableCategory[] = [];

type FormModalState =
  | { mode: "create" }
  | { mode: "edit"; item: DiningTableCategory };

export function KategoriMejaView() {
  const { showLoading, hideLoading } = useLoadingModal();
  const { showDeleteConfirm, showSaveSuccess } = useFeedbackModal();
  const categoriesQuery = useDiningTableCategories();
  const createMutation = useCreateDiningTableCategory();
  const updateMutation = useUpdateDiningTableCategory();
  const deleteMutation = useDeleteDiningTableCategory();

  const items = categoriesQuery.data ?? EMPTY_ITEMS;
  const {
    setPage,
    paginatedItems,
    startIndex,
    clampPageAfterDelete,
    paginationProps,
  } = useClientPagination(items);
  const [mutationError, setMutationError] = useState<string | null>(null);
  const [formModal, setFormModal] = useState<FormModalState | null>(null);

  const isSubmitting =
    createMutation.isPending ||
    updateMutation.isPending ||
    deleteMutation.isPending;

  const error =
    mutationError ??
    (categoriesQuery.error
      ? getErrorMessage(categoriesQuery.error, "Gagal memuat data kategori meja.")
      : null);

  function closeFormModal() {
    setFormModal(null);
    setMutationError(null);
  }

  async function runWithLoading<T>(
    message: string,
    action: () => Promise<T>,
  ): Promise<T> {
    showLoading({
      message,
      ariaLabel: "Memproses kategori meja",
    });

    try {
      return await action();
    } finally {
      hideLoading();
    }
  }

  async function handleCreate(data: DiningTableCategoryFormData) {
    setMutationError(null);

    try {
      await runWithLoading("Jangan tutup, proses sedang berlangsung", () =>
        createMutation.mutateAsync(data),
      );
      setFormModal(null);
      setPage(1);
      showSaveSuccess({
        description: "Data kategori meja telah tersimpan dengan aman.",
        onPrimary: () => setFormModal({ mode: "create" }),
      });
    } catch (err) {
      setMutationError(getErrorMessage(err, "Gagal menyimpan kategori meja."));
    }
  }

  async function handleUpdate(data: DiningTableCategoryFormData) {
    if (!formModal || formModal.mode !== "edit") return;

    setMutationError(null);

    try {
      await runWithLoading("Jangan tutup, proses sedang berlangsung", () =>
        updateMutation.mutateAsync({
          id: formModal.item.id,
          payload: data,
        }),
      );
      setFormModal(null);
      showSaveSuccess({
        description: "Data kategori meja telah tersimpan dengan aman.",
        onPrimary: () => setFormModal({ mode: "create" }),
      });
    } catch (err) {
      setMutationError(getErrorMessage(err, "Gagal memperbarui kategori meja."));
    }
  }

  async function handleDelete(id: number) {
    setMutationError(null);

    try {
      await runWithLoading("Jangan tutup, proses sedang berlangsung", () =>
        deleteMutation.mutateAsync(id),
      );
      clampPageAfterDelete(items.length - 1);
    } catch (err) {
      setMutationError(getErrorMessage(err, "Gagal menghapus kategori meja."));
      throw err;
    }
  }

  function handleDeleteRequest(item: DiningTableCategory) {
    showDeleteConfirm({
      onConfirm: () => handleDelete(item.id),
    });
  }

  function handleFormSubmit(data: DiningTableCategoryFormData) {
    if (formModal?.mode === "edit") {
      void handleUpdate(data);
      return;
    }

    void handleCreate(data);
  }

  return (
    <PageEnter className="flex min-h-0 flex-1 flex-col">
      <div className="flex min-h-0 flex-1 flex-col overflow-hidden rounded-[10px] border border-neutral-40 bg-neutral-10">
        <div className="relative flex shrink-0 items-center gap-2 px-5 pt-5">
          <div className="absolute top-5 left-0 h-5 w-1 rounded-r-sm bg-primary-500" />
          <PageTextEnter
            as="h1"
            delay={0.08}
            className="text-l-medium flex-1 text-neutral-100"
          >
            Kategori Meja
          </PageTextEnter>
          <PageEnter delay={0.12}>
            <IconButton
              icon={<IconAdd />}
              onClick={() => setFormModal({ mode: "create" })}
            >
              Tambah Kategori
            </IconButton>
          </PageEnter>
        </div>

        <div className="flex min-h-0 flex-1 flex-col gap-4 overflow-hidden p-5">
          {error && (
            <PageEnter delay={0.1}>
              <p className="text-m-regular rounded-lg border border-danger-200 bg-danger-50 px-4 py-3 text-danger-700">
                {error}
              </p>
            </PageEnter>
          )}

          {categoriesQuery.isPending ? (
            <p className="text-m-regular text-neutral-80">Memuat data...</p>
          ) : (
            <PageEnter delay={0.2} className="flex min-h-0 flex-1 flex-col">
              <DataTableSection pagination={<DataPagination {...paginationProps} />}>
                <KategoriMejaTable
                  items={paginatedItems}
                  startIndex={startIndex}
                  onEdit={(item) => setFormModal({ mode: "edit", item })}
                  onDelete={handleDeleteRequest}
                />
              </DataTableSection>
            </PageEnter>
          )}
        </div>
      </div>

      <KategoriMejaFormModal
        key={
          formModal?.mode === "edit"
            ? `edit-${formModal.item.id}`
            : "create"
        }
        open={formModal !== null}
        mode={formModal?.mode ?? "create"}
        initialData={formModal?.mode === "edit" ? formModal.item : null}
        isSubmitting={isSubmitting}
        onClose={closeFormModal}
        onSubmit={handleFormSubmit}
      />
    </PageEnter>
  );
}