/* eslint-disable @next/next/no-img-element */
"use client";

import { useMemo, useState, useRef } from "react";
import Link from "next/link";
import {
  ArrowLeft,
  Calendar,
  Gift,
  Share2,
  Sparkles,
  Trophy,
  Star,
  Crown,
  Flame,
  Medal,
  ChevronRight,
  Download,
} from "lucide-react";
import { toPng } from "html-to-image";
import { useAchievements } from "@/hooks/use-achievements";
import { resolveAchievementStatus } from "@/lib/achievements";
import { Skeleton } from "@/components/ui/skeleton";
import { cn } from "@/lib/utils";
import type { Achievement } from "@/types";

/* ── Category accent colors ──────────────────────────────────────────────── */

function getCategoryAccent(category: string): {
  bg: string; border: string; text: string; glow: string; gradient: string;
} {
  const map: Record<string, ReturnType<typeof getCategoryAccent>> = {
    fitness:   { bg: "bg-emerald-500/10", border: "border-emerald-500/25", text: "text-emerald-300", glow: "rgba(16,185,129,0.35)", gradient: "from-emerald-500/20 to-transparent" },
    health:    { bg: "bg-green-500/10",   border: "border-green-500/25",   text: "text-green-300",   glow: "rgba(34,197,94,0.35)",  gradient: "from-green-500/20 to-transparent"   },
    learning:  { bg: "bg-sky-500/10",     border: "border-sky-500/25",     text: "text-sky-300",     glow: "rgba(14,165,233,0.35)", gradient: "from-sky-500/20 to-transparent"     },
    career:    { bg: "bg-blue-500/10",    border: "border-blue-500/25",    text: "text-blue-300",    glow: "rgba(59,130,246,0.35)", gradient: "from-blue-500/20 to-transparent"    },
    finance:   { bg: "bg-violet-500/10",  border: "border-violet-500/25",  text: "text-violet-300",  glow: "rgba(139,92,246,0.35)", gradient: "from-violet-500/20 to-transparent"  },
    creative:  { bg: "bg-pink-500/10",    border: "border-pink-500/25",    text: "text-pink-300",    glow: "rgba(236,72,153,0.35)", gradient: "from-pink-500/20 to-transparent"    },
    mindset:   { bg: "bg-purple-500/10",  border: "border-purple-500/25",  text: "text-purple-300",  glow: "rgba(168,85,247,0.35)", gradient: "from-purple-500/20 to-transparent"  },
    social:    { bg: "bg-orange-500/10",  border: "border-orange-500/25",  text: "text-orange-300",  glow: "rgba(249,115,22,0.35)", gradient: "from-orange-500/20 to-transparent"  },
  };
  return map[category?.toLowerCase()] ?? { bg: "bg-amber-500/10", border: "border-amber-500/25", text: "text-amber-300", glow: "rgba(245,158,11,0.35)", gradient: "from-amber-500/20 to-transparent" };
}

function formatDate(dateStr: string | null): string {
  if (!dateStr) return "";
  return new Date(dateStr).toLocaleDateString("de-DE", { day: "2-digit", month: "short", year: "numeric" });
}

/* ── Trophy rank config ────────────────────────────────────────────────────── */

function getTrophyRank(count: number): { label: string; icon: React.ReactNode; color: string; desc: string } {
  if (count >= 20) return { label: "Legend",    icon: <Crown  className="w-5 h-5" />, color: "text-amber-300",   desc: "Hall of Legends" };
  if (count >= 10) return { label: "Champion",  icon: <Trophy className="w-5 h-5" />, color: "text-yellow-300",  desc: "Championship Grade" };
  if (count >= 5)  return { label: "Achiever",  icon: <Medal  className="w-5 h-5" />, color: "text-orange-300",  desc: "Rising Force" };
  if (count >= 2)  return { label: "Starter",   icon: <Star   className="w-5 h-5" />, color: "text-sky-300",     desc: "Beginning the Journey" };
  return              { label: "Initiate",  icon: <Flame  className="w-5 h-5" />, color: "text-rose-300",    desc: "First Spark" };
}

/* ── Share Card ───────────────────────────────────────────────────────────── */

