import { getAdminDashboard } from "@/lib/api/admin";
import { EVENT_STATUS_LABEL } from "@/lib/labels";
import { cardClasses } from "@/components/ui/styles";

const ROLE_LABEL: Record<string, string> = {
  peserta: "Participant",
  organizer: "Organizer",
  petugas: "Staff",
  administrator: "Administrator",
};

export default async function AdminDashboardPage() {
  const { data: summary } = await getAdminDashboard();

  return (
    <div>
      <h2 className="text-lg font-semibold">Users by Role</h2>
      <div className="mt-3 grid grid-cols-2 gap-4 sm:grid-cols-4">
        {Object.entries(summary.users_by_role).map(([role, total]) => (
          <div key={role} className={cardClasses("p-4")}>
            <p className="text-sm text-kolabora-neutral-dark/70">{ROLE_LABEL[role] ?? role}</p>
            <p className="mt-1 text-2xl font-semibold">{total}</p>
          </div>
        ))}
      </div>

      <h2 className="mt-8 text-lg font-semibold">Events by Status</h2>
      <div className="mt-3 grid grid-cols-2 gap-4 sm:grid-cols-4">
        {Object.entries(summary.events_by_status).map(([status, total]) => (
          <div key={status} className={cardClasses("p-4")}>
            <p className="text-sm text-kolabora-neutral-dark/70">
              {EVENT_STATUS_LABEL[status] ?? status}
            </p>
            <p className="mt-1 text-2xl font-semibold">{total}</p>
          </div>
        ))}
      </div>
    </div>
  );
}