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

import { useMemo, useState } from "react";
import Link from "next/link";
import { useParams, useRouter } from "next/navigation";
import {
  ArrowLeft,
  CheckCircle2,
  Copy,
  FolderKanban,
  Pencil,
  Target,
  Trash2,
  Trophy,
  TrendingUp,
} from "lucide-react";
import { AchievementForm } from "@/components/achievements/achievement-form";
import { AchievementRoadmap } from "@/components/achievements/achievement-roadmap";
import { RewardDestinationCard } from "@/components/achievements/reward-destination-card";
import { StarterTemplateBadge } from "@/components/achievements/starter-template-badge";
import { RemindMeButton } from "@/components/reminders/remind-me-button";
import { ShareCardButton } from "@/components/shared/mindavio-share-card";
import { Button } from "@/components/ui/button";
import { EmptyState } from "@/components/ui/empty-state";
import { Modal } from "@/components/ui/modal";
import { Skeleton } from "@/components/ui/skeleton";
import {
  formatAchievementValue,
  getAchievementProgressPercent,
  isMilestoneCompleted,
  resolveAchievementProgress,
  resolveAchievementStatus,
} from "@/lib/achievements";
import { useAchievements } from "@/hooks/use-achievements";
import { useNotificationStore } from "@/stores/notification-store";
import { cn } from "@/lib/utils";
import type { AchievementStatus } from "@/types";

/* ── State visual config (mirrors achievement-card) ──────────────────────── */

const STATUS_CFG: Record<AchievementStatus, {
  label:      string;
  badge:      string;
  dotColor:   string;
  heroBg:     string;
  bar:        string;
  barGlow:    string;
  pctColor:   string;
  cardBorder: string;
}> = {
  not_started: {
    label:      "Not started",
    badge:      "border-white/[0.08] bg-white/[0.04] text-white/40",
    dotColor:   "bg-white/25",
    heroBg:     "radial-gradient(ellipse at 20% -10%, #1e1b4b 0%, #111827 35%, #0a0a0d 65%)",
    bar:        "bg-white/20",
    barGlow:    "",
    pctColor:   "text-white/25",
    cardBorder: "border-white/[0.07]",
  },
  in_progress: {
    label:      "In progress",
    badge:      "border-violet-500/25 bg-violet-500/[0.12] text-violet-300",
    dotColor:   "bg-violet-400",
    heroBg:     "radial-gradient(ellipse at 20% -10%, #4c1d95 0%, #3730a3 22%, #0a0a0d 60%)",
    bar:        "bg-[linear-gradient(90deg,#6d28d9,#8b5cf6,#a78bfa)]",
    barGlow:    "shadow-[0_0_14px_rgba(139,92,246,0.6)]",
    pctColor:   "text-violet-300",
    cardBorder: "border-violet-500/[0.15]",
  },
  completed: {
    label:      "Unlocked",
    badge:      "border-amber-500/25 bg-amber-500/[0.12] text-amber-300",
    dotColor:   "bg-amber-400",
    heroBg:     "radial-gradient(ellipse at 20% -10%, #92400e 0%, #78350f 22%, #0a0a0d 60%)",
    bar:        "bg-[linear-gradient(90deg,#d97706,#f59e0b,#fbbf24)]",
    barGlow:    "shadow-[0_0_14px_rgba(245,158,11,0.6)]",
    pctColor:   "text-amber-300",
    cardBorder: "border-amber-500/[0.20]",
  },
  archived: {
    label:      "Archived",
    badge:      "border-white/[0.04] bg-white/[0.02] text-white/20",
    dotColor:   "bg-white/15",
    heroBg:     "radial-gradient(ellipse at 20% -10%, #111827 0%, #0d0d10 45%, #0a0a0d 70%)",
    bar:        "bg-white/10",
    barGlow:    "",
    pctColor:   "text-white/20",
    cardBorder: "border-white/[0.04]",
  },
};

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

