"use client";

import { useState } from "react";
import type { PinInfo } from "@/lib/api/pin";
import { Modal } from "../ui/modal";
import { Button } from "../ui/button";

type PinFormModalProps = {
  open: boolean;
  pinInfo: PinInfo | null;
  isSubmitting?: boolean;
  onClose: () => void;
  onSubmit: (pin: string) => void;
};

const inputClassName =
  "text-m-regular h-10 w-full rounded-lg border border-neutral-40 bg-neutral-10 px-[22px] py-2 text-neutral-100 placeholder:text-neutral-70 outline-none focus:border-primary-500 disabled:opacity-60";

export function PinFormModal({
  open,
  pinInfo,
  isSubmitting = false,
  onClose,
  onSubmit,
}: PinFormModalProps) {
  const [pin, setPin] = useState("");

  const isValid = /^\d{6}$/.test(pin);

  function handleClose() {
    setPin("");
    onClose();
  }

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

    onSubmit(pin);
  }

  return (
    <Modal
      open={open}
      onClose={handleClose}
      title="Ubah PIN"
      ariaLabel="Ubah PIN Otoritas"
      size="md"
      footer={
        <>
          <Button
            variant="default"
            className="flex-1"
            onClick={handleClose}
            disabled={isSubmitting}
          >
            Batal
          </Button>
          <Button
            className="flex-1"
            onClick={handleSubmit}
            disabled={!isValid || isSubmitting}
          >
            Simpan Perubahan
          </Button>
        </>
      }
    >
      <div className="flex flex-col gap-2">
        <label htmlFor="pin-value" className="text-m-medium text-neutral-100">
          Setup PIN (6 digit)
        </label>
        <input
          id="pin-value"
          type="text"
          inputMode="numeric"
          pattern="\d{6}"
          maxLength={6}
          value={pin}
          onChange={(event) =>
            setPin(event.target.value.replace(/\D/g, "").slice(0, 6))
          }
          placeholder={pinInfo?.pin || "Masukkan PIN 6 digit"}
          disabled={isSubmitting}
          className={inputClassName}
        />
        {pinInfo?.lastUpdatedLabel && (
          <p className="text-s-regular text-neutral-80">
            {pinInfo.lastUpdatedLabel}
          </p>
        )}
      </div>
    </Modal>
  );
}