import { FormEvent, useEffect, useMemo, useState } from 'react';
import type {
  AddMemoryRequest,
  ChallengeDefinition,
  CollectionItem,
  ContentResponse,
  ItemType,
  Match,
  MemoryMood,
  PassportState,
  Prediction,
  TriviaQuestion
} from '@fan-passport/shared';
import { ApiClientError, api } from './api/client';

const USER_STORAGE_KEY = 'fan-passport-demo-user-id';

function errorMessage(error: unknown): string {
  if (error instanceof ApiClientError) {
    return error.message;
  }

  if (error instanceof Error) {
    return error.message;
  }

  return 'Something went wrong. Please try again.';
}

function collectionKey(itemType: ItemType, contentId: string): string {
  return `${itemType}:${contentId}`;
}

function teamName(content: ContentResponse, teamId: string): string {
  return content.teams.find((team) => team.id === teamId)?.name ?? teamId;
}

function stadiumName(content: ContentResponse, stadiumId: string): string {
  return content.stadiums.find((stadium) => stadium.id === stadiumId)?.name ?? stadiumId;
}

function matchTitle(content: ContentResponse, match: Match): string {
  return `${teamName(content, match.homeTeamId)} vs ${teamName(content, match.awayTeamId)}`;
}

function formatDateTime(value: string): string {
  return new Intl.DateTimeFormat(undefined, {
    month: 'short',
    day: 'numeric',
    hour: 'numeric',
    minute: '2-digit'
  }).format(new Date(value));
}

function formatDate(value: string): string {
  return new Intl.DateTimeFormat(undefined, {
    month: 'short',
    day: 'numeric'
  }).format(new Date(value));
}

