"use client";

import * as React from "react";
import { useAdminQuery } from "@/components/admin/use-query";
import type { AchievementsResponse } from "@/components/admin/types";
import { PageHeader, RefreshButton, Panel, ErrorState, TableSkeleton, StatGrid, StatTile } from "@/components/admin/primitives";
import { ProgressionTable, type ProgressionItem } from "@/components/admin/progression-table";
import { int, num, sc } from "@/components/admin/format";
import { cn } from "@/lib/utils";

export default function AdminAchievementsPage() {
  const q = useAdminQuery<AchievementsResponse>("/api/admin/achievements");
  const d = q.data;

  const items = React.useMemo<ProgressionItem[]>(() => {
    if (!d) return [];
    const u = new Map(d.unlocks.map((r) => [r.achievement_key, num(r.n)]));
    return d.achievements.map((a) => {
      const unlocks = u.get(a.key) ?? 0;
      return {
        key: a.key,
        name: a.name,
        description: a.description,
        target: num(a.target),
        rewardCredits: a.rewardCredits,
        rewardXp: a.rewardXp,
        enabled: a.enabled,
        metric: a.metric,
        tag: a.category,
        stats: [
          { label: "Unlocks", value: int(unlocks) },
          { label: "SC paid", value: sc(unlocks * a.rewardCredits) },
        ],
      };
    });
  }, [d]);

  const totals = d ? { total: d.achievements.length, enabled: d.achievements.filter((a) => a.enabled).length, unlocks: d.unlocks.reduce((a, r) => a + num(r.n), 0), paid: d.achievements.reduce((a, r) => a + r.rewardCredits * num(d.unlocks.find((x) => x.achievement_key === r.key)?.n ?? 0), 0) } : null;

  return (
    <>
      <PageHeader title="Achievements" description="Lifetime achievements. Edit inline, then save each row; toggles apply immediately." actions={<RefreshButton onClick={() => void q.refresh()} loading={q.refreshing} />} />
      {totals ? (
        <StatGrid cols={4} className="mb-4">
          <StatTile label="Achievements" value={totals.total} compact />
          <StatTile label="Enabled" value={`${totals.enabled} / ${totals.total}`} compact tone={totals.enabled === 0 ? "danger" : "neutral"} />
          <StatTile label="Total unlocks" value={int(totals.unlocks)} compact tone="accent" />
          <StatTile label="Credits paid out" value={sc(totals.paid)} compact />
        </StatGrid>
      ) : null}
      <Panel padded={false} className={cn(q.stale && "opacity-70")}>
        {q.error && !d ? (
          <div className="p-4">
            <ErrorState error={q.error} onRetry={() => void q.refresh()} />
          </div>
        ) : !d ? (
          <TableSkeleton rows={10} cols={8} />
        ) : (
          <ProgressionTable items={items} endpoint="/api/admin/achievements" onSaved={() => void q.refresh()} statHeaders={["Unlocks", "SC paid"]} />
        )}
      </Panel>
    </>
  );
}