import type {
  Achievement,
  Challenge,
  FanProfile,
  Match,
  Memory,
  PassportStats,
  ScreenId,
  Stadium,
  Sticker,
  Team,
} from "../../types/passport";
import {
  formatCompactNumber,
  formatMatchDate,
  getStadiumById,
  getTeamById,
} from "../../utils/passportMetrics";
import MetricCard from "../shared/MetricCard";
import ProgressBar from "../shared/ProgressBar";
import StatusPill from "../shared/StatusPill";

interface DashboardScreenProps {
  profile: FanProfile;
  stats: PassportStats;
  teams: Team[];
  stadiums: Stadium[];
  matches: Match[];
  stickers: Sticker[];
  achievements: Achievement[];
  memories: Memory[];
  challenges: Challenge[];
  onNavigate: (screen: ScreenId) => void;
}

export default function DashboardScreen({
  profile,
  stats,
  teams,
  stadiums,
  matches,
  stickers,
  achievements,
  memories,
  challenges,
  onNavigate,
}: DashboardScreenProps) {
  const favoriteTeam = getTeamById(teams, profile.favoriteTeamId);
  const nextMatches = matches.filter((match) => match.status !== "completed").slice(0, 3);
  const featuredChallenges = challenges.filter((challenge) => challenge.featured).slice(0, 3);
  const recentMemories = memories.slice(0, 3);
  const latestStickers = stickers.filter((sticker) => sticker.obtained).slice(0, 4);
  const unlockedAchievements = achievements.filter((achievement) => achievement.unlocked).slice(0, 3);

  return (
    <section className="screen" aria-labelledby="dashboard-title">
      <div className="screen-hero">
        <div className="hero-content">
          <p className="hero-kicker">Today in your passport</p>
          <h1 className="hero-title" id="dashboard-title">
            Welcome back, {profile.displayName}.
          </h1>
          <p className="hero-copy">
            Your {favoriteTeam?.name ?? "favourite team"} journey is active, the daily trivia streak
            is alive, and new collection stamps are waiting.
          </p>
          <div className="hero-actions">
            <button className="button-primary" onClick={() => onNavigate("trivia")} type="button">
              Answer daily trivia
            </button>
            <button className="button-secondary" onClick={() => onNavigate("stickers")} type="button">
              Open sticker pack
            </button>
          </div>
        </div>

        <aside className="hero-card">
          <p className="card-kicker">Passport completion</p>
          <h2>{stats.completionPercent}% complete</h2>
          <ProgressBar
            hideValue
            label="Overall prototype completion"
            max={100}
            tone="success"
            value={stats.completionPercent}
          />
          <p>
            {formatCompactNumber(stats.totalScore)} points · {stats.currentStreak}-day streak ·{" "}
            {stats.unlockedAchievements} badges unlocked
          </p>
        </aside>
      </div>

      <div className="metric-grid" aria-label="Passport summary metrics">
        <MetricCard
          helper={`${stats.collectedTeams} of ${stats.totalTeams}`}
          icon="🏳️"
          label="Teams collected"
          value={`${stats.collectedTeams}/${stats.totalTeams}`}
        />
        <MetricCard
          helper={`${stats.watchedMatches} watch stamps`}
          icon="⚽"
          label="Match journey"
          value={`${stats.watchedMatches}/${stats.totalMatches}`}
        />
        <MetricCard
          helper={`${stats.collectedStadiums} host pages`}
          icon="🏟️"
          label="Stadiums"
          value={`${stats.collectedStadiums}/${stats.totalStadiums}`}
        />
        <MetricCard
          helper={`${stats.obtainedStickers} stickers found`}
          icon="🃏"
          label="Sticker album"
          value={`${stats.obtainedStickers}/${stats.totalStickers}`}
        />
      </div>

      <div className="dashboard-grid">
        <div>
          <article className="card">
            <div className="card-title-row">
              <div>
                <p className="card-kicker">Daily missions</p>
                <h2>Challenges that bring fans back</h2>
              </div>
              <StatusPill tone="gold" icon="🔥">
                {stats.currentStreak}-day streak
              </StatusPill>
            </div>

            <div className="challenge-grid">
              {featuredChallenges.map((challenge) => (
                <button
                  className="feature-card"
                  key={challenge.id}
                  onClick={() => onNavigate(challenge.screen)}
                  type="button"
                >
                  <div className="card-topline">
                    <span className="big-emoji" aria-hidden="true">
                      {challenge.icon}
                    </span>
                    <StatusPill tone="info">{challenge.reward}</StatusPill>
                  </div>
                  <h3>{challenge.title}</h3>
                  <p>{challenge.description}</p>
                  <ProgressBar label="Challenge progress" max={challenge.total} value={challenge.progress} />
                </button>
              ))}
            </div>
          </article>

          <article className="card">
            <div className="card-title-row">
              <div>
                <p className="card-kicker">Match journey</p>
                <h2>Next passport stamps</h2>
              </div>
              <button className="button-ghost" onClick={() => onNavigate("matches")} type="button">
                View all
              </button>
            </div>

            <div className="journey-timeline">
              {nextMatches.map((match) => {
                const homeTeam = getTeamById(teams, match.homeTeamId);
                const awayTeam = getTeamById(teams, match.awayTeamId);
                const stadium = getStadiumById(stadiums, match.venueId);

                return (
                  <div className="timeline-item" key={match.id}>
                    <span className="timeline-node" aria-hidden="true">
                      {match.status === "live" ? "🔴" : "⚽"}
                    </span>
                    <article className="match-card card compact">
                      <div className="card-topline">
                        <StatusPill tone={match.status === "live" ? "danger" : "info"}>
                          {match.status}
                        </StatusPill>
                        <span className="card-meta">{formatMatchDate(match.dateTime, "long")}</span>
                      </div>
                      <div className="match-teams">
                        <strong>
                          {homeTeam?.flagEmoji} {homeTeam?.shortName}
                        </strong>
                        <span className="match-score">vs</span>
                        <strong>
                          {awayTeam?.shortName} {awayTeam?.flagEmoji}
                        </strong>
                      </div>
                      <p>{stadium?.name}</p>
                    </article>
                  </div>
                );
              })}
            </div>
          </article>
        </div>

        <aside>
          <article className="card">
            <p className="card-kicker">Latest stickers</p>
            <h2>Album highlights</h2>
            <div className="pack-reveal">
              {latestStickers.map((sticker) => (
                <div className="pack-reveal-card" key={sticker.id}>
                  <div aria-hidden="true">{sticker.imageEmoji}</div>
                  <strong>{sticker.title}</strong>
                </div>
              ))}
            </div>
            <button className="button-secondary" onClick={() => onNavigate("stickers")} type="button">
              Continue album
            </button>
          </article>

          <article className="card">
            <p className="card-kicker">Unlocked badges</p>
            <h2>Achievement shelf</h2>
            <ul className="inline-list">
              {unlockedAchievements.map((achievement) => (
                <li key={achievement.id}>
                  <StatusPill tone="success" icon={achievement.icon}>
                    {achievement.title}
                  </StatusPill>
                </li>
              ))}
            </ul>
            <button className="button-ghost" onClick={() => onNavigate("achievements")} type="button">
              Claim rewards
            </button>
          </article>

          <article className="card">
            <p className="card-kicker">Memory timeline</p>
            <h2>Recent moments</h2>
            {recentMemories.map((memory) => (
              <article className="memory-card compact" key={memory.id}>
                <span className="memory-icon" aria-hidden="true">
                  {memory.icon}
                </span>
                <div>
                  <strong>{memory.title}</strong>
                  <p className="card-meta">{memory.mood}</p>
                </div>
              </article>
            ))}
            <button className="button-ghost" onClick={() => onNavigate("memories")} type="button">
              Add memory
            </button>
          </article>
        </aside>
      </div>
    </section>
  );
}