export default function App() {
  const [content, setContent] = useState<ContentResponse | null>(null);
  const [passport, setPassport] = useState<PassportState | null>(null);
  const [userId, setUserId] = useState<string | null>(() => window.localStorage.getItem(USER_STORAGE_KEY));
  const [loading, setLoading] = useState(true);
  const [busyAction, setBusyAction] = useState<string | null>(null);
  const [notice, setNotice] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);

  async function loadInitialState(activeUserId: string | null) {
    setLoading(true);
    setError(null);

    try {
      const loadedContent = await api.getContent();
      setContent(loadedContent);

      if (activeUserId) {
        const loadedPassport = await api.getPassport(activeUserId);
        setPassport(loadedPassport);
      } else {
        setPassport(null);
      }
    } catch (caught) {
      if (caught instanceof ApiClientError && caught.status === 404) {
        window.localStorage.removeItem(USER_STORAGE_KEY);
        setUserId(null);
        setPassport(null);
        setError('The saved demo passport no longer exists. Create a new one to continue.');
      } else {
        setError(errorMessage(caught));
      }
    } finally {
      setLoading(false);
    }
  }

  useEffect(() => {
    let cancelled = false;

    async function run() {
      setLoading(true);
      setError(null);

      try {
        const loadedContent = await api.getContent();
        if (cancelled) return;
        setContent(loadedContent);

        if (userId) {
          const loadedPassport = await api.getPassport(userId);
          if (cancelled) return;
          setPassport(loadedPassport);
        } else {
          setPassport(null);
        }
      } catch (caught) {
        if (cancelled) return;

        if (caught instanceof ApiClientError && caught.status === 404) {
          window.localStorage.removeItem(USER_STORAGE_KEY);
          setUserId(null);
          setPassport(null);
          setError('The saved demo passport no longer exists. Create a new one to continue.');
        } else {
          setError(errorMessage(caught));
        }
      } finally {
        if (!cancelled) {
          setLoading(false);
        }
      }
    }

    run();

    return () => {
      cancelled = true;
    };
  }, [userId]);

  async function handleCreateUser(displayName: string, country: string) {
    setBusyAction('create-user');
    setError(null);
    setNotice(null);

    try {
      const response = await api.createUser({ displayName, country });
      window.localStorage.setItem(USER_STORAGE_KEY, response.user.id);
      setUserId(response.user.id);
      setPassport(response.passport);
      setNotice(`Passport created for ${response.user.displayName}. Start collecting!`);
    } catch (caught) {
      setError(errorMessage(caught));
    } finally {
      setBusyAction(null);
    }
  }

  async function runAction(actionKey: string, action: () => Promise<{ passport: PassportState; message: string }>) {
    setBusyAction(actionKey);
    setError(null);
    setNotice(null);

    try {
      const response = await action();
      setPassport(response.passport);
      setNotice(response.message);
    } catch (caught) {
      setError(errorMessage(caught));
    } finally {
      setBusyAction(null);
    }
  }

  function handleCollect(item: CollectionItem) {
    if (!passport) return;

    runAction(`collect-${item.itemType}-${item.contentId}`, () =>
      api.collectItem({
        userId: passport.user.id,
        itemType: item.itemType,
        contentId: item.contentId
      })
    );
  }

  function handleAnswer(question: TriviaQuestion, selectedOptionId: string) {
    if (!passport) return;

    runAction(`trivia-${question.id}-${selectedOptionId}`, () =>
      api.answerTrivia(question.id, {
        userId: passport.user.id,
        selectedOptionId
      })
    );
  }

  function handlePredict(matchId: string, predictedWinnerTeamId: string, confidence: 1 | 2 | 3 | 4 | 5) {
    if (!passport) return;

    runAction(`prediction-${matchId}-${predictedWinnerTeamId}`, () =>
      api.submitPrediction({
        userId: passport.user.id,
        matchId,
        predictedWinnerTeamId,
        confidence
      })
    );
  }

  function handleAddMemory(input: Omit<AddMemoryRequest, 'userId'>) {
    if (!passport) return;

    runAction('memory-add', () =>
      api.addMemory({
        ...input,
        userId: passport.user.id
      })
    );
  }

  async function handleResetDemo() {
    setBusyAction('reset-demo');
    setError(null);
    setNotice(null);

    try {
      await api.resetDemo();
      window.localStorage.removeItem(USER_STORAGE_KEY);
      setUserId(null);
      setPassport(null);
      setNotice('Demo reset. Create a fresh passport to run the journey again.');
      await loadInitialState(null);
    } catch (caught) {
      setError(errorMessage(caught));
    } finally {
      setBusyAction(null);
    }
  }

  const contentLoaded = Boolean(content);

  return (
    <div className="app-shell">
      <a className="skip-link" href="#main-content">
        Skip to main content
      </a>

      <header className="hero">
        <div>
          <p className="eyebrow">FIFA World Cup 2026 demo</p>
          <h1>Fan Passport: The World Cup Journey</h1>
          <p className="hero-copy">
            Collect teams, matches, stadiums, predictions, achievements, trivia, stickers, and memories in one daily fan loop.
          </p>
        </div>

        <div className="hero-actions">
          {passport ? (
            <div className="score-card" aria-label="Current passport score">
              <span>Level {passport.user.level}</span>
              <strong>{passport.user.points} XP</strong>
              <small>Rank #{passport.stats.rank}</small>
            </div>
          ) : (
            <div className="score-card muted" aria-label="Demo features">
              <span>Demo build</span>
              <strong>{contentLoaded ? content?.challenges.length : '—'} challenges</strong>
              <small>End-to-end</small>
            </div>
          )}

          <button className="secondary-button" type="button" onClick={handleResetDemo} disabled={Boolean(busyAction)}>
            Reset demo
          </button>
        </div>
      </header>

      <main id="main-content" className="main-grid">
        {loading && !content ? <LoadingState /> : null}

        {error ? (
          <div className="alert" role="alert">
            <strong>Unable to continue.</strong>
            <span>{error}</span>
          </div>
        ) : null}

        {notice ? (
          <div className="notice" role="status" aria-live="polite">
            {notice}
          </div>
        ) : null}

        {!loading && content && !passport ? (
          <OnboardingForm onCreate={handleCreateUser} busy={busyAction === 'create-user'} />
        ) : null}

        {content && passport ? (
          <PassportDashboard
            content={content}
            passport={passport}
            busyAction={busyAction}
            onCollect={handleCollect}
            onAnswer={handleAnswer}
            onPredict={handlePredict}
            onAddMemory={handleAddMemory}
          />
        ) : null}
      </main>
    </div>
  );
}

