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

import { useMemo, useState } from "react";
import { CheckCircle2, Gift, Lock, Sparkles, Trophy } from "lucide-react";
import {
  getAchievementProgressPercent,
  resolveAchievementStatus,
} from "@/lib/achievements";
import { playRewardClaim } from "@/lib/sounds";
import { useNotificationStore } from "@/stores/notification-store";
import { cn } from "@/lib/utils";
import type { Achievement } from "@/types";

/* ── Celebration particle config ─────────────────────────────────────────── */

interface Particle {
  id: number;
  x: number;   // % from left
  y: number;   // % from top
  size: number;
  color: string;
  duration: number;
  delay: number;
  rotation: number;
  shape: "circle" | "star" | "square";
}

const PARTICLE_COLORS = [
  "#fbbf24", "#f59e0b", "#fcd34d", "#fde68a",
  "#fb923c", "#f97316", "#ffffff", "#a78bfa",
];

function generateParticles(): Particle[] {
  return Array.from({ length: 20 }, (_, i) => ({
    id: i,
    x: 10 + (i * 4.5) % 80,
    y: 30 + (i * 7) % 40,
    size: 4 + (i % 5) * 2,
    color: PARTICLE_COLORS[i % PARTICLE_COLORS.length],
    duration: 900 + (i * 137) % 800,
    delay: (i * 89) % 600,
    rotation: (i * 73) % 360,
    shape: (["circle", "star", "square"] as const)[i % 3],
  }));
}

/* ── Component ───────────────────────────────────────────────────────────── */

