"use client";

import { useMemo, useState } from "react";
import Link from "next/link";
import { ArrowRight, Award, CheckCircle2, Gift, Lock, Plus, 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";

interface AchievementRewardsWidgetProps {
  achievements: Achievement[];
  loading?: boolean;
  onClaimReward?: (achievementId: string) => Promise<void>;
}

export function AchievementRewardsWidget({
  achievements,
  loading,
  onClaimReward,
}: AchievementRewardsWidgetProps) {
  const [claimingId, setClaimingId] = useState<string | null>(null);
  const isRewardClaimed = useNotificationStore((state) => state.isRewardClaimed);

  const model = useMemo(() => {
    const readyRewards = achievements
      .filter(
        (achievement) =>
          resolveAchievementStatus(achievement) === "completed" &&
          achievement.reward_title &&
          !achievement.reward_claim &&
          !isRewardClaimed(achievement.id),
      )
      .sort((a, b) => new Date(b.completed_at || b.updated_at).getTime() - new Date(a.completed_at || a.updated_at).getTime());

    const almostUnlocked = achievements
      .filter((achievement) => {
        const status = resolveAchievementStatus(achievement);
        const pct = getAchievementProgressPercent(achievement);
        return status !== "completed" && status !== "archived" && pct >= 60;
      })
      .sort((a, b) => getAchievementProgressPercent(b) - getAchievementProgressPercent(a));

    const topCandidate =
      readyRewards[0] ||
      almostUnlocked[0] ||
      [...achievements]
        .filter((achievement) => resolveAchievementStatus(achievement) !== "archived")
        .sort((a, b) => getAchievementProgressPercent(b) - getAchievementProgressPercent(a))[0] ||
      null;

    return {
      almostUnlocked,
      completedCount: achievements.filter((achievement) => resolveAchievementStatus(achievement) === "completed").length,
      claimedCount: achievements.filter((achievement) => achievement.reward_claim).length,
      readyRewards,
      starterCount: achievements.filter((achievement) => achievement.predefined).length,
      topCandidate,
    };
  }, [achievements, isRewardClaimed]);

  async function handleClaim(achievementId: string) {
    if (!onClaimReward) return;
    setClaimingId(achievementId);
    try {
      await onClaimReward(achievementId);
      playRewardClaim();
    } finally {
      setClaimingId(null);
    }
  }

  const featured = model.topCandidate;
  const featuredPct = featured ? getAchievementProgressPercent(featured) : 0;
  const rewardReady = featured ? model.readyRewards.some((achievement) => achievement.id === featured.id) : false;

  return (
    <div className="group/widget overflow-hidden rounded-2xl border border-border/50 bg-card transition-all duration-200 hover:border-amber-500/20 hover:shadow-[0_0_30px_-10px_rgba(245,158,11,0.14)]">
      <div className="flex items-center justify-between px-5 py-4">
        <div className="flex items-center gap-3">
          <div className="flex h-8 w-8 items-center justify-center rounded-xl bg-gradient-to-br from-amber-500/20 to-violet-600/10 ring-1 ring-amber-500/10">
            <Award className="h-4 w-4 text-amber-500" />
          </div>
          <div>
            <h2 className="text-sm font-semibold tracking-tight">Rewards</h2>
            <p className="text-[10px] text-muted-foreground">
              {model.readyRewards.length > 0
                ? `${model.readyRewards.length} bereit`
                : model.almostUnlocked.length > 0
                  ? `${model.almostUnlocked.length} fast frei`
                  : `${achievements.length} Achievements`}
            </p>
          </div>
          {model.readyRewards.length > 0 && (
            <span className="flex items-center gap-0.5 rounded-full bg-amber-500/10 px-2 py-0.5 text-[10px] font-bold text-amber-500 ring-1 ring-amber-500/10">
              <Gift className="h-3 w-3" />
              {model.readyRewards.length}
            </span>
          )}
        </div>
        <Link
          href="/achievements"
          className="flex items-center gap-1 text-[11px] font-medium text-muted-foreground transition-colors hover:text-amber-500"
        >
          Alle <ArrowRight className="h-3 w-3" />
        </Link>
      </div>

      <div className="border-t border-border/50">
        {loading ? (
          <div className="space-y-4 p-5">
            <div className="h-28 animate-pulse rounded-2xl bg-muted/40" />
            <div className="grid grid-cols-1 gap-2 sm:grid-cols-3">
              <div className="h-16 animate-pulse rounded-xl bg-muted/35" />
              <div className="h-16 animate-pulse rounded-xl bg-muted/35" />
              <div className="h-16 animate-pulse rounded-xl bg-muted/35" />
            </div>
          </div>
        ) : achievements.length === 0 ? (
          <div className="px-5 py-10 text-center">
            <div className="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-2xl bg-gradient-to-br from-amber-500/10 to-violet-500/10 ring-1 ring-amber-500/5">
              <Trophy className="h-5 w-5 text-amber-400" />
            </div>
            <p className="mb-1 text-sm font-medium text-muted-foreground">Keine Achievements</p>
            <Link
              href="/achievements"
              className="inline-flex items-center gap-1 text-xs text-amber-500 transition-colors hover:text-amber-400"
            >
              <Plus className="h-3 w-3" />
              Starter laden
            </Link>
          </div>
        ) : (
          <div className="space-y-4 p-5">
            {featured && (
              <div
                className={cn(
                  "overflow-hidden rounded-2xl border",
                  rewardReady
                    ? "border-amber-500/20 bg-amber-500/[0.055]"
                    : "border-white/[0.06] bg-white/[0.025]",
                )}
              >
                <Link href={`/achievements/${featured.id}`} className="block p-4 transition-colors hover:bg-white/[0.025]">
                  <div className="flex items-start gap-3">
                    <div
                      className={cn(
                        "flex h-10 w-10 shrink-0 items-center justify-center rounded-xl",
                        rewardReady ? "bg-amber-500/15" : "bg-violet-500/12",
                      )}
                    >
                      {rewardReady ? (
                        <Gift className="h-4 w-4 text-amber-400" />
                      ) : (
                        <span className="text-lg">{featured.icon || "🏆"}</span>
                      )}
                    </div>
                    <div className="min-w-0 flex-1">
                      <div className="mb-1 flex items-center gap-2">
                        <p className="truncate text-[13px] font-semibold text-foreground">{featured.title}</p>
                        {featured.predefined && (
                          <span className="rounded-full bg-violet-500/10 px-2 py-0.5 text-[9px] font-bold uppercase tracking-[0.12em] text-violet-400">
                            Starter
                          </span>
                        )}
                      </div>
                      <p className="truncate text-[11px] text-muted-foreground">
                        {rewardReady
                          ? featured.reward_title
                          : featured.reward_title || "Reward noch definieren"}
                      </p>
                    </div>
                    <span
                      className={cn(
                        "font-mono text-[12px] font-bold tabular-nums",
                        rewardReady ? "text-amber-500" : featuredPct >= 70 ? "text-violet-500" : "text-muted-foreground",
                      )}
                    >
                      {featuredPct}%
                    </span>
                  </div>
                  <div className="mt-4 h-1.5 overflow-hidden rounded-full bg-muted/80">
                    <div
                      className={cn(
                        "h-full rounded-full transition-all duration-700",
                        rewardReady
                          ? "bg-gradient-to-r from-amber-500 to-yellow-400"
                          : "bg-gradient-to-r from-violet-500 to-indigo-400",
                      )}
                      style={{ width: `${featuredPct}%` }}
                    />
                  </div>
                </Link>

                {rewardReady && onClaimReward && (
                  <button
                    type="button"
                    onClick={() => void handleClaim(featured.id)}
                    disabled={claimingId === featured.id}
                    className="flex w-full items-center justify-center gap-2 border-t border-amber-500/15 bg-amber-500/[0.08] px-4 py-3 text-[12px] font-bold text-amber-200 transition-all hover:bg-amber-500/[0.13] disabled:opacity-50"
                  >
                    <Gift className="h-3.5 w-3.5" />
                    {claimingId === featured.id ? "Claim läuft…" : "Reward beanspruchen"}
                  </button>
                )}
              </div>
            )}

            <div className="grid grid-cols-1 gap-2 sm:grid-cols-3">
              <DashboardRewardStat
                icon={<Trophy className="h-3.5 w-3.5" />}
                label="Erreicht"
                value={String(model.completedCount)}
                tone="amber"
              />
              <DashboardRewardStat
                icon={<CheckCircle2 className="h-3.5 w-3.5" />}
                label="Claimed"
                value={String(model.claimedCount)}
                tone="emerald"
              />
              <DashboardRewardStat
                icon={<Sparkles className="h-3.5 w-3.5" />}
                label="Starter"
                value={String(model.starterCount)}
                tone="violet"
              />
            </div>

            {model.almostUnlocked.length > 0 && !rewardReady && (
              <div className="rounded-2xl border border-violet-500/12 bg-violet-500/[0.035] p-3">
                <div className="mb-2 flex items-center gap-2">
                  <Lock className="h-3.5 w-3.5 text-violet-400" />
                  <p className="text-[11px] font-bold uppercase tracking-[0.14em] text-violet-300/70">
                    Fast freigeschaltet
                  </p>
                </div>
                <div className="space-y-2">
                  {model.almostUnlocked.slice(0, 2).map((achievement) => (
                    <Link
                      key={achievement.id}
                      href={`/achievements/${achievement.id}`}
                      className="flex items-center justify-between gap-3 rounded-xl px-2 py-1.5 transition-colors hover:bg-white/[0.035]"
                    >
                      <span className="truncate text-[12px] text-foreground/80">{achievement.title}</span>
                      <span className="font-mono text-[11px] font-bold text-violet-400">
                        {getAchievementProgressPercent(achievement)}%
                      </span>
                    </Link>
                  ))}
                </div>
              </div>
            )}
          </div>
        )}
      </div>
    </div>
  );
}

function DashboardRewardStat({
  icon,
  label,
  tone,
  value,
}: {
  icon: React.ReactNode;
  label: string;
  tone: "amber" | "emerald" | "violet";
  value: string;
}) {
  return (
    <div
      className={cn(
        "rounded-xl border p-3",
        tone === "amber" && "border-amber-500/12 bg-amber-500/[0.04]",
        tone === "emerald" && "border-emerald-500/12 bg-emerald-500/[0.04]",
        tone === "violet" && "border-violet-500/12 bg-violet-500/[0.04]",
      )}
    >
      <div
        className={cn(
          "mb-2 flex h-7 w-7 items-center justify-center rounded-lg",
          tone === "amber" && "bg-amber-500/10 text-amber-500",
          tone === "emerald" && "bg-emerald-500/10 text-emerald-500",
          tone === "violet" && "bg-violet-500/10 text-violet-500",
        )}
      >
        {icon}
      </div>
      <p className="text-[18px] font-bold leading-none tracking-tight text-foreground">{value}</p>
      <p className="mt-1 text-[10px] text-muted-foreground">{label}</p>
    </div>
  );
}