function LoadingState() {
  return (
    <section className="panel loading-panel" aria-busy="true" aria-live="polite">
      <div className="spinner" aria-hidden="true" />
      <div>
        <h2>Loading passport demo…</h2>
        <p>Fetching content seeds, challenges, badges, and leaderboard state.</p>
      </div>
    </section>
  );
}

interface OnboardingFormProps {
  onCreate: (displayName: string, country: string) => Promise<void>;
  busy: boolean;
}

function OnboardingForm({ onCreate, busy }: OnboardingFormProps) {
  const [displayName, setDisplayName] = useState('');
  const [country, setCountry] = useState('Global');

  async function handleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    await onCreate(displayName, country);
  }

  return (
    <section className="panel onboarding" aria-labelledby="onboarding-title">
      <div>
        <p className="eyebrow">Start here</p>
        <h2 id="onboarding-title">Start your passport</h2>
        <p>
          Create a local demo fan profile. The profile lives in the API memory store, so you can safely reset and replay the public demo.
        </p>
      </div>

      <form className="onboarding-form" onSubmit={handleSubmit}>
        <label htmlFor="display-name">Display name</label>
        <input
          id="display-name"
          name="displayName"
          value={displayName}
          maxLength={40}
          placeholder="Backer Demo Fan"
          onChange={(event) => setDisplayName(event.target.value)}
          required
        />

        <label htmlFor="country">Country or club identity</label>
        <input
          id="country"
          name="country"
          value={country}
          maxLength={40}
          placeholder="England, Mexico, Global…"
          onChange={(event) => setCountry(event.target.value)}
        />

        <button type="submit" disabled={busy || displayName.trim().length < 2}>
          {busy ? 'Creating…' : 'Create passport'}
        </button>
      </form>
    </section>
  );
}

interface DashboardProps {
  content: ContentResponse;
  passport: PassportState;
  busyAction: string | null;
  onCollect: (item: CollectionItem) => void;
  onAnswer: (question: TriviaQuestion, selectedOptionId: string) => void;
  onPredict: (matchId: string, predictedWinnerTeamId: string, confidence: 1 | 2 | 3 | 4 | 5) => void;
  onAddMemory: (input: Omit<AddMemoryRequest, 'userId'>) => void;
}

function PassportDashboard({
  content,
  passport,
  busyAction,
  onCollect,
  onAnswer,
  onPredict,
  onAddMemory
}: DashboardProps) {
  return (
    <>
      <section className="panel welcome-panel" aria-labelledby="welcome-title">
        <div>
          <p className="eyebrow">Daily passport</p>
          <h2 id="welcome-title">Welcome, {passport.user.displayName}</h2>
          <p>
            Your passport has {passport.stats.totalCollections} collection stamps, {passport.badges.length} badges, and{' '}
            {passport.stats.completedChallenges} completed challenges.
          </p>
        </div>

        <div className="stats-grid" aria-label="Passport summary">
          <StatCard label="Teams" value={passport.stats.teamsCollected} hint="collected" />
          <StatCard label="Stadiums" value={passport.stats.stadiumsCollected} hint="tour stamps" />
          <StatCard label="Trivia" value={passport.stats.correctTriviaAnswers} hint="correct" />
          <StatCard label="Predictions" value={passport.stats.predictionsSubmitted} hint="submitted" />
        </div>
      </section>

      <ChallengeGrid content={content} passport={passport} />
      <CollectionBoard content={content} passport={passport} busyAction={busyAction} onCollect={onCollect} />
      <TriviaPanel content={content} passport={passport} busyAction={busyAction} onAnswer={onAnswer} />
      <PredictionsPanel content={content} passport={passport} busyAction={busyAction} onPredict={onPredict} />
      <MemoriesPanel content={content} passport={passport} busyAction={busyAction} onAddMemory={onAddMemory} />
      <BadgeShelf content={content} passport={passport} />
      <LeaderboardPanel passport={passport} />
      <AchievementTimeline passport={passport} />
    </>
  );
}