function TrophyShareCard({ achievement, onClose }: { achievement: Achievement; onClose: () => void }) {
  const cardRef = useRef<HTMLDivElement>(null);
  const [exporting, setExporting] = useState(false);

  async function handleDownload() {
    if (!cardRef.current) return;
    setExporting(true);
    try {
      const dataUrl = await toPng(cardRef.current, { pixelRatio: 2 });
      const a = document.createElement("a");
      a.href = dataUrl;
      a.download = `${achievement.title.replace(/\s+/g, "-").toLowerCase()}-trophy.png`;
      a.click();
    } finally {
      setExporting(false);
    }
  }

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm">
      <div className="flex flex-col gap-4 w-full max-w-sm">
        {/* Card to export */}
        <div ref={cardRef}
          className="rounded-[20px] overflow-hidden"
          style={{ background: "linear-gradient(145deg, #1a1025 0%, #0e0c15 50%, #0a0a0d 100%)", padding: 28, fontFamily: "system-ui, sans-serif" }}>
          {/* Top: brand */}
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 20 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
              <div style={{ width: 28, height: 28, borderRadius: 8, background: "linear-gradient(135deg,#7c3aed,#4f46e5)", display: "flex", alignItems: "center", justifyContent: "center" }}>
                <span style={{ fontSize: 14 }}>⚡</span>
              </div>
              <span style={{ color: "rgba(255,255,255,0.4)", fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase" }}>Mindavio</span>
            </div>
            <span style={{ color: "rgba(245,158,11,0.7)", fontSize: 11, letterSpacing: "0.06em", textTransform: "uppercase" }}>Achievement Unlocked</span>
          </div>

          {/* Icon + category */}
          <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 16 }}>
            <div style={{ width: 56, height: 56, borderRadius: 16, background: "rgba(245,158,11,0.12)", border: "1.5px solid rgba(245,158,11,0.25)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 28 }}>
              {achievement.icon}
            </div>
            <div>
              <div style={{ color: "rgba(255,255,255,0.35)", fontSize: 10, textTransform: "uppercase", letterSpacing: "0.1em", marginBottom: 4 }}>
                {achievement.category}
              </div>
              <div style={{ color: "white", fontSize: 18, fontWeight: 700, lineHeight: 1.2 }}>
                {achievement.title}
              </div>
            </div>
          </div>

          {/* Description */}
          {achievement.description && (
            <div style={{ color: "rgba(255,255,255,0.45)", fontSize: 12, lineHeight: 1.6, marginBottom: 16 }}>
              {achievement.description}
            </div>
          )}

          {/* Reward chip */}
          {achievement.reward_title && (
            <div style={{ display: "flex", alignItems: "center", gap: 6, background: "rgba(245,158,11,0.08)", border: "1px solid rgba(245,158,11,0.18)", borderRadius: 8, padding: "6px 10px", marginBottom: 16, width: "fit-content" }}>
              <span style={{ fontSize: 12 }}>🎁</span>
              <span style={{ color: "rgba(251,191,36,0.8)", fontSize: 11 }}>{achievement.reward_title}</span>
            </div>
          )}

          {/* Date + gold bar */}
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 6, color: "rgba(255,255,255,0.3)", fontSize: 11 }}>
              <span>🏆</span>
              <span>{formatDate(achievement.completed_at)}</span>
            </div>
            <div style={{ width: 40, height: 3, borderRadius: 2, background: "linear-gradient(90deg,#d97706,#fbbf24)" }} />
          </div>
        </div>

        {/* Buttons */}
        <div className="flex gap-2">
          <button onClick={onClose}
            className="flex-1 py-2.5 rounded-xl border border-white/[0.08] bg-white/[0.04] text-white/60 text-sm hover:bg-white/[0.07] transition-colors">
            Close
          </button>
          <button onClick={handleDownload} disabled={exporting}
            className="flex-1 py-2.5 rounded-xl bg-amber-500/20 border border-amber-500/30 text-amber-300 text-sm font-medium hover:bg-amber-500/30 transition-colors flex items-center justify-center gap-2">
            <Download className="w-4 h-4" />
            {exporting ? "Exporting…" : "Download PNG"}
          </button>
        </div>
      </div>
    </div>
  );
}

/* ── Trophy Card ──────────────────────────────────────────────────────────── */

