import { Link } from "@tanstack/react-router";
import { ArrowRight, Trophy } from "lucide-react";
import { Button } from "@/components/ui/button";
import { ARENAS, ARENA_META, EVENT_CATALOG, type ArenaId } from "@/lib/stadium-scoring";
import { useRoleStore } from "@/lib/role-store";
import type { AppRole } from "@/lib/identity";

export function StadiumHall() {
  const role = useRoleStore((s) => s.role);
  const as = role;
  return (
    <div className="stadium-root">
      <div className="mx-auto max-w-5xl px-4 pt-4 pb-2 text-center sm:px-6">
        <p className="text-[11px] font-medium tracking-[0.2em] text-primary uppercase">Game day · public scoreboard</p>
      </div>

      <div className="stadium-hall">
        <div className="stadium-hall-frame">
          <img src="/stadium/hall.jpg" alt="Choose your stadium — six arena portals" />
        </div>
        <div className="stadium-hall-picks">
          {ARENAS.map((id) => {
            const meta = ARENA_META[id];
            return (
              <Link
                key={id}
                to="/public/stadium/$arena"
                params={{ arena: id }}
                search={{ walk: true, as }}
                className="stadium-hall-pick"
              >
                {meta.hallLabel}
              </Link>
            );
          })}
        </div>
      </div>

      <div className="mx-auto max-w-5xl px-4 pt-4 sm:px-6">
        <p className="mx-auto max-w-2xl text-center text-sm text-sidebar-muted">
          Tap a portal. The tunnel walks you onto the field. Every sport reads the same business points — one point is
          one yard, four yards is a first down, a hundred yards is an eight-point score.
        </p>
      </div>

      <div className="mx-auto grid max-w-5xl gap-3 px-4 py-6 sm:grid-cols-2 lg:grid-cols-3 sm:px-6">
        {ARENAS.map((id) => (
          <ArenaCard key={id} id={id} as={as} />
        ))}
      </div>

      <ScoringLegend />
    </div>
  );
}

function ArenaCard({ id, as }: { id: ArenaId; as: AppRole }) {
  const meta = ARENA_META[id];
  return (
    <Link
      to="/public/stadium/$arena"
      params={{ arena: id }}
      search={{ walk: true, as }}
      className="group overflow-hidden rounded-xl border border-sidebar-border bg-sidebar-accent shadow-[var(--shadow-border)] transition-shadow hover:shadow-[var(--shadow-border-hover)]"
    >
      <div className="relative h-28 overflow-hidden">
        <img src={meta.image} alt="" className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-[1.04]" />
        <span className="absolute top-2 left-2 rounded-full bg-navy/80 px-2 py-0.5 text-[10px] font-medium tracking-[0.16em] text-primary uppercase">
          {meta.hallLabel}
        </span>
      </div>
      <div className="p-4">
        <p className="font-display text-lg text-sidebar-foreground">{meta.name}</p>
        <p className="mt-1 text-xs leading-relaxed text-sidebar-muted">{meta.blurb}</p>
        <p className="mt-3 inline-flex items-center gap-1 text-sm font-semibold text-primary">
          Walk in
          <ArrowRight className="size-3.5" />
        </p>
      </div>
    </Link>
  );
}

export function ScoringLegend() {
  const events = Object.values(EVENT_CATALOG);
  return (
    <div className="mx-auto max-w-5xl px-4 pb-10 sm:px-6">
      <div className="rounded-xl border border-sidebar-border bg-sidebar-accent/80 p-5">
        <div className="mb-3 flex items-center gap-2">
          <Trophy className="size-4 text-primary" />
          <h2 className="font-display text-xl text-sidebar-foreground">How the ball moves</h2>
        </div>
        <p className="max-w-3xl text-sm text-sidebar-muted">
          Business performance points are the engine. Football, baseball, hockey, basketball, golf, and the speedway
          are just the cameras. Filing an executive summary, a business plan, or a financial packet in the deal room
          is a play. So is a public vote.
        </p>
        <ul className="mt-4 grid gap-2 sm:grid-cols-2 lg:grid-cols-3">
          {events.map((e) => (
            <li key={e.label} className="flex items-baseline justify-between gap-3 rounded-lg bg-navy/50 px-3 py-2">
              <span className="text-sm text-sidebar-foreground">{e.label}</span>
              <span className="tabular text-xs font-semibold text-primary">{e.hint}</span>
            </li>
          ))}
        </ul>
        <div className="mt-4 flex flex-wrap gap-2">
          <Button asChild>
            <Link to="/public/stadium/$arena" params={{ arena: "football" }} search={{ walk: true }}>
              Football first
            </Link>
          </Button>
          <Button asChild variant="outline" className="border-sidebar-border bg-transparent text-sidebar-foreground hover:text-primary">
            <Link to="/public/stadium/$arena" params={{ arena: "football" }} search={{ view: "seat" }}>
              Take your seat
            </Link>
          </Button>
          <Button asChild variant="outline" className="border-sidebar-border bg-transparent text-sidebar-foreground hover:text-primary">
            <Link to="/public/stadium/$arena" params={{ arena: "speedway" }} search={{ view: "drive" }}>
              Racing tools
            </Link>
          </Button>
          <Button asChild variant="outline" className="border-sidebar-border bg-transparent text-sidebar-foreground hover:text-primary">
            <Link to="/public/teams">Back to teams</Link>
          </Button>
        </div>
      </div>
    </div>
  );
}