"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { processPayment, markPaid } from "./actions";
import type { POStatus } from "@prisma/client";

export function PaymentActions({ poId, poStatus }: { poId: string; poStatus: POStatus }) {
  const router = useRouter();
  const [ref, setRef] = useState("");
  const [pending, setPending] = useState(false);
  const [error, setError] = useState("");

  async function handleProcessPayment() {
    setPending(true);
    setError("");
    const result = await processPayment({ poId });
    if ("error" in result) { setError(result.error); setPending(false); }
    else { router.refresh(); }
  }

  async function handleMarkPaid(e: React.FormEvent) {
    e.preventDefault();
    if (!ref.trim()) { setError("Payment reference is required."); return; }
    setPending(true);
    setError("");
    const result = await markPaid({ poId, paymentRef: ref });
    if ("error" in result) { setError(result.error); setPending(false); }
    else { router.refresh(); }
  }

  if (poStatus === "MGR_APPROVED") {
    return (
      <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-2">
        {error && <span className="text-xs text-danger-700">{error}</span>}
        <button
          onClick={handleProcessPayment}
          disabled={pending}
          className="w-full sm:w-auto rounded-lg bg-primary-600 px-4 py-2 text-sm font-semibold text-white hover:bg-primary-700 disabled:opacity-60 transition-colors"
        >
          {pending ? "Processing…" : "Start Payment Processing"}
        </button>
      </div>
    );
  }

  if (poStatus === "SENT_FOR_PAYMENT") {
    return (
      <form onSubmit={handleMarkPaid} className="flex flex-col sm:flex-row items-stretch sm:items-center gap-2 w-full">
        <input
          type="text"
          placeholder="Payment reference / transaction ID"
          value={ref}
          onChange={(e) => setRef(e.target.value)}
          className="flex-1 rounded-lg border border-neutral-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/20"
        />
        {error && <span className="text-xs text-danger-700">{error}</span>}
        <button
          type="submit"
          disabled={pending}
          className="w-full sm:w-auto rounded-lg bg-success px-4 py-2 text-sm font-semibold text-white hover:opacity-90 disabled:opacity-60 transition-opacity"
        >
          {pending ? "Confirming…" : "Confirm Payment Sent"}
        </button>
      </form>
    );
  }

  return null;
}