function TrophyCard({ achievement, rank, onShare }: { achievement: Achievement; rank: number; onShare: () => void }) {
  const accent = getCategoryAccent(achievement.category);
  const isFirst = rank === 1;
  const isTop3 = rank <= 3;

  const rankConfig = {
    1: { label: "🥇", glow: "rgba(251,191,36,0.4)", border: "border-amber-400/40", bg: "bg-amber-500/[0.06]" },
    2: { label: "🥈", glow: "rgba(148,163,184,0.3)", border: "border-slate-400/30", bg: "bg-slate-500/[0.04]" },
    3: { label: "🥉", glow: "rgba(205,127,50,0.3)", border: "border-orange-400/30", bg: "bg-orange-500/[0.04]" },
  } as Record<number, { label: string; glow: string; border: string; bg: string }>;

  const rankStyle = rankConfig[rank] ?? {
    label: `#${rank}`,
    glow: "rgba(255,255,255,0.04)",
    border: "border-white/[0.07]",
    bg: "bg-white/[0.02]",
  };

  return (
    <Link href={`/achievements/${achievement.id}`}
      className={cn(
        "group relative flex flex-col gap-0 rounded-[18px] border overflow-hidden transition-all duration-300",
        "hover:scale-[1.02] hover:-translate-y-1",
        isFirst
          ? "border-amber-400/35 bg-[#0e0c15]"
          : rankStyle.border,
        !isFirst && rankStyle.bg,
      )}
      style={{
        boxShadow: isTop3
          ? `0 0 0 0.5px rgba(255,255,255,0.04), 0 8px 32px ${rankStyle.glow}, inset 0 1px 0 rgba(255,255,255,0.04)`
          : "0 0 0 0.5px rgba(255,255,255,0.03), 0 4px 16px rgba(0,0,0,0.4)",
      }}>

      {/* Top accent strip (category color) */}
      <div className={cn("h-[3px] w-full bg-gradient-to-r", accent.gradient, "to-transparent")} />

      {/* Background image if available */}
      {achievement.image_url && (
        <div className="absolute inset-0 overflow-hidden rounded-[18px] pointer-events-none">
          <img src={achievement.image_url} alt="" className="w-full h-full object-cover opacity-[0.04]" />
        </div>
      )}

      {/* Rank badge */}
      <div className="absolute top-3 right-3 z-10">
        <div className={cn(
          "w-8 h-8 rounded-full flex items-center justify-center text-sm border",
          isTop3 ? "border-white/20 bg-black/40 backdrop-blur-sm" : "border-white/[0.07] bg-white/[0.04]",
        )}>
          {typeof rankStyle.label === "string" && rankStyle.label.length <= 2 && !rankStyle.label.startsWith("#")
            ? <span>{rankStyle.label}</span>
            : <span className="text-xs text-white/40">{rankStyle.label}</span>
          }
        </div>
      </div>

      <div className="flex flex-col gap-3 p-4 flex-1">
        {/* Icon + title */}
        <div className="flex items-start gap-3">
          <div className={cn(
            "shrink-0 w-12 h-12 rounded-[12px] border flex items-center justify-center text-2xl transition-transform duration-300 group-hover:scale-110",
            accent.bg, accent.border,
          )}>
            {achievement.icon}
          </div>
          <div className="flex-1 min-w-0 pt-0.5">
            <div className="flex items-center gap-2 mb-0.5">
              <span className={cn("text-[10px] uppercase tracking-widest font-medium", accent.text)}>
                {achievement.category}
              </span>
            </div>
            <h3 className="text-white font-semibold text-sm leading-tight line-clamp-2 pr-8">
              {achievement.title}
            </h3>
          </div>
        </div>

        {/* Description */}
        {achievement.description && (
          <p className="text-white/40 text-xs leading-relaxed line-clamp-2">{achievement.description}</p>
        )}

        {/* Reward chip */}
        {achievement.reward_title && (
          <div className="flex items-center gap-1.5 bg-amber-500/[0.08] border border-amber-500/15 rounded-lg px-2.5 py-1.5 w-fit">
            <Gift className="w-3 h-3 text-amber-400/70" />
            <span className="text-amber-300/70 text-[11px] truncate max-w-[140px]">{achievement.reward_title}</span>
          </div>
        )}

        {/* Footer */}
        <div className="mt-auto flex items-center justify-between pt-1">
          <div className="flex items-center gap-1.5 text-white/25 text-[11px]">
            <Calendar className="w-3 h-3" />
            <span>{formatDate(achievement.completed_at || achievement.updated_at)}</span>
          </div>
          <div className="flex items-center gap-1">
            <button
              onClick={(e) => { e.preventDefault(); e.stopPropagation(); onShare(); }}
              className={cn(
                "w-7 h-7 rounded-lg border flex items-center justify-center transition-all",
                "opacity-0 group-hover:opacity-100",
                "border-white/[0.08] bg-white/[0.04] hover:bg-white/[0.08] text-white/40 hover:text-white/70",
              )}>
              <Share2 className="w-3 h-3" />
            </button>
            <div className="w-7 h-7 rounded-lg border border-white/[0.06] bg-white/[0.03] flex items-center justify-center">
              <ChevronRight className="w-3 h-3 text-white/20" />
            </div>
          </div>
        </div>
      </div>
    </Link>
  );
}

