"use client";

import { useMemo, useState } from "react";
import type { Match, ScreenId, Stadium, Team } from "../../types/passport";
import {
  formatMatchDate,
  getStadiumById,
  getTeamById,
} from "../../utils/passportMetrics";
import EmptyState from "../shared/EmptyState";
import ProgressBar from "../shared/ProgressBar";
import StatusPill from "../shared/StatusPill";

interface MatchJourneyScreenProps {
  matches: Match[];
  teams: Team[];
  stadiums: Stadium[];
  onToggleMatchWatched: (matchId: string) => void;
  onNavigate: (screen: ScreenId) => void;
}

export default function MatchJourneyScreen({
  matches,
  teams,
  stadiums,
  onToggleMatchWatched,
  onNavigate,
}: MatchJourneyScreenProps) {
  const [stageFilter, setStageFilter] = useState("all");
  const [statusFilter, setStatusFilter] = useState<"all" | "completed" | "live" | "upcoming">("all");

  const stageOptions = useMemo(
    () => ["all", ...Array.from(new Set(matches.map((match) => match.stage)))],
    [matches],
  );

  const filteredMatches = [...matches]
    .filter((match) => stageFilter === "all" || match.stage === stageFilter)
    .filter((match) => statusFilter === "all" || match.status === statusFilter)
    .sort((a, b) => new Date(a.dateTime).getTime() - new Date(b.dateTime).getTime());

  const watchedCount = matches.filter((match) => match.watched).length;

  return (
    <section className="screen" aria-labelledby="matches-title">
      <div className="screen-hero">
        <div className="hero-content">
          <p className="hero-kicker">Match journey</p>
          <h1 className="hero-title" id="matches-title">
            Stamp the road to the final.
          </h1>
          <p className="hero-copy">
            Match cards combine fixtures, watch-state, prediction windows, venue context, and
            collectible rewards so every fixture becomes part of the fan's passport trail.
          </p>
          <div className="hero-actions">
            <button className="button-primary" onClick={() => onNavigate("predictions")} type="button">
              Make predictions
            </button>
            <button className="button-secondary" onClick={() => onNavigate("memories")} type="button">
              Save a match memory
            </button>
          </div>
        </div>

        <aside className="hero-card">
          <p className="card-kicker">Watch stamps</p>
          <h2>{watchedCount} matches watched</h2>
          <ProgressBar label="Match watch progress" max={matches.length} value={watchedCount} />
        </aside>
      </div>

      <div className="filter-bar" aria-label="Match filters">
        <div className="segmented-control">
          {stageOptions.map((stage) => (
            <button
              aria-pressed={stageFilter === stage}
              className={`chip ${stageFilter === stage ? "is-active" : ""}`}
              key={stage}
              onClick={() => setStageFilter(stage)}
              type="button"
            >
              {stage === "all" ? "All stages" : stage}
            </button>
          ))}
        </div>

        <div className="segmented-control">
          {(["all", "live", "upcoming", "completed"] as const).map((status) => (
            <button
              aria-pressed={statusFilter === status}
              className={`chip ${statusFilter === status ? "is-active" : ""}`}
              key={status}
              onClick={() => setStatusFilter(status)}
              type="button"
            >
              {status === "all" ? "All status" : status}
            </button>
          ))}
        </div>
      </div>

      {filteredMatches.length === 0 ? (
        <EmptyState icon="⚽" title="No fixtures in this view" message="Try another stage or status filter." />
      ) : (
        <div className="journey-timeline">
          {filteredMatches.map((match) => {
            const homeTeam = getTeamById(teams, match.homeTeamId);
            const awayTeam = getTeamById(teams, match.awayTeamId);
            const stadium = getStadiumById(stadiums, match.venueId);
            const scoreLabel =
              match.homeScore !== undefined && match.awayScore !== undefined
                ? `${match.homeScore}–${match.awayScore}`
                : "vs";

            return (
              <div className="timeline-item" key={match.id}>
                <span className="timeline-node" aria-hidden="true">
                  {match.watched ? "✅" : match.status === "live" ? "🔴" : "⚽"}
                </span>
                <article className="match-card card">
                  <div className="card-topline">
                    <div>
                      <StatusPill
                        tone={
                          match.status === "completed"
                            ? "success"
                            : match.status === "live"
                              ? "danger"
                              : "info"
                        }
                      >
                        {match.status}
                      </StatusPill>
                      {match.predictionWindow ? (
                        <StatusPill tone="gold" icon="🔮">
                          Prediction open
                        </StatusPill>
                      ) : null}
                    </div>
                    <span className="card-meta">{formatMatchDate(match.dateTime, "long")}</span>
                  </div>

                  <div className="match-teams">
                    <div className="match-team">
                      <strong>
                        {homeTeam?.flagEmoji} {homeTeam?.name}
                      </strong>
                      <span className="card-meta">{homeTeam?.shortName}</span>
                    </div>
                    <span className="match-score">{scoreLabel}</span>
                    <div className="match-team">
                      <strong>
                        {awayTeam?.name} {awayTeam?.flagEmoji}
                      </strong>
                      <span className="card-meta">{awayTeam?.shortName}</span>
                    </div>
                  </div>

                  <p>
                    {stadium?.icon} {stadium?.name}, {stadium?.city}
                  </p>
                  <p>{match.story}</p>

                  <div className="goal-list">
                    {match.tags.map((tag) => (
                      <span className="chip" key={tag}>
                        #{tag}
                      </span>
                    ))}
                  </div>

                  <div className="button-row">
                    <button
                      aria-pressed={match.watched}
                      className={match.watched ? "button-ghost" : "button-primary"}
                      onClick={() => onToggleMatchWatched(match.id)}
                      type="button"
                    >
                      {match.watched ? "Stamped as watched" : "Add watch stamp"}
                    </button>
                    {match.predictionWindow ? (
                      <button
                        className="button-secondary"
                        onClick={() => onNavigate("predictions")}
                        type="button"
                      >
                        Predict this match
                      </button>
                    ) : null}
                    <button className="button-ghost" onClick={() => onNavigate("memories")} type="button">
                      Add memory
                    </button>
                  </div>
                </article>
              </div>
            );
          })}
        </div>
      )}
    </section>
  );
}