"use client";

import { useEffect, useState, type FormEvent } from "react";
import { verificationError } from "@/lib/commission/verification-error";
import { Alert, AlertDescription } from "@/components/ui/alert";
import { Button } from "@/components/ui/button";
import { Field, FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";

export function MobileSlipForm() {
  const [amount, setAmount] = useState<number | null>(null);
  const [ready, setReady] = useState(false);
  const [complete, setComplete] = useState(false);
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState("");

  useEffect(() => {
    const value = window.location.hash.slice(1);
    Promise.resolve().then(() => {
      if (!value) throw new Error("missing upload link");
      return fetch("/api/commission/mobile-slip", { headers: { Authorization: `Bearer ${value}` }, cache: "no-store" });
    })
      .then(async (response) => {
        const result = await response.json();
        if (!response.ok) throw new Error(result.error);
        setAmount(result.amountBaht);
        setComplete(result.complete);
        setReady(true);
      })
      .catch(() => setError("ลิงก์อัปโหลดหมดอายุหรือไม่ถูกต้อง กรุณาสร้าง QR ใหม่บนคอมพิวเตอร์"));
  }, []);

  async function submit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault(); setBusy(true); setError("");
    try {
      const response = await fetch("/api/commission/mobile-slip", {
        method: "POST", headers: { Authorization: `Bearer ${window.location.hash.slice(1)}` },
        body: new FormData(event.currentTarget),
      });
      const result = await response.json();
      if (!response.ok) throw new Error(verificationError(result.error));
      setComplete(true);
    } catch (cause) { setError(cause instanceof Error ? cause.message : "ตรวจสอบสลิปไม่สำเร็จ"); }
    finally { setBusy(false); }
  }

  if (complete) return <Alert><AlertDescription>ตรวจสอบสลิปสำเร็จแล้ว กลับไปดู Ticket บนคอมพิวเตอร์ได้เลย</AlertDescription></Alert>;
  return <div className="flex flex-col gap-4">
    {ready && <><p>ยอดชำระ ฿{amount}</p><form onSubmit={submit} className="flex flex-col gap-4">
      <Field><FieldLabel htmlFor="mobile-slip">เลือกรูปสลิปจากแอปธนาคาร</FieldLabel>
        <Input id="mobile-slip" name="file" type="file" accept="image/png,image/jpeg,image/webp" required disabled={busy} /></Field>
      <Button type="submit" disabled={busy}>{busy ? "กำลังตรวจสอบ..." : "ตรวจสอบสลิป"}</Button>
    </form></>}
    {error && <Alert variant="destructive"><AlertDescription>{error}</AlertDescription></Alert>}
  </div>;
}