"use client";

import { useState } from "react";
import type { Branch } from "@/lib/api/branches";
import type { User } from "@/lib/api/users";
import type { AppRole } from "@/lib/auth/roles";
import { Modal } from "../ui/modal";
import { Button } from "../ui/button";
import { FormInput } from "../ui/form-input";
import { FormSelect } from "../ui/form-select";

export type FormUserRole = AppRole;

const ROLE_OPTIONS: Array<{ value: FormUserRole; label: string }> = [
  { value: "owner", label: "Owner" },
  { value: "admin", label: "Admin" },
  { value: "order_admin", label: "Admin Pesanan" },
  { value: "kasir", label: "Kasir" },
];

const BRANCH_REQUIRED_ROLES = new Set<FormUserRole>(["order_admin", "kasir"]);

type ManagementUserFormModalProps = {
  open: boolean;
  mode: "create" | "edit";
  branches: Branch[];
  initialData?: User | null;
  isSubmitting?: boolean;
  onClose: () => void;
  onSubmit: (data: {
    fullName: string;
    whatsappNumber: string;
    username: string;
    password: string;
    passwordConfirmation: string;
    role: FormUserRole;
    branchId?: number;
  }) => void;
};

const emptyFormState = {
  fullName: "",
  whatsappNumber: "",
  username: "",
  password: "",
  passwordConfirmation: "",
  role: "" as FormUserRole | "",
  branchId: "",
  isActive: true,
};

function mapApiRoleToFormRole(role: string): FormUserRole | "" {
  const normalized = role.trim().toLowerCase();

  if (normalized === "owner") return "owner";
  if (normalized === "admin") return "admin";
  if (normalized === "order_admin" || normalized === "admin pesanan") {
    return "order_admin";
  }
  if (normalized === "kasir") return "kasir";

  return "";
}

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

  const role = mapApiRoleToFormRole(initialData.role);
  const branchId =
    initialData.branchId != null
      ? String(initialData.branchId)
      : branches.length === 1
        ? String(branches[0].id)
        : "";

  return {
    fullName: initialData.fullName === "-" ? "" : initialData.fullName,
    whatsappNumber:
      initialData.whatsappNumber === "-" ? "" : initialData.whatsappNumber,
    username: initialData.username === "-" ? "" : initialData.username,
    password: "",
    passwordConfirmation: "",
    role,
    branchId,
    isActive: initialData.isActive,
  };
}

function getRoleLabel(role: FormUserRole | "") {
  if (!role) return "-";

  return ROLE_OPTIONS.find((option) => option.value === role)?.label ?? role;
}

