"use client";

import * as React from "react";
import { useAdminQuery } from "@/components/admin/use-query";
import type { MissionsResponse } 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, pct } from "@/components/admin/format";
import { cn } from "@/lib/utils";

export default function AdminMissionsPage() {
  const q = useAdminQuery<MissionsResponse>("/api/admin/missions");
  const d = q.data;

  const items = React.useMemo<ProgressionItem[]>(() => {
    if (!d) return [];
    const c = new Map(d.completions.map((r) => [r.mission_key, r]));
    return d.missions.map((m) => {
      const s = c.get(m.key);
      const started = num(s?.started ?? 0);
      const completed = num(s?.completed ?? 0);
      return {
        key: m.key,
        name: m.name,
        description: m.description,
        target: num(m.target),
        rewardCredits: m.rewardCredits,
        rewardXp: m.rewardXp,
        enabled: m.enabled,
        metric: m.metric,
        tag: m.period,
        stats: [
          { label: "Started", value: int(started) },
          { label: "Completed", value: int(completed) },
          { label: "Rate", value: started ? pct(completed / started, 0) : "—" },
        ],
      };
    });
  }, [d]);

  const totals = d ? { daily: d.missions.filter((m) => m.period === "daily").length, weekly: d.missions.filter((m) => m.period === "weekly").length, enabled: d.missions.filter((m) => m.enabled).length, completed: d.completions.reduce((a, r) => a + num(r.completed), 0) } : null;

  return (
    <>
      <PageHeader title="Missions" description="Daily and weekly missions. Edit inline, then save each row; toggles apply immediately. Completion counts cover periods active in the last 7 days." actions={<RefreshButton onClick={() => void q.refresh()} loading={q.refreshing} />} />
      {totals ? (
        <StatGrid cols={4} className="mb-4">
          <StatTile label="Daily missions" value={totals.daily} compact />
          <StatTile label="Weekly missions" value={totals.weekly} compact />
          <StatTile label="Enabled" value={`${totals.enabled} / ${totals.daily + totals.weekly}`} compact tone={totals.enabled === 0 ? "danger" : "neutral"} />
          <StatTile label="Completions · 7d" value={int(totals.completed)} compact tone="accent" />
        </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={8} cols={8} />
        ) : (
          <ProgressionTable items={items} endpoint="/api/admin/missions" onSaved={() => void q.refresh()} statHeaders={["Started", "Completed", "Rate"]} />
        )}
      </Panel>
    </>
  );
}