interface StatCardProps {
  label: string;
  value: number;
  hint: string;
}

function StatCard({ label, value, hint }: StatCardProps) {
  return (
    <div className="stat-card">
      <span>{label}</span>
      <strong>{value}</strong>
      <small>{hint}</small>
    </div>
  );
}

interface ChallengeGridProps {
  content: ContentResponse;
  passport: PassportState;
}

function ChallengeGrid({ content, passport }: ChallengeGridProps) {
  const definitionsById = useMemo(
    () => new Map(content.challenges.map((challenge) => [challenge.id, challenge])),
    [content.challenges]
  );

  return (
    <section className="panel" aria-labelledby="challenge-title">
      <div className="section-heading">
        <div>
          <p className="eyebrow">Return every day</p>
          <h2 id="challenge-title">Challenges</h2>
        </div>
        <span className="pill">{passport.stats.completedChallenges}/{content.challenges.length} complete</span>
      </div>

      <div className="challenge-grid">
        {passport.challengeProgress.map((progress) => {
          const challenge = definitionsById.get(progress.challengeId);
          if (!challenge) return null;

          const percent = Math.round((progress.current / progress.target) * 100);

          return (
            <article className="challenge-card" key={progress.challengeId}>
              <div className="challenge-card-heading">
                <h3>{challenge.title}</h3>
                <span className={progress.complete ? 'pill success' : 'pill'}>{progress.complete ? 'Complete' : `${percent}%`}</span>
              </div>
              <p>{challenge.description}</p>
              <progress value={progress.current} max={progress.target} aria-label={`${challenge.title} progress`} />
              <small>
                {progress.current}/{progress.target} · {challenge.points} XP reward
                {progress.completedAt ? ` · completed ${formatDate(progress.completedAt)}` : ''}
              </small>
            </article>
          );
        })}
      </div>
    </section>
  );
}

interface CollectionBoardProps {
  content: ContentResponse;
  passport: PassportState;
  busyAction: string | null;
  onCollect: (item: CollectionItem) => void;
}

function CollectionBoard({ content, passport, busyAction, onCollect }: CollectionBoardProps) {
  const collected = new Set(passport.collections.map((entry) => collectionKey(entry.itemType, entry.contentId)));
  const sections: Array<{ type: ItemType; title: string; description: string }> = [
    { type: 'team', title: 'Collect teams', description: 'Fill group pages by stamping teams into your passport.' },
    { type: 'stadium', title: 'Collect stadiums', description: 'Tour the 2026 host-city stadiums.' },
    { type: 'match', title: 'Log matches', description: 'Record fixtures you watched or want to remember.' },
    { type: 'sticker', title: 'Build a virtual sticker collection', description: 'Recreate the sticker album habit digitally.' }
  ];

  return (
    <section className="panel" aria-labelledby="collection-title">
      <div className="section-heading">
        <div>
          <p className="eyebrow">Collections</p>
          <h2 id="collection-title">Passport collection book</h2>
        </div>
        <span className="pill">{passport.stats.totalCollections}/{content.collectionItems.length} collected</span>
      </div>

      {sections.map((section) => {
        const items = content.collectionItems.filter((item) => item.itemType === section.type);

        return (
          <div className="collection-section" key={section.type}>
            <div>
              <h3>{section.title}</h3>
              <p>{section.description}</p>
            </div>

            <div className="collection-grid">
              {items.map((item) => {
                const key = collectionKey(item.itemType, item.contentId);
                const isCollected = collected.has(key);
                const actionKey = `collect-${item.itemType}-${item.contentId}`;

                return (
                  <article className={`collection-card rarity-${item.rarity}`} key={item.id}>
                    <div>
                      <span className="rarity">{item.rarity}</span>
                      <h4>{item.title}</h4>
                      <p>{item.description}</p>
                    </div>
                    <button
                      type="button"
                      aria-label={isCollected ? `${item.title} already collected` : `Collect ${item.title}`}
                      disabled={Boolean(busyAction) || isCollected}
                      onClick={() => onCollect(item)}
                    >
                      {busyAction === actionKey ? 'Collecting…' : isCollected ? 'Collected' : 'Collect'}
                    </button>
                  </article>
                );
              })}
            </div>
          </div>
        );
      })}
    </section>
  );
}

