"use client";

import Link from "next/link";
import { useMemo, useState } from "react";
import {
  Award,
  Clock3,
  Gift,
  Plus,
  Sparkles,
  TrendingUp,
  Trophy,
} from "lucide-react";
import { AchievementCard } from "@/components/achievements/achievement-card";
import { AchievementForm } from "@/components/achievements/achievement-form";
import { StarterTemplateBadge } from "@/components/achievements/starter-template-badge";
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 { getAchievementProgressPercent, resolveAchievementStatus } from "@/lib/achievements";
import { useAchievements } from "@/hooks/use-achievements";
import { useNotificationStore } from "@/stores/notification-store";
import { cn } from "@/lib/utils";
import type { Achievement } from "@/types";

/* ── Filter config ────────────────────────────────────────────────────────── */

const FILTERS = [
  { label: "All",        value: "all"         },
  { label: "In Progress",value: "in_progress" },
  { label: "Completed",  value: "completed"   },
  { label: "Templates",  value: "starter"     },
] as const;

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

export default function AchievementsPage() {
  const {
    achievements,
    availableProjects,
    availableTasks,
    createAchievement,
    deleteAchievement,
    duplicateAchievement,
    loading,
    updateAchievement,
  } = useAchievements();

  const isRewardClaimed = useNotificationStore((state) => state.isRewardClaimed);

  const [activeFilter, setActiveFilter]           = useState<(typeof FILTERS)[number]["value"]>("all");
  const [editingAchievement, setEditingAchievement] = useState<Achievement | null>(null);
  const [modalOpen, setModalOpen]                 = useState(false);
  const [submitting, setSubmitting]               = useState(false);

  /* ── Derived counts ─────────────────────────────────────────────────── */
  const completedCount  = achievements.filter(a => (a.resolved_status || a.status) === "completed").length;
  const inProgressCount = achievements.filter(a => (a.resolved_status || a.status) === "in_progress").length;
  const starterCount    = achievements.filter(a => a.predefined).length;
  const autoTrackedAchievements = useMemo(
    () =>
      achievements.filter(
        (achievement) =>
          resolveAchievementStatus(achievement) !== "archived" &&
          achievement.progress_source !== "manual",
      ),
    [achievements],
  );
  const linkedTaskAchievements = useMemo(
    () =>
      achievements.filter(
        (achievement) =>
          resolveAchievementStatus(achievement) !== "archived" &&
          ((achievement.task_links?.length || 0) > 0 ||
            (achievement.milestones || []).some((milestone) => (milestone.task_links?.length || 0) > 0)),
      ),
    [achievements],
  );

  const rewardReadyAchievements = useMemo(
    () =>
      achievements.filter(
        (achievement) =>
          achievement.reward_title &&
          resolveAchievementStatus(achievement) === "completed" &&
          !achievement.reward_claim &&
          !isRewardClaimed(achievement.id),
      ),
    [achievements, isRewardClaimed],
  );

  const completedAchievements = useMemo(
    () =>
      achievements
        .filter((achievement) => resolveAchievementStatus(achievement) === "completed")
        .sort(
          (a, b) =>
            new Date(b.completed_at || b.updated_at).getTime() -
            new Date(a.completed_at || a.updated_at).getTime(),
        ),
    [achievements],
  );

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

  const nextRewardAchievement = useMemo(
    () =>
      rewardReadyAchievements[0] ||
      almostUnlockedAchievements[0] ||
      [...achievements]
        .filter((achievement) => resolveAchievementStatus(achievement) !== "archived")
        .sort((a, b) => getAchievementProgressPercent(b) - getAchievementProgressPercent(a))[0] ||
      null,
    [achievements, almostUnlockedAchievements, rewardReadyAchievements],
  );

  const filteredAchievements = useMemo(() => {
    const sortAchievements = (items: Achievement[]) =>
      [...items].sort((left, right) => {
        const leftStatus = resolveAchievementStatus(left);
        const rightStatus = resolveAchievementStatus(right);
        const leftCompleted = leftStatus === "completed";
        const rightCompleted = rightStatus === "completed";
        if (activeFilter === "all" && leftCompleted !== rightCompleted) {
          return leftCompleted ? 1 : -1;
        }
        if (!leftCompleted && !rightCompleted) {
          return getAchievementProgressPercent(right) - getAchievementProgressPercent(left);
        }
        return new Date(right.completed_at || right.updated_at).getTime() -
          new Date(left.completed_at || left.updated_at).getTime();
      });

    if (activeFilter === "starter") return sortAchievements(achievements.filter(a => a.predefined));
    if (activeFilter === "all")     return sortAchievements(achievements);
    return sortAchievements(achievements.filter(a => (a.resolved_status || a.status) === activeFilter));
  }, [achievements, activeFilter]);

  /* ── Handlers ───────────────────────────────────────────────────────── */
  function handleCreateNew()             { setEditingAchievement(null); setModalOpen(true); }
  function handleEdit(a: Achievement)    { setEditingAchievement(a);   setModalOpen(true); }
  async function handleDelete(id: string) {
    const a = achievements.find(x => x.id === id);
    if (!a || !window.confirm(`Delete "${a.title}"?`)) return;
    await deleteAchievement(id);
  }
  async function handleDuplicate(id: string) { await duplicateAchievement(id); }
  async function handleSubmit(input: Parameters<typeof createAchievement>[0]) {
    setSubmitting(true);
    try {
      if (editingAchievement) await updateAchievement(editingAchievement.id, input);
      else                    await createAchievement(input);
      setModalOpen(false);
      setEditingAchievement(null);
    } finally {
      setSubmitting(false);
    }
  }

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

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

      {/* ── Hero header ───────────────────────────────────────────────────── */}
      <div className="relative overflow-hidden border-b border-white/[0.04]">
        {/* Background radial glow */}
        <div className="pointer-events-none absolute inset-0">
          <div className="absolute -left-[10%] -top-[40%] h-[500px] w-[500px] rounded-full opacity-20 blur-3xl"
            style={{ background: "radial-gradient(circle, #7c3aed, transparent 70%)" }} />
          <div className="absolute right-[10%] top-[20%] h-[300px] w-[300px] rounded-full opacity-10 blur-3xl"
            style={{ background: "radial-gradient(circle, #4f46e5, transparent 70%)" }} />
        </div>

        <div className="relative mx-auto max-w-[1280px] px-6 py-10">
          <div className="flex flex-col gap-8 lg:flex-row lg:items-start lg:justify-between">

            {/* Left: title block */}
            <div className="max-w-2xl">
              <div className="mb-5 flex items-center gap-3">
                <div className="flex h-11 w-11 items-center justify-center rounded-[16px] bg-violet-500/15 ring-1 ring-violet-500/20">
                  <Award className="h-5 w-5 text-violet-300" />
                </div>
                <div>
                  <p className="text-[10px] font-bold uppercase tracking-[0.22em] text-violet-300/60">
                    Achievements & Rewards
                  </p>
                </div>
              </div>

              <h1 className="text-[34px] font-bold leading-tight tracking-tight text-white">
                Build a system<br />
                <span className="text-white/40">worth chasing.</span>
              </h1>
              <p className="mt-4 max-w-lg text-[14px] leading-relaxed text-white/45">
                Every workspace starts with 7 editable starter achievements. Use them as-is,
                rewrite them completely, or delete and start fresh. Your reward system, fully yours.
              </p>

              {/* Feature pills */}
              <div className="mt-5 flex flex-wrap gap-2">
                <StarterTemplateBadge />
                <FeaturePill>Fully editable templates</FeaturePill>
                <FeaturePill>Milestone roadmaps</FeaturePill>
                <FeaturePill>Linked tasks & projects</FeaturePill>
                <FeaturePill>Rewards inside achievements</FeaturePill>
              </div>
            </div>

            {/* Right: action buttons */}
            <div className="flex flex-col items-start gap-2 self-start">
              <button
                onClick={handleCreateNew}
                className="flex items-center gap-2 rounded-2xl bg-violet-600 px-5 py-3 text-[14px] font-bold text-white shadow-[0_8px_30px_rgba(109,40,217,0.35)] transition-all hover:bg-violet-500 hover:shadow-[0_8px_40px_rgba(109,40,217,0.45)] active:scale-[0.98]"
              >
                <Plus className="h-4 w-4" />
                New achievement
              </button>
              {completedCount > 0 && (
                <Link
                  href="/achievements/trophy-case"
                  className="flex items-center gap-2 rounded-2xl border border-amber-500/20 bg-amber-500/[0.07] px-5 py-2.5 text-[13px] font-semibold text-amber-700 dark:text-amber-300 transition-all hover:bg-amber-500/12 hover:border-amber-500/30"
                >
                  <Trophy className="h-4 w-4" />
                  Trophy Case
                  <span className="ml-0.5 rounded-md bg-amber-500/15 px-1.5 py-0.5 text-xs font-bold text-amber-700 dark:text-amber-400">
                    {completedCount}
                  </span>
                </Link>
              )}
            </div>
          </div>

          {/* ── Metric strip ─────────────────────────────────────────────── */}
          <div className="mt-8 grid gap-3 sm:grid-cols-2 xl:grid-cols-5">
            <MetricCard
              icon={<TrendingUp className="h-4 w-4 text-violet-700 dark:text-violet-300" />}
              iconBg="bg-violet-500/12"
              label="In progress"
              value={String(inProgressCount)}
              sub="Active goals"
              accent="violet"
            />
            <MetricCard
              icon={<Trophy className="h-4 w-4 text-amber-700 dark:text-amber-300" />}
              iconBg="bg-amber-500/12"
              label="Completed"
              value={String(completedCount)}
              sub="Milestones reached"
              accent="amber"
            />
            <MetricCard
              icon={<Sparkles className="h-4 w-4 text-indigo-700 dark:text-indigo-300" />}
              iconBg="bg-indigo-500/12"
              label="Starter templates"
              value={String(starterCount)}
              sub="Ready to customize"
              accent="indigo"
            />
            <MetricCard
              icon={<Clock3 className="h-4 w-4 text-amber-700 dark:text-amber-300" />}
              iconBg="bg-amber-500/12"
              label="Rewards ready"
              value={String(rewardReadyAchievements.length)}
              sub="Waiting to claim"
              accent="amber"
            />
            <MetricCard
              icon={<Gift className="h-4 w-4 text-emerald-700 dark:text-emerald-300" />}
              iconBg="bg-emerald-500/12"
              label="Next reward"
              value={nextRewardAchievement?.reward_title || "—"}
              sub={
                nextRewardAchievement
                  ? rewardReadyAchievements.some((item) => item.id === nextRewardAchievement.id)
                    ? "Ready to claim"
                    : nextRewardAchievement.title
                  : "Create a destination"
              }
              accent="emerald"
              truncate
            />
          </div>
        </div>
      </div>

      {/* ── Grid section ──────────────────────────────────────────────────── */}
      <div className="mx-auto max-w-[1280px] px-6 py-8">

        {/* Filters */}
        <div className="mb-6 flex flex-wrap gap-2">
          {FILTERS.map((f) => (
            <button
              key={f.value}
              type="button"
              onClick={() => setActiveFilter(f.value)}
              className={cn(
                "rounded-full border px-4 py-2 text-[13px] font-semibold transition-all",
                activeFilter === f.value
                  ? "border-violet-500/30 bg-violet-500/[0.12] text-violet-700 dark:text-violet-200"
                  : "border-white/[0.07] bg-white/[0.02] text-white/40 hover:border-white/[0.12] hover:bg-white/[0.05] hover:text-white/60",
              )}
            >
              {f.label}
            </button>
          ))}
          <span className="ml-auto self-center text-[12px] text-white/20">
            {filteredAchievements.length} achievement{filteredAchievements.length !== 1 ? "s" : ""}
          </span>
        </div>

        {/* Template explanation callout — shown on starter filter or when > 0 starters */}
        {(activeFilter === "starter" || (activeFilter === "all" && starterCount > 0)) && (
          <div className="mb-6 overflow-hidden rounded-2xl border border-violet-500/15 bg-violet-500/[0.04]">
            <div className="flex flex-col gap-4 px-5 py-4 sm:flex-row sm:items-center sm:justify-between">
              <div className="flex items-start gap-3">
                <div className="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-xl bg-violet-500/15">
                  <Sparkles className="h-3.5 w-3.5 text-violet-400" />
                </div>
                <div>
                  <p className="text-[13px] font-semibold text-white/80">
                    These are your starter templates — edit them freely
                  </p>
                  <p className="mt-0.5 text-[12px] text-white/35">
                    Rename, change the target, swap the reward image, add milestones. They are not locked. They are inspiration.
                  </p>
                </div>
              </div>
              <button
                onClick={handleCreateNew}
                className="shrink-0 self-start rounded-xl border border-violet-500/20 bg-violet-500/[0.08] px-4 py-2 text-[12px] font-semibold text-violet-700 dark:text-violet-300 transition-all hover:bg-violet-500/15 sm:self-center"
              >
                + Create custom
              </button>
            </div>
          </div>
        )}

        <AchievementAutomationPanel
          autoTrackedAchievements={autoTrackedAchievements}
          linkedTaskAchievements={linkedTaskAchievements}
          readyRewards={rewardReadyAchievements.length}
        />

        {(activeFilter === "all" || activeFilter === "completed") && completedAchievements.length > 0 && (
          <TrophyCase achievements={completedAchievements} />
        )}

        {/* Grid */}
        {loading ? (
          <div className="grid gap-5 md:grid-cols-2 xl:grid-cols-3">
            {Array.from({ length: 6 }).map((_, i) => (
              <Skeleton key={i} className="h-[440px] rounded-[28px] bg-white/[0.03]" />
            ))}
          </div>
        ) : filteredAchievements.length === 0 ? (
          <EmptyState
            icon={<Award className="h-10 w-10" />}
            title="No achievements here"
            description="Create your first achievement or switch to All to see your starter templates."
            action={
              <Button onClick={handleCreateNew}>
                <Plus className="h-4 w-4" />
                Create achievement
              </Button>
            }
            className="rounded-[28px] border border-dashed border-white/[0.07] bg-white/[0.015]"
          />
        ) : (
          <div className="grid gap-5 md:grid-cols-2 xl:grid-cols-3">
            {filteredAchievements.map((a) => (
              <AchievementCard
                key={a.id}
                achievement={a}
                onDelete={handleDelete}
                onDuplicate={handleDuplicate}
                onEdit={handleEdit}
              />
            ))}
          </div>
        )}
      </div>

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

function TrophyCase({ achievements }: { achievements: Achievement[] }) {
  const featured = achievements.slice(0, 6);

  return (
    <div className="mb-6 overflow-hidden rounded-[28px] border border-amber-500/15 bg-[radial-gradient(circle_at_top_left,rgba(245,158,11,0.13),rgba(255,255,255,0.02)_46%,rgba(255,255,255,0.015)_100%)]">
      <div className="flex flex-col gap-4 border-b border-amber-500/10 px-5 py-4 sm:flex-row sm:items-end sm:justify-between">
        <div>
          <p className="text-[10px] font-bold uppercase tracking-[0.18em] text-amber-700 dark:text-amber-300/60">
            Trophy Case
          </p>
          <h2 className="mt-1 text-[18px] font-bold tracking-tight text-white">
            Deine freigeschalteten Wins
          </h2>
          <p className="mt-1 max-w-xl text-[12px] leading-relaxed text-white/35">
            Abgeschlossene Achievements bleiben hier als Sammlung sichtbar. Rewards werden nicht separat gelistet, sondern bleiben Teil des jeweiligen Erfolgs.
          </p>
        </div>
        <div className="rounded-2xl border border-amber-500/15 bg-amber-500/[0.07] px-4 py-3 text-right">
          <p className="text-[10px] font-bold uppercase tracking-[0.16em] text-white/25">Unlocked</p>
          <p className="mt-1 text-[24px] font-black text-white">{achievements.length}</p>
        </div>
      </div>

      <div className="grid gap-3 p-4 md:grid-cols-2 xl:grid-cols-3">
        {featured.map((achievement) => (
          <Link
            key={achievement.id}
            href={`/achievements/${achievement.id}`}
            className="group block rounded-2xl border border-white/[0.055] bg-white/[0.025] p-4 transition-all hover:-translate-y-0.5 hover:border-amber-500/18 hover:bg-amber-500/[0.045]"
          >
            <div className="flex items-start justify-between gap-3">
              <div className="flex h-10 w-10 items-center justify-center rounded-2xl border border-amber-500/15 bg-amber-500/[0.08] text-lg">
                {achievement.icon || "🏆"}
              </div>
              <span className="rounded-full border border-amber-500/20 bg-amber-500/[0.09] px-2.5 py-1 text-[10px] font-bold uppercase tracking-[0.12em] text-amber-800 dark:text-amber-200/80">
                Unlocked
              </span>
            </div>
            <h3 className="mt-4 truncate text-[14px] font-bold text-white/84">{achievement.title}</h3>
            <p className="mt-1 line-clamp-2 text-[12px] leading-relaxed text-white/34">
              {achievement.reward_title
                ? `Reward: ${achievement.reward_title}`
                : achievement.description || "Achievement completed."}
            </p>
          </Link>
        ))}
      </div>
    </div>
  );
}

/* ── Metric card ─────────────────────────────────────────────────────────── */

function MetricCard({
  accent,
  icon,
  iconBg,
  label,
  sub,
  truncate,
  value,
}: {
  accent:    "violet" | "amber" | "indigo" | "emerald";
  icon:      React.ReactNode;
  iconBg:    string;
  label:     string;
  sub:       string;
  truncate?: boolean;
  value:     string;
}) {
  const borderMap = {
    violet:  "border-violet-500/[0.08] hover:border-violet-500/[0.15]",
    amber:   "border-amber-500/[0.08]  hover:border-amber-500/[0.15]",
    indigo:  "border-indigo-500/[0.08] hover:border-indigo-500/[0.15]",
    emerald: "border-emerald-500/[0.08] hover:border-emerald-500/[0.15]",
  };

  return (
    <div className={cn(
      "rounded-2xl border bg-white/[0.025] px-5 py-4 transition-all",
      borderMap[accent],
    )}>
      <div className="flex items-center justify-between gap-2 mb-3">
        <div className={cn("flex h-8 w-8 items-center justify-center rounded-xl", iconBg)}>
          {icon}
        </div>
        <p className="text-[10px] font-bold uppercase tracking-[0.16em] text-white/20">
          {label}
        </p>
      </div>
      <p className={cn("text-[24px] font-bold tracking-tight text-white", truncate && "truncate text-[18px]")}>
        {value}
      </p>
      <p className="mt-1 text-[11px] text-white/30 truncate">{sub}</p>
    </div>
  );
}

/* ── Feature pill ────────────────────────────────────────────────────────── */
function FeaturePill({ children }: { children: React.ReactNode }) {
  return (
    <span className="rounded-full border border-white/[0.07] bg-white/[0.03] px-3 py-1 text-[11px] text-white/40">
      {children}
    </span>
  );
}

function AchievementAutomationPanel({
  autoTrackedAchievements,
  linkedTaskAchievements,
  readyRewards,
}: {
  autoTrackedAchievements: Achievement[];
  linkedTaskAchievements: Achievement[];
  readyRewards: number;
}) {
  const sourceLabel: Record<string, string> = {
    completed_tasks_count: "Alle erledigten Tasks",
    linked_tasks_completed_count: "Gelinkte Tasks",
    manual: "Manuell",
  };
  const featured = [...autoTrackedAchievements, ...linkedTaskAchievements]
    .filter((achievement, index, list) => list.findIndex((item) => item.id === achievement.id) === index)
    .slice(0, 3);

  return (
    <div className="mb-6 overflow-hidden rounded-[28px] border border-violet-500/15 bg-[radial-gradient(circle_at_top_left,rgba(124,58,237,0.12),rgba(255,255,255,0.02)_46%,rgba(255,255,255,0.015)_100%)]">
      <div className="grid gap-4 p-5 lg:grid-cols-[0.95fr_1.05fr]">
        <div>
          <p className="text-[10px] font-bold uppercase tracking-[0.18em] text-violet-700 dark:text-violet-300/60">
            Goal Automation
          </p>
          <h2 className="mt-1 text-[18px] font-bold tracking-tight text-white">
            Achievements sollen nicht nur Deko sein
          </h2>
          <p className="mt-2 max-w-xl text-[13px] leading-relaxed text-white/38">
            Fortschritt kann automatisch aus erledigten Tasks oder direkt gelinkten Aufgaben entstehen.
            Etappen lassen sich trotzdem weiter manuell abhaken, wenn du bewusst ein Milestone-Gefühl setzen willst.
          </p>

          <div className="mt-5 grid gap-3 sm:grid-cols-3">
            <AutomationStat label="Auto-track" value={autoTrackedAchievements.length} />
            <AutomationStat label="Task links" value={linkedTaskAchievements.length} />
            <AutomationStat label="Rewards ready" value={readyRewards} />
          </div>
        </div>

        <div className="space-y-3">
          {featured.length === 0 ? (
            <div className="rounded-2xl border border-dashed border-white/[0.07] bg-white/[0.015] p-5 text-center">
              <p className="text-[13px] font-semibold text-white/42">Noch keine Automation aktiv</p>
              <p className="mt-1 text-[12px] text-white/26">
                Stelle ein Achievement auf “All completed tasks” oder “Linked tasks completed”, um es automatisch laufen zu lassen.
              </p>
            </div>
          ) : (
            featured.map((achievement) => (
              <div key={achievement.id} className="rounded-2xl border border-white/[0.06] bg-white/[0.025] p-4">
                <div className="flex items-center justify-between gap-3">
                  <div className="min-w-0">
                    <p className="truncate text-[14px] font-semibold text-white/78">
                      {achievement.icon} {achievement.title}
                    </p>
                    <p className="mt-1 text-[11px] uppercase tracking-[0.14em] text-white/24">
                      {sourceLabel[achievement.progress_source]}
                    </p>
                  </div>
                  <span className="shrink-0 rounded-full border border-violet-500/20 bg-violet-500/[0.08] px-2.5 py-1 text-[10px] font-bold text-violet-700 dark:text-violet-200">
                    {getAchievementProgressPercent(achievement)}%
                  </span>
                </div>
                <div className="mt-3 h-1.5 overflow-hidden rounded-full bg-white/[0.06]">
                  <div
                    className="h-full rounded-full bg-violet-300/80"
                    style={{ width: `${getAchievementProgressPercent(achievement)}%` }}
                  />
                </div>
              </div>
            ))
          )}
        </div>
      </div>
    </div>
  );
}

function AutomationStat({ label, value }: { label: string; value: number }) {
  return (
    <div className="rounded-2xl border border-white/[0.06] bg-white/[0.025] p-4">
      <p className="text-[10px] font-bold uppercase tracking-[0.14em] text-white/22">
        {label}
      </p>
      <p className="mt-2 text-[24px] font-bold text-white">{value}</p>
    </div>
  );
}