"use client";

import { useMemo, useState } from "react";
import type { FanProfile, LeaderboardEntry, PassportStats } from "../../types/passport";
import { formatCompactNumber } from "../../utils/passportMetrics";
import MetricCard from "../shared/MetricCard";
import StatusPill from "../shared/StatusPill";

interface LeaderboardScreenProps {
  leaderboard: LeaderboardEntry[];
  profile: FanProfile;
  stats: PassportStats;
}

type LeaderboardScope = "global" | "country" | "friends";

export default function LeaderboardScreen({
  leaderboard,
  profile,
  stats,
}: LeaderboardScreenProps) {
  const [scope, setScope] = useState<LeaderboardScope>("global");

  const rankedEntries = useMemo(() => {
    const hydrated = leaderboard.map((entry) =>
      entry.isCurrentUser
        ? {
            ...entry,
            displayName: profile.displayName,
            country: profile.country,
            avatarEmoji: profile.avatarEmoji,
            points: stats.totalScore,
            badges: stats.unlockedAchievements,
            streakDays: stats.currentStreak,
          }
        : entry,
    );

    const scoped =
      scope === "country"
        ? hydrated.filter((entry) => entry.country === profile.country || entry.isCurrentUser)
        : scope === "friends"
          ? hydrated.filter((entry) => entry.isCurrentUser || entry.rank <= 6)
          : hydrated;

    return [...scoped]
      .sort((a, b) => b.points - a.points)
      .map((entry, index) => ({ ...entry, rank: index + 1 }));
  }, [leaderboard, profile.avatarEmoji, profile.country, profile.displayName, scope, stats]);

  const currentUser = rankedEntries.find((entry) => entry.isCurrentUser);

  return (
    <section className="screen" aria-labelledby="leaderboard-title">
      <div className="screen-hero">
        <div className="hero-content">
          <p className="hero-kicker">Global leaderboard</p>
          <h1 className="hero-title" id="leaderboard-title">
            Compete with fans worldwide.
          </h1>
          <p className="hero-copy">
            Leaderboards make collections social: global ranking, country ranking, friend slices,
            streak bragging rights, and sponsor-ready seasonal competitions.
          </p>
        </div>

        <aside className="hero-card">
          <p className="card-kicker">Your rank</p>
          <div className="metric-grid">
            <MetricCard icon="🌍" label="Scope" value={scope} />
            <MetricCard icon="🏁" label="Rank" value={currentUser ? `#${currentUser.rank}` : "—"} />
            <MetricCard icon="⭐" label="Score" value={formatCompactNumber(stats.totalScore)} />
            <MetricCard icon="🏅" label="Badges" value={stats.unlockedAchievements} />
          </div>
        </aside>
      </div>

      <div className="filter-bar" aria-label="Leaderboard scope">
        {(["global", "country", "friends"] as const).map((nextScope) => (
          <button
            aria-pressed={scope === nextScope}
            className={`chip ${scope === nextScope ? "is-active" : ""}`}
            key={nextScope}
            onClick={() => setScope(nextScope)}
            type="button"
          >
            {nextScope === "global"
              ? "Global"
              : nextScope === "country"
                ? `${profile.country} fans`
                : "Friends"}
          </button>
        ))}
      </div>

      <article className="leaderboard-card">
        <div className="card-title-row">
          <div>
            <p className="card-kicker">Live mock ranking</p>
            <h2>{scope === "global" ? "Global top fans" : scope === "country" ? "Country table" : "Friend race"}</h2>
          </div>
          <StatusPill tone="success" icon="🔄">
            Updates with your actions
          </StatusPill>
        </div>

        <div className="leaderboard-table">
          {rankedEntries.map((entry) => {
            const movement =
              entry.movement === 0
                ? "—"
                : entry.movement > 0
                  ? `↑ ${entry.movement}`
                  : `↓ ${Math.abs(entry.movement)}`;

            return (
              <div
                className={`leaderboard-row ${entry.isCurrentUser ? "is-current" : ""}`}
                key={entry.handle}
              >
                <span className="leaderboard-rank">#{entry.rank}</span>
                <div className="leaderboard-user">
                  <span className="leaderboard-avatar" aria-hidden="true">
                    {entry.avatarEmoji}
                  </span>
                  <div>
                    <strong>{entry.displayName}</strong>
                    <p className="card-meta">
                      {entry.handle} · {entry.country} · {entry.streakDays} day streak
                    </p>
                  </div>
                </div>
                <div className="leaderboard-score">
                  <strong>{formatCompactNumber(entry.points)}</strong>
                  <p className="card-meta">
                    {entry.badges} badges · {movement}
                  </p>
                </div>
              </div>
            );
          })}
        </div>
      </article>
    </section>
  );
}