import Link from "next/link";
import { createClient } from "@/lib/supabase/server";
import { GlassCard } from "@/components/ui/glass-card";
import { TeamBadge } from "@/components/teams/TeamBadge";

export default async function AdminResultsPage({
  params,
}: {
  params: Promise<{ leagueId: string; competitionId: string }>;
}) {
  const { leagueId, competitionId } = await params;
  const supabase = await createClient();

  const { data: pending } = await supabase
    .from("matches")
    .select(
      `*, home:home_team_id(name, logo_path), away:away_team_id(name, logo_path)`
    )
    .eq("competition_id", competitionId)
    .in("result_status", ["pending_approval", "disputed"]);

  return (
    <div className="space-y-6">
      <h1 className="text-2xl font-bold">Results admin</h1>
      <p className="text-sm text-[var(--color-muted)]">
        Approve or resolve match results as league manager
      </p>

      <GlassCard title="Pending approval & disputes">
        <ul className="space-y-3">
          {pending?.map((m) => {
            const home = m.home as { name: string; logo_path: string | null };
            const away = m.away as { name: string; logo_path: string | null };
            return (
              <li key={m.id}>
                <Link
                  href={`/leagues/${leagueId}/competitions/${competitionId}/matches/${m.id}`}
                  className="flex items-center justify-between rounded-lg border border-white/10 p-4 hover:bg-white/5"
                >
                  <div className="flex items-center gap-3">
                    <TeamBadge name={home?.name} logoPath={home?.logo_path} size="sm" />
                    <span className="text-[var(--color-muted)]">vs</span>
                    <TeamBadge name={away?.name} logoPath={away?.logo_path} size="sm" />
                  </div>
                  <span
                    className={
                      m.result_status === "disputed"
                        ? "text-red-400"
                        : "text-amber-400"
                    }
                  >
                    {m.result_status}
                  </span>
                </Link>
              </li>
            );
          })}
          {(!pending || pending.length === 0) && (
            <p className="text-sm text-[var(--color-muted)]">No pending results</p>
          )}
        </ul>
      </GlassCard>
    </div>
  );
}