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

import Link from "next/link";
import { CheckCircle2, Copy, Gift, Lock, Pencil, Trash2 } from "lucide-react";
import {
  formatAchievementValue,
  getAchievementProgressPercent,
  resolveAchievementProgress,
  resolveAchievementStatus,
} from "@/lib/achievements";
import { useNotificationStore } from "@/stores/notification-store";
import { cn } from "@/lib/utils";
import type { Achievement } from "@/types";

/* ── State visual config ──────────────────────────────────────────────────── */

const STATE = {
  not_started: {
    label:       "Not started",
    badge:       "border-white/[0.08] bg-white/[0.04] text-white/30",
    cardBorder:  "border-white/[0.07] hover:border-white/[0.12]",
    bar:         "bg-white/20",
    barGlow:     "",
    glow:        "",
    dotColor:    "bg-white/25",
  },
  in_progress: {
    label:       "In progress",
    badge:       "border-violet-500/25 bg-violet-500/[0.12] text-violet-700 dark:text-violet-300",
    cardBorder:  "border-violet-500/[0.12] hover:border-violet-500/25",
    bar:         "bg-[linear-gradient(90deg,#6d28d9,#8b5cf6,#a78bfa)]",
    barGlow:     "shadow-[0_0_12px_rgba(139,92,246,0.55)]",
    glow:        "shadow-[0_24px_64px_rgba(109,40,217,0.14)]",
    dotColor:    "bg-violet-400",
  },
  completed: {
    label:       "Unlocked",
    badge:       "border-amber-500/25 bg-amber-500/[0.12] text-amber-700 dark:text-amber-300",
    cardBorder:  "border-amber-500/[0.18] hover:border-amber-500/30",
    bar:         "bg-[linear-gradient(90deg,#d97706,#f59e0b,#fbbf24)]",
    barGlow:     "shadow-[0_0_12px_rgba(245,158,11,0.55)]",
    glow:        "shadow-[0_24px_64px_rgba(217,119,6,0.12)]",
    dotColor:    "bg-amber-400",
  },
  archived: {
    label:       "Archived",
    badge:       "border-white/[0.04] bg-white/[0.02] text-white/20",
    cardBorder:  "border-white/[0.04] hover:border-white/[0.07]",
    bar:         "bg-white/10",
    barGlow:     "",
    glow:        "",
    dotColor:    "bg-white/15",
  },
} as const;

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

function getCategoryAccent(category: string) {
  const map: Record<string, string> = {
    revenue:     "text-emerald-700 dark:text-emerald-300/80 bg-emerald-500/10 border-emerald-500/15",
    audience:    "text-sky-700 dark:text-sky-300/80 bg-sky-500/10 border-sky-500/15",
    focus:       "text-violet-700 dark:text-violet-300/80 bg-violet-500/10 border-violet-500/15",
    productivity:"text-indigo-700 dark:text-indigo-300/80 bg-indigo-500/10 border-indigo-500/15",
    routine:     "text-teal-700 dark:text-teal-300/80 bg-teal-500/10 border-teal-500/15",
    projects:    "text-blue-700 dark:text-blue-300/80 bg-blue-500/10 border-blue-500/15",
    wellbeing:   "text-rose-700 dark:text-rose-300/80 bg-rose-500/10 border-rose-500/15",
    learning:    "text-amber-700 dark:text-amber-300/80 bg-amber-500/10 border-amber-500/15",
  };
  return map[category.toLowerCase()] ?? "text-white/40 bg-white/[0.05] border-white/[0.08]";
}

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

interface AchievementCardProps {
  achievement:  Achievement;
  onDelete:     (id: string) => void;
  onDuplicate:  (id: string) => void;
  onEdit:       (achievement: Achievement) => void;
}

