"use client";

import { useState, type FormEvent } from "react";
import { useRouter } from "next/navigation";
import { MobileSlipHandoff } from "@/components/commission/mobile-slip-handoff";
import { Alert, AlertDescription } from "@/components/ui/alert";
import { Button } from "@/components/ui/button";
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import { verificationError } from "@/lib/commission/verification-error";

export function CommissionPaymentForm({ checkoutId }: { checkoutId: string }) {
  const router = useRouter();
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState("");
  async function submit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault(); setBusy(true); setError("");
    try {
      const response = await fetch(`/api/commission/checkouts/${checkoutId}/verify`, {
        method: "POST", body: new FormData(event.currentTarget),
      });
      const result = await response.json();
      if (!response.ok) throw new Error(verificationError(result.error));
      router.push(`/commission/tickets/${result.ticketId}`);
    } catch (cause) { setError(cause instanceof Error ? cause.message : "เกิดข้อผิดพลาด"); }
    finally { setBusy(false); }
  }
  return <form onSubmit={submit} className="flex flex-col gap-4"><FieldGroup>
    <Field><FieldLabel htmlFor="slip">อัปโหลดสลิปที่ชำระเงินแล้ว</FieldLabel>
      <Input id="slip" name="file" type="file" accept="image/png,image/jpeg,image/webp" required />
      <MobileSlipHandoff checkoutId={checkoutId} /></Field>
    <Button type="submit" disabled={busy}>{busy ? "กำลังตรวจสอบ..." : "ตรวจสอบสลิปและเปิด Ticket"}</Button>
  </FieldGroup>{error && <Alert variant="destructive"><AlertDescription>{error}</AlertDescription></Alert>}</form>;
}