import Link from "next/link";
import { notFound } from "next/navigation";
import { createClient } from "@/lib/supabase/server";
import { createCompetition } from "@/actions/leagues";
import { GlassCard } from "@/components/ui/glass-card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

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

  const { data: league } = await supabase
    .from("leagues")
    .select("*")
    .eq("id", leagueId)
    .single();

  if (!league) notFound();

  const { data: competitions } = await supabase
    .from("competitions")
    .select("*")
    .eq("league_id", leagueId)
    .order("created_at", { ascending: false });

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold">{league.name}</h1>
          <p className="text-sm text-[var(--color-muted)]">{league.description}</p>
        </div>
        <Button variant="outline" asChild>
          <Link href={`/leagues/${leagueId}/rules`}>Edit rules</Link>
        </Button>
      </div>

      <GlassCard title="New competition">
        <form
          action={createCompetition.bind(null, leagueId)}
          className="flex flex-wrap items-end gap-4"
        >
          <div>
            <Label htmlFor="name">Name</Label>
            <Input id="name" name="name" required className="mt-1" placeholder="Season 2025" />
          </div>
          <div>
            <Label htmlFor="tournament_mode">Mode</Label>
            <select
              id="tournament_mode"
              name="tournament_mode"
              className="mt-1 flex h-10 rounded-lg border border-white/15 bg-white/5 px-3 text-sm"
            >
              <option value="league">League (round-robin)</option>
              <option value="cup">Cup (knockout)</option>
            </select>
          </div>
          <Button type="submit">Create competition</Button>
        </form>
      </GlassCard>

      <div className="grid gap-4 sm:grid-cols-2">
        {competitions?.map((c) => (
          <Link key={c.id} href={`/leagues/${leagueId}/competitions/${c.id}`}>
            <GlassCard className="hover:border-cyan-400/30">
              <div className="flex items-center justify-between">
                <div>
                  <h3 className="font-semibold">{c.name}</h3>
                  <p className="text-xs text-[var(--color-muted)] capitalize">
                    {c.tournament_mode} · {c.status}
                  </p>
                </div>
                <span className="rounded-full bg-white/10 px-2 py-0.5 text-xs capitalize">
                  {c.status}
                </span>
              </div>
            </GlassCard>
          </Link>
        ))}
      </div>
    </div>
  );
}