export function RewardDestinationCard({
  achievement,
  onClaimReward,
}: {
  achievement: Achievement;
  onClaimReward?: (achievementId: string) => Promise<void>;
}) {
  const isCompleted = resolveAchievementStatus(achievement) === "completed";
  const pct         = getAchievementProgressPercent(achievement);
  const hasReward   = !!achievement.reward_title;
  const hasImage    = !!achievement.reward_image_url;

  const { claimReward, isRewardClaimed, addSmartNotification } = useNotificationStore();
  const isClaimed = Boolean(achievement.reward_claim) || isRewardClaimed(achievement.id);

  const [celebrating, setCelebrating] = useState(false);
  const [claiming, setClaiming]       = useState(false);
  const [claimError, setClaimError]   = useState("");

  // Stable particle set — computed once so no hydration mismatch
  const particles = useMemo(generateParticles, []);

  async function handleClaim() {
    if (claiming || isClaimed || !isCompleted || !hasReward) return;
    setClaiming(true);
    setClaimError("");
    try {
      if (onClaimReward) await onClaimReward(achievement.id);
      claimReward(achievement.id);
      playRewardClaim();
      setCelebrating(true);
      addSmartNotification({
        id:        `reward-claimed-${achievement.id}-${Date.now()}`,
        type:      "reward_claimable",
        level:     "reward",
        title:     "Belohnung beansprucht 🎁",
        body:      achievement.reward_title || "Dein Reward wartet auf dich",
        link:      `/achievements/${achievement.id}`,
        createdAt: Date.now(),
      });
      setTimeout(() => setCelebrating(false), 3200);
    } catch (error) {
      console.warn("Could not persist reward claim", error);
      setClaimError(
        error instanceof Error
          ? error.message
          : "Reward konnte gerade nicht gespeichert werden.",
      );
    } finally {
      setClaiming(false);
    }
  }

  const rewardReady = isCompleted && hasReward && !isClaimed;

  return (
    <>
      {/* ── Keyframe definitions ─────────────────────────────────────── */}
      <style>{`
        @keyframes mb-particle-rise {
          0%   { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
          60%  { opacity: 0.8; }
          100% { opacity: 0; transform: translateY(-180px) scale(0.1) rotate(var(--rot)); }
        }
        @keyframes mb-shimmer-sweep {
          0%   { transform: translateX(-120%) skewX(-18deg); }
          100% { transform: translateX(280%) skewX(-18deg); }
        }
        @keyframes mb-pulse-ring {
          0%   { transform: scale(1);   opacity: 0.55; }
          100% { transform: scale(1.55); opacity: 0; }
        }
        @keyframes mb-claim-banner-in {
          0%   { opacity: 0; transform: translateY(14px) scale(0.95); }
          100% { opacity: 1; transform: translateY(0) scale(1); }
        }
        @keyframes mb-star-spin {
          0%   { transform: rotate(0deg) scale(1); }
          50%  { transform: rotate(180deg) scale(1.2); }
          100% { transform: rotate(360deg) scale(1); }
        }
        .mb-particle { animation: mb-particle-rise var(--dur) ease-out var(--delay) forwards; }
        .mb-shimmer  { animation: mb-shimmer-sweep 1.8s ease-in-out infinite; }
        .mb-pulse-ring { animation: mb-pulse-ring 1.1s ease-out infinite; }
        .mb-claim-in   { animation: mb-claim-banner-in 0.45s cubic-bezier(0.34,1.56,0.64,1) forwards; }
        .mb-star-spin  { animation: mb-star-spin 2s linear infinite; }
      `}</style>

      <div className={cn(
        "relative overflow-hidden rounded-3xl border transition-all duration-500",
        isClaimed
          ? "border-emerald-500/25 shadow-[0_0_80px_rgba(16,185,129,0.10)]"
          : rewardReady
            ? "border-amber-500/30 shadow-[0_0_80px_rgba(245,158,11,0.14)]"
            : isCompleted
              ? "border-amber-500/20 shadow-[0_0_60px_rgba(217,119,6,0.08)]"
              : "border-white/[0.07]",
        "bg-[#0e0c15]",
      )}>

        {/* ── Celebration particle burst ──────────────────────────────── */}
        {celebrating && (
          <div className="pointer-events-none absolute inset-0 z-30 overflow-hidden rounded-3xl">
            {particles.map((p) => (
              <div
                key={p.id}
                className="mb-particle absolute"
                style={{
                  left: `${p.x}%`,
                  top:  `${p.y}%`,
                  width:  p.size,
                  height: p.size,
                  backgroundColor: p.color,
                  borderRadius: p.shape === "circle" ? "50%" : p.shape === "square" ? "2px" : "0",
                  clipPath: p.shape === "star" ? "polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)" : undefined,
                  "--rot":  `${p.rotation}deg`,
                  "--dur":  `${p.duration}ms`,
                  "--delay":`${p.delay}ms`,
                } as React.CSSProperties}
              />
            ))}

            {/* Central burst rings */}
            <div className="absolute left-1/2 top-1/3 -translate-x-1/2 -translate-y-1/2">
              <div className="mb-pulse-ring absolute h-24 w-24 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-amber-400/60" />
              <div className="mb-pulse-ring absolute h-24 w-24 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-amber-400/60" style={{ animationDelay: "0.35s" }} />
            </div>
          </div>
        )}

        {/* ── Reward-ready pulsing ring (ambient glow on card border) ── */}
        {rewardReady && !celebrating && (
          <div className="pointer-events-none absolute inset-0 z-10 rounded-3xl">
            <div className="mb-pulse-ring absolute inset-0 rounded-3xl border border-amber-400/30" />
          </div>
        )}

        {/* ── Image / placeholder hero ────────────────────────────────── */}
        <div className="relative min-h-[280px] overflow-hidden">
          {hasImage ? (
            <>
              <img
                src={achievement.reward_image_url!}
                alt={achievement.reward_title || "Reward"}
                className={cn(
                  "h-full min-h-[280px] w-full object-cover transition-all duration-700",
                  !isCompleted && "scale-105 blur-[2px] brightness-50 saturate-50",
                  isCompleted && isClaimed && "brightness-110 saturate-110",
                  celebrating && "brightness-125 saturate-125",
                )}
              />
              <div className="absolute inset-0 bg-gradient-to-t from-[#0e0c15] via-[#0e0c15]/35 to-transparent" />
            </>
          ) : (
            <div className={cn(
              "flex min-h-[280px] items-center justify-center transition-all duration-700",
              isClaimed
                ? "bg-[radial-gradient(ellipse_at_top,#064e3b_0%,#065f46_18%,#0e0c15_58%)]"
                : celebrating
                  ? "bg-[radial-gradient(ellipse_at_top,#92400e_0%,#b45309_20%,#0e0c15_55%)]"
                  : rewardReady
                    ? "bg-[radial-gradient(ellipse_at_top,#78350f_0%,#92400e_15%,#0e0c15_55%)]"
                    : isCompleted
                      ? "bg-[radial-gradient(ellipse_at_top,#78350f_0%,#92400e_18%,#0e0c15_58%)]"
                      : "bg-[radial-gradient(ellipse_at_top,#2e1065_0%,#3730a3_18%,#0e0c15_58%)]",
            )}>
              <div className={cn(
                "flex h-20 w-20 items-center justify-center rounded-3xl border backdrop-blur-sm transition-all duration-500",
                isClaimed
                  ? "border-emerald-500/30 bg-emerald-500/15 shadow-[0_0_40px_rgba(16,185,129,0.20)]"
                  : celebrating
                    ? "border-amber-400/50 bg-amber-500/20 shadow-[0_0_60px_rgba(245,158,11,0.40)] scale-110"
                    : rewardReady
                      ? "border-amber-500/35 bg-amber-500/18 shadow-[0_0_40px_rgba(245,158,11,0.22)]"
                      : isCompleted
                        ? "border-amber-500/30 bg-amber-500/15"
                        : "border-white/[0.08] bg-white/[0.06]",
              )}>
                {isClaimed
                  ? <CheckCircle2 className="h-9 w-9 text-emerald-400" />
                  : isCompleted
                    ? <Trophy className={cn("h-9 w-9 text-amber-400", celebrating && "mb-star-spin")} />
                    : <Gift className="h-9 w-9 text-white/30" />
                }
              </div>
            </div>
          )}

          {/* Overlay badge + title */}
          <div className="absolute inset-x-0 bottom-0 p-5">
            {isClaimed ? (
              <div>
                <div className="mb-3 inline-flex items-center gap-2 rounded-full border border-emerald-500/30 bg-emerald-500/[0.15] px-3 py-1.5 backdrop-blur-sm">
                  <CheckCircle2 className="h-3.5 w-3.5 text-emerald-400" />
                  <span className="text-[10px] font-bold uppercase tracking-[0.14em] text-emerald-300">
                    Reward beansprucht ✓
                  </span>
                </div>
                <h3 className="text-[26px] font-bold leading-tight tracking-tight text-white">
                  {achievement.reward_title || "Genossen!"}
                </h3>
              </div>
            ) : celebrating ? (
              <div className="mb-claim-in">
                <div className="mb-3 inline-flex items-center gap-2 rounded-full border border-amber-400/40 bg-amber-500/[0.20] px-3 py-1.5 backdrop-blur-sm">
                  <span className="text-[13px]">🎉</span>
                  <span className="text-[10px] font-bold uppercase tracking-[0.14em] text-amber-300">
                    Glückwunsch!
                  </span>
                </div>
                <h3 className="text-[26px] font-bold leading-tight tracking-tight text-white">
                  {achievement.reward_title || "Reward beansprucht!"}
                </h3>
              </div>
            ) : isCompleted ? (
              <div>
                <div className={cn(
                  "mb-3 inline-flex items-center gap-2 rounded-full border px-3 py-1.5 backdrop-blur-sm",
                  rewardReady
                    ? "border-amber-400/35 bg-amber-500/[0.18] animate-pulse"
                    : "border-amber-500/30 bg-amber-500/[0.15]",
                )}>
                  <Trophy className="h-3.5 w-3.5 text-amber-400" />
                  <span className="text-[10px] font-bold uppercase tracking-[0.14em] text-amber-300">
                    {rewardReady ? "✦ Reward freigeschaltet — Jetzt beanspruchen" : "Reward freigeschaltet"}
                  </span>
                </div>
                <h3 className="text-[26px] font-bold leading-tight tracking-tight text-white">
                  {achievement.reward_title || "Achievement complete"}
                </h3>
              </div>
            ) : hasReward ? (
              <div>
                <div className="mb-3 inline-flex items-center gap-2 rounded-full border border-white/[0.10] bg-black/30 px-3 py-1.5 backdrop-blur-sm">
                  <Lock className="h-3.5 w-3.5 text-white/40" />
                  <span className="text-[10px] font-bold uppercase tracking-[0.14em] text-white/40">
                    Gesperrt · {100 - pct}% verbleibend
                  </span>
                </div>
                <h3 className="text-[22px] font-bold leading-tight tracking-tight text-white/50">
                  {achievement.reward_title}
                </h3>
              </div>
            ) : (
              <div>
                <div className="mb-2 inline-flex items-center gap-2 rounded-full border border-white/[0.08] bg-black/20 px-3 py-1.5 backdrop-blur-sm">
                  <Gift className="h-3.5 w-3.5 text-white/25" />
                  <span className="text-[10px] font-bold uppercase tracking-[0.12em] text-white/25">
                    Reward destination
                  </span>
                </div>
                <p className="text-[15px] text-white/30">Definiere, wofür du arbeitest.</p>
              </div>
            )}
          </div>
        </div>

        {/* ── Body ─────────────────────────────────────────────────────── */}
        <div className="space-y-4 p-6">

          {/* Description */}
          {achievement.reward_description ? (
            <div>
              <p className="text-[10px] font-bold uppercase tracking-[0.16em] text-white/25">Reward</p>
              <p className={cn(
                "mt-2 text-[14px] leading-relaxed",
                isClaimed ? "text-emerald-100/80" : isCompleted ? "text-amber-100/80" : "text-white/55",
              )}>
                {achievement.reward_description}
              </p>
            </div>
          ) : !hasReward ? (
            <div className="rounded-2xl border border-dashed border-white/[0.06] bg-white/[0.01] p-4 text-center">
              <p className="text-[13px] text-white/25">
                Füge einen Reward hinzu, damit dieses Achievement sich lohnt.
              </p>
            </div>
          ) : null}

          {/* Why it matters */}
          {achievement.reward_why && (
            <div className={cn(
              "rounded-2xl border p-4",
              isClaimed
                ? "border-emerald-500/15 bg-emerald-500/[0.04]"
                : isCompleted
                  ? "border-amber-500/15 bg-amber-500/[0.04]"
                  : "border-white/[0.05] bg-white/[0.02]",
            )}>
              <div className="mb-2 flex items-center gap-1.5">
                <Sparkles className={cn(
                  "h-3 w-3",
                  isClaimed ? "text-emerald-400/60" : isCompleted ? "text-amber-400/60" : "text-white/20",
                )} />
                <p className={cn(
                  "text-[10px] font-bold uppercase tracking-[0.16em]",
                  isClaimed ? "text-emerald-300/50" : isCompleted ? "text-amber-300/50" : "text-white/20",
                )}>
                  Warum es wichtig ist
                </p>
              </div>
              <p className={cn(
                "text-[13px] italic leading-relaxed",
                isClaimed ? "text-emerald-100/60" : isCompleted ? "text-amber-100/60" : "text-white/40",
              )}>
                &ldquo;{achievement.reward_why}&rdquo;
              </p>
            </div>
          )}

          {claimError && (
            <div className="rounded-2xl border border-red-400/15 bg-red-500/[0.06] px-4 py-3 text-[12px] text-red-200/75">
              {claimError}
            </div>
          )}

          {/* ── CLAIM REWARD CTA ────────────────────────────────────── */}
          {isCompleted && hasReward && !isClaimed && !celebrating && (
            <button
              onClick={() => void handleClaim()}
              disabled={claiming}
              className={cn(
                "relative w-full overflow-hidden rounded-2xl border px-5 py-4 text-center font-bold transition-all duration-300",
                "border-amber-500/35 bg-gradient-to-br from-amber-500/[0.18] to-yellow-500/[0.09]",
                "hover:border-amber-400/55 hover:from-amber-500/[0.26] hover:to-yellow-500/[0.16] hover:shadow-[0_0_40px_rgba(245,158,11,0.20)]",
                "active:scale-[0.98] disabled:cursor-wait disabled:opacity-70",
              )}
            >
              {/* Shimmer sweep — loops slowly */}
              {!claiming && (
                <div
                  className="mb-shimmer pointer-events-none absolute inset-y-0 w-1/3 bg-gradient-to-r from-transparent via-amber-300/20 to-transparent"
                />
              )}
              {/* Glow halo */}
              <div className="pointer-events-none absolute inset-0 rounded-2xl shadow-[inset_0_1px_0_rgba(251,191,36,0.15),0_0_30px_rgba(245,158,11,0.12)]" />

              <div className="relative flex items-center justify-center gap-3">
                <span className="text-[24px]">🎁</span>
                <div className="text-left">
                  <p className="text-[14px] font-bold text-amber-200">
                    {claiming ? "Wird beansprucht…" : "Reward beanspruchen"}
                  </p>
                  <p className="text-[11px] text-amber-300/55">
                    {claiming ? "Einen Moment" : "Du hast es dir verdient ✦"}
                  </p>
                </div>
                <span className="ml-auto text-[18px] text-amber-300/50">→</span>
              </div>
            </button>
          )}

          {/* ── CELEBRATION BANNER ──────────────────────────────────── */}
          {celebrating && (
            <div className="mb-claim-in relative overflow-hidden rounded-2xl border border-amber-400/35 bg-gradient-to-br from-amber-500/[0.16] to-yellow-500/[0.08] p-5 text-center">
              <div className="pointer-events-none absolute inset-0 overflow-hidden">
                <div className="mb-shimmer absolute inset-y-0 w-1/2 bg-gradient-to-r from-transparent via-amber-200/12 to-transparent" />
              </div>
              <div className="relative">
                <p className="text-4xl">🏆</p>
                <p className="mt-3 text-[18px] font-black tracking-tight text-amber-200">
                  Reward beansprucht!
                </p>
                <p className="mt-1.5 text-[13px] text-white/50">
                  Genieß {achievement.reward_title ? `„${achievement.reward_title}"` : "deinen Reward"}. Du hast hart dafür gearbeitet.
                </p>
              </div>
            </div>
          )}

          {/* ── ALREADY CLAIMED ─────────────────────────────────────── */}
          {isCompleted && hasReward && isClaimed && !celebrating && (
            <div className="rounded-2xl border border-emerald-500/20 bg-gradient-to-br from-emerald-500/[0.07] to-teal-500/[0.04] p-5 text-center">
              <div className="mx-auto mb-2 flex h-10 w-10 items-center justify-center rounded-full border border-emerald-500/25 bg-emerald-500/12">
                <CheckCircle2 className="h-5 w-5 text-emerald-400" />
              </div>
              <p className="text-[14px] font-bold text-emerald-300">Reward beansprucht ✓</p>
              <p className="mt-1 text-[12px] text-white/30">
                Du hast diesen Reward genossen. Weiter so! 🚀
              </p>
            </div>
          )}

          {/* ── COMPLETED but no reward set ─────────────────────────── */}
          {isCompleted && !hasReward && (
            <div className="rounded-2xl border border-amber-500/18 bg-gradient-to-br from-amber-500/[0.07] to-yellow-500/[0.03] p-5 text-center">
              <p className="text-3xl">🏆</p>
              <p className="mt-2 text-[14px] font-bold text-amber-300">Achievement abgeschlossen!</p>
              <p className="mt-1 text-[12px] text-white/32">Du hast es geschafft. Füge einen Reward hinzu, um die Erfahrung zu vervollständigen.</p>
            </div>
          )}
        </div>
      </div>
    </>
  );
}