/* ── Featured Trophy (First Place) ──────────────────────────────────────── */

function FeaturedTrophy({ achievement, onShare }: { achievement: Achievement; onShare: () => void }) {
  const accent = getCategoryAccent(achievement.category);

  return (
    <Link href={`/achievements/${achievement.id}`}
      className="group relative flex flex-col md:flex-row gap-0 rounded-[22px] border border-amber-400/30 overflow-hidden transition-all duration-300 hover:border-amber-400/50"
      style={{ boxShadow: "0 0 0 0.5px rgba(255,255,255,0.04), 0 16px 64px rgba(245,158,11,0.15), inset 0 1px 0 rgba(255,255,255,0.05)" }}>

      {/* Background glow */}
      <div className="pointer-events-none absolute inset-0">
        <div className="absolute top-0 left-0 w-64 h-64 rounded-full opacity-20 blur-3xl"
          style={{ background: "radial-gradient(circle, #f59e0b, transparent 70%)" }} />
        <div className="absolute bottom-0 right-0 w-48 h-48 rounded-full opacity-10 blur-3xl"
          style={{ background: "radial-gradient(circle, #d97706, transparent 70%)" }} />
      </div>

      {/* Golden top strip */}
      <div className="absolute top-0 inset-x-0 h-[2px] bg-gradient-to-r from-transparent via-amber-400/80 to-transparent" />

      {/* Background image */}
      {achievement.image_url && (
        <div className="absolute inset-0 overflow-hidden rounded-[22px] pointer-events-none">
          <img src={achievement.image_url} alt="" className="w-full h-full object-cover opacity-[0.06]" />
        </div>
      )}

      <div className="relative z-10 flex flex-col md:flex-row gap-6 p-6 md:p-8 flex-1">
        {/* Left: icon + rank badge */}
        <div className="flex items-start gap-5">
          <div className="relative">
            <div className={cn(
              "w-20 h-20 rounded-[18px] border-2 flex items-center justify-center text-4xl transition-transform duration-300 group-hover:scale-110 shadow-lg",
              accent.bg, accent.border,
            )}
              style={{ boxShadow: `0 0 32px ${accent.glow}` }}>
              {achievement.icon}
            </div>
            {/* Crown badge */}
            <div className="absolute -top-2 -right-2 w-7 h-7 rounded-full bg-amber-500/20 border border-amber-400/50 flex items-center justify-center text-sm">
              🥇
            </div>
          </div>

          {/* Mobile: title next to icon */}
          <div className="flex md:hidden flex-col justify-center">
            <span className={cn("text-[10px] uppercase tracking-widest font-medium mb-1", accent.text)}>
              {achievement.category} · Most Recent
            </span>
            <h2 className="text-white font-bold text-lg leading-tight">{achievement.title}</h2>
          </div>
        </div>

        {/* Right: text content */}
        <div className="flex-1 flex flex-col justify-between gap-3">
          <div>
            {/* Desktop: title */}
            <div className="hidden md:flex items-center gap-2 mb-1">
              <span className={cn("text-[10px] uppercase tracking-widest font-medium", accent.text)}>
                {achievement.category}
              </span>
              <span className="text-white/20 text-xs">·</span>
              <span className="text-amber-400/60 text-[10px] uppercase tracking-widest font-medium">Latest Achievement</span>
            </div>
            <h2 className="hidden md:block text-white font-bold text-2xl mb-2">{achievement.title}</h2>

            {achievement.description && (
              <p className="text-white/45 text-sm leading-relaxed line-clamp-2">{achievement.description}</p>
            )}
          </div>

          <div className="flex flex-wrap items-center gap-3">
            {/* Reward */}
            {achievement.reward_title && (
              <div className="flex items-center gap-2 bg-amber-500/[0.1] border border-amber-500/20 rounded-xl px-3 py-2">
                <Gift className="w-3.5 h-3.5 text-amber-400/80" />
                <span className="text-amber-300/80 text-xs font-medium">{achievement.reward_title}</span>
              </div>
            )}

            {/* Date */}
            <div className="flex items-center gap-1.5 text-white/30 text-xs">
              <Calendar className="w-3.5 h-3.5" />
              <span>{formatDate(achievement.completed_at || achievement.updated_at)}</span>
            </div>

            {/* Share button */}
            <button
              onClick={(e) => { e.preventDefault(); e.stopPropagation(); onShare(); }}
              className="flex items-center gap-1.5 border border-white/[0.08] bg-white/[0.04] hover:bg-white/[0.08] rounded-xl px-3 py-2 text-white/40 hover:text-white/70 text-xs transition-all">
              <Share2 className="w-3 h-3" />
              Share
            </button>
          </div>
        </div>
      </div>
    </Link>
  );
}