interface TriviaPanelProps {
  content: ContentResponse;
  passport: PassportState;
  busyAction: string | null;
  onAnswer: (question: TriviaQuestion, selectedOptionId: string) => void;
}

function TriviaPanel({ content, passport, busyAction, onAnswer }: TriviaPanelProps) {
  const answered = new Map(passport.triviaAnswers.map((answer) => [answer.questionId, answer]));
  const unansweredCount = content.triviaQuestions.length - answered.size;

  return (
    <section className="panel" aria-labelledby="trivia-title">
      <div className="section-heading">
        <div>
          <p className="eyebrow">Daily habit</p>
          <h2 id="trivia-title">World Cup trivia</h2>
        </div>
        <span className="pill">{unansweredCount} unanswered</span>
      </div>

      <div className="trivia-list">
        {content.triviaQuestions.map((question) => {
          const answer = answered.get(question.id);

          return (
            <article className="trivia-card" key={question.id}>
              <div>
                <span className="rarity">{question.category} · {question.points} XP</span>
                <h3>{question.question}</h3>
                {answer ? (
                  <p className={answer.correct ? 'correct-text' : 'incorrect-text'}>
                    {answer.correct ? 'Correct.' : 'Answered.'} {question.explanation}
                  </p>
                ) : null}
              </div>

              <div className="answer-grid" role="group" aria-label={`Answers for ${question.question}`}>
                {question.options.map((option) => (
                  <button
                    type="button"
                    key={option.id}
                    disabled={Boolean(busyAction) || Boolean(answer)}
                    onClick={() => onAnswer(question, option.id)}
                    aria-pressed={answer?.selectedOptionId === option.id}
                  >
                    {busyAction === `trivia-${question.id}-${option.id}` ? 'Checking…' : option.label}
                  </button>
                ))}
              </div>
            </article>
          );
        })}

        {content.triviaQuestions.length === 0 ? (
          <EmptyState title="No trivia loaded" description="Trivia seeds are empty. Add questions to the shared content model." />
        ) : null}
      </div>
    </section>
  );
}

interface PredictionsPanelProps {
  content: ContentResponse;
  passport: PassportState;
  busyAction: string | null;
  onPredict: (matchId: string, predictedWinnerTeamId: string, confidence: 1 | 2 | 3 | 4 | 5) => void;
}

function PredictionsPanel({ content, passport, busyAction, onPredict }: PredictionsPanelProps) {
  const predictionsByMatch = new Map(passport.predictions.map((prediction) => [prediction.matchId, prediction]));

  return (
    <section className="panel" aria-labelledby="prediction-title">
      <div className="section-heading">
        <div>
          <p className="eyebrow">Predict and compete</p>
          <h2 id="prediction-title">Predictions</h2>
        </div>
        <span className="pill">{passport.stats.giantKillingsPredicted} giant-killing picks</span>
      </div>

      <div className="prediction-grid">
        {content.matches.map((match) => {
          const prediction = predictionsByMatch.get(match.id);
          const home = content.teams.find((team) => team.id === match.homeTeamId);
          const away = content.teams.find((team) => team.id === match.awayTeamId);
          const stadium = stadiumName(content, match.stadiumId);

          return (
            <article className="prediction-card" key={match.id}>
              <div>
                <span className="rarity">
                  Group {match.group} · {formatDateTime(match.kickoffISO)}
                </span>
                <h3>{matchTitle(content, match)}</h3>
                <p>{stadium}</p>
                {prediction ? <PredictionSummary content={content} prediction={prediction} /> : <p>No prediction yet.</p>}
              </div>

              <div className="prediction-actions">
                {[home, away].filter(Boolean).map((team) => {
                  const isUnderdog = match.underdogTeamId === team!.id;
                  const label = isUnderdog ? `Predict ${team!.name} giant killing` : `Predict ${team!.name} win`;
                  const actionKey = `prediction-${match.id}-${team!.id}`;

                  return (
                    <button
                      type="button"
                      key={team!.id}
                      disabled={Boolean(busyAction)}
                      onClick={() => onPredict(match.id, team!.id, isUnderdog ? 5 : 3)}
                      aria-label={`${label} in ${matchTitle(content, match)}`}
                    >
                      {busyAction === actionKey ? 'Submitting…' : label}
                    </button>
                  );
                })}
              </div>
            </article>
          );
        })}
      </div>
    </section>
  );
}

