import { createFileRoute } from "@tanstack/react-router";
import { useState } from "react";
import { wrestlers } from "@/lib/cwf-data";
import { PageHero } from "@/components/PageHero";

export const Route = createFileRoute("/roster")({
  head: () => ({
    meta: [
      { title: "Roster — The CWF Superstars" },
      { name: "description", content: "Meet the wrestlers of the Central Wrestling Federation. Champions, contenders, and rising stars from across East Texas." },
      { property: "og:title", content: "CWF Roster" },
      { property: "og:description", content: "The men and women who make CWF the premier wrestling promotion in East Texas." },
    ],
  }),
  component: RosterPage,
});

const filters = ["All", "Champions", "Men", "Women", "Tag Teams"] as const;
type Filter = (typeof filters)[number];

function RosterPage() {
  const [filter, setFilter] = useState<Filter>("All");
  const filtered = wrestlers.filter((w) => {
    if (filter === "All") return true;
    if (filter === "Champions") return w.isChampion;
    if (filter === "Tag Teams") return w.division === "Tag Team";
    return w.division === filter.slice(0, -1) || w.division === filter;
  });

  return (
    <>
      <PageHero kicker="The Athletes" title="THE ROSTER" subtitle="The most talented and dangerous wrestlers in East Texas. Every name on this list earned their spot." />

      <section className="py-12 bg-charcoal border-b border-border">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 flex flex-wrap gap-2">
          {filters.map((f) => (
            <button
              key={f}
              onClick={() => setFilter(f)}
              className={`px-5 py-2 font-display tracking-widest text-sm transition-colors border ${
                filter === f
                  ? "bg-primary text-primary-foreground border-primary"
                  : "bg-transparent text-foreground border-border hover:border-primary"
              }`}
            >
              {f.toUpperCase()}
            </button>
          ))}
        </div>
      </section>

      <section className="py-20">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
            {filtered.map((w) => (
              <article key={w.slug} className="group">
                <div className="relative aspect-[3/4] overflow-hidden bg-card border border-border group-hover:border-primary transition-colors">
                  <img src={w.image} alt={w.name} className="h-full w-full object-cover grayscale-[30%] group-hover:grayscale-0 group-hover:scale-110 transition-all duration-700" loading="lazy" />
                  <div className="absolute inset-0 bg-gradient-to-t from-background via-background/50 to-transparent" />
                  {w.isChampion && (
                    <div className="absolute top-3 right-3 bg-primary text-primary-foreground px-2 py-1 text-xs font-display tracking-widest">
                      CHAMPION
                    </div>
                  )}
                  <div className="absolute bottom-0 inset-x-0 p-5">
                    <p className="text-primary font-display text-xs tracking-widest">{w.nickname}</p>
                    <h3 className="font-display text-3xl">{w.name}</h3>
                  </div>
                </div>
                <div className="mt-4 grid grid-cols-3 gap-2 text-xs">
                  <Stat label="Height" value={w.height} />
                  <Stat label="Weight" value={w.weight} />
                  <Stat label="From" value={w.from} />
                </div>
                <p className="mt-3 text-sm text-muted-foreground">{w.bio}</p>
                <p className="mt-2 text-xs text-primary font-display tracking-widest">FINISHER: {w.finisher.toUpperCase()}</p>
              </article>
            ))}
          </div>
          {filtered.length === 0 && (
            <p className="text-center text-muted-foreground font-display text-2xl py-20">No wrestlers in this division yet. Check back soon.</p>
          )}
        </div>
      </section>
    </>
  );
}

function Stat({ label, value }: { label: string; value: string }) {
  return (
    <div className="bg-card border border-border px-3 py-2">
      <p className="text-[10px] uppercase tracking-widest text-muted-foreground">{label}</p>
      <p className="font-display text-sm">{value}</p>
    </div>
  );
}