function ActiveSwitch({
  active,
  onChange,
  disabled,
}: {
  active: boolean;
  onChange: (value: boolean) => void;
  disabled?: boolean;
}) {
  return (
    <div className="flex items-center gap-2">
      <button
        type="button"
        role="switch"
        aria-checked={active}
        disabled={disabled}
        onClick={() => onChange(!active)}
        className={`relative h-[21px] w-[38px] rounded-full transition-colors disabled:opacity-60 ${
          active ? "bg-primary-500" : "bg-neutral-40"
        }`}
      >
        <span
          className={`absolute top-[2px] size-[17px] rounded-full bg-neutral-10 transition-transform ${
            active ? "left-[19px]" : "left-[2px]"
          }`}
        />
      </button>
      {active && <span className="text-m-regular text-neutral-100">Ya</span>}
    </div>
  );
}

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

  const requiresBranch =
    form.role !== "" && BRANCH_REQUIRED_ROLES.has(form.role);

  const isPasswordValid =
    mode === "edit"
      ? form.password.length === 0 ||
        (form.password.length >= 6 &&
          form.password === form.passwordConfirmation)
      : form.password.length >= 6 &&
        form.password === form.passwordConfirmation;

  const isValid =
    form.fullName.trim().length > 0 &&
    form.whatsappNumber.trim().length > 0 &&
    form.username.trim().length > 0 &&
    form.role !== "" &&
    isPasswordValid &&
    (mode === "create" ? form.password.length >= 6 : true) &&
    (!requiresBranch || form.branchId.length > 0);

  const title = mode === "create" ? "Tambah User" : "Ubah User";
  const submitLabel = mode === "create" ? "Simpan" : "Simpan Perubahan";
  const isEditMode = mode === "edit";
  const branchOptions = branches.map((branch) => ({
    value: String(branch.id),
    label: branch.name,
  }));

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

  function handleSubmit() {
    if (!isValid || isSubmitting || form.role === "") return;
    if (requiresBranch && !form.branchId) return;

    onSubmit({
      fullName: form.fullName.trim(),
      whatsappNumber: form.whatsappNumber.trim(),
      username: form.username.trim(),
      password: form.password,
      passwordConfirmation: form.passwordConfirmation,
      role: form.role,
      ...(form.branchId ? { branchId: Number(form.branchId) } : {}),
    });
  }

  return (
    <Modal
      open={open}
      onClose={handleClose}
      title={title}
      ariaLabel={title}
      size="lg"
      footer={
        <>
          <Button
            variant="default"
            className="flex-1"
            onClick={handleClose}
            disabled={isSubmitting}
          >
            Batal
          </Button>
          <Button
            className="flex-1"
            onClick={handleSubmit}
            disabled={!isValid || isSubmitting}
          >
            {submitLabel}
          </Button>
        </>
      }
    >
      <div className="flex max-h-[500px] flex-col gap-3 overflow-y-auto pr-1">
        {isEditMode && (
          <p className="text-s-regular rounded-lg border border-neutral-40 bg-neutral-20 px-4 py-3 text-neutral-80">
            Username dan role tidak dapat diubah. Status aktif/nonaktif diubah
            dari kolom{" "}
            <span className="text-m-medium text-neutral-100">Aktif</span> di
            tabel.
          </p>
        )}

        <FormInput
          id="user-full-name"
          label="Nama Lengkap"
          value={form.fullName}
          onChange={(fullName) => setForm((prev) => ({ ...prev, fullName }))}
          placeholder="Contoh: Sidiq Utama"
          disabled={isSubmitting}
        />

        <FormInput
          id="user-whatsapp"
          label="No Whatsapp"
          value={form.whatsappNumber}
          onChange={(whatsappNumber) =>
            setForm((prev) => ({ ...prev, whatsappNumber }))
          }
          placeholder="Contoh: 0812345689012"
          disabled={isSubmitting}
        />

        <FormInput
          id="user-username"
          label="Username"
          value={form.username}
          onChange={(username) => setForm((prev) => ({ ...prev, username }))}
          placeholder="Contoh: sidiqut928"
          disabled={isSubmitting || isEditMode}
          helperText={
            isEditMode
              ? "Username tidak dapat diubah setelah user dibuat."
              : undefined
          }
        />

        <FormInput
          id="user-password"
          label={isEditMode ? "Password Baru" : "Password"}
          value={form.password}
          onChange={(password) => setForm((prev) => ({ ...prev, password }))}
          placeholder={
            isEditMode ? "Kosongkan jika tidak diubah" : "Masukkan Password"
          }
          disabled={isSubmitting}
          withPasswordToggle
          helperText={
            isEditMode
              ? "Isi hanya jika ingin mengganti password user."
              : undefined
          }
        />

        <FormInput
          id="user-password-confirmation"
          label={isEditMode ? "Ulangi Password Baru" : "Ulangi Password"}
          value={form.passwordConfirmation}
          onChange={(passwordConfirmation) =>
            setForm((prev) => ({ ...prev, passwordConfirmation }))
          }
          placeholder={isEditMode ? "Ulangi password baru" : "Ulangi Password"}
          disabled={isSubmitting}
          withPasswordToggle
        />

        {isEditMode ? (
          <div className="flex flex-col gap-2">
            <span className="text-m-medium text-neutral-100">Role</span>
            <div className="text-m-regular rounded-lg border border-neutral-40 bg-neutral-20 px-[22px] py-3 text-neutral-100">
              {getRoleLabel(form.role)}
            </div>
            <p className="text-s-regular text-neutral-80">
              Role tidak dapat diubah setelah user dibuat.
            </p>
          </div>
        ) : (
          <div className="flex flex-col gap-2">
            <span className="text-m-medium text-neutral-100">Role</span>
            <div className="grid grid-cols-2 gap-2">
              {ROLE_OPTIONS.map((option) => {
                const isSelected = form.role === option.value;

                return (
                  <button
                    key={option.value}
                    type="button"
                    onClick={() =>
                      setForm((prev) => ({
                        ...prev,
                        role: option.value,
                        branchId: BRANCH_REQUIRED_ROLES.has(option.value)
                          ? prev.branchId ||
                            (branches.length === 1
                              ? String(branches[0].id)
                              : "")
                          : "",
                      }))
                    }
                    disabled={isSubmitting}
                    className={`rounded-lg border px-3 py-4 text-center text-m-regular transition-colors ${
                      isSelected
                        ? "border-primary-500 bg-primary-50 text-primary-500"
                        : "border-neutral-40 bg-neutral-10 text-neutral-100 hover:bg-neutral-20"
                    }`}
                  >
                    {option.label}
                  </button>
                );
              })}
            </div>
          </div>
        )}

        {requiresBranch && (
          <div className="flex flex-col gap-1">
            <FormSelect
              id="user-branch"
              label="Cabang"
              value={form.branchId}
              placeholder="Pilih Cabang"
              options={branchOptions}
              onChange={(branchId) =>
                setForm((prev) => ({ ...prev, branchId }))
              }
              disabled={isSubmitting || branches.length <= 1}
              required
            />
            <p className="text-s-regular text-neutral-80">
              {isEditMode
                ? "Cabang dapat diperbarui untuk user Admin Pesanan dan Kasir."
                : "Cabang wajib dipilih untuk Role Admin Pesanan dan Kasir."}
            </p>
          </div>
        )}

        {!isEditMode && (
          <div className="flex flex-col gap-2">
            <span className="text-m-medium text-neutral-100">Aktifkan</span>
            <ActiveSwitch
              active={form.isActive}
              disabled={isSubmitting}
              onChange={(isActive) =>
                setForm((prev) => ({ ...prev, isActive }))
              }
            />
          </div>
        )}
      </div>
    </Modal>
  );
}