"use client";

import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { useState, useTransition } from "react";
import { useRouter } from "next/navigation";
import { CheckCircle, AlertCircle } from "lucide-react";
import { refundFormSchema, type RefundFormValues } from "@/lib/validators/schemas";
import { submitRefund } from "@/services/refund.service";
import FormField from "@/components/common/FormField";
import styles from "./RefundForm.module.css";

interface RefundFormProps {
  token: string;
}

export default function RefundForm({ token }: RefundFormProps) {
  const router = useRouter();
  const [isPending, startTransition] = useTransition();
  const [submitError, setSubmitError] = useState<string | null>(null);
  const [success, setSuccess] = useState(false);

  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<RefundFormValues>({
    resolver: zodResolver(refundFormSchema),
    defaultValues: {
      bank_name: "",
      account_number: "",
      account_holder: "",
      whatsapp: "",
      notes: "",
    },
  });

  const onSubmit = (data: RefundFormValues) => {
    setSubmitError(null);
    startTransition(async () => {
      try {
        await submitRefund(token, data);
        setSuccess(true);
        setTimeout(() => router.refresh(), 1500);
      } catch (err) {
        setSubmitError(err instanceof Error ? err.message : "Gagal mengirim data refund. Coba kembali.");
      }
    });
  };

  if (success) {
    return (
      <div className={styles.successState}>
        <CheckCircle size={32} className={styles.successIcon} aria-hidden />
        <p className={styles.successText}>
          Data refund berhasil dikirim. Tim kami akan memproses permintaan Anda.
        </p>
      </div>
    );
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)} className={styles.form} noValidate>
      <FormField
        label="Nama Bank"
        required
        placeholder="cth. BCA, Mandiri, BNI"
        error={errors.bank_name?.message}
        id="refund-bank-name"
        {...register("bank_name")}
      />
      <FormField
        label="Nomor Rekening"
        required
        placeholder="Nomor rekening tujuan"
        error={errors.account_number?.message}
        id="refund-account-number"
        {...register("account_number")}
      />
      <FormField
        label="Nama Pemilik Rekening"
        required
        placeholder="Sesuai buku tabungan"
        error={errors.account_holder?.message}
        id="refund-account-holder"
        {...register("account_holder")}
      />
      <FormField
        label="Nomor WhatsApp"
        required
        type="tel"
        placeholder="628xxxxxxxxxx"
        error={errors.whatsapp?.message}
        id="refund-whatsapp"
        {...register("whatsapp")}
      />
      <FormField
        label="Catatan (opsional)"
        placeholder="Informasi tambahan"
        error={errors.notes?.message}
        id="refund-notes"
        {...register("notes")}
      />

      {submitError && (
        <div className={styles.errorMsg} role="alert">
          <AlertCircle size={14} aria-hidden />
          {submitError}
        </div>
      )}

      <button type="submit" disabled={isPending} className="btn btn-primary btn-lg" id="refund-submit-btn">
        {isPending ? "Mengirim..." : "Kirim Data Refund"}
      </button>
    </form>
  );
}