import Link from "next/link";
import { StatusCard } from "@/components/admin/dashboard";
import { prisma } from "@/lib/prisma";

export const dynamic = "force-dynamic";

type Campaign = {
  id: number;
  name: string;
  image: string;
  startTimestamp: number;
  totalDays: number;
  lockExpired: string;
  enabled: string;
};

function fmtDate(ts: number): string {
  if (!ts) return "—";
  return new Date(ts * 1000).toISOString().slice(0, 10);
}

export default async function AdminCalendar() {
  let campaigns: Campaign[] = [];
  try {
    campaigns = await prisma.calendarCampaigns.findMany({
      select: {
        id: true,
        name: true,
        image: true,
        startTimestamp: true,
        totalDays: true,
        lockExpired: true,
        enabled: true,
      },
      orderBy: { id: "desc" },
    });
  } catch {
    campaigns = [];
  }

  // Tally reward counts per campaign in JS (avoid prisma.groupBy).
  const rewardCounts = new Map<number, number>();
  let totalRewards = 0;
  try {
    const rewards = await prisma.calendarRewards.findMany({
      select: { campaignId: true },
    });
    totalRewards = rewards.length;
    for (const r of rewards) {
      rewardCounts.set(r.campaignId, (rewardCounts.get(r.campaignId) ?? 0) + 1);
    }
  } catch {
    // leave map empty on failure
  }

  const enabledCount = campaigns.filter((c) => c.enabled === "1").length;

  return (
    <main>
      <h1>Calendar campaigns</h1>
      <p className="muted" style={{ marginTop: "-0.4rem" }}>
        Read-only · {campaigns.length} campaign{campaigns.length === 1 ? "" : "s"}.
      </p>

      <div className="admin-stats">
        <StatusCard label="Campaigns" value={campaigns.length} icon="📅" />
        <StatusCard
          label="Enabled"
          value={enabledCount}
          state={enabledCount > 0 ? "ok" : "neutral"}
          icon="✅"
        />
        <StatusCard label="Total rewards" value={totalRewards} icon="🎁" />
      </div>

      {campaigns.length === 0 ? (
        <p className="muted">No calendar campaigns found.</p>
      ) : (
        <div className="grid cols-3">
          {campaigns.map((c) => {
            const enabled = c.enabled === "1";
            const count = rewardCounts.get(c.id) ?? 0;
            return (
              <Link
                key={c.id}
                href={`/admin/calendar/${c.id}`}
                className="card hover article"
                style={{ color: "inherit" }}
              >
                {c.image ? (
                  // eslint-disable-next-line @next/next/no-img-element
                  <img className="article-img" src={c.image} alt={c.name} />
                ) : (
                  <div className="article-img" />
                )}
                <div className="body">
                  <div
                    style={{
                      display: "flex",
                      gap: "0.5rem",
                      alignItems: "center",
                      justifyContent: "space-between",
                      margin: "0 0 0.35rem",
                    }}
                  >
                    <h3 style={{ margin: 0 }}>{c.name || `Campaign #${c.id}`}</h3>
                    <span className={`admin-badge ${enabled ? "ok" : "danger"}`}>
                      {enabled ? "enabled" : "disabled"}
                    </span>
                  </div>
                  <p className="muted" style={{ margin: 0 }}>
                    #{c.id} · {c.totalDays} day{c.totalDays === 1 ? "" : "s"} · {count} reward
                    {count === 1 ? "" : "s"}
                  </p>
                  <p className="muted" style={{ margin: "0.35rem 0 0" }}>
                    Starts {fmtDate(c.startTimestamp)}
                    {c.lockExpired === "1" ? " · Locks expired" : ""}
                  </p>
                </div>
              </Link>
            );
          })}
        </div>
      )}
    </main>
  );
}