"use client";

import Image from "@/components/ui/resilient-image";

import { useEffect, useState, type FormEvent } from "react";
import { useRouter } from "next/navigation";
import Link from "next/link";
import { MobileSlipHandoff } from "@/components/commission/mobile-slip-handoff";
import { Alert, AlertDescription } from "@/components/ui/alert";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
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, amountBaht, qr, expiresAt, serverNow }: {
  checkoutId: string; amountBaht: number; qr: string | null; expiresAt: number; serverNow: number;
}) {
  const router = useRouter();
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState("");
  const [now, setNow] = useState(serverNow);
  const expired = now >= expiresAt;
  const secondsLeft = Math.max(0, Math.ceil((expiresAt - now) / 1000));

  useEffect(() => {
    const timer = window.setInterval(() => setNow(Date.now()), 1000);
    return () => window.clearInterval(timer);
  }, []);

  async function submit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    if (Date.now() >= expiresAt) { setNow(Date.now()); return; }
    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) {
        if (result.error === "checkout-expired") setNow(Date.now());
        throw new Error(verificationError(result.error));
      }
      router.push(`/commission/tickets/${result.ticketId}`);
    } catch (cause) { setError(cause instanceof Error ? cause.message : "เกิดข้อผิดพลาด"); }
    finally { setBusy(false); }
  }
  if (expired || !qr) return <Card><CardHeader><CardTitle>หมดเวลาชำระเงิน</CardTitle></CardHeader>
    <CardContent className="flex flex-col gap-3"><p>คำขอนี้หมดอายุแล้ว กรุณาสร้างคำขอใหม่</p>
      <Link href="/commission" className="text-sm underline">สร้างคำขอใหม่</Link>
    </CardContent></Card>;

  return <><Card><CardHeader><CardTitle>สแกน PromptPay</CardTitle></CardHeader>
    <CardContent className="flex flex-col items-center gap-4">
      {/* Generated locally from the fixed checkout amount and configured recipient. */}
      <Image unoptimized src={qr} alt={`PromptPay QR สำหรับชำระเงิน ${amountBaht} บาท`} width={300} height={300} />
      <Button nativeButton={false} render={<a href={qr} download="promptpay-qr.png" />}>บันทึก QR สำหรับชำระเงิน</Button>
      <strong>฿{amountBaht}</strong>
      <p className="text-center text-sm text-muted-foreground">ใช้มือถือเครื่องนี้ชำระเงิน: บันทึก QR แล้วเลือกรูปในแอปธนาคาร</p>
      <p className="text-sm text-muted-foreground">โอนเงินแล้วอัปโหลดรูปสลิปเพื่อยืนยัน</p>
      <p className="text-sm text-muted-foreground">เวลาชำระเงินที่เหลือ {String(Math.floor(secondsLeft / 60)).padStart(2, "0")}:{String(secondsLeft % 60).padStart(2, "0")}</p>
    </CardContent></Card>
    <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 ? "กำลังตรวจสอบ..." : "ตรวจสอบสลิปและเปิดแชตคำขอ"}</Button>
  </FieldGroup>{error && <Alert variant="destructive"><AlertDescription>{error}</AlertDescription></Alert>}</form></>;
}