import { PageHeader } from "@/components/shared/PageHeader";
import { StatCard } from "@/components/shared/StatCard";
import { RevenueTrendChart } from "@/components/features/admin/RevenueTrendChart";
import {
  getRevenueTrend,
  getRevenueSummary,
} from "@/lib/queries/admin-queries";

export default async function AdminRevenuePage() {
  const [trend, summary] = await Promise.all([
    getRevenueTrend(12),
    getRevenueSummary(),
  ]);

  return (
    <>
      <PageHeader title="Revenue" subtitle="Platform billing and invoices" />
      <div className="flex-1 overflow-y-auto p-4 sm:p-[26px]">
        <div className="mb-5 grid grid-cols-1 gap-3 sm:grid-cols-3 sm:gap-4">
          <StatCard
            label="Total collected"
            value={`$${((summary.paidTotalCents ?? 0) / 100).toLocaleString()}`}
          />
          <StatCard
            label="Open invoices"
            value={`$${((summary.openTotalCents ?? 0) / 100).toLocaleString()}`}
          />
          <StatCard
            label="Failed payments"
            value={String(summary.failedCount)}
            deltaDirection={summary.failedCount > 0 ? "down" : "neutral"}
          />
        </div>

        <div className="mb-6 rounded-lg border border-border bg-card p-4 shadow sm:p-5">
          <h4 className="mb-3 text-sm font-bold text-navy">Revenue trend</h4>
          <RevenueTrendChart data={trend} />
        </div>

        <div className="rounded-lg border border-border bg-card shadow">
          <div className="border-b border-border px-4 py-3 sm:px-5">
            <h4 className="text-sm font-bold text-navy">Recent invoices</h4>
          </div>
          <div className="overflow-x-auto">
            <table className="w-full min-w-[520px] text-left text-sm">
              <thead>
                <tr className="border-b border-border text-xs font-semibold text-muted">
                  <th className="px-4 py-2.5">Client</th>
                  <th className="px-4 py-2.5">Amount</th>
                  <th className="px-4 py-2.5">Status</th>
                  <th className="px-4 py-2.5">Date</th>
                </tr>
              </thead>
              <tbody>
                {summary.recentInvoices.length === 0 ? (
                  <tr>
                    <td colSpan={4} className="px-4 py-10 text-center text-muted">
                      No invoices recorded yet.
                    </td>
                  </tr>
                ) : (
                  summary.recentInvoices.map((inv) => (
                    <tr key={inv.id} className="border-b border-border/60">
                      <td className="px-4 py-2.5">{inv.workspaceName}</td>
                      <td className="px-4 py-2.5 font-mono text-xs">
                        ${(inv.amountCents / 100).toFixed(2)}
                      </td>
                      <td className="px-4 py-2.5 capitalize">{inv.status}</td>
                      <td className="px-4 py-2.5 text-xs text-muted">
                        {inv.issuedAt.toLocaleDateString()}
                      </td>
                    </tr>
                  ))
                )}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </>
  );
}