import { prisma } from "@/lib/prisma";
import {
  createBillingIssueAction,
  resolveBillingAction,
} from "@/server/actions/admin";

export default async function AdminBillingPage() {
  const rows = await prisma.billingIssue.findMany({ orderBy: { id: "desc" } });
  return (
    <div>
      <h1 className="text-2xl font-semibold">Billing issues</h1>
      <form
        action={createBillingIssueAction}
        className="card mt-4 grid gap-3 sm:grid-cols-3"
      >
        <input className="input" name="invoice" placeholder="INV-..." required />
        <input className="input" name="amount" placeholder="$120.00" />
        <input className="input" name="issue" placeholder="Descripcion" required />
        <button className="btn-primary sm:col-span-3" type="submit">
          Crear issue
        </button>
      </form>
      <div className="mt-4 space-y-2">
        {rows.map((b) => (
          <div
            key={b.id}
            className="card flex flex-wrap items-center justify-between gap-3"
          >
            <div>
              <p className="font-medium">
                {b.invoice} · {b.amount}
              </p>
              <p className="text-sm text-white/50">
                {b.status} · {b.issue}
              </p>
            </div>
            {b.status !== "closed" && (
              <form action={resolveBillingAction}>
                <input type="hidden" name="id" value={b.id} />
                <button className="btn-ghost" type="submit">
                  Resolver
                </button>
              </form>
            )}
          </div>
        ))}
      </div>
    </div>
  );
}