"use client";

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

interface AchievementsScreenProps {
  achievements: Achievement[];
  onClaimAchievement: (achievementId: string) => void;
  onNavigate: (screen: ScreenId) => void;
}

function rarityTone(rarity: Achievement["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 AchievementsScreen({
  achievements,
  onClaimAchievement,
  onNavigate,
}: AchievementsScreenProps) {
  const [categoryFilter, setCategoryFilter] = useState<AchievementCategory | "all">("all");
  const [stateFilter, setStateFilter] = useState<"all" | "unlocked" | "in-progress" | "claimed">(
    "all",
  );

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

  const filteredAchievements = achievements
    .filter((achievement) => categoryFilter === "all" || achievement.category === categoryFilter)
    .filter((achievement) => {
      if (stateFilter === "all") {
        return true;
      }

      if (stateFilter === "unlocked") {
        return achievement.unlocked && !achievement.claimed;
      }

      if (stateFilter === "claimed") {
        return Boolean(achievement.claimed);
      }

      return !achievement.unlocked;
    });

  const unlockedCount = achievements.filter((achievement) => achievement.unlocked).length;
  const claimableCount = achievements.filter(
    (achievement) => achievement.unlocked && !achievement.claimed,
  ).length;

  return (
    <section className="screen" aria-labelledby="achievements-title">
      <div className="screen-hero">
        <div className="hero-content">
          <p className="hero-kicker">Achievements</p>
          <h1 className="hero-title" id="achievements-title">
            Badges for every fan behaviour.
          </h1>
          <p className="hero-copy">
            Achievements translate product goals into visible rewards: collecting, predicting,
            watching, answering, sharing, and saving memories.
          </p>
        </div>
        <aside className="hero-card">
          <p className="card-kicker">Badge progress</p>
          <h2>
            {unlockedCount}/{achievements.length} unlocked
          </h2>
          <ProgressBar label="Achievements unlocked" max={achievements.length} value={unlockedCount} />
          <p>{claimableCount} rewards are ready to claim.</p>
        </aside>
      </div>

      <div className="filter-bar" aria-label="Achievement filters">
        <div className="segmented-control">
          {categories.map((category) => (
            <button
              aria-pressed={categoryFilter === category}
              className={`chip ${categoryFilter === category ? "is-active" : ""}`}
              key={category}
              onClick={() => setCategoryFilter(category)}
              type="button"
            >
              {category === "all" ? "All categories" : category}
            </button>
          ))}
        </div>

        <div className="segmented-control">
          {(["all", "unlocked", "in-progress", "claimed"] as const).map((state) => (
            <button
              aria-pressed={stateFilter === state}
              className={`chip ${stateFilter === state ? "is-active" : ""}`}
              key={state}
              onClick={() => setStateFilter(state)}
              type="button"
            >
              {state === "all" ? "All states" : state}
            </button>
          ))}
        </div>
      </div>

      {filteredAchievements.length === 0 ? (
        <EmptyState icon="🏅" title="No badges in this view" message="Try another state or category." />
      ) : (
        <div className="achievement-grid">
          {filteredAchievements.map((achievement) => {
            const claimable = achievement.unlocked && !achievement.claimed;

            return (
              <article
                className={`achievement-card ${achievement.unlocked ? "is-unlocked" : ""}`}
                key={achievement.id}
              >
                <div className="achievement-header">
                  <span className="achievement-icon" aria-hidden="true">
                    {achievement.icon}
                  </span>
                  <div>
                    <h2>{achievement.title}</h2>
                    <p className="card-meta">{achievement.category}</p>
                  </div>
                </div>

                <p>{achievement.description}</p>

                <div className="goal-list">
                  <StatusPill tone={rarityTone(achievement.rarity)}>{achievement.rarity}</StatusPill>
                  <StatusPill tone={achievement.unlocked ? "success" : "neutral"}>
                    {achievement.claimed
                      ? "Claimed"
                      : achievement.unlocked
                        ? "Unlocked"
                        : "In progress"}
                  </StatusPill>
                </div>

                <ProgressBar
                  label="Badge progress"
                  max={achievement.total}
                  value={Math.min(achievement.progress, achievement.total)}
                />

                <p>
                  <strong>Reward:</strong> {achievement.reward}
                </p>

                {claimable ? (
                  <button
                    className="button-primary"
                    onClick={() => onClaimAchievement(achievement.id)}
                    type="button"
                  >
                    Claim reward
                  </button>
                ) : achievement.unlocked ? (
                  <button className="button-ghost" disabled type="button">
                    Reward claimed
                  </button>
                ) : (
                  <button className="button-secondary" onClick={() => onNavigate("dashboard")} type="button">
                    Find next mission
                  </button>
                )}
              </article>
            );
          })}
        </div>
      )}
    </section>
  );
}