"use client";

import { useState } from "react";
import type { Branch } from "@/lib/api/branches";
import type { Device } from "@/lib/api/devices";
import { Modal } from "../ui/modal";
import { Button } from "../ui/button";
import { FormInput } from "../ui/form-input";
import { FormSelect } from "../ui/form-select";

type PerangkatFormModalProps = {
  open: boolean;
  mode: "create" | "edit";
  branches: Branch[];
  initialData?: Device | null;
  isSubmitting?: boolean;
  onClose: () => void;
  onSubmit: (data: {
    deviceCode: string;
    name: string;
    branchId: number | null;
    platform: string;
    appVersion: string;
    status: string;
  }) => void;
};

const PLATFORM_OPTIONS = [
  { value: "android", label: "Android" },
  { value: "ios", label: "iOS" },
];

const emptyFormState = {
  branchId: "",
  deviceCode: "",
  name: "",
  platform: "android",
  appVersion: "",
  status: "",
};

function getInitialFormState(
  branches: Branch[],
  initialData?: Device | 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)
          : "",
    deviceCode:
      initialData.deviceCode === "-" ? "" : initialData.deviceCode,
    name: initialData.name === "-" ? "" : initialData.name,
    platform:
      initialData.platform === "-"
        ? "android"
        : initialData.platform.toLowerCase(),
    appVersion:
      initialData.appVersion === "-" ? "" : initialData.appVersion,
    status: initialData.status === "-" ? "" : initialData.status,
  };
}

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

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

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

  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 handleSubmit() {
    if (!isValid || isSubmitting) return;

    onSubmit({
      deviceCode: form.deviceCode.trim(),
      name: form.name.trim(),
      branchId: resolveBranchId(),
      platform: form.platform,
      appVersion: form.appVersion.trim(),
      status: form.status.trim(),
    });
  }

  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="device-branch"
          label="Cabang"
          value={form.branchId}
          placeholder="Pilih Cabang"
          options={branchOptions}
          onChange={(branchId) =>
            setForm((prev) => ({ ...prev, branchId }))
          }
          disabled={isSubmitting}
        />
      )}

      <FormInput
        id="device-code"
        label="Kode Perangkat"
        value={form.deviceCode}
        onChange={(deviceCode) =>
          setForm((prev) => ({ ...prev, deviceCode }))
        }
        placeholder="Contoh: POS-CABANG1-01"
        disabled={isSubmitting}
      />

      <FormInput
        id="device-name"
        label="Nama Perangkat"
        value={form.name}
        onChange={(name) => setForm((prev) => ({ ...prev, name }))}
        placeholder="Contoh: Tablet Kasir 1"
        disabled={isSubmitting}
      />

      <FormSelect
        id="device-platform"
        label="Platform"
        value={form.platform}
        placeholder="Pilih Platform"
        options={PLATFORM_OPTIONS}
        onChange={(platform) => setForm((prev) => ({ ...prev, platform }))}
        disabled={isSubmitting}
      />

      <FormInput
        id="device-app-version"
        label="Versi App (Opsional)"
        value={form.appVersion}
        onChange={(appVersion) =>
          setForm((prev) => ({ ...prev, appVersion }))
        }
        placeholder="Contoh: 1.0.0"
        disabled={isSubmitting}
      />

      <FormInput
        id="device-status"
        label="Status (Opsional)"
        value={form.status}
        onChange={(status) => setForm((prev) => ({ ...prev, status }))}
        placeholder="Contoh: active"
        disabled={isSubmitting}
      />

      {mode === "edit" && initialData ? (
        <p className="text-s-regular text-neutral-80">
          ID perangkat untuk aktivasi mobile:{" "}
          <span className="font-mono text-neutral-100">{initialData.id}</span>
        </p>
      ) : null}
    </Modal>
  );
}