"use client";

import { useMemo, useState } from "react";
import type { Match, Stadium } from "../../types/passport";
import EmptyState from "../shared/EmptyState";
import ProgressBar from "../shared/ProgressBar";
import StatusPill from "../shared/StatusPill";

interface StadiumCollectionScreenProps {
  stadiums: Stadium[];
  matches: Match[];
  onToggleStadium: (stadiumId: string) => void;
}

export default function StadiumCollectionScreen({
  stadiums,
  matches,
  onToggleStadium,
}: StadiumCollectionScreenProps) {
  const [countryFilter, setCountryFilter] = useState("all");
  const countries = useMemo(
    () => ["all", ...Array.from(new Set(stadiums.map((stadium) => stadium.country)))],
    [stadiums],
  );
  const filteredStadiums =
    countryFilter === "all"
      ? stadiums
      : stadiums.filter((stadium) => stadium.country === countryFilter);

  const collectedCount = stadiums.filter((stadium) => stadium.collected).length;

  return (
    <section className="screen" aria-labelledby="stadiums-title">
      <div className="screen-hero">
        <div className="hero-content">
          <p className="hero-kicker">Stadium collection</p>
          <h1 className="hero-title" id="stadiums-title">
            Unlock the host-city map.
          </h1>
          <p className="hero-copy">
            Stadium pages connect fixtures to travel dreams, venue facts, city memories, and future
            football rewards after the World Cup.
          </p>
        </div>

        <aside className="hero-card">
          <p className="card-kicker">Venue passport</p>
          <h2>{collectedCount} host pages stamped</h2>
          <ProgressBar label="Stadium collection" max={stadiums.length} value={collectedCount} />
        </aside>
      </div>

      <div className="filter-bar" aria-label="Stadium filters">
        {countries.map((country) => (
          <button
            aria-pressed={countryFilter === country}
            className={`chip ${countryFilter === country ? "is-active" : ""}`}
            key={country}
            onClick={() => setCountryFilter(country)}
            type="button"
          >
            {country === "all" ? "All host countries" : country}
          </button>
        ))}
      </div>

      {filteredStadiums.length === 0 ? (
        <EmptyState icon="🏟️" title="No stadiums found" message="Try a different host-country filter." />
      ) : (
        <div className="collection-grid">
          {filteredStadiums.map((stadium) => {
            const hostedMatches = matches.filter((match) => match.venueId === stadium.id).length;

            return (
              <article
                className={`stadium-card ${stadium.collected ? "is-collected" : ""}`}
                key={stadium.id}
              >
                <div className="card-topline">
                  <span className="stadium-icon" aria-hidden="true">
                    {stadium.icon}
                  </span>
                  <StatusPill tone={stadium.collected ? "success" : "neutral"}>
                    {stadium.collected ? "Collected" : "Locked"}
                  </StatusPill>
                </div>

                <div>
                  <h2>{stadium.name}</h2>
                  <p className="card-meta">
                    {stadium.city}, {stadium.country}
                  </p>
                </div>

                <p>{stadium.story}</p>

                <div className="stadium-facts">
                  <StatusPill tone="info">{stadium.capacity.toLocaleString("en-GB")} capacity</StatusPill>
                  <StatusPill tone="gold">{hostedMatches || stadium.matchesHosted} matches</StatusPill>
                </div>

                <ul className="stat-list">
                  {stadium.features.map((feature) => (
                    <li key={feature}>
                      Feature <strong>{feature}</strong>
                    </li>
                  ))}
                </ul>

                <ProgressBar
                  hideValue
                  label="Venue page completion"
                  max={100}
                  value={stadium.collected ? 100 : stadium.progress}
                />

                <button
                  aria-pressed={stadium.collected}
                  className={stadium.collected ? "button-ghost" : "button-primary"}
                  onClick={() => onToggleStadium(stadium.id)}
                  type="button"
                >
                  {stadium.collected ? "Remove venue stamp" : "Collect stadium"}
                </button>
              </article>
            );
          })}
        </div>
      )}
    </section>
  );
}