import { createClient } from "@/lib/supabase/server";
import { TransfersPanel } from "./transfers-panel";
import { GlassCard } from "@/components/ui/glass-card";

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

  const { data: transfers } = await supabase
    .from("transfers")
    .select(
      `*, player:players(display_name), from_team:from_team_id(name), to_team:to_team_id(name)`
    )
    .eq("competition_id", competitionId)
    .order("created_at", { ascending: false })
    .limit(20);

  const { data: teams } = await supabase
    .from("teams")
    .select("id, name")
    .eq("competition_id", competitionId);

  const { data: players } = await supabase
    .from("players")
    .select("id, display_name")
    .eq("status", "active");

  return (
    <div className="space-y-6">
      <h1 className="text-2xl font-bold">Transfers</h1>
      <TransfersPanel
        competitionId={competitionId}
        teams={teams ?? []}
        players={players ?? []}
      />
      <GlassCard title="Transfer history">
        <ul className="space-y-2 text-sm">
          {transfers?.map((t) => (
            <li key={t.id} className="rounded-lg bg-white/5 px-3 py-2">
              <span className="font-medium">
                {(t.player as { display_name: string })?.display_name}
              </span>{" "}
              {(t.from_team as { name: string })?.name} →{" "}
              {(t.to_team as { name: string })?.name}
            </li>
          ))}
        </ul>
      </GlassCard>
    </div>
  );
}