"use client";

import { useState } from "react";
import type { DiningTableCategory } from "@/lib/api/dining-table-categories";
import { Modal } from "../ui/modal";
import { Button } from "../ui/button";
import { FormInput } from "../ui/form-input";
import { FormTextarea } from "../ui/form-textarea";

type KategoriMejaFormModalProps = {
  open: boolean;
  mode: "create" | "edit";
  initialData?: DiningTableCategory | null;
  isSubmitting?: boolean;
  onClose: () => void;
  onSubmit: (data: { name: string; description: string }) => void;
};

const emptyFormState = {
  name: "",
  description: "",
};

function getInitialFormState(initialData?: DiningTableCategory | null) {
  if (!initialData) return emptyFormState;

  return {
    name: initialData.name,
    description:
      initialData.description === "-" ? "" : initialData.description,
  };
}

export function KategoriMejaFormModal({
  open,
  mode,
  initialData,
  isSubmitting = false,
  onClose,
  onSubmit,
}: KategoriMejaFormModalProps) {
  const [form, setForm] = useState(() => getInitialFormState(initialData));

  const isValid = form.name.trim().length > 0;
  const title = mode === "create" ? "Tambah Kategori Meja" : "Ubah Kategori Meja";
  const submitLabel = mode === "create" ? "Simpan" : "Simpan Perubahan";

  function handleClose() {
    setForm(emptyFormState);
    onClose();
  }

  function handleSubmit() {
    if (!isValid || isSubmitting) return;

    onSubmit({
      name: form.name.trim(),
      description: form.description.trim(),
    });
  }

  return (
    <Modal
      open={open}
      onClose={handleClose}
      title={title}
      ariaLabel={title}
      footer={
        <>
          <Button
            variant="default"
            className="flex-1"
            onClick={handleClose}
            disabled={isSubmitting}
          >
            Batal
          </Button>
          <Button
            className="flex-1"
            onClick={handleSubmit}
            disabled={!isValid || isSubmitting}
          >
            {submitLabel}
          </Button>
        </>
      }
    >
      <FormInput
        id="kategori-meja-name"
        label="Nama Kategori"
        value={form.name}
        onChange={(name) => setForm((prev) => ({ ...prev, name }))}
        placeholder="Contoh: INDOOR"
        disabled={isSubmitting}
      />

      <FormTextarea
        id="kategori-meja-description"
        label="Keterangan (Opsional)"
        value={form.description}
        onChange={(description) =>
          setForm((prev) => ({ ...prev, description }))
        }
        disabled={isSubmitting}
      />
    </Modal>
  );
}