"use client";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { useAdminDashboard } from "@/lib/queries/use-admin";

function formatDollars(cents: number): string {
  return `$${(cents / 100).toLocaleString(undefined, { maximumFractionDigits: 0 })}`;
}

export default function AdminDashboard() {
  const { data, isLoading, isError } = useAdminDashboard();
  const metrics = data?.data;

  const tiles = [
    { label: "Total Stores", value: metrics ? metrics.total_stores.toLocaleString() : "—" },
    { label: "Verified Stores", value: metrics ? metrics.verified_stores.toLocaleString() : "—" },
    { label: "Active Items", value: metrics ? metrics.active_items.toLocaleString() : "—" },
    { label: "Total Sales", value: metrics ? formatDollars(metrics.total_sales_cents) : "—" },
    { label: "Active Orders", value: metrics ? metrics.active_orders.toLocaleString() : "—" },
    { label: "Open Disputes", value: metrics ? metrics.open_disputes.toLocaleString() : "—" },
    { label: "Overdue Disputes", value: metrics ? metrics.overdue_disputes.toLocaleString() : "—" },
  ];

  return (
    <div>
      <h1 className="text-2xl font-bold text-slate-900">Platform Overview</h1>
      <p className="mt-1 text-sm text-slate-500">Marketplace-wide metrics and management.</p>

      {isError && (
        <p className="mt-4 rounded bg-red-50 p-3 text-sm text-red-700">
          Couldn&apos;t load platform metrics. You may need admin access.
        </p>
      )}

      <div className="mt-6 grid grid-cols-2 gap-4 md:grid-cols-5">
        {tiles.map((tile) => (
          <Card key={tile.label}>
            <CardHeader className="pb-2">
              <CardTitle className="text-sm font-medium text-slate-500">
                {tile.label}
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold text-slate-900">
                {isLoading ? <span className="inline-block h-6 w-16 animate-pulse rounded bg-slate-200" /> : tile.value}
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  );
}