"use client";

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

interface TeamCollectionScreenProps {
  teams: Team[];
  matches: Match[];
  onToggleTeam: (teamId: string) => void;
}

export default function TeamCollectionScreen({
  teams,
  matches,
  onToggleTeam,
}: TeamCollectionScreenProps) {
  const [groupFilter, setGroupFilter] = useState("all");
  const [stateFilter, setStateFilter] = useState<"all" | "collected" | "missing">("all");
  const [query, setQuery] = useState("");

  const groups = useMemo(() => ["all", ...Array.from(new Set(teams.map((team) => team.group)))], [teams]);

  const filteredTeams = teams.filter((team) => {
    const matchesGroup = groupFilter === "all" || team.group === groupFilter;
    const matchesState =
      stateFilter === "all" ||
      (stateFilter === "collected" && team.collected) ||
      (stateFilter === "missing" && !team.collected);
    const matchesQuery =
      query.trim().length === 0 ||
      team.name.toLowerCase().includes(query.trim().toLowerCase()) ||
      team.shortName.toLowerCase().includes(query.trim().toLowerCase());

    return matchesGroup && matchesState && matchesQuery;
  });

  return (
    <section className="screen" aria-labelledby="teams-title">
      <div className="screen-hero">
        <div className="hero-content">
          <p className="hero-kicker">Team collection</p>
          <h1 className="hero-title" id="teams-title">
            Complete every group.
          </h1>
          <p className="hero-copy">
            Team pages are the backbone of the passport: every nation can hold stamps, stickers,
            trivia, predictions, watch progress, and post-tournament loyalty loops.
          </p>
        </div>
        <aside className="hero-card">
          <p className="card-kicker">Collection state</p>
          <h2>{teams.filter((team) => team.collected).length} teams collected</h2>
          <ProgressBar label="Teams collected" max={teams.length} value={teams.filter((team) => team.collected).length} />
        </aside>
      </div>

      <div className="filter-bar" aria-label="Team filters">
        <input
          aria-label="Search teams"
          className="search-input"
          onChange={(event) => setQuery(event.target.value)}
          placeholder="Search team or code"
          value={query}
        />

        <div className="segmented-control">
          {groups.map((group) => (
            <button
              aria-pressed={groupFilter === group}
              className={`chip ${groupFilter === group ? "is-active" : ""}`}
              key={group}
              onClick={() => setGroupFilter(group)}
              type="button"
            >
              {group === "all" ? "All groups" : group}
            </button>
          ))}
        </div>

        <div className="segmented-control">
          {(["all", "collected", "missing"] as const).map((filter) => (
            <button
              aria-pressed={stateFilter === filter}
              className={`chip ${stateFilter === filter ? "is-active" : ""}`}
              key={filter}
              onClick={() => setStateFilter(filter)}
              type="button"
            >
              {filter === "all" ? "All" : filter === "collected" ? "Collected" : "Missing"}
            </button>
          ))}
        </div>
      </div>

      {filteredTeams.length === 0 ? (
        <EmptyState icon="🔎" title="No teams found" message="Try another group, status, or search term." />
      ) : (
        <div className="collection-grid">
          {filteredTeams.map((team) => {
            const watchedMatches = countWatchedMatchesForTeam(matches, team.id);

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

                <h2>{team.name}</h2>
                <p className="card-meta">
                  {team.shortName} · {team.confederation} · {team.group}
                </p>

                <div className="color-stripe" aria-hidden="true">
                  <span style={{ background: team.colors.primary }} />
                  <span style={{ background: team.colors.secondary }} />
                </div>

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

                <ul className="stat-list">
                  <li>
                    Star player <strong>{team.starPlayer}</strong>
                  </li>
                  <li>
                    FIFA rank <strong>#{team.fifaRank}</strong>
                  </li>
                  <li>
                    Watch stamps <strong>{watchedMatches}/{team.totalMatches}</strong>
                  </li>
                  <li>
                    Stickers <strong>{team.stickerCount}/{team.totalStickers}</strong>
                  </li>
                </ul>

                <ProgressBar hideValue label="Page completion" max={100} value={team.collected ? 100 : team.progress} />

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