"use client";

import { Check, CheckCircle2, Gift, Link2, RotateCcw, Trophy } from "lucide-react";
import {
  formatAchievementValue,
  getAchievementProgressPercent,
  isMilestoneCompleted,
  resolveAchievementProgress,
  sortAchievementMilestones,
} from "@/lib/achievements";
import { cn } from "@/lib/utils";
import type { Achievement } from "@/types";

type NodeState = "completed" | "active" | "locked";

interface AchievementRoadmapProps {
  achievement: Achievement;
  onToggleMilestone?: (milestoneId: string, completed: boolean) => Promise<void>;
}

/* ── Roadmap ─────────────────────────────────────────────────────────────── */

export function AchievementRoadmap({ achievement, onToggleMilestone }: AchievementRoadmapProps) {
  const progress   = resolveAchievementProgress(achievement);
  const pct        = getAchievementProgressPercent(achievement);
  const milestones = sortAchievementMilestones(achievement.milestones || []);
  const isCompleted = progress >= achievement.target_value;

  const firstOpenMilestoneIndex = milestones.findIndex(
    (milestone) => !isMilestoneCompleted(milestone, progress),
  );
  const manualCompletedCount = milestones.filter(
    (milestone) => milestone.resolved_completion_source === "manual",
  ).length;
  const linkedCompletedCount = milestones.filter(
    (milestone) => milestone.resolved_completion_source === "linked_tasks",
  ).length;
  const progressCompletedCount = milestones.filter(
    (milestone) => milestone.resolved_completion_source === "progress",
  ).length;
  const openMilestoneCount = milestones.filter(
    (milestone) => !isMilestoneCompleted(milestone, progress),
  ).length;
  const nodeStates: NodeState[] = milestones.map((milestone, index) => {
    if (isMilestoneCompleted(milestone, progress)) return "completed";
    return index === firstOpenMilestoneIndex ? "active" : "locked";
  });

  if (milestones.length === 0) {
    return (
      <div className="rounded-3xl border border-dashed border-white/[0.08] bg-white/[0.015] px-6 py-10 text-center">
        <div className="mx-auto mb-3 flex h-10 w-10 items-center justify-center rounded-2xl border border-white/[0.08] bg-white/[0.03]">
          <Trophy className="h-5 w-5 text-white/20" />
        </div>
        <p className="text-[13px] text-white/30">No milestones yet.</p>
        <p className="mt-1 text-[12px] text-white/20">Add milestones to turn this into a visual journey.</p>
      </div>
    );
  }

  return (
    <div className="overflow-hidden rounded-3xl border border-white/[0.07] bg-[#0e0c15]">

      {/* Header */}
      <div className="flex items-center justify-between gap-4 border-b border-white/[0.05] px-6 py-5">
        <div>
          <p className="text-[10px] font-bold uppercase tracking-[0.18em] text-white/25">
            Milestone Roadmap
          </p>
          <h3 className="mt-1.5 text-[16px] font-bold tracking-tight text-white">
            Follow the path to the reward
          </h3>
        </div>
        {/* Progress pill */}
        <div className={cn(
          "flex flex-col items-end rounded-2xl border px-4 py-2.5",
          isCompleted
            ? "border-amber-500/20 bg-amber-500/[0.07]"
            : pct > 0
              ? "border-violet-500/15 bg-violet-500/[0.05]"
              : "border-white/[0.06] bg-white/[0.02]",
        )}>
          <p className={cn(
            "font-mono text-[18px] font-bold tabular-nums leading-none",
            isCompleted ? "text-amber-300" : pct > 0 ? "text-violet-300" : "text-white/40",
          )}>
            {pct}%
          </p>
          <p className="mt-0.5 text-[10px] text-white/25">
            {formatAchievementValue(progress)} / {formatAchievementValue(achievement.target_value)}
          </p>
        </div>
      </div>

      {/* Overall progress bar */}
      <div className="px-6 pt-5">
        <div className="relative h-1.5 overflow-hidden rounded-full bg-white/[0.06]">
          <div
            className={cn(
              "absolute inset-y-0 left-0 rounded-full transition-all duration-700",
              isCompleted
                ? "bg-[linear-gradient(90deg,#d97706,#f59e0b,#fbbf24)] shadow-[0_0_10px_rgba(245,158,11,0.5)]"
                : "bg-[linear-gradient(90deg,#6d28d9,#8b5cf6)] shadow-[0_0_10px_rgba(139,92,246,0.4)]",
            )}
            style={{ width: `${pct}%` }}
          />
        </div>
        <div className="mt-4 grid gap-2 sm:grid-cols-4">
          <RoadmapMiniStat
            label="Manual"
            value={manualCompletedCount}
            tone="emerald"
          />
          <RoadmapMiniStat
            label="Task Auto"
            value={linkedCompletedCount}
            tone="sky"
          />
          <RoadmapMiniStat
            label="Progress Auto"
            value={progressCompletedCount}
            tone="violet"
          />
          <RoadmapMiniStat
            label="Open"
            value={openMilestoneCount}
            tone="white"
          />
        </div>
      </div>

      {/* Journey nodes */}
      <div className="relative px-6 py-6">
        {milestones.map((milestone, index) => {
          const nodeState = nodeStates[index];
          const isLast    = index === milestones.length - 1;
          const showLine  = !isLast;
          const taskLinks = milestone.task_links || [];
          const linkedTaskCount = milestone.linked_task_count ?? taskLinks.length;
          const completedLinkedTaskCount =
            milestone.completed_linked_task_count ??
            taskLinks.filter((taskLink) => taskLink.task?.status === "done").length;
          const manualCompleted = Boolean(milestone.unlocked_at);
          const completionSource = milestone.resolved_completion_source;
          const sourceLabel =
            completionSource === "manual"
              ? "Manuell"
              : completionSource === "linked_tasks"
                ? "Tasks erledigt"
                : completionSource === "progress"
                  ? "Fortschritt"
                  : null;

          return (
            <div key={milestone.id || `${milestone.title}-${index}`} className="relative">
              {/* Vertical connector line */}
              {showLine && (
                <div className="absolute left-[23px] top-[42px] z-0 w-px" style={{ height: "calc(100% - 14px)" }}>
                  {/* Background track */}
                  <div className="h-full w-full bg-white/[0.07]" />
                  {/* Filled portion */}
                  {(nodeState === "completed") && (
                    <div
                      className={cn(
                        "absolute inset-x-0 top-0 transition-all duration-700",
                        isCompleted
                          ? "bg-amber-500/60"
                          : "bg-violet-500/60",
                      )}
                      style={{ height: "100%" }}
                    />
                  )}
                </div>
              )}

              {/* Node row */}
              <div className="relative z-10 flex items-start gap-4 pb-6">

                {/* Node circle */}
                <div className="flex shrink-0 flex-col items-center">
                  {nodeState === "completed" ? (
                    <div className={cn(
                      "flex h-12 w-12 items-center justify-center rounded-full border-2 shadow-lg",
                      isCompleted
                        ? "border-amber-500/40 bg-amber-500/20 shadow-amber-500/20"
                        : "border-violet-500/40 bg-violet-500/20 shadow-violet-500/20",
                    )}>
                      <CheckCircle2 className={cn(
                        "h-5 w-5",
                        isCompleted ? "text-amber-400" : "text-violet-400",
                      )} />
                    </div>
                  ) : nodeState === "active" ? (
                    <div className="relative flex h-12 w-12 items-center justify-center rounded-full border-2 border-violet-500/40 bg-violet-500/15">
                      {/* Outer ping */}
                      <span className="absolute inset-0 animate-ping rounded-full bg-violet-500/20" />
                      <div className="h-3 w-3 rounded-full bg-violet-400 shadow-[0_0_8px_rgba(167,139,250,0.8)]" />
                    </div>
                  ) : (
                    <div className="flex h-12 w-12 items-center justify-center rounded-full border border-dashed border-white/[0.12] bg-white/[0.02]">
                      <span className="text-[12px] font-bold text-white/20">{index + 1}</span>
                    </div>
                  )}
                </div>

                {/* Milestone card */}
                <div className={cn(
                  "flex-1 overflow-hidden rounded-2xl border p-4 transition-all",
                  nodeState === "completed"
                    ? isCompleted
                      ? "border-amber-500/20 bg-amber-500/[0.06]"
                      : "border-violet-500/15 bg-violet-500/[0.05]"
                    : nodeState === "active"
                      ? "border-violet-500/20 bg-violet-500/[0.07] ring-1 ring-violet-500/10"
                      : "border-white/[0.05] bg-white/[0.02]",
                )}>
                  <div className="flex items-start justify-between gap-3">
                    <div className="min-w-0">
                      <div className="flex items-center gap-2">
                        {nodeState === "active" && (
                          <span className="rounded-full bg-violet-500/20 px-2 py-0.5 text-[9px] font-bold uppercase tracking-wider text-violet-300">
                            Next step
                          </span>
                        )}
                        {sourceLabel && (
                          <span
                            className={cn(
                              "rounded-full px-2 py-0.5 text-[9px] font-bold uppercase tracking-wider",
                              completionSource === "linked_tasks"
                                ? "bg-sky-500/15 text-sky-300"
                                : completionSource === "manual"
                                  ? "bg-emerald-500/15 text-emerald-300"
                                  : "bg-violet-500/15 text-violet-300",
                            )}
                          >
                            {sourceLabel}
                          </span>
                        )}
                        <p className={cn(
                          "text-[13px] font-semibold leading-snug",
                          nodeState === "locked" ? "text-white/30" : "text-white/90",
                        )}>
                          {milestone.title}
                        </p>
                      </div>
                      {milestone.description && (
                        <p className={cn(
                          "mt-1.5 text-[12px] leading-relaxed",
                          nodeState === "locked" ? "text-white/20" : "text-white/45",
                        )}>
                          {milestone.description}
                        </p>
                      )}
                      {linkedTaskCount > 0 && (
                        <div className="mt-3 rounded-xl border border-sky-400/10 bg-sky-500/[0.035] p-3">
                          <div className="mb-2 flex items-center justify-between gap-2">
                            <span className="inline-flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-[0.14em] text-sky-300/70">
                              <Link2 className="h-3 w-3" />
                              Etappen-Tasks
                            </span>
                            <span className="font-mono text-[11px] font-bold text-sky-200/80">
                              {completedLinkedTaskCount}/{linkedTaskCount}
                            </span>
                          </div>
                          <div className="space-y-1.5">
                            {taskLinks.map((taskLink) => {
                              const done = taskLink.task?.status === "done";
                              return (
                                <div
                                  key={taskLink.task_id}
                                  className="flex items-center gap-2 text-[11px] text-white/45"
                                >
                                  <span
                                    className={cn(
                                      "h-1.5 w-1.5 shrink-0 rounded-full",
                                      done ? "bg-emerald-300" : "bg-white/20",
                                    )}
                                  />
                                  <span
                                    className={cn(
                                      "truncate",
                                      done && "text-white/25 line-through decoration-white/25",
                                    )}
                                  >
                                    {taskLink.task?.title || "Linked task"}
                                  </span>
                                </div>
                              );
                            })}
                          </div>
                        </div>
                      )}
                    </div>
                    <div className="flex shrink-0 flex-col items-end gap-2">
                      <div className={cn(
                        "rounded-xl border px-3 py-1.5 text-center",
                        nodeState === "completed"
                          ? isCompleted
                            ? "border-amber-500/20 bg-amber-500/10 text-amber-300"
                            : "border-violet-500/20 bg-violet-500/10 text-violet-300"
                          : nodeState === "active"
                            ? "border-violet-500/20 bg-violet-500/[0.08] text-violet-300/70"
                            : "border-white/[0.06] bg-white/[0.02] text-white/25",
                      )}>
                        <p className="font-mono text-[14px] font-bold tabular-nums">
                          {formatAchievementValue(milestone.milestone_value)}
                        </p>
                      </div>
                      {onToggleMilestone && (
                        completionSource && !manualCompleted ? (
                          <span
                            className={cn(
                              "inline-flex items-center gap-1.5 rounded-xl border px-3 py-1.5 text-[10px] font-bold uppercase tracking-[0.12em]",
                              completionSource === "linked_tasks"
                                ? "border-sky-400/15 bg-sky-500/[0.08] text-sky-300"
                                : "border-violet-400/15 bg-violet-500/[0.08] text-violet-300",
                            )}
                          >
                            <CheckCircle2 className="h-3 w-3" />
                            Auto
                          </span>
                        ) : (
                          <button
                            type="button"
                            onClick={() => void onToggleMilestone(milestone.id, !manualCompleted)}
                            className={cn(
                              "inline-flex items-center gap-1.5 rounded-xl border px-3 py-1.5 text-[10px] font-bold uppercase tracking-[0.12em] transition-all",
                              manualCompleted
                                ? "border-emerald-400/15 bg-emerald-500/[0.08] text-emerald-300 hover:bg-emerald-500/[0.13]"
                                : "border-white/[0.07] bg-white/[0.03] text-white/35 hover:bg-white/[0.06] hover:text-white/60",
                            )}
                          >
                            {manualCompleted ? (
                              <>
                                <RotateCcw className="h-3 w-3" />
                                Reset
                              </>
                            ) : (
                              <>
                                <Check className="h-3 w-3" />
                                Erledigt
                              </>
                            )}
                          </button>
                        )
                      )}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          );
        })}

        {/* Final reward node */}
        <div className="relative z-10 flex items-start gap-4">
          <div className={cn(
            "flex h-12 w-12 shrink-0 items-center justify-center rounded-full border-2 shadow-lg transition-all",
            isCompleted
              ? "border-amber-500/50 bg-amber-500/25 shadow-amber-500/25"
              : "border-white/[0.10] bg-white/[0.03]",
          )}>
            {isCompleted
              ? <Trophy className="h-5 w-5 text-amber-400" />
              : <Gift className="h-5 w-5 text-white/20" />
            }
          </div>

          <div className={cn(
            "flex-1 rounded-2xl border p-4",
            isCompleted
              ? "border-amber-500/25 bg-amber-500/[0.08]"
              : "border-white/[0.05] bg-white/[0.02]",
          )}>
            <div className="flex items-center gap-2">
              <p className={cn(
                "text-[10px] font-bold uppercase tracking-[0.14em]",
                isCompleted ? "text-amber-300/70" : "text-white/20",
              )}>
                Reward destination
              </p>
              {isCompleted && (
                <span className="rounded-full bg-amber-500/20 px-2 py-0.5 text-[9px] font-bold uppercase tracking-wider text-amber-300">
                  Unlocked
                </span>
              )}
            </div>
            <p className={cn(
              "mt-1 text-[14px] font-semibold",
              isCompleted ? "text-amber-200" : "text-white/30",
            )}>
              {achievement.reward_title || "Define your reward"}
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}

function RoadmapMiniStat({
  label,
  tone,
  value,
}: {
  label: string;
  tone: "emerald" | "sky" | "violet" | "white";
  value: number;
}) {
  const toneClass = {
    emerald: "border-emerald-400/12 bg-emerald-500/[0.045] text-emerald-300",
    sky: "border-sky-400/12 bg-sky-500/[0.045] text-sky-300",
    violet: "border-violet-400/12 bg-violet-500/[0.045] text-violet-300",
    white: "border-white/[0.06] bg-white/[0.025] text-white/45",
  }[tone];

  return (
    <div className={cn("rounded-2xl border px-3 py-2", toneClass)}>
      <p className="font-mono text-[15px] font-bold leading-none tabular-nums">{value}</p>
      <p className="mt-1 text-[9px] font-bold uppercase tracking-[0.13em] opacity-60">{label}</p>
    </div>
  );
}