"use client";

import { useState } from "react";
import type { Branch } from "@/lib/api/branches";
import type { DiningTableCategory } from "@/lib/api/dining-table-categories";
import type { DiningTableEditData } from "@/lib/api/dining-tables";
import { Modal } from "../ui/modal";
import { Button } from "../ui/button";
import { FormCheckbox } from "../ui/form-checkbox";
import { FormInput } from "../ui/form-input";
import { FormSelect } from "../ui/form-select";

type SemuaMejaFormModalProps = {
  open: boolean;
  mode: "create" | "edit";
  branches: Branch[];
  categories: DiningTableCategory[];
  initialEditData?: DiningTableEditData | null;
  isSubmitting?: boolean;
  onClose: () => void;
  onSubmit: (data: {
    tableNumber: string;
    tableCategoryId: number;
    branchIds: number[];
  }) => void;
};

type FormState = {
  tableCategoryId: string;
  tableNumber: string;
  branchIds: string[];
};

const emptyFormState: FormState = {
  tableCategoryId: "",
  tableNumber: "",
  branchIds: [],
};

function normalizeTableNumberForApi(value: string) {
  const trimmed = value.trim();

  if (trimmed.length === 0) {
    return "";
  }

  if (/^meja\s+/i.test(trimmed)) {
    return trimmed.replace(/^meja\s+/i, "").trim();
  }

  return trimmed;
}

export function formatTableNumberForDisplay(value: string) {
  const trimmed = value.trim();

  if (trimmed.length === 0 || trimmed === "-") {
    return "";
  }

  if (/^meja\s/i.test(trimmed)) {
    return trimmed;
  }

  return `Meja ${trimmed}`;
}

export { normalizeTableNumberForApi };

function getInitialFormState(
  categories: DiningTableCategory[],
  initialEditData?: DiningTableEditData | null,
): FormState {
  if (!initialEditData) {
    return {
      ...emptyFormState,
      tableCategoryId:
        categories.length === 1 ? String(categories[0].id) : "",
    };
  }

  return {
    tableCategoryId:
      initialEditData.tableCategoryId != null
        ? String(initialEditData.tableCategoryId)
        : "",
    tableNumber: formatTableNumberForDisplay(initialEditData.tableNumber),
    branchIds: initialEditData.branchAssignments.map((assignment) =>
      String(assignment.branchId),
    ),
  };
}

export function SemuaMejaFormModal({
  open,
  mode,
  branches,
  categories,
  initialEditData,
  isSubmitting = false,
  onClose,
  onSubmit,
}: SemuaMejaFormModalProps) {
  const [form, setForm] = useState(() =>
    getInitialFormState(categories, initialEditData),
  );

  const isValid =
    form.tableNumber.trim().length > 0 &&
    form.tableCategoryId.length > 0 &&
    form.branchIds.length > 0;

  const title = mode === "create" ? "Tambah Meja" : "Ubah Meja";
  const submitLabel = mode === "create" ? "Simpan" : "Simpan Perubahan";

  const categoryOptions = categories.map((category) => ({
    value: String(category.id),
    label: category.name,
  }));

  function handleClose() {
    setForm(getInitialFormState(categories));
    onClose();
  }

  function toggleBranch(branchId: string) {
    if (isSubmitting) return;

    setForm((prev) => {
      if (prev.branchIds.includes(branchId)) {
        return {
          ...prev,
          branchIds: prev.branchIds.filter((id) => id !== branchId),
        };
      }

      return { ...prev, branchIds: [...prev.branchIds, branchId] };
    });
  }

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

    const tableNumber = normalizeTableNumberForApi(form.tableNumber);

    onSubmit({
      tableNumber,
      tableCategoryId: Number(form.tableCategoryId),
      branchIds: form.branchIds.map((branchId) => Number(branchId)),
    });
  }

  return (
    <Modal
      open={open}
      onClose={handleClose}
      title={title}
      ariaLabel={title}
      maxWidthClassName="max-w-[500px]"
      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="semua-meja-number"
        label="No Meja"
        value={form.tableNumber}
        onChange={(tableNumber) =>
          setForm((prev) => ({ ...prev, tableNumber }))
        }
        placeholder={mode === "create" ? "Contoh: Meja 1" : undefined}
        disabled={isSubmitting}
      />

      <FormSelect
        id="semua-meja-category"
        label="Kategori Meja"
        value={form.tableCategoryId}
        placeholder="Pilih Kategori"
        options={categoryOptions}
        onChange={(tableCategoryId) =>
          setForm((prev) => ({ ...prev, tableCategoryId }))
        }
        disabled={isSubmitting}
      />

      <div className="flex flex-col gap-2">
        <p className="text-m-medium text-neutral-100">Tersedia di Cabang</p>
        <div className="flex flex-col gap-4">
          {branches.map((branch) => {
            const branchId = String(branch.id);
            const isSelected = form.branchIds.includes(branchId);

            return (
              <FormCheckbox
                key={branch.id}
                id={`semua-meja-branch-${branch.id}`}
                checked={isSelected}
                onChange={() => toggleBranch(branchId)}
                disabled={isSubmitting}
                label={branch.name}
                labelClassName="text-neutral-70"
              />
            );
          })}
        </div>
      </div>
    </Modal>
  );
}