// app/admin/premios/page.tsx
// Prize management (admin.md section 2.5). CRUD with the PUBLISH GATE surfaced:
// every prize needs a market value AND a MININTER resolution reference must be
// attached before the event can open. Operator role to edit; viewers see only.

import * as React from "react";
import { redirect } from "next/navigation";
import { requireRole, getSession, roleSatisfies, AuthError } from "@/lib/auth";
import {
  listRaffles,
  getPrizes,
  getPrizeGateStats,
} from "@/app/admin/_lib/queries";
import { getRaffleConfig } from "@/app/admin/_lib/config";
import { RaffleSwitcher } from "@/components/admin/RaffleSwitcher";
import { PrizeManager } from "@/components/admin/PrizeManager";
import { Card } from "@/components/ui";

export const dynamic = "force-dynamic";

export default async function PrizesPage({
  searchParams,
}: {
  searchParams: Promise<{ raffle?: string }>;
}) {
  try {
    await requireRole("viewer");
  } catch (err) {
    if (err instanceof AuthError) redirect("/admin/login");
    throw err;
  }
  const session = await getSession();
  const canEdit = session ? roleSatisfies(session.role, "operator") : false;

  const raffles = await listRaffles();
  if (raffles.length === 0) {
    return (
      <div>
        <h1 className="font-impact text-heading-lg font-bold text-ink-strong">
          Premios
        </h1>
        <p className="mt-4 font-body text-body-lg text-muted">
          Aún no hay sorteos creados.
        </p>
      </div>
    );
  }

  const { raffle: raffleParam } = await searchParams;
  const selected = raffles.find((r) => r.id === raffleParam) ?? raffles[0];
  const [prizes, gate, config] = await Promise.all([
    getPrizes(selected.id),
    getPrizeGateStats(selected.id),
    getRaffleConfig(selected.id),
  ]);

  const unpriced = gate.prizeCount - gate.pricedPrizeCount;

  return (
    <div className="flex flex-col gap-lg">
      <div className="flex flex-wrap items-center justify-between gap-md">
        <h1 className="font-impact text-heading-lg font-bold text-ink-strong">
          Premios
        </h1>
        <RaffleSwitcher
          raffles={raffles.map((r) => ({ id: r.id, name: r.name, status: r.status }))}
          selectedId={selected.id}
        />
      </div>

      <Card elevation="tight" className="p-lg">
        <h2 className="font-display text-heading-md font-bold text-ink-strong">
          Requisitos de habilitación (publish gate)
        </h2>
        <ul className="mt-3 flex flex-col gap-1.5 font-body text-body-md text-ink-strong">
          <li className="flex items-start gap-2">
            <span aria-hidden="true" className={unpriced === 0 && gate.prizeCount > 0 ? "text-steelblue" : "text-primary"}>
              {unpriced === 0 && gate.prizeCount > 0 ? "✓" : "✗"}
            </span>
            <span>
              {gate.prizeCount} premios, {gate.pricedPrizeCount} con valor de mercado
              {unpriced > 0 ? ` (${unpriced} sin valorar)` : ""}.
            </span>
          </li>
          <li className="flex items-start gap-2">
            <span aria-hidden="true" className={config.mininterResolutionRef ? "text-steelblue" : "text-primary"}>
              {config.mininterResolutionRef ? "✓" : "✗"}
            </span>
            <span>
              Resolución MININTER: {config.mininterResolutionRef ?? "pendiente (ver Configuración)"}.
            </span>
          </li>
        </ul>
        <p className="mt-3 font-body text-caption text-muted">
          El valor de mercado por premio alimenta las bases del sorteo y el
          Formulario 6. Un sorteo no puede abrirse hasta que todos los premios
          tengan valor y la resolución MININTER esté adjunta.
        </p>
      </Card>

      <PrizeManager
        raffleId={selected.id}
        canEdit={canEdit}
        prizes={prizes.map((p) => ({
          id: p.id,
          position: p.position,
          name: p.name,
          description: p.description,
          marketValueCents: p.marketValueCents,
          sponsorName: p.sponsorName,
          imageUrl: p.imageUrl,
          isConfirmed: p.isConfirmed,
          displayStatus: p.displayStatus,
        }))}
      />
    </div>
  );
}