import { Link } from "@tanstack/react-router";
import { Flag, Trophy } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { ADVANCE_STEPS, EVENT_CATALOG, SWEET16 } from "@/lib/stadium-scoring";

export function GameRulesCard({ compact = false }: { compact?: boolean }) {
  const significant = Object.values(EVENT_CATALOG).filter((e) => e.significant);
  return (
    <Card className="game-rules">
      <CardContent className="pt-5">
        <p className="text-[11px] font-medium tracking-[0.18em] text-primary uppercase">
          {SWEET16.round} · how you advance
        </p>
        <h2 className="mt-1 font-display text-2xl">
          {SWEET16.home}{" "}
          <span className="text-muted-foreground">vs</span> {SWEET16.away}
        </h2>
        <p className="mt-2 max-w-3xl text-sm text-muted-foreground">
          Thermal Suture Cutter vs Rib Splint Return to Play. Same engine in every stadium: 1 point = 1 yard, 4 yards =
          first down, 100 yards = an 8-point score. Public interest moves the ball even when the packet stays off the
          public site.
        </p>

        <ol className="mt-4 grid gap-3 sm:grid-cols-2">
          {ADVANCE_STEPS.map((step, i) => (
            <li key={step.title} className="rounded-lg border border-border bg-muted/40 px-3 py-3">
              <p className="text-[11px] font-medium tracking-[0.14em] text-muted-foreground uppercase">
                Step {i + 1}
                {step.yards ? ` · ${step.yards}` : ""}
              </p>
              <p className="mt-1 text-sm font-semibold">{step.title}</p>
              <p className="mt-1 text-sm leading-relaxed text-muted-foreground">{step.body}</p>
            </li>
          ))}
        </ol>

        {!compact ? (
          <div className="mt-4">
            <p className="mb-2 text-[11px] font-medium tracking-[0.16em] text-muted-foreground uppercase">
              Significant scores
            </p>
            <ul className="grid gap-2 sm:grid-cols-3">
              {significant.map((e) => (
                <li key={e.label} className="flex items-start gap-2 rounded-md bg-primary/8 px-3 py-2">
                  <Trophy className="mt-0.5 size-3.5 shrink-0 text-primary" />
                  <span>
                    <span className="block text-sm font-medium">{e.label}</span>
                    <span className="text-xs text-muted-foreground">{e.hint}</span>
                  </span>
                </li>
              ))}
            </ul>
          </div>
        ) : null}

        <div className="mt-4 flex flex-wrap gap-2">
          <Button asChild size="sm">
            <Link to="/public/stadium/$arena" params={{ arena: "football" }} search={{ walk: true }}>
              Watch the Sweet 16
            </Link>
          </Button>
          <Button asChild size="sm" variant="outline">
            <Link to="/capstone/$slug" params={{ slug: SWEET16.homeSlug }}>
              <Flag className="size-3.5" />
              Thermal Suture packet
            </Link>
          </Button>
          <Button asChild size="sm" variant="outline">
            <Link to="/capstone/$slug" params={{ slug: SWEET16.awaySlug }}>
              Rib Splint packet
            </Link>
          </Button>
        </div>
      </CardContent>
    </Card>
  );
}