"use client";

import { useState } from "react";
import type { PaymentMethod } from "@/lib/api/payment-methods";
import { Modal } from "../ui/modal";
import { Button } from "../ui/button";
import { FormInput } from "../ui/form-input";

type MetodePembayaranFormModalProps = {
  open: boolean;
  mode: "create" | "edit";
  initialData?: PaymentMethod | null;
  isSubmitting?: boolean;
  onClose: () => void;
  onSubmit: (data: {
    type: string;
    bank: string;
    accountHolder: string;
    accountNumber: string;
  }) => void;
};

const emptyFormState = {
  type: "",
  bank: "",
  accountHolder: "",
  accountNumber: "",
};

function getInitialFormState(initialData?: PaymentMethod | null) {
  if (!initialData) return emptyFormState;

  return {
    type: initialData.type === "-" ? "" : initialData.type,
    bank: initialData.bank === "-" ? "" : initialData.bank,
    accountHolder:
      initialData.accountHolder === "-" ? "" : initialData.accountHolder,
    accountNumber:
      initialData.accountNumber === "-" ? "" : initialData.accountNumber,
  };
}

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

  const isValid = form.type.trim().length > 0;
  const title =
    mode === "create" ? "Tambah Metode Pembayaran" : "Ubah Metode Pembayaran";
  const submitLabel = mode === "create" ? "Simpan" : "Simpan Perubahan";

  function handleClose() {
    setForm(emptyFormState);
    onClose();
  }

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

    onSubmit({
      type: form.type.trim(),
      bank: form.bank.trim(),
      accountHolder: form.accountHolder.trim(),
      accountNumber: form.accountNumber.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>
        </>
      }
    >
      <FormInput
        id="payment-type"
        label="Tipe Pembayaran"
        value={form.type}
        onChange={(type) => setForm((prev) => ({ ...prev, type }))}
        placeholder="Contoh: QRIS BNI"
        disabled={isSubmitting}
      />

      <FormInput
        id="payment-bank"
        label="Bank"
        value={form.bank}
        onChange={(bank) => setForm((prev) => ({ ...prev, bank }))}
        placeholder="Contoh: BNI"
        helperText="Diisi ketika pembayaran transfer atau memerlukan data bank"
        disabled={isSubmitting}
      />

      <FormInput
        id="payment-account-number"
        label="No Rekening"
        value={form.accountNumber}
        onChange={(accountNumber) =>
          setForm((prev) => ({ ...prev, accountNumber }))
        }
        placeholder="0"
        disabled={isSubmitting}
      />

      <FormInput
        id="payment-account-holder"
        label="Nama Pemilik Rekening"
        value={form.accountHolder}
        onChange={(accountHolder) =>
          setForm((prev) => ({ ...prev, accountHolder }))
        }
        placeholder="Contoh: Abdul Azis"
        disabled={isSubmitting}
      />
    </Modal>
  );
}