function PredictionSummary({ content, prediction }: { content: ContentResponse; prediction: Prediction }) {
  const selectedTeam = teamName(content, prediction.predictedWinnerTeamId);

  return (
    <p className="prediction-summary">
      Picked <strong>{selectedTeam}</strong> · Confidence {prediction.confidence}/5
      {prediction.giantKilling ? ' · giant killing' : ''}
    </p>
  );
}

interface MemoriesPanelProps {
  content: ContentResponse;
  passport: PassportState;
  busyAction: string | null;
  onAddMemory: (input: Omit<AddMemoryRequest, 'userId'>) => void;
}

function MemoriesPanel({ content, passport, busyAction, onAddMemory }: MemoriesPanelProps) {
  const [title, setTitle] = useState('');
  const [note, setNote] = useState('');
  const [matchId, setMatchId] = useState('');
  const [mood, setMood] = useState<MemoryMood>('joy');

  function handleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();

    onAddMemory({
      title,
      note,
      matchId: matchId || undefined,
      mood
    });

    setTitle('');
    setNote('');
    setMatchId('');
    setMood('joy');
  }

  return (
    <section className="panel memories-panel" aria-labelledby="memory-title">
      <div className="section-heading">
        <div>
          <p className="eyebrow">Tournament memories</p>
          <h2 id="memory-title">Memory book</h2>
        </div>
        <span className="pill">{passport.stats.memoriesCreated} saved</span>
      </div>

      <form className="memory-form" onSubmit={handleSubmit}>
        <label htmlFor="memory-title-input">Memory title</label>
        <input
          id="memory-title-input"
          value={title}
          maxLength={80}
          onChange={(event) => setTitle(event.target.value)}
          placeholder="Opening week goosebumps"
          required
        />

        <label htmlFor="memory-note">Memory note</label>
        <textarea
          id="memory-note"
          value={note}
          maxLength={600}
          onChange={(event) => setNote(event.target.value)}
          placeholder="What happened, who were you with, and how did it feel?"
          required
        />

        <label htmlFor="memory-match">Match</label>
        <select id="memory-match" value={matchId} onChange={(event) => setMatchId(event.target.value)}>
          <option value="">No match attached</option>
          {content.matches.map((match) => (
            <option key={match.id} value={match.id}>
              {matchTitle(content, match)}
            </option>
          ))}
        </select>

        <label htmlFor="memory-mood">Mood</label>
        <select id="memory-mood" value={mood} onChange={(event) => setMood(event.target.value as MemoryMood)}>
          <option value="joy">Joy</option>
          <option value="nerves">Nerves</option>
          <option value="shock">Shock</option>
          <option value="pride">Pride</option>
        </select>

        <button type="submit" disabled={Boolean(busyAction) || title.trim().length < 2 || note.trim().length < 5}>
          {busyAction === 'memory-add' ? 'Saving…' : 'Add memory'}
        </button>
      </form>

      <div className="memory-list" aria-live="polite">
        {passport.memories.length === 0 ? (
          <EmptyState title="No memories yet" description="Save a note after a match, prediction, or collection milestone." />
        ) : (
          passport.memories.map((memory) => (
            <article className="memory-card" key={memory.id}>
              <span className="rarity">{memory.mood}</span>
              <h3>{memory.title}</h3>
              <p>{memory.note}</p>
              <small>
                {formatDateTime(memory.createdAt)}
                {memory.matchId ? ` · ${matchTitle(content, content.matches.find((match) => match.id === memory.matchId)!)} ` : ''}
                · +{memory.pointsAwarded} XP
              </small>
            </article>
          ))
        )}
      </div>
    </section>
  );
}

interface BadgeShelfProps {
  content: ContentResponse;
  passport: PassportState;
}

function BadgeShelf({ content, passport }: BadgeShelfProps) {
  return (
    <section className="panel" aria-labelledby="badge-title">
      <div className="section-heading">
        <div>
          <p className="eyebrow">Achievements</p>
          <h2 id="badge-title">Badge shelf</h2>
        </div>
        <span className="pill">{passport.badges.length}/{content.badges.length} unlocked</span>
      </div>

      {passport.badges.length === 0 ? (
        <EmptyState title="No badges yet" description="Collect, predict, answer trivia, or save a memory to unlock your first badge." />
      ) : (
        <div className="badge-grid">
          {passport.badges.map((award) => {
            const badge = content.badges.find((candidate) => candidate.id === award.badgeId);
            if (!badge) return null;

            return (
              <article className={`badge-card tier-${badge.tier}`} key={award.badgeId}>
                <span className="badge-icon" aria-hidden="true">
                  {badge.icon}
                </span>
                <h3>{badge.name}</h3>
                <p>{badge.description}</p>
                <small>{award.reason}</small>
              </article>
            );
          })}
        </div>
      )}
    </section>
  );
}

function LeaderboardPanel({ passport }: { passport: PassportState }) {
  return (
    <section className="panel" aria-labelledby="leaderboard-title">
      <div className="section-heading">
        <div>
          <p className="eyebrow">Global competition</p>
          <h2 id="leaderboard-title">Leaderboard</h2>
        </div>
        <span className="pill">Your rank #{passport.stats.rank}</span>
      </div>

      <div className="table-wrap">
        <table aria-label="Global demo leaderboard">
          <thead>
            <tr>
              <th scope="col">Rank</th>
              <th scope="col">Fan</th>
              <th scope="col">XP</th>
              <th scope="col">Badges</th>
              <th scope="col">Challenges</th>
            </tr>
          </thead>
          <tbody>
            {passport.leaderboard.map((entry) => (
              <tr key={entry.userId} className={entry.isCurrentUser ? 'current-user-row' : undefined}>
                <td>#{entry.rank}</td>
                <td>
                  <span aria-hidden="true">{entry.avatarEmoji}</span> {entry.displayName}
                  {entry.isCurrentUser ? <span className="sr-only"> current user</span> : null}
                  <small>{entry.country}</small>
                </td>
                <td>{entry.points}</td>
                <td>{entry.badges}</td>
                <td>{entry.completedChallenges}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </section>
  );
}

function AchievementTimeline({ passport }: { passport: PassportState }) {
  return (
    <section className="panel" aria-labelledby="timeline-title">
      <div className="section-heading">
        <div>
          <p className="eyebrow">Live feedback</p>
          <h2 id="timeline-title">Achievement timeline</h2>
        </div>
        <span className="pill">{passport.achievements.length} events</span>
      </div>

      {passport.achievements.length === 0 ? (
        <EmptyState title="No achievement events yet" description="Your next action will appear here with XP and badge feedback." />
      ) : (
        <ol className="timeline">
          {passport.achievements.map((achievement) => (
            <li key={achievement.id}>
              <div>
                <h3>{achievement.title}</h3>
                <p>{achievement.description}</p>
                <small>{formatDateTime(achievement.createdAt)}</small>
              </div>
              <strong>{achievement.points > 0 ? `+${achievement.points}` : 'Badge'}</strong>
            </li>
          ))}
        </ol>
      )}
    </section>
  );
}

interface EmptyStateProps {
  title: string;
  description: string;
}

function EmptyState({ title, description }: EmptyStateProps) {
  return (
    <div className="empty-state">
      <strong>{title}</strong>
      <p>{description}</p>
    </div>
  );
}