"use client";

import { useMemo, useState } from "react";
import type { Branch } from "@/lib/api/branches";
import type { Printer } from "@/lib/api/printers";
import type { Stand } from "@/lib/api/stands";
import { Modal } from "../ui/modal";
import { Button } from "../ui/button";
import { FormInput } from "../ui/form-input";
import { FormSelect } from "../ui/form-select";
import { FormTextarea } from "../ui/form-textarea";

const POSITION_OPTIONS = ["Kasir", "Stand", "Kitchen", "Bar", "Checker"] as const;

const TYPE_OPTIONS = [
  { value: "network", label: "Network" },
  { value: "bluetooth", label: "Bluetooth" },
] as const;

type PrinterFormModalProps = {
  open: boolean;
  mode: "create" | "edit";
  branches: Branch[];
  stands: Stand[];
  initialData?: Printer | null;
  isSubmitting?: boolean;
  onClose: () => void;
  onSubmit: (data: {
    name: string;
    ip: string;
    type: string;
    position: string;
    description: string;
    branchId: number | null;
    standId: number | null;
  }) => void;
};

const emptyFormState = {
  branchId: "",
  standId: "",
  name: "",
  ip: "",
  type: "",
  position: "",
  description: "",
};

function normalizeTypeValue(value: string) {
  const normalized = value.trim().toLowerCase();
  if (normalized === "network" || normalized === "bluetooth") {
    return normalized;
  }

  return "";
}

function getInitialFormState(
  branches: Branch[],
  initialData?: Printer | null,
) {
  if (!initialData) {
    return {
      ...emptyFormState,
      branchId: branches.length === 1 ? String(branches[0].id) : "",
    };
  }

  return {
    branchId:
      initialData.branchId != null
        ? String(initialData.branchId)
        : branches.length === 1
          ? String(branches[0].id)
          : "",
    standId: initialData.standId != null ? String(initialData.standId) : "",
    name: initialData.name === "-" ? "" : initialData.name,
    ip: initialData.ip === "-" ? "" : initialData.ip,
    type:
      initialData.type === "-" ? "" : normalizeTypeValue(initialData.type),
    position: initialData.position === "-" ? "" : initialData.position,
    description: initialData.description === "-" ? "" : initialData.description,
  };
}

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

  const resolvedBranchId =
    branches.length === 1
      ? String(branches[0].id)
      : form.branchId;

  const filteredStands = useMemo(() => {
    if (!resolvedBranchId) return [];

    const branchId = Number(resolvedBranchId);
    return stands.filter((stand) => stand.branchId === branchId);
  }, [stands, resolvedBranchId]);

  const isValid =
    form.name.trim().length > 0 &&
    form.type.trim().length > 0 &&
    form.position.trim().length > 0 &&
    (branches.length <= 1 || form.branchId.length > 0);
  const title = mode === "create" ? "Tambah Printer" : "Ubah Printer";
  const submitLabel = mode === "create" ? "Simpan" : "Simpan Perubahan";

  const branchOptions = branches.map((branch) => ({
    value: String(branch.id),
    label: branch.name,
  }));

  const standOptions = filteredStands.map((stand) => ({
    value: String(stand.id),
    label: stand.name,
  }));

  const positionOptions = POSITION_OPTIONS.map((option) => ({
    value: option,
    label: option,
  }));

  const typeOptions = TYPE_OPTIONS.map((option) => ({
    value: option.value,
    label: option.label,
  }));

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

  function resolveBranchId() {
    if (branches.length > 1) {
      return form.branchId.length > 0 ? Number(form.branchId) : null;
    }

    return branches.length === 1 ? branches[0].id : null;
  }

  function handleBranchChange(branchId: string) {
    setForm((prev) => ({
      ...prev,
      branchId,
      standId: "",
    }));
  }

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

    onSubmit({
      name: form.name.trim(),
      ip: form.ip.trim(),
      type: form.type.trim(),
      position: form.position.trim(),
      description: form.description.trim(),
      branchId: resolveBranchId(),
      standId: form.standId.length > 0 ? Number(form.standId) : null,
    });
  }

  return (
    <Modal
      open={open}
      onClose={handleClose}
      title={title}
      ariaLabel={title}
      size="md"
      footer={
        <>
          <Button
            variant="default"
            className="flex-1"
            onClick={handleClose}
            disabled={isSubmitting}
          >
            Batal
          </Button>
          <Button
            className="flex-1"
            onClick={handleSubmit}
            disabled={!isValid || isSubmitting}
          >
            {submitLabel}
          </Button>
        </>
      }
    >
      {branches.length > 1 && (
        <FormSelect
          id="printer-branch"
          label="Cabang"
          value={form.branchId}
          placeholder="Pilih Cabang"
          options={branchOptions}
          onChange={handleBranchChange}
          disabled={isSubmitting}
        />
      )}

      <FormSelect
        id="printer-stand"
        label="Stand (Opsional)"
        value={form.standId}
        placeholder={
          resolvedBranchId ? "Pilih Stand" : "Pilih cabang terlebih dahulu"
        }
        options={standOptions}
        onChange={(standId) => setForm((prev) => ({ ...prev, standId }))}
        disabled={isSubmitting || !resolvedBranchId || standOptions.length === 0}
      />

      <FormInput
        id="printer-name"
        label="Nama Printer"
        value={form.name}
        onChange={(name) => setForm((prev) => ({ ...prev, name }))}
        placeholder="Contoh: PRINTER KASIR"
        disabled={isSubmitting}
      />

      <FormInput
        id="printer-ip"
        label="IP / MAC Address"
        value={form.ip}
        onChange={(ip) => setForm((prev) => ({ ...prev, ip }))}
        placeholder="0"
        disabled={isSubmitting}
      />

      <FormSelect
        id="printer-type"
        label="Tipe"
        value={form.type}
        placeholder="Pilih Tipe"
        options={typeOptions}
        onChange={(type) => setForm((prev) => ({ ...prev, type }))}
        disabled={isSubmitting}
      />

      <FormSelect
        id="printer-position"
        label="Posisi"
        value={form.position}
        placeholder="Pilih Posisi"
        options={positionOptions}
        onChange={(position) => setForm((prev) => ({ ...prev, position }))}
        disabled={isSubmitting}
      />

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