export function AchievementCard({
  achievement,
  onDelete,
  onDuplicate,
  onEdit,
}: AchievementCardProps) {
  const pct            = getAchievementProgressPercent(achievement);
  const progress       = resolveAchievementProgress(achievement);
  const resolvedStatus = resolveAchievementStatus(achievement);
  const cfg            = STATE[resolvedStatus] ?? STATE.not_started;
  const isCompleted    = resolvedStatus === "completed";
  const isStarter      = achievement.predefined;
  const rewardSet      = !!achievement.reward_title;

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

  return (
    <div
      className={cn(
        "group relative flex flex-col overflow-hidden rounded-[28px] border bg-[#0e0c15] transition-all duration-300",
        cfg.cardBorder,
        cfg.glow,
        /* starter shimmer border */
        isStarter && "ring-1 ring-violet-500/[0.06]",
      )}
    >
      {/* ── Hero image zone ─────────────────────────────────────────────── */}
      {/* Force --color-white to real white here — hero always has a dark bg regardless of theme */}
      <div
        className="relative min-h-[230px] flex-shrink-0 overflow-hidden"
        style={{
          backgroundImage: achievement.background_image_url
            ? `linear-gradient(180deg, rgba(8,6,16,0.05) 0%, rgba(8,6,16,0.92) 100%), url(${achievement.background_image_url})`
            : isCompleted
              ? "radial-gradient(ellipse at 30% -20%, #92400e 0%, #78350f 20%, #0c0a10 60%)"
              : resolvedStatus === "in_progress"
                ? "radial-gradient(ellipse at 30% -20%, #4c1d95 0%, #3730a3 22%, #0c0a10 60%)"
                : "radial-gradient(ellipse at 30% -20%, #1e1b4b 0%, #111827 35%, #0c0a10 65%)",
          backgroundSize: "cover",
          backgroundPosition: "center",
          "--color-white": "oklch(1 0 0)",
        } as React.CSSProperties}
      >
        {/* Top row: badges + actions */}
        <div className="absolute inset-x-0 top-0 flex items-start justify-between gap-2 p-4">
          <div className="flex flex-wrap items-center gap-1.5">
            {/* Starter template badge */}
            {isStarter && (
              <span className="flex items-center gap-1 rounded-full border border-violet-400/20 bg-violet-500/[0.15] px-2.5 py-1 text-[10px] font-bold uppercase tracking-[0.12em] text-violet-300 backdrop-blur-sm">
                <span className="h-1.5 w-1.5 rounded-full bg-violet-400" />
                Template
              </span>
            )}
            {isCompleted && (
              <span className="flex items-center gap-1 rounded-full border border-amber-400/25 bg-amber-500/[0.16] px-2.5 py-1 text-[10px] font-bold uppercase tracking-[0.12em] text-amber-200 backdrop-blur-sm">
                <TrophyMini />
                Unlocked
              </span>
            )}
            {/* Category */}
            <span
              className={cn(
                "rounded-full border px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.12em] backdrop-blur-sm",
                getCategoryAccent(achievement.category),
              )}
            >
              {achievement.category}
            </span>
          </div>

          {/* Action tray — hover only */}
          <div className="flex items-center gap-0.5 rounded-full border border-white/[0.08] bg-black/30 p-1 opacity-0 backdrop-blur-md transition-all duration-150 group-hover:opacity-100">
            {achievement.editable && (
              <ActionBtn onClick={() => onEdit(achievement)} title="Edit">
                <Pencil className="h-3.5 w-3.5" />
              </ActionBtn>
            )}
            <ActionBtn onClick={() => onDuplicate(achievement.id)} title="Duplicate">
              <Copy className="h-3.5 w-3.5" />
            </ActionBtn>
            {achievement.deletable && (
              <ActionBtn onClick={() => onDelete(achievement.id)} title="Delete" danger>
                <Trash2 className="h-3.5 w-3.5" />
              </ActionBtn>
            )}
          </div>
        </div>

        {/* Bottom overlay: icon + title + desc */}
        <div className="absolute inset-x-0 bottom-0 px-5 pb-5 pt-24">
          {/* Status badge */}
          <div className={cn("mb-3 inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-[10px] font-bold uppercase tracking-[0.14em]", cfg.badge)}>
            <span className={cn("h-1.5 w-1.5 rounded-full", cfg.dotColor, resolvedStatus === "in_progress" && "animate-pulse")} />
            {cfg.label}
          </div>

          <div className="flex items-end gap-3">
            {/* Icon */}
            {achievement.image_url ? (
              <img
                src={achievement.image_url}
                alt={achievement.title}
                className="h-14 w-14 shrink-0 rounded-[18px] border border-white/[0.12] object-cover shadow-xl shadow-black/40"
              />
            ) : (
              <div className="flex h-14 w-14 shrink-0 items-center justify-center rounded-[18px] border border-white/[0.10] bg-white/[0.08] text-2xl shadow-xl shadow-black/40 backdrop-blur-sm">
                {achievement.icon}
              </div>
            )}

            <div className="min-w-0 pb-0.5">
              <h3 className="text-[20px] font-bold leading-tight tracking-tight text-white">
                {achievement.title}
              </h3>
              {achievement.description && (
                <p className="mt-0.5 line-clamp-1 text-[12px] leading-relaxed text-white/45">
                  {achievement.description}
                </p>
              )}
            </div>
          </div>
        </div>
      </div>

      {/* ── Body ─────────────────────────────────────────────────────────── */}
      <div className="flex flex-1 flex-col gap-3 p-5">

        {/* Progress */}
        <div className="rounded-2xl border border-white/[0.05] bg-white/[0.025] p-4">
          <div className="mb-2.5 flex items-center justify-between gap-2">
            <span className="text-[10px] font-bold uppercase tracking-[0.14em] text-white/25">
              Progress
            </span>
            <span className="font-mono text-[12px] font-semibold text-white/70">
              {formatAchievementValue(progress)}
              <span className="text-white/30"> / {formatAchievementValue(achievement.target_value)}</span>
            </span>
          </div>
          {/* Bar */}
          <div className="relative h-2 overflow-hidden rounded-full bg-white/[0.07]">
            <div
              className={cn("h-full rounded-full transition-all duration-700", cfg.bar, cfg.barGlow)}
              style={{ width: `${pct}%` }}
            />
          </div>
          {/* Percentage label */}
          <p className={cn("mt-1.5 text-[11px] font-semibold", pct >= 100 ? "text-amber-700 dark:text-amber-400/80" : pct > 0 ? "text-violet-700 dark:text-violet-400/70" : "text-white/20")}>
            {pct}% {pct >= 100 ? "— unlocked" : pct > 0 ? "— in progress" : "— not started"}
          </p>
        </div>

        {/* Reward preview */}
        <div
          className={cn(
            "flex items-center gap-3 rounded-2xl border p-3.5 transition-all",
            isClaimed
              ? "border-emerald-500/20 bg-emerald-500/[0.05]"
              : isCompleted
                ? "border-amber-500/20 bg-amber-500/[0.06]"
                : "border-white/[0.05] bg-white/[0.02]",
          )}
        >
          <div className={cn(
            "flex h-8 w-8 shrink-0 items-center justify-center rounded-xl",
            isClaimed ? "bg-emerald-500/15" : isCompleted ? "bg-amber-500/15" : "bg-white/[0.05]",
          )}>
            {isClaimed
              ? <CheckCircle2 className="h-3.5 w-3.5 text-emerald-400" />
              : isCompleted
                ? <span className="text-[16px]">🏆</span>
                : rewardSet
                  ? <Lock className="h-3.5 w-3.5 text-white/25" />
                  : <Gift className="h-3.5 w-3.5 text-white/20" />
            }
          </div>
          <div className="min-w-0 flex-1">
            <p className="text-[10px] font-bold uppercase tracking-[0.12em] text-white/25">
              Reward
            </p>
            <p className={cn(
              "mt-0.5 truncate text-[12px] font-semibold",
              isClaimed ? "text-emerald-700 dark:text-emerald-300/80" : isCompleted ? "text-amber-700 dark:text-amber-300/90" : rewardSet ? "text-white/55" : "text-white/20",
            )}>
              {achievement.reward_title || "No reward set"}
            </p>
          </div>
          {isClaimed && (
            <span className="shrink-0 rounded-full bg-emerald-500/15 px-2 py-0.5 text-[9px] font-bold uppercase tracking-wider text-emerald-300">
              ✓ Claimed
            </span>
          )}
          {isCompleted && !isClaimed && rewardSet && (
            <span className="shrink-0 animate-pulse rounded-full bg-amber-500/15 px-2 py-0.5 text-[9px] font-bold uppercase tracking-wider text-amber-700 dark:text-amber-300">
              Claimen!
            </span>
          )}
        </div>

        {/* CTA — special "Claim reward" state for completed + unclaimed */}
        {isCompleted && rewardSet && !isClaimed ? (
          <Link
            href={`/achievements/${achievement.id}`}
            className="mt-auto flex items-center justify-center gap-2 overflow-hidden rounded-2xl border border-amber-500/30 bg-gradient-to-r from-amber-500/[0.14] to-yellow-500/[0.08] px-4 py-3 text-[13px] font-bold text-amber-200 shadow-[0_0_20px_rgba(245,158,11,0.12)] transition-all hover:border-amber-500/50 hover:from-amber-500/[0.20] hover:to-yellow-500/[0.14] active:scale-[0.98]"
          >
            <span className="text-[15px]">🎁</span>
            Reward claimen
            <span className="ml-auto opacity-60">→</span>
          </Link>
        ) : (
          <Link
            href={`/achievements/${achievement.id}`}
            className={cn(
              "mt-auto flex items-center justify-center gap-2 rounded-2xl border px-4 py-3 text-[13px] font-semibold transition-all duration-150",
              isClaimed
                ? "border-emerald-500/15 bg-emerald-500/[0.05] text-emerald-700 dark:text-emerald-200/70 hover:bg-emerald-500/[0.09]"
                : resolvedStatus === "in_progress"
                  ? "border-violet-500/20 bg-violet-500/[0.07] text-violet-700 dark:text-violet-200 hover:bg-violet-500/[0.12]"
                  : "border-white/[0.07] bg-white/[0.03] text-white/60 hover:bg-white/[0.06] hover:text-white/80",
            )}
          >
            {isClaimed ? "Achievement ansehen" : "Open achievement"}
            <span className="opacity-60">→</span>
          </Link>
        )}
      </div>
    </div>
  );
}

function TrophyMini() {
  return (
    <span className="flex h-3 w-3 items-center justify-center rounded-full bg-amber-300/20 text-[8px]">
      ★
    </span>
  );
}

/* ── Action button helper ─────────────────────────────────────────────────── */

function ActionBtn({
  children,
  danger,
  onClick,
  title,
}: {
  children: React.ReactNode;
  danger?: boolean;
  onClick: () => void;
  title: string;
}) {
  return (
    <button
      type="button"
      onClick={onClick}
      title={title}
      className={cn(
        "rounded-full p-1.5 transition-colors",
        danger
          ? "text-white/50 hover:bg-red-500/20 hover:text-red-300"
          : "text-white/55 hover:bg-white/10 hover:text-white",
      )}
    >
      {children}
    </button>
  );
}