export default function AchievementDetailPage() {
  const params = useParams<{ id: string }>();
  const router = useRouter();
  const {
    achievements,
    availableProjects,
    availableTasks,
    deleteAchievement,
    duplicateAchievement,
    loading,
    claimAchievementReward,
    toggleMilestoneCompletion,
    updateAchievement,
  } = useAchievements();
  const [modalOpen,   setModalOpen]   = useState(false);
  const [submitting,  setSubmitting]  = useState(false);
  const isRewardClaimed = useNotificationStore((state) => state.isRewardClaimed);

  const achievement = useMemo(
    () => achievements.find((item) => item.id === params.id) || null,
    [achievements, params.id],
  );

  async function handleDelete() {
    if (!achievement) return;
    if (!window.confirm(`Delete "${achievement.title}"?`)) return;
    await deleteAchievement(achievement.id);
    router.push("/achievements");
  }

  async function handleDuplicate() {
    if (!achievement) return;
    const duplicated = await duplicateAchievement(achievement.id);
    if (duplicated) router.push(`/achievements/${duplicated.id}`);
  }

  async function handleUpdate(input: Parameters<typeof updateAchievement>[1]) {
    if (!achievement) return;
    setSubmitting(true);
    try {
      await updateAchievement(achievement.id, input);
      setModalOpen(false);
    } finally {
      setSubmitting(false);
    }
  }

  /* ── Loading ────────────────────────────────────────────────────────── */
  if (loading) {
    return (
      <div className="min-h-full bg-[#0a0a0d] px-6 py-8">
        <div className="mx-auto max-w-[1280px] space-y-6">
          <Skeleton className="h-10 w-44 rounded-full bg-white/[0.03]" />
          <Skeleton className="h-[380px] rounded-[36px] bg-white/[0.03]" />
          <div className="grid gap-6 xl:grid-cols-[1.08fr_0.92fr]">
            <Skeleton className="h-[480px] rounded-[28px] bg-white/[0.03]" />
            <Skeleton className="h-[480px] rounded-[28px] bg-white/[0.03]" />
          </div>
        </div>
      </div>
    );
  }

  /* ── Not found ──────────────────────────────────────────────────────── */
  if (!achievement) {
    return (
      <div className="min-h-full bg-[#0a0a0d] px-6 py-12">
        <div className="mx-auto max-w-[760px]">
          <EmptyState
            icon={<Target className="h-10 w-10" />}
            title="Achievement not found"
            description="It may have been deleted or belongs to a different workspace."
            action={
              <Link href="/achievements">
                <Button>
                  <ArrowLeft className="h-4 w-4" />
                  Back to achievements
                </Button>
              </Link>
            }
            className="rounded-[28px] border border-dashed border-white/[0.08] bg-white/[0.02] text-white"
          />
        </div>
      </div>
    );
  }

  /* ── Derived state ──────────────────────────────────────────────────── */
  const pct             = getAchievementProgressPercent(achievement);
  const resolvedProgress = resolveAchievementProgress(achievement);
  const resolvedStatus   = resolveAchievementStatus(achievement);
  const cfg              = STATUS_CFG[resolvedStatus] ?? STATUS_CFG.not_started;
  const isCompleted      = resolvedStatus === "completed";
  const isInProgress     = resolvedStatus === "in_progress";
  const rewardClaimed     = Boolean(achievement.reward_claim) || isRewardClaimed(achievement.id);
  const rewardReady       = isCompleted && Boolean(achievement.reward_title) && !rewardClaimed;
  const completedLabel    = achievement.completed_at
    ? new Date(achievement.completed_at).toLocaleDateString("de-DE", {
        day: "2-digit",
        month: "short",
        year: "numeric",
      })
    : null;
  const rewardHint        = rewardClaimed
    ? "Reward claimed"
    : rewardReady
      ? "Ready to claim"
      : achievement.reward_title
        ? "Final destination"
        : "No reward set yet";
  const milestoneCount   = achievement.milestones?.length || 0;
  const completedMilestones = achievement.milestones?.filter(
    m => isMilestoneCompleted(m, resolvedProgress)
  ).length || 0;

  /* ── Background style for hero ──────────────────────────────────────── */
  const heroBgStyle = achievement.background_image_url
    ? {
        backgroundImage: `linear-gradient(180deg, rgba(10,10,13,0.15) 0%, rgba(10,10,13,0.85) 100%), url(${achievement.background_image_url})`,
        backgroundSize: "cover",
        backgroundPosition: "center",
      }
    : { background: cfg.heroBg };

  /* ───────────────────────────────────────────────────────────────────── */

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

      {/* ── Back nav ──────────────────────────────────────────────────────── */}
      <div className="mx-auto max-w-[1280px] px-6 pt-7 pb-4">
        <Link
          href="/achievements"
          className="inline-flex items-center gap-2 rounded-full border border-white/[0.07] bg-white/[0.025] px-4 py-2 text-[13px] font-medium text-white/55 transition-all hover:border-white/[0.12] hover:bg-white/[0.05] hover:text-white/80"
        >
          <ArrowLeft className="h-3.5 w-3.5" />
          Achievements
        </Link>
      </div>

      {/* ── Hero card ─────────────────────────────────────────────────────── */}
      <div className="mx-auto max-w-[1280px] px-6 pb-2">
        <div
          className={cn(
            "overflow-hidden rounded-[36px] border transition-all",
            cfg.cardBorder,
            isCompleted && "shadow-[0_0_80px_rgba(217,119,6,0.10)]",
            isInProgress && "shadow-[0_0_60px_rgba(109,40,217,0.10)]",
          )}
          style={heroBgStyle}
        >
          {/* Top section: icon + title + actions */}
          <div className="flex flex-col gap-8 px-8 pt-8 pb-6 lg:flex-row lg:items-start lg:justify-between">

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

              <div className="min-w-0 pt-1">
                {/* Badges row */}
                <div className="mb-3 flex flex-wrap items-center gap-1.5">
                  {achievement.predefined && <StarterTemplateBadge />}
                  <span className={cn(
                    "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, isInProgress && "animate-pulse")} />
                    {cfg.label}
                  </span>
                  <span className="rounded-full border border-white/[0.08] bg-white/[0.04] px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.12em] text-white/40">
                    {achievement.category}
                  </span>
                  {isCompleted && (
                    <span className="rounded-full border border-amber-400/20 bg-amber-500/[0.12] px-2.5 py-1 text-[10px] font-bold uppercase tracking-[0.12em] text-amber-200">
                      {completedLabel ? `Unlocked ${completedLabel}` : "Reward path unlocked"}
                    </span>
                  )}
                  {rewardReady && (
                    <span className="animate-pulse 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">
                      Reward ready
                    </span>
                  )}
                </div>

                <h1 className="text-[32px] font-bold leading-tight tracking-tight text-white lg:text-[38px]">
                  {achievement.title}
                </h1>
                {achievement.description && (
                  <p className="mt-2.5 max-w-2xl text-[14px] leading-relaxed text-white/50">
                    {achievement.description}
                  </p>
                )}
              </div>
            </div>

            {/* Right: action buttons */}
            <div className="flex shrink-0 flex-wrap items-center gap-2">
              <RemindMeButton
                body={achievement.description}
                sourceId={achievement.id}
                sourceTitle={achievement.title}
                sourceType="achievement"
                sourceUrl={`/achievements/${achievement.id}`}
              />
              {isCompleted && (
                <ShareCardButton
                  variant="pill"
                  data={{
                    type: "achievement",
                    icon: achievement.icon,
                    title: achievement.title,
                    category: achievement.category,
                    description: achievement.description,
                    rewardTitle: achievement.reward_title || undefined,
                    completedAt: achievement.completed_at,
                  }}
                />
              )}
              {achievement.editable && (
                <button
                  onClick={() => setModalOpen(true)}
                  className="flex items-center gap-1.5 rounded-xl border border-white/[0.08] bg-white/[0.04] px-4 py-2.5 text-[13px] font-semibold text-white/70 transition-all hover:border-white/[0.14] hover:bg-white/[0.07] hover:text-white"
                >
                  <Pencil className="h-3.5 w-3.5" />
                  Edit
                </button>
              )}
              <button
                onClick={handleDuplicate}
                className="flex items-center gap-1.5 rounded-xl border border-white/[0.08] bg-white/[0.04] px-4 py-2.5 text-[13px] font-semibold text-white/70 transition-all hover:border-white/[0.14] hover:bg-white/[0.07] hover:text-white"
              >
                <Copy className="h-3.5 w-3.5" />
                Duplicate
              </button>
              {achievement.deletable && (
                <button
                  onClick={handleDelete}
                  className="flex items-center gap-1.5 rounded-xl border border-red-400/[0.12] bg-red-500/[0.07] px-4 py-2.5 text-[13px] font-semibold text-red-300/70 transition-all hover:border-red-400/25 hover:bg-red-500/[0.13] hover:text-red-300"
                >
                  <Trash2 className="h-3.5 w-3.5" />
                  Delete
                </button>
              )}
            </div>
          </div>

          {/* Progress section */}
          <div className="px-8 pb-2">
            <div className="flex items-center justify-between gap-4 mb-2.5">
              <p className="text-[10px] font-bold uppercase tracking-[0.18em] text-white/25">
                Overall progress
              </p>
              <p className={cn("font-mono text-[13px] font-bold tabular-nums", cfg.pctColor)}>
                {pct}%
              </p>
            </div>
            <div className="relative h-2 overflow-hidden rounded-full bg-white/[0.07]">
              <div
                className={cn("absolute inset-y-0 left-0 rounded-full transition-all duration-700", cfg.bar, cfg.barGlow)}
                style={{ width: `${pct}%` }}
              />
            </div>
          </div>

          {/* Stat strip */}
          <div className="mt-5 grid gap-0 border-t border-white/[0.06] md:grid-cols-3">
            <HeroStat
              icon={<TrendingUp className={cn("h-3.5 w-3.5", isCompleted ? "text-amber-400" : "text-violet-400")} />}
              label="Progress"
              value={`${formatAchievementValue(resolvedProgress)} / ${formatAchievementValue(achievement.target_value)}`}
              hint={`${pct}% complete`}
              isCompleted={isCompleted}
              separator
            />
            <HeroStat
              icon={<CheckCircle2 className={cn("h-3.5 w-3.5", isCompleted ? "text-amber-400" : "text-violet-400")} />}
              label="Milestones"
              value={`${completedMilestones} / ${milestoneCount}`}
              hint={milestoneCount === 0 ? "No checkpoints set" : `${milestoneCount} roadmap checkpoints`}
              isCompleted={isCompleted}
              separator
            />
            <HeroStat
              icon={<Trophy className={cn("h-3.5 w-3.5", isCompleted ? "text-amber-400" : "text-white/20")} />}
              label="Reward"
              value={achievement.reward_title || "Not set"}
              hint={rewardHint}
              isCompleted={isCompleted}
              truncate
            />
          </div>
        </div>
      </div>

      {/* ── Main content grid ─────────────────────────────────────────────── */}
      <div className="mx-auto max-w-[1280px] px-6 py-8">
        <div className="grid gap-6 xl:grid-cols-[1.08fr_0.92fr]">

          {/* Left column */}
          <div className="space-y-6">
            <AchievementRoadmap
              achievement={achievement}
              onToggleMilestone={achievement.editable ? toggleMilestoneCompletion : undefined}
            />
            <LinkedWorkSection achievement={achievement} />
          </div>

          {/* Right column */}
          <RewardDestinationCard
            achievement={achievement}
            onClaimReward={claimAchievementReward}
          />
        </div>
      </div>

      {/* ── Edit modal ────────────────────────────────────────────────────── */}
      <Modal
        open={modalOpen}
        onClose={() => setModalOpen(false)}
        title="Edit achievement"
        className="max-w-5xl border-white/[0.07] bg-[#0d0c13] text-white"
      >
        <AchievementForm
          key={achievement.id}
          achievement={achievement}
          availableProjects={availableProjects}
          availableTasks={availableTasks}
          onCancel={() => setModalOpen(false)}
          onSubmit={handleUpdate}
          submitting={submitting}
        />
      </Modal>
    </div>
  );
}

/* ── Hero stat cell ──────────────────────────────────────────────────────── */

function HeroStat({
  hint,
  icon,
  isCompleted,
  label,
  separator,
  truncate,
  value,
}: {
  hint:        string;
  icon:        React.ReactNode;
  isCompleted: boolean;
  label:       string;
  separator?:  boolean;
  truncate?:   boolean;
  value:       string;
}) {
  return (
    <div className={cn(
      "flex items-center gap-4 px-8 py-5",
      separator && "border-r border-white/[0.06]",
    )}>
      <div className={cn(
        "flex h-9 w-9 shrink-0 items-center justify-center rounded-xl",
        isCompleted ? "bg-amber-500/10" : "bg-white/[0.04]",
      )}>
        {icon}
      </div>
      <div className="min-w-0">
        <p className="text-[10px] font-bold uppercase tracking-[0.16em] text-white/25">{label}</p>
        <p className={cn("mt-0.5 text-[15px] font-bold text-white", truncate && "truncate max-w-[180px]")}>
          {value}
        </p>
        <p className="text-[11px] text-white/30 truncate">{hint}</p>
      </div>
    </div>
  );
}

/* ── Linked work section ─────────────────────────────────────────────────── */

function LinkedWorkSection({ achievement }: { achievement: import("@/types").Achievement }) {
  const taskLinks    = achievement.task_links    || [];
  const projectLinks = achievement.project_links || [];
  const completedTaskLinks = taskLinks.filter((link) => link.task?.status === "done").length;

  return (
    <div className="overflow-hidden rounded-3xl border border-white/[0.07] bg-[#0e0c15]">
      {/* Header */}
      <div className="flex flex-col gap-3 border-b border-white/[0.05] px-6 py-5 sm:flex-row sm:items-end sm:justify-between">
        <div>
          <p className="text-[10px] font-bold uppercase tracking-[0.18em] text-white/25">
            Linked work
          </p>
          <h2 className="mt-1.5 text-[16px] font-bold tracking-tight text-white">
            Tasks & projects connected to this achievement
          </h2>
        </div>
        {(taskLinks.length > 0 || projectLinks.length > 0) && (
          <div className="rounded-2xl border border-white/[0.06] bg-white/[0.025] px-4 py-2 text-right">
            <p className="text-[10px] font-bold uppercase tracking-[0.14em] text-white/22">
              Linked progress
            </p>
            <p className="mt-0.5 font-mono text-[13px] font-bold text-white/70">
              {completedTaskLinks}/{taskLinks.length} tasks
            </p>
          </div>
        )}
      </div>

      <div className="grid gap-0 p-5 lg:grid-cols-2 lg:gap-4">
        {/* Tasks */}
        <div className="rounded-2xl border border-white/[0.06] bg-white/[0.02] p-4">
          <div className="mb-4 flex items-center gap-2">
            <div className="flex h-7 w-7 items-center justify-center rounded-lg bg-sky-500/10">
              <Target className="h-3.5 w-3.5 text-sky-400" />
            </div>
            <p className="text-[12px] font-bold text-white/70">Tasks</p>
            {taskLinks.length > 0 && (
              <span className="ml-auto rounded-full bg-sky-500/10 px-2 py-0.5 text-[10px] font-bold tabular-nums text-sky-400">
                {taskLinks.length}
              </span>
            )}
          </div>

          <div className="space-y-2">
            {taskLinks.length === 0 ? (
              <p className="text-[12px] text-white/25">No linked tasks yet.</p>
            ) : (
              taskLinks.map((link) => (
                <Link
                  key={link.task_id}
                  href={`/tasks?task=${link.task_id}`}
                  className={cn(
                    "flex items-center gap-3 rounded-xl border px-3 py-2.5 transition-colors",
                    link.task?.status === "done"
                      ? "border-emerald-500/10 bg-emerald-500/[0.035] hover:bg-emerald-500/[0.055]"
                      : "border-white/[0.05] bg-white/[0.015] hover:bg-white/[0.03]",
                  )}
                >
                  <div
                    className={cn(
                      "h-1.5 w-1.5 shrink-0 rounded-full",
                      link.task?.status === "done" ? "bg-emerald-300" : "bg-sky-400/60",
                    )}
                  />
                  <div className="min-w-0 flex-1">
                    <p
                      className={cn(
                        "truncate text-[13px] font-medium",
                        link.task?.status === "done"
                          ? "text-white/35 line-through decoration-white/25"
                          : "text-white/80",
                      )}
                    >
                      {link.task?.title || "Linked task"}
                    </p>
                    <p className="text-[10px] uppercase tracking-[0.14em] text-white/25">
                      {link.task?.status?.replace(/_/g, " ") || "—"}
                    </p>
                  </div>
                  <span className="text-[11px] text-white/18">→</span>
                </Link>
              ))
            )}
          </div>
        </div>

        {/* Projects */}
        <div className="mt-4 rounded-2xl border border-white/[0.06] bg-white/[0.02] p-4 lg:mt-0">
          <div className="mb-4 flex items-center gap-2">
            <div className="flex h-7 w-7 items-center justify-center rounded-lg bg-violet-500/10">
              <FolderKanban className="h-3.5 w-3.5 text-violet-400" />
            </div>
            <p className="text-[12px] font-bold text-white/70">Projects</p>
            {projectLinks.length > 0 && (
              <span className="ml-auto rounded-full bg-violet-500/10 px-2 py-0.5 text-[10px] font-bold tabular-nums text-violet-400">
                {projectLinks.length}
              </span>
            )}
          </div>

          <div className="space-y-2">
            {projectLinks.length === 0 ? (
              <p className="text-[12px] text-white/25">No linked projects yet.</p>
            ) : (
              projectLinks.map((link) => (
                <Link
                  key={link.project_id}
                  href={`/projects/${link.project_id}`}
                  className="flex items-center gap-3 rounded-xl border border-white/[0.05] bg-white/[0.015] px-3 py-2.5 transition-colors hover:bg-white/[0.03]"
                >
                  <span
                    className="flex h-8 w-8 shrink-0 items-center justify-center rounded-xl text-[15px]"
                    style={{ backgroundColor: `${link.project?.color || "#8b5cf6"}22` }}
                  >
                    {link.project?.icon || "📁"}
                  </span>
                  <p className="truncate text-[13px] font-medium text-white/80">
                    {link.project?.name || "Linked project"}
                  </p>
                  <span className="ml-auto text-[11px] text-white/18">→</span>
                </Link>
              ))
            )}
          </div>
        </div>
      </div>
    </div>
  );
}