/* ── Stats bar ───────────────────────────────────────────────────────────── */

function StatPill({ label, value, sub, color }: { label: string; value: string | number; sub?: string; color: string }) {
  return (
    <div className="flex flex-col gap-0.5 px-5 py-3.5 rounded-[14px] border border-white/[0.06] bg-white/[0.025]">
      <span className={cn("text-2xl font-bold tabular-nums", color)}>{value}</span>
      <span className="text-white/40 text-xs">{label}</span>
      {sub && <span className="text-white/20 text-[10px]">{sub}</span>}
    </div>
  );
}

/* ── Page ─────────────────────────────────────────────────────────────────── */

export default function TrophyCasePage() {
  const { achievements, loading } = useAchievements();
  const [shareTarget, setShareTarget] = useState<Achievement | null>(null);
  const [categoryFilter, setCategoryFilter] = useState<string>("all");

  /* ── Derived data ─────────────────────────────────────────────────────── */
  const completed = useMemo(() =>
    achievements
      .filter(a => resolveAchievementStatus(a) === "completed")
      .sort((a, b) =>
        new Date(b.completed_at || b.updated_at).getTime() -
        new Date(a.completed_at || a.updated_at).getTime()
      ),
    [achievements],
  );

  const categories = useMemo(() => {
    const cats = new Set(completed.map(a => a.category));
    return ["all", ...Array.from(cats)];
  }, [completed]);

  const filtered = useMemo(() =>
    categoryFilter === "all" ? completed : completed.filter(a => a.category === categoryFilter),
    [completed, categoryFilter],
  );

  const rewardClaimed  = completed.filter(a => a.reward_claim).length;
  const rewardPending  = completed.filter(a => a.reward_title && !a.reward_claim).length;
  const latestStreak   = useMemo(() => {
    // Count consecutive months with at least 1 completion
    if (!completed.length) return 0;
    let streak = 1;
    for (let i = 0; i < completed.length - 1; i++) {
      const d1 = new Date(completed[i].completed_at || completed[i].updated_at);
      const d2 = new Date(completed[i + 1].completed_at || completed[i + 1].updated_at);
      const diff = (d1.getFullYear() - d2.getFullYear()) * 12 + (d1.getMonth() - d2.getMonth());
      if (diff <= 1) streak++;
      else break;
    }
    return streak;
  }, [completed]);

  const rank = getTrophyRank(completed.length);

  /* ── Featured = most recent ───────────────────────────────────────────── */
  const featured  = filtered[0] ?? null;
  const rest       = filtered.slice(1);

  return (
    <div className="min-h-full bg-[#0a0a0d] text-white">

      {/* ── Keyframes ─────────────────────────────────────────────────────── */}
      <style>{`
        @keyframes tc-shimmer {
          0%   { transform: translateX(-100%); }
          100% { transform: translateX(100%); }
        }
        @keyframes tc-float {
          0%, 100% { transform: translateY(0px); }
          50%       { transform: translateY(-6px); }
        }
        @keyframes tc-pulse-gold {
          0%, 100% { opacity: 0.5; }
          50%       { opacity: 1; }
        }
        .tc-shimmer { animation: tc-shimmer 2.8s linear infinite; }
        .tc-float   { animation: tc-float 4s ease-in-out infinite; }
        .tc-pulse   { animation: tc-pulse-gold 2s ease-in-out infinite; }
      `}</style>

      {/* ── Hero ──────────────────────────────────────────────────────────── */}
      <div className="relative overflow-hidden border-b border-white/[0.04]">
        {/* Background radials */}
        <div className="pointer-events-none absolute inset-0">
          <div className="absolute -left-16 -top-32 w-[480px] h-[480px] rounded-full opacity-15 blur-3xl"
            style={{ background: "radial-gradient(circle, #d97706, transparent 65%)" }} />
          <div className="absolute right-0 top-0 w-[360px] h-[360px] rounded-full opacity-8 blur-3xl"
            style={{ background: "radial-gradient(circle, #7c3aed, transparent 65%)" }} />
        </div>

        <div className="relative z-10 max-w-5xl mx-auto px-4 sm:px-6 py-10">
          {/* Back link */}
          <Link href="/achievements"
            className="inline-flex items-center gap-1.5 text-white/35 hover:text-white/70 text-sm mb-7 transition-colors group">
            <ArrowLeft className="w-4 h-4 transition-transform group-hover:-translate-x-0.5" />
            Achievements
          </Link>

          {/* Title row */}
          <div className="flex flex-col sm:flex-row sm:items-end gap-4 sm:gap-6 mb-6">
            {/* Big trophy icon */}
            <div className="relative tc-float shrink-0">
              <div className="w-16 h-16 rounded-[18px] bg-amber-500/15 border border-amber-400/30 flex items-center justify-center"
                style={{ boxShadow: "0 0 32px rgba(245,158,11,0.25), inset 0 1px 0 rgba(255,255,255,0.06)" }}>
                <Trophy className="w-8 h-8 text-amber-400" />
              </div>
              {/* Shimmer sweep */}
              <div className="absolute inset-0 overflow-hidden rounded-[18px] pointer-events-none">
                <div className="absolute inset-y-0 w-1/2 bg-gradient-to-r from-transparent via-amber-300/20 to-transparent tc-shimmer" />
              </div>
            </div>

            <div className="flex-1">
              <div className="flex items-center gap-2 mb-1">
                <span className="text-amber-400/60 text-xs uppercase tracking-widest font-medium">Hall of Fame</span>
                <div className="flex items-center gap-1 px-2 py-0.5 rounded-full bg-white/[0.04] border border-white/[0.07]">
                  <span className={cn("text-xs", rank.color)}>{rank.icon}</span>
                  <span className={cn("text-xs font-medium", rank.color)}>{rank.label}</span>
                </div>
              </div>
              <h1 className="text-3xl sm:text-4xl font-bold tracking-tight">
                Trophy{" "}
                <span className="bg-clip-text text-transparent"
                  style={{ backgroundImage: "linear-gradient(135deg, #fbbf24 0%, #f59e0b 40%, #d97706 100%)" }}>
                  Case
                </span>
              </h1>
              <p className="text-white/35 text-sm mt-1">{rank.desc} · {completed.length} achievements unlocked</p>
            </div>
          </div>

          {/* Stats row */}
          {!loading && (
            <div className="flex flex-wrap gap-2 sm:gap-3">
              <StatPill label="Unlocked" value={completed.length} color="text-amber-300" />
              <StatPill label="Rewards claimed" value={rewardClaimed} sub={rewardPending > 0 ? `${rewardPending} pending` : undefined} color="text-green-300" />
              <StatPill label="Win streak" value={`${latestStreak}mo`} color="text-violet-300" />
              <StatPill label="Categories" value={categories.length - 1} color="text-sky-300" />
            </div>
          )}
        </div>
      </div>

      {/* ── Content ───────────────────────────────────────────────────────── */}
      <div className="max-w-5xl mx-auto px-4 sm:px-6 py-8 space-y-8">

        {/* Loading */}
        {loading && (
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
            {Array.from({ length: 6 }).map((_, i) => (
              <Skeleton key={i} className="h-48 rounded-[18px] bg-white/[0.03]" />
            ))}
          </div>
        )}

        {/* Empty state */}
        {!loading && completed.length === 0 && (
          <div className="flex flex-col items-center justify-center py-24 gap-6">
            <div className="w-20 h-20 rounded-[20px] bg-amber-500/[0.06] border border-amber-500/15 flex items-center justify-center">
              <Trophy className="w-9 h-9 text-amber-500/30" />
            </div>
            <div className="text-center">
              <h3 className="text-white/50 font-semibold text-lg mb-1">No trophies yet</h3>
              <p className="text-white/25 text-sm">Complete your first achievement to start your collection.</p>
            </div>
            <Link href="/achievements"
              className="flex items-center gap-2 px-5 py-2.5 rounded-[12px] bg-amber-500/10 border border-amber-500/20 text-amber-300 text-sm font-medium hover:bg-amber-500/15 transition-colors">
              <Sparkles className="w-4 h-4" />
              View Achievements
            </Link>
          </div>
        )}

        {!loading && completed.length > 0 && (
          <>
            {/* Category filter tabs */}
            {categories.length > 2 && (
              <div className="flex gap-2 overflow-x-auto pb-1 -mx-1 px-1 scrollbar-hide">
                {categories.map(cat => (
                  <button key={cat}
                    onClick={() => setCategoryFilter(cat)}
                    className={cn(
                      "shrink-0 px-3.5 py-1.5 rounded-[10px] text-xs font-medium border transition-all",
                      categoryFilter === cat
                        ? "border-amber-500/30 bg-amber-500/10 text-amber-300"
                        : "border-white/[0.07] bg-white/[0.03] text-white/40 hover:text-white/60 hover:bg-white/[0.05]",
                    )}>
                    {cat === "all" ? `All (${completed.length})` : cat}
                  </button>
                ))}
              </div>
            )}

            {/* No results for filter */}
            {filtered.length === 0 && (
              <div className="text-center py-16 text-white/30 text-sm">
                No trophies in this category yet.
              </div>
            )}

            {/* Featured (most recent) */}
            {featured && (
              <div>
                <div className="flex items-center gap-2 mb-3">
                  <Crown className="w-4 h-4 text-amber-400/60" />
                  <span className="text-white/40 text-xs uppercase tracking-widest font-medium">Most Recent</span>
                </div>
                <FeaturedTrophy achievement={featured} onShare={() => setShareTarget(featured)} />
              </div>
            )}

            {/* Grid of rest */}
            {rest.length > 0 && (
              <div>
                <div className="flex items-center gap-2 mb-4">
                  <Medal className="w-4 h-4 text-white/30" />
                  <span className="text-white/35 text-xs uppercase tracking-widest font-medium">All Trophies</span>
                  <span className="text-white/20 text-xs">({rest.length})</span>
                </div>

                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                  {rest.map((achievement, i) => (
                    <TrophyCard
                      key={achievement.id}
                      achievement={achievement}
                      rank={i + 2}
                      onShare={() => setShareTarget(achievement)}
                    />
                  ))}
                </div>
              </div>
            )}

            {/* Bottom promo — go back to achievements */}
            <div className="relative overflow-hidden rounded-[18px] border border-white/[0.05] bg-white/[0.02] px-6 py-5 flex flex-col sm:flex-row items-start sm:items-center gap-4">
              <div className="flex-1">
                <div className="flex items-center gap-2 mb-1">
                  <Sparkles className="w-4 h-4 text-violet-400/70" />
                  <span className="text-white/50 text-xs uppercase tracking-widest">Keep going</span>
                </div>
                <p className="text-white/60 text-sm">
                  You have <span className="text-white/80 font-medium">
                    {achievements.filter(a => resolveAchievementStatus(a) === "in_progress").length} achievements
                  </span> in progress.
                </p>
              </div>
              <Link href="/achievements"
                className="shrink-0 flex items-center gap-2 px-4 py-2 rounded-[10px] bg-violet-500/10 border border-violet-500/20 text-violet-300 text-sm font-medium hover:bg-violet-500/15 transition-colors">
                View all
                <ChevronRight className="w-4 h-4" />
              </Link>
            </div>
          </>
        )}
      </div>

      {/* ── Share modal ───────────────────────────────────────────────────── */}
      {shareTarget && (
        <TrophyShareCard achievement={shareTarget} onClose={() => setShareTarget(null)} />
      )}
    </div>
  );
}