"use client";

import { useMemo, useState } from "react";
import type { Sticker, StickerCategory } from "../../types/passport";
import EmptyState from "../shared/EmptyState";
import ProgressBar from "../shared/ProgressBar";
import StatusPill, { type StatusTone } from "../shared/StatusPill";

interface StickerAlbumScreenProps {
  stickers: Sticker[];
  onOpenPack: (stickerIds: string[]) => void;
}

function rarityTone(rarity: Sticker["rarity"]): StatusTone {
  switch (rarity) {
    case "legendary":
      return "gold";
    case "epic":
      return "epic";
    case "rare":
      return "info";
    case "uncommon":
      return "success";
    case "common":
    default:
      return "neutral";
  }
}

export default function StickerAlbumScreen({ stickers, onOpenPack }: StickerAlbumScreenProps) {
  const [categoryFilter, setCategoryFilter] = useState<StickerCategory | "all">("all");
  const [latestPack, setLatestPack] = useState<Sticker[]>([]);

  const categories = useMemo(
    () => ["all", ...Array.from(new Set(stickers.map((sticker) => sticker.category)))] as const,
    [stickers],
  );

  const filteredStickers =
    categoryFilter === "all"
      ? stickers
      : stickers.filter((sticker) => sticker.category === categoryFilter);

  const obtainedCount = stickers.filter((sticker) => sticker.obtained).length;
  const duplicateCount = stickers.reduce((total, sticker) => total + sticker.duplicateCount, 0);

  function openPack() {
    const missing = stickers.filter((sticker) => !sticker.obtained);
    const duplicates = stickers.filter((sticker) => sticker.obtained);
    const pack = [...missing.slice(0, 3), ...duplicates.slice(0, Math.max(0, 3 - missing.length))].slice(
      0,
      3,
    );

    if (pack.length === 0) {
      return;
    }

    setLatestPack(pack);
    onOpenPack(pack.map((sticker) => sticker.id));
  }

  return (
    <section className="screen" aria-labelledby="stickers-title">
      <div className="screen-hero">
        <div className="hero-content">
          <p className="hero-kicker">Sticker album</p>
          <h1 className="hero-title" id="stickers-title">
            Open packs. Complete pages.
          </h1>
          <p className="hero-copy">
            The virtual sticker book is the emotional collection layer: common crests, rare
            stadiums, epic stars, legendary moments, duplicates, and future trading.
          </p>
          <div className="hero-actions">
            <button className="button-primary" onClick={openPack} type="button">
              Open a virtual pack
            </button>
          </div>
        </div>

        <aside className="hero-card">
          <p className="card-kicker">Album progress</p>
          <h2>
            {obtainedCount}/{stickers.length} stickers
          </h2>
          <ProgressBar label="Sticker album completion" max={stickers.length} tone="gold" value={obtainedCount} />
          <p>{duplicateCount} duplicates ready for a future trading loop.</p>
        </aside>
      </div>

      <div className="sticker-toolbar">
        <div className="segmented-control" aria-label="Sticker category filters">
          {categories.map((category) => (
            <button
              aria-pressed={categoryFilter === category}
              className={`chip ${categoryFilter === category ? "is-active" : ""}`}
              key={category}
              onClick={() => setCategoryFilter(category)}
              type="button"
            >
              {category === "all" ? "All stickers" : category}
            </button>
          ))}
        </div>
        <button className="button-secondary" onClick={openPack} type="button">
          Open pack
        </button>
      </div>

      {latestPack.length > 0 ? (
        <article className="card" aria-live="polite">
          <p className="card-kicker">Pack reveal</p>
          <h2>New pack opened</h2>
          <div className="pack-reveal">
            {latestPack.map((sticker) => (
              <div className="pack-reveal-card" key={sticker.id}>
                <div aria-hidden="true" className="sticker-emoji">
                  {sticker.imageEmoji}
                </div>
                <strong>{sticker.title}</strong>
                <p className="card-meta">{sticker.rarity}</p>
              </div>
            ))}
          </div>
        </article>
      ) : null}

      {filteredStickers.length === 0 ? (
        <EmptyState icon="🃏" title="No stickers here" message="Try another category filter." />
      ) : (
        <div className="sticker-grid">
          {filteredStickers.map((sticker) => (
            <article
              className={`sticker-card ${sticker.obtained ? "is-obtained" : "is-locked"}`}
              key={sticker.id}
            >
              <div>
                <div aria-hidden="true" className="sticker-emoji">
                  {sticker.obtained ? sticker.imageEmoji : "❔"}
                </div>
                <h2>{sticker.obtained ? sticker.title : "Mystery sticker"}</h2>
                <p className="card-meta">{sticker.obtained ? sticker.subtitle : sticker.setName}</p>
              </div>

              <div className="goal-list" style={{ justifyContent: "center" }}>
                <StatusPill tone={rarityTone(sticker.rarity)}>{sticker.rarity}</StatusPill>
                <StatusPill tone={sticker.obtained ? "success" : "neutral"}>
                  {sticker.obtained ? "Owned" : "Missing"}
                </StatusPill>
                {sticker.duplicateCount > 0 ? (
                  <StatusPill tone="gold">+{sticker.duplicateCount} dupes</StatusPill>
                ) : null}
              </div>
            </article>
          ))}
        </div>
      )}
    </section>
  );
}