// ╔══════════════════════════════════════════════════════════════════════════╗
// ║  DESIGN NOTES — structural rules still apply, palette was consolidated   ║
// ║  (2026-08-31) from per-section rainbow accents down to neutral + one     ║
// ║  sky-blue accent (+ red reserved for danger/at-risk states) per the      ║
// ║  project-wide design system. Keep these structural constraints:          ║
// ║                                                                          ║
// ║  • SectionHeader icon → bg-white/[0.05] ONLY, NO ring-1 (causes         ║
// ║    a white ring outline visible against dark backgrounds)                ║
// ║  • Hero icon → border border-sky-500/[0.18], NOT ring-1 ring-sky-500/20  ║
// ║  • Section <section> backgrounds → ALL must use dark opaque radial       ║
// ║    gradients ending in rgba(...,1) stops. NEVER rgba(255,255,255,0.02)   ║
// ║  • DailyPulseCard → keep hover:brightness-110 or colored hover styles,   ║
// ║    never remove hover feedback                                            ║
// ║  • rewardReady filter → MUST keep !isRewardClaimed(achievement.id) check  ║
// ║                                                                          ║
// ║  If you need to change LOGIC/DATA only, leave all className values alone.║
// ╚══════════════════════════════════════════════════════════════════════════╝

"use client";

import { useCallback, useEffect, useMemo, useState } from "react";
import Link from "next/link";
import {
  ArrowRight,
  Award,
  Bot,
  CalendarDays,
  CheckSquare,
  Clock3,
  Flame,
  FolderKanban,
  Sparkles,
} from "lucide-react";
import { createClient } from "@/lib/supabase/client";
import { getAchievementProgressPercent, resolveAchievementStatus } from "@/lib/achievements";
import { getReminderDueAt, isReminderClosed, isReminderDue } from "@/lib/reminders";
import { cn, isTaskDeadlineDueToday, isTaskDeadlineOverdue } from "@/lib/utils";
import { useFocusStore } from "@/stores/focus-store";
import { useNotificationStore } from "@/stores/notification-store";
import { useWorkspaceStore } from "@/stores/workspace-store";
import type { Achievement, CalendarEvent, Project, Reminder, Task } from "@/types";

interface CommandData {
  achievements: Achievement[];
  completedToday: number;
  events: CalendarEvent[];
  journalEntry: { content?: unknown; mood?: string | null } | null;
  projects: Project[];
  reminders: Reminder[];
  tasks: Task[];
}

const EMPTY_DATA: CommandData = {
  achievements: [],
  completedToday: 0,
  events: [],
  journalEntry: null,
  projects: [],
  reminders: [],
  tasks: [],
};

const PRIORITY_WEIGHT: Record<string, number> = {
  urgent: 4,
  high: 3,
  medium: 2,
  low: 1,
  none: 0,
};

function getTodayKey() {
  return new Date().toISOString().split("T")[0];
}

function formatTime(iso: string) {
  return new Date(iso).toLocaleTimeString("de-DE", { hour: "2-digit", minute: "2-digit" });
}

function extractText(content: unknown) {
  const chunks: string[] = [];

  function walk(value: unknown) {
    if (!value || typeof value !== "object") return;
    if ("text" in value && typeof value.text === "string") chunks.push(value.text);
    if ("content" in value && Array.isArray(value.content)) value.content.forEach(walk);
  }

  walk(content);
  return chunks.join(" ").trim();
}

function buildFocusStreak(reviewHistory: ReturnType<typeof useFocusStore.getState>["focusReviewHistory"]) {
  const days = Array.from(
    new Set(
      reviewHistory
        .filter((review) => review.workDuration > 0 || review.completedTasks.length > 0)
        .map((review) => new Date(review.endedAt).toISOString().split("T")[0]),
    ),
  ).sort((a, b) => b.localeCompare(a));

  if (days.length === 0) return 0;

  const cursor = new Date();
  let streak = 0;
  for (let index = 0; index < 30; index++) {
    const key = cursor.toISOString().split("T")[0];
    if (!days.includes(key)) {
      if (streak === 0 && index === 0) {
        cursor.setDate(cursor.getDate() - 1);
        continue;
      }
      break;
    }
    streak += 1;
    cursor.setDate(cursor.getDate() - 1);
  }

  return streak;
}

export default function CommandCenterPage() {
  const [data, setData] = useState<CommandData>(EMPTY_DATA);
  const [loading, setLoading] = useState(true);
  const supabase = createClient();
  const activeTeamId = useWorkspaceStore((state) => state.activeTeamId);
  const initialized = useWorkspaceStore((state) => state.initialized);
  const focusReviewHistory = useFocusStore((state) => state.focusReviewHistory);
  const isRewardClaimed = useNotificationStore((state) => state.isRewardClaimed);

  const fetchData = useCallback(async () => {
    if (!initialized) return;

    setLoading(true);
    const now = new Date();
    const todayStart = new Date(now.getFullYear(), now.getMonth(), now.getDate()).toISOString();
    const todayEnd = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1).toISOString();
    const weekEnd = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 7).toISOString();
    const todayKey = getTodayKey();

    const tasksQuery = activeTeamId
      ? supabase
          .from("tasks")
          .select("*")
          .eq("team_id", activeTeamId)
          .is("parent_task_id", null)
          .in("status", ["todo", "in_progress"])
          .order("deadline", { ascending: true, nullsFirst: false })
          .order("created_at", { ascending: false })
          .limit(80)
      : supabase
          .from("tasks")
          .select("*")
          .is("team_id", null)
          .is("parent_task_id", null)
          .in("status", ["todo", "in_progress"])
          .order("deadline", { ascending: true, nullsFirst: false })
          .order("created_at", { ascending: false })
          .limit(80);

    const completedQuery = activeTeamId
      ? supabase
          .from("tasks")
          .select("id", { count: "exact", head: true })
          .eq("team_id", activeTeamId)
          .eq("status", "done")
          .gte("completed_at", todayStart)
          .lt("completed_at", todayEnd)
      : supabase
          .from("tasks")
          .select("id", { count: "exact", head: true })
          .is("team_id", null)
          .eq("status", "done")
          .gte("completed_at", todayStart)
          .lt("completed_at", todayEnd);

    const eventsQuery = activeTeamId
      ? supabase
          .from("events")
          .select("*")
          .eq("team_id", activeTeamId)
          .gte("start_time", todayStart)
          .lt("start_time", weekEnd)
          .order("start_time")
          .limit(24)
      : supabase
          .from("events")
          .select("*")
          .is("team_id", null)
          .gte("start_time", todayStart)
          .lt("start_time", weekEnd)
          .order("start_time")
          .limit(24);

    const remindersQuery = activeTeamId
      ? supabase
          .from("reminders")
          .select("*")
          .eq("team_id", activeTeamId)
          .in("status", ["scheduled", "triggered", "snoozed"])
          .order("remind_at")
          .limit(60)
      : supabase
          .from("reminders")
          .select("*")
          .is("team_id", null)
          .in("status", ["scheduled", "triggered", "snoozed"])
          .order("remind_at")
          .limit(60);

    const projectsQuery = activeTeamId
      ? supabase
          .from("projects")
          .select("*")
          .eq("team_id", activeTeamId)
          .order("updated_at", { ascending: false })
          .limit(30)
      : supabase
          .from("projects")
          .select("*")
          .is("team_id", null)
          .order("updated_at", { ascending: false })
          .limit(30);

    const achievementsQuery = activeTeamId
      ? supabase
          .from("achievements")
          .select("*")
          .eq("team_id", activeTeamId)
          .neq("status", "archived")
          .order("updated_at", { ascending: false })
          .limit(50)
      : supabase
          .from("achievements")
          .select("*")
          .is("team_id", null)
          .neq("status", "archived")
          .order("updated_at", { ascending: false })
          .limit(50);

    const journalQuery = supabase
      .from("journal_entries")
      .select("content, mood")
      .eq("entry_date", todayKey)
      .maybeSingle();

    const [
      { data: tasksData },
      completedResult,
      { data: eventsData },
      { data: remindersData },
      { data: projectsData },
      { data: achievementsData },
      { data: journalData },
    ] = await Promise.all([
      tasksQuery,
      completedQuery,
      eventsQuery,
      remindersQuery,
      projectsQuery,
      achievementsQuery,
      journalQuery,
    ]);

    setData({
      achievements: (achievementsData || []) as Achievement[],
      completedToday: completedResult.count || 0,
      events: (eventsData || []) as CalendarEvent[],
      journalEntry: journalData as CommandData["journalEntry"],
      projects: (projectsData || []) as Project[],
      reminders: (remindersData || []) as Reminder[],
      tasks: (tasksData || []) as Task[],
    });
    setLoading(false);
  }, [activeTeamId, initialized, supabase]);

  useEffect(() => {
    const timer = window.setTimeout(() => {
      void fetchData();
    }, 0);

    return () => window.clearTimeout(timer);
  }, [fetchData]);

  const overdueTasks = useMemo(
    () => data.tasks.filter((task) => task.deadline && isTaskDeadlineOverdue(task.deadline)),
    [data.tasks],
  );
  const todayTasks = useMemo(
    () => data.tasks.filter((task) => task.deadline && isTaskDeadlineDueToday(task.deadline)),
    [data.tasks],
  );
  const dueReminders = useMemo(
    () => data.reminders.filter((reminder) => !isReminderClosed(reminder) && isReminderDue(reminder)),
    [data.reminders],
  );
  const commandTasks = useMemo(
    () =>
      [...data.tasks]
        .sort((a, b) => {
          const aScore =
            (a.deadline && isTaskDeadlineOverdue(a.deadline) ? 1000 : 0) +
            (a.deadline && isTaskDeadlineDueToday(a.deadline) ? 500 : 0) +
            (PRIORITY_WEIGHT[a.priority] || 0) * 80;
          const bScore =
            (b.deadline && isTaskDeadlineOverdue(b.deadline) ? 1000 : 0) +
            (b.deadline && isTaskDeadlineDueToday(b.deadline) ? 500 : 0) +
            (PRIORITY_WEIGHT[b.priority] || 0) * 80;
          return bScore - aScore;
        })
        .slice(0, 6),
    [data.tasks],
  );
  const rewardReady = useMemo(
    () =>
      data.achievements.filter(
        (achievement) =>
          achievement.reward_title &&
          resolveAchievementStatus(achievement) === "completed" &&
          !achievement.reward_claim &&
          !isRewardClaimed(achievement.id),
      ),
    [data.achievements, isRewardClaimed],
  );
  const nextAchievements = useMemo(
    () =>
      data.achievements
        .filter((achievement) => resolveAchievementStatus(achievement) !== "completed")
        .sort((a, b) => getAchievementProgressPercent(b) - getAchievementProgressPercent(a))
        .slice(0, 3),
    [data.achievements],
  );
  const focusStreak = useMemo(() => buildFocusStreak(focusReviewHistory), [focusReviewHistory]);
  const journalText = extractText(data.journalEntry?.content);
  const atRiskProjects = data.projects.filter((project) => project.health !== "on_track");

  const coachNotes = useMemo(() => {
    const notes: string[] = [];
    if (overdueTasks.length > 0) notes.push(`Clear ${overdueTasks.length} overdue task${overdueTasks.length > 1 ? "s" : ""} before adding new work.`);
    if (dueReminders.length > 0) notes.push(`${dueReminders.length} reminder${dueReminders.length > 1 ? "s are" : " is"} due now. Snooze or finish them to lower mental noise.`);
    if (data.events.length > 0) notes.push(`Protect energy around ${data.events.length} upcoming calendar item${data.events.length > 1 ? "s" : ""}.`);
    if (!journalText) notes.push("Write a short journal entry today so the reflection loop has signal.");
    if (rewardReady.length > 0) notes.push(`You have ${rewardReady.length} reward${rewardReady.length > 1 ? "s" : ""} ready. Claiming them reinforces the system.`);
    if (focusStreak === 0) notes.push("Start one focused block today. Even 25 minutes keeps the deep-work loop alive.");
    if (notes.length === 0) notes.push("System looks clean. Pick one high-leverage task and protect a deep-work block.");
    return notes.slice(0, 5);
  }, [data.events.length, dueReminders.length, focusStreak, journalText, overdueTasks.length, rewardReady.length]);

  return (
    <div className="min-h-full bg-[#0a0a0d] text-white">
      <div className="mx-auto max-w-[1280px] px-6 pt-8">
      <div className="relative overflow-hidden rounded-[28px] border border-white/[0.06] bg-white/[0.02] p-8">
        <div className="pointer-events-none absolute inset-0">
          <div
            className="absolute -left-[10%] -top-[40%] h-[500px] w-[500px] rounded-full opacity-[0.08] blur-3xl"
            style={{ background: "radial-gradient(circle, #0ea5e9, transparent 70%)" }}
          />
          <div
            className="absolute right-[10%] top-[20%] h-[300px] w-[300px] rounded-full opacity-[0.05] blur-3xl"
            style={{ background: "radial-gradient(circle, #0ea5e9, transparent 70%)" }}
          />
        </div>

        <div className="relative">
          <div className="flex flex-col gap-8 lg:flex-row lg:items-start lg:justify-between">
            <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-white/[0.06] border border-white/[0.08]">
                  <Sparkles className="h-5 w-5 text-white/50" />
                </div>
                <div>
                  <p className="text-[10px] font-bold uppercase tracking-[0.22em] text-white/40">
                    AI Daily Command Center
                  </p>
                </div>
              </div>

              <h1 className="text-[36px] font-black leading-[1.1] tracking-[-0.02em] text-white">
                Dein Tag<br />
                <span className="bg-gradient-to-r from-white/35 to-white/20 bg-clip-text text-transparent">
                  ohne Rauschen.
                </span>
              </h1>
              <p className="mt-4 max-w-lg text-[14px] leading-relaxed text-white/45">
                Eine klare Tagesansicht für Entscheidungen, Fokus, Reminder und nächste Schritte.
                Life Map bleibt Strategie. Command Center ist Umsetzung.
              </p>

              <div className="mt-5 flex flex-wrap gap-2">
                <FeaturePill>Daily briefing</FeaturePill>
                <FeaturePill>Focus-ready</FeaturePill>
                <FeaturePill>Reminder cleanup</FeaturePill>
                <FeaturePill>War signals</FeaturePill>
              </div>
            </div>

            <div className="grid w-full gap-3 sm:grid-cols-2 lg:max-w-[520px]">
              <HeroStat label="Done" value={String(data.completedToday)} tone="emerald" />
              <HeroStat label="Today" value={String(todayTasks.length)} tone="cyan" />
              <HeroStat label="Due now" value={String(dueReminders.length)} tone="amber" />
              <HeroStat label="Focus streak" value={`${focusStreak}d`} tone="violet" />
            </div>
          </div>
        </div>
      </div>
      </div>

      <div className="mx-auto grid max-w-[1280px] items-start gap-6 px-6 py-8 xl:grid-cols-[1.12fr_0.88fr]">
        <div className="space-y-6">
          {/* DESIGN LOCKED: border-sky-500/[0.16] + dark opaque gradient — NEVER use rgba(255,255,255,...) stops or border-white */}
          <section className="overflow-hidden rounded-[28px] border border-sky-500/[0.16] bg-[radial-gradient(ellipse_at_top_left,rgba(14,165,233,0.10),rgba(10,12,20,0.97)_50%,rgba(9,10,15,1)_100%)]">
            <div className="flex flex-col gap-2 border-b border-sky-500/[0.12] 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-sky-300/60">
                  Daily Briefing
                </p>
                <h2 className="mt-1 text-[18px] font-bold tracking-tight text-white">
                  Was jetzt zählt
                </h2>
              </div>
              <p className="text-[12px] text-white/30">Clean, direct, actionable</p>
            </div>
            <div className="grid gap-3 p-5 lg:grid-cols-3">
              <BriefingRow
                icon={<CheckSquare className="h-4 w-4" />}
                label="First move"
                title={commandTasks[0]?.title || "Wähle eine klare Startaufgabe"}
                tone="cyan"
              />
              <BriefingRow
                icon={<Clock3 className="h-4 w-4" />}
                label="Clean before focus"
                title={
                  dueReminders.length > 0
                    ? `${dueReminders.length} Reminder brauchen Entscheidung`
                    : overdueTasks.length > 0
                      ? `${overdueTasks.length} Tasks sind überfällig`
                      : "Attention Layer ist sauber"
                }
                tone={dueReminders.length > 0 || overdueTasks.length > 0 ? "amber" : "emerald"}
              />
              <BriefingRow
                icon={<FolderKanban className="h-4 w-4" />}
                label="War signal"
                title={
                  atRiskProjects.length > 0
                    ? `${atRiskProjects.length} Projekt${atRiskProjects.length > 1 ? "e" : ""} brauchen Entscheidung`
                    : "Keine Projekt-Warnung"
                }
                tone={atRiskProjects.length > 0 ? "red" : "violet"}
              />
            </div>
          </section>

          <section className="overflow-hidden rounded-[28px] border border-sky-500/[0.16] bg-[radial-gradient(ellipse_at_top_left,rgba(14,165,233,0.10),rgba(9,11,18,0.97)_50%,rgba(9,10,15,1)_100%)] p-5">
            <SectionHeader icon={<CheckSquare className="h-4 w-4 text-sky-300" />} title="Command Stack" subtitle="The work that should shape today." />
            {loading ? (
              <div className="mt-5 h-52 animate-pulse rounded-2xl bg-white/[0.04]" />
            ) : commandTasks.length === 0 ? (
              <EmptyPanel title="No command tasks" description="Your open task layer is clean." />
            ) : (
              <div className="mt-5 space-y-3">
                {commandTasks.map((task) => (
                  <CommandTaskRow key={task.id} task={task} />
                ))}
              </div>
            )}
          </section>

          <section className="grid gap-6 lg:grid-cols-2">
            <Panel title="Today Timeline" icon={<CalendarDays className="h-4 w-4 text-sky-300" />} tone="sky">
              <div className="space-y-3">
                {data.events.slice(0, 5).map((event) => (
                  <TimelineItem key={event.id} time={formatTime(event.start_time)} title={event.title} meta="Calendar" />
                ))}
                {data.reminders
                  .filter((reminder) => !isReminderClosed(reminder))
                  .slice(0, 4)
                  .map((reminder) => (
                    <TimelineItem
                      key={reminder.id}
                      time={formatTime(getReminderDueAt(reminder))}
                      title={reminder.title}
                      meta={isReminderDue(reminder) ? "Due now" : "Reminder"}
                      urgent={isReminderDue(reminder)}
                    />
                  ))}
                {data.events.length === 0 && data.reminders.length === 0 && (
                  <EmptyPanel title="No timeline pressure" description="No events or reminders are pulling attention right now." compact />
                )}
              </div>
            </Panel>

            <Panel title="AI Reflection Coach" icon={<Bot className="h-4 w-4 text-sky-300" />} tone="violet">
              <div className="space-y-3">
                {coachNotes.map((note, index) => (
                  <div key={note} className="rounded-2xl border border-sky-400/10 bg-sky-400/[0.035] p-3">
                    <p className="text-[10px] font-bold uppercase tracking-[0.14em] text-white/20">Signal {index + 1}</p>
                    <p className="mt-1 text-[13px] leading-relaxed text-white/68">{note}</p>
                  </div>
                ))}
              </div>
            </Panel>
          </section>

          {/* DESIGN LOCKED: border-red-500/[0.18] + dark opaque gradient — keep all rgba stops as opaque dark values */}
          <section className="overflow-hidden rounded-[28px] border border-red-500/[0.18] bg-[radial-gradient(ellipse_at_top_left,rgba(239,68,68,0.09),rgba(11,8,8,0.97)_50%,rgba(9,10,13,1)_100%)] p-5">
            <SectionHeader icon={<FolderKanban className="h-4 w-4 text-red-300" />} title="Project War Signals" subtitle="Projects that need a decision." />
            <div className="mt-5 space-y-3">
              {atRiskProjects.slice(0, 3).map((project) => (
                <Link key={project.id} href={`/projects/${project.id}`} className="group block rounded-2xl border border-red-500/[0.18] bg-red-500/[0.05] p-3.5 transition-all hover:border-red-500/[0.30] hover:bg-red-500/[0.09]">
                  <div className="flex items-center justify-between gap-3">
                    <p className="truncate text-[13px] font-semibold text-white/78 group-hover:text-white/92 transition-colors">{project.icon} {project.name}</p>
                    <span className="rounded-lg border border-red-500/[0.25] bg-red-500/[0.10] px-2.5 py-0.5 text-[10px] font-bold uppercase tracking-[0.12em] text-red-300/80">
                      {project.health.replace("_", " ")}
                    </span>
                  </div>
                  <p className="mt-1.5 line-clamp-2 text-[12px] text-white/35">{project.goal || project.description || "Needs clearer direction."}</p>
                </Link>
              ))}
              {atRiskProjects.length === 0 && (
                <EmptyPanel title="No war-room alerts" description="No project is marked at risk or stuck." compact />
              )}
            </div>
          </section>
        </div>

        <div className="space-y-6">
          <section className="overflow-hidden rounded-[28px] border border-sky-500/[0.16] bg-[radial-gradient(ellipse_at_top_left,rgba(14,165,233,0.10),rgba(9,11,18,0.97)_50%,rgba(9,10,15,1)_100%)] p-5">
            <SectionHeader icon={<Sparkles className="h-4 w-4 text-sky-300" />} title="Daily Pulse" subtitle="Concrete moves for today, not another system score." />
            <div className="mt-5 grid gap-3">
              <DailyPulseCard
                accent="cyan"
                label="First move"
                title={commandTasks[0]?.title || "Choose one command task"}
                description={
                  commandTasks[0]
                    ? "Start here before opening new loops."
                    : "Your task stack is clean. Create one meaningful next action if needed."
                }
                href={commandTasks[0] ? "/tasks" : "/tasks?create=1"}
              />
              <DailyPulseCard
                accent={dueReminders.length > 0 || overdueTasks.length > 0 ? "amber" : "emerald"}
                label="Attention cleanup"
                title={
                  dueReminders.length > 0
                    ? `${dueReminders.length} reminder${dueReminders.length > 1 ? "s" : ""} due now`
                    : overdueTasks.length > 0
                      ? `${overdueTasks.length} overdue task${overdueTasks.length > 1 ? "s" : ""}`
                      : "No urgent cleanup"
                }
                description={
                  dueReminders.length > 0 || overdueTasks.length > 0
                    ? "Clear, snooze, or reschedule this before deep work."
                    : "Your attention layer is calm enough for focused work."
                }
                href={dueReminders.length > 0 ? "/reminders" : "/tasks?filter=overdue"}
              />
              <DailyPulseCard
                accent={rewardReady.length > 0 ? "amber" : "violet"}
                label="Motivation loop"
                title={
                  rewardReady.length > 0
                    ? `${rewardReady.length} reward${rewardReady.length > 1 ? "s" : ""} ready`
                    : nextAchievements[0]?.title || "No near reward"
                }
                description={
                  rewardReady.length > 0
                    ? "Claiming rewards makes the system feel earned."
                    : "Push the closest achievement forward to create a destination."
                }
                href="/achievements"
              />
              <DailyPulseCard
                accent={atRiskProjects.length > 0 ? "red" : "emerald"}
                label="Project pressure"
                title={
                  atRiskProjects.length > 0
                    ? `${atRiskProjects.length} project${atRiskProjects.length > 1 ? "s" : ""} need decisions`
                    : "No project alert"
                }
                description={
                  atRiskProjects.length > 0
                    ? "Open the War Room for the project that feels most expensive to ignore."
                    : "Project layer is stable enough for execution."
                }
                href={atRiskProjects[0] ? `/projects/${atRiskProjects[0].id}` : "/projects"}
              />
            </div>
          </section>

          <section className="overflow-hidden rounded-[28px] border border-sky-500/[0.18] bg-[radial-gradient(ellipse_at_top_left,rgba(14,165,233,0.10),rgba(9,11,18,0.97)_50%,rgba(9,10,15,1)_100%)] p-5">
            <SectionHeader icon={<Flame className="h-4 w-4 text-sky-300" />} title="Deep Work Streak" subtitle="Focus streaks built from completed sessions." />
            <div className="mt-5 rounded-[24px] border border-sky-400/15 bg-sky-400/[0.06] p-5">
              <p className="text-[48px] font-black tracking-tight text-white">{focusStreak}</p>
              <p className="text-[12px] font-bold uppercase tracking-[0.16em] text-sky-200/55">day streak</p>
              <p className="mt-3 text-[13px] leading-relaxed text-white/42">
                {focusStreak > 0
                  ? "Keep the chain alive with one intentional focus block today."
                  : "Start a focused session today to begin the chain."}
              </p>
              <Link href="/focus" className="mt-4 inline-flex items-center gap-2 rounded-xl bg-sky-400/20 border border-sky-400/30 px-4 py-2 text-[12px] font-bold text-sky-200 transition-all hover:bg-sky-400/30">
                Open Focus
                <ArrowRight className="h-3.5 w-3.5" />
              </Link>
            </div>
          </section>

          <section className="overflow-hidden rounded-[28px] border border-sky-500/[0.18] bg-[radial-gradient(ellipse_at_top_left,rgba(14,165,233,0.10),rgba(9,11,18,0.97)_50%,rgba(9,10,15,1)_100%)] p-5">
            <SectionHeader icon={<Award className="h-4 w-4 text-sky-300" />} title="Rewards & Goals" subtitle="Claim what is ready. Push what is close." />
            <div className="mt-5 space-y-3">
              {rewardReady.slice(0, 2).map((achievement) => (
                <MiniAchievement key={achievement.id} achievement={achievement} ready />
              ))}
              {nextAchievements.map((achievement) => (
                <MiniAchievement key={achievement.id} achievement={achievement} />
              ))}
              {rewardReady.length === 0 && nextAchievements.length === 0 && (
                <EmptyPanel title="No achievement pressure" description="Create or tune achievements to give the system direction." compact />
              )}
            </div>
          </section>
        </div>
      </div>
    </div>
  );
}

function HeroStat({
  label,
  tone,
  value,
}: {
  label: string;
  tone: "amber" | "cyan" | "emerald" | "violet";
  value: string;
}) {
  const toneClasses = {
    amber: "border-white/[0.08] bg-white/[0.03]",
    cyan: "border-white/[0.08] bg-white/[0.03]",
    emerald: "border-white/[0.08] bg-white/[0.03]",
    violet: "border-white/[0.08] bg-white/[0.03]",
  };
  const valueColor = {
    amber: "text-white/85",
    cyan: "text-white/85",
    emerald: "text-white/85",
    violet: "text-white/85",
  };

  return (
    <div className={cn("relative overflow-hidden rounded-2xl border px-4 py-3.5", toneClasses[tone])}>
      <p className="text-[10px] font-bold uppercase tracking-[0.18em] text-white/30">{label}</p>
      <p className={cn("mt-1 text-[26px] font-black leading-none tracking-tight", valueColor[tone])}>{value}</p>
    </div>
  );
}

function BriefingRow({
  icon,
  label,
  title,
  tone,
}: {
  icon: React.ReactNode;
  label: string;
  title: string;
  tone: "amber" | "cyan" | "emerald" | "red" | "violet";
}) {
  const toneClasses = {
    amber: "border-sky-400/[0.20] bg-sky-400/[0.07]",
    cyan: "border-sky-400/[0.20] bg-sky-400/[0.07]",
    emerald: "border-white/[0.08] bg-white/[0.03]",
    red: "border-red-500/[0.20] bg-red-500/[0.07]",
    violet: "border-white/[0.08] bg-white/[0.03]",
  };
  const iconClasses = {
    amber: "bg-sky-400/[0.15] text-sky-300",
    cyan: "bg-sky-400/[0.15] text-sky-300",
    emerald: "bg-white/[0.06] text-white/60",
    red: "bg-red-500/[0.15] text-red-300",
    violet: "bg-white/[0.06] text-white/60",
  };
  const labelClasses = {
    amber: "text-sky-300/60",
    cyan: "text-sky-300/60",
    emerald: "text-white/40",
    red: "text-red-300/60",
    violet: "text-white/40",
  };

  return (
    <div className={cn("flex items-center gap-3 rounded-2xl border p-3.5", toneClasses[tone])}>
      <div className={cn("flex h-9 w-9 shrink-0 items-center justify-center rounded-xl", iconClasses[tone])}>
        {icon}
      </div>
      <div className="min-w-0">
        <p className={cn("text-[10px] font-bold uppercase tracking-[0.15em]", labelClasses[tone])}>{label}</p>
        <p className="mt-0.5 truncate text-[13px] font-semibold text-white/80">{title}</p>
      </div>
    </div>
  );
}

function SectionHeader({ icon, subtitle, title }: { icon: React.ReactNode; subtitle: string; title: string }) {
  return (
    <div className="flex items-center gap-3">
      {/* DESIGN LOCKED: bg-white/[0.05] ONLY — NO ring-1, NO ring-white classes (create white outline on dark bg) */}
      <div className="flex h-10 w-10 items-center justify-center rounded-2xl bg-white/[0.05]">{icon}</div>
      <div>
        <h2 className="text-[16px] font-bold tracking-tight text-white">{title}</h2>
        <p className="text-[12px] text-white/35">{subtitle}</p>
      </div>
    </div>
  );
}

function FeaturePill({ children }: { children: React.ReactNode }) {
  return (
    <span className="rounded-full border border-sky-500/[0.18] bg-sky-500/[0.06] px-3 py-1.5 text-[11px] font-semibold text-sky-200/50">
      {children}
    </span>
  );
}

function CommandTaskRow({ task }: { task: Task }) {
  const overdue = Boolean(task.deadline && isTaskDeadlineOverdue(task.deadline));
  const dueToday = Boolean(task.deadline && isTaskDeadlineDueToday(task.deadline));

  return (
    <Link href="/tasks" className="group flex items-center justify-between gap-4 rounded-2xl border border-white/[0.04] bg-white/[0.02] px-4 py-3 transition-all hover:border-sky-400/[0.18] hover:bg-sky-400/[0.04]">
      <div className="min-w-0 flex-1">
        <p className="truncate text-[13px] font-semibold text-white/75 group-hover:text-white/90 transition-colors">{task.title}</p>
        <p className="mt-0.5 text-[11px] text-white/28">
          {task.priority.toUpperCase()}{task.deadline ? ` · ${new Date(task.deadline).toLocaleDateString("de-DE")}` : " · no deadline"}
        </p>
      </div>
      <span className={cn("shrink-0 rounded-lg px-2.5 py-1 text-[10px] font-bold uppercase tracking-[0.12em]", overdue ? "bg-red-500/15 text-red-300" : dueToday ? "bg-sky-400/15 text-sky-300" : "bg-white/[0.05] text-white/30")}>
        {overdue ? "Overdue" : dueToday ? "Today" : "Next"}
      </span>
    </Link>
  );
}

function Panel({
  children,
  icon,
  title,
  tone,
}: {
  children: React.ReactNode;
  icon: React.ReactNode;
  title: string;
  tone: "sky" | "violet";
}) {
  // DESIGN LOCKED: all gradient stops are opaque dark rgba values — DO NOT replace with rgba(255,255,255,...) or lighter values
  const toneClasses = {
    sky: "border-sky-500/[0.16] bg-[radial-gradient(ellipse_at_top_left,rgba(14,165,233,0.10),rgba(9,11,18,0.97)_50%,rgba(9,10,15,1)_100%)]",
    violet: "border-sky-500/[0.16] bg-[radial-gradient(ellipse_at_top_left,rgba(14,165,233,0.10),rgba(9,11,18,0.97)_50%,rgba(9,10,15,1)_100%)]",
  };

  return (
    <section className={cn("overflow-hidden rounded-[28px] border p-5", toneClasses[tone])}>
      <SectionHeader icon={icon} title={title} subtitle="AI-shaped operational context." />
      <div className="mt-5">{children}</div>
    </section>
  );
}

function TimelineItem({ meta, time, title, urgent }: { meta: string; time: string; title: string; urgent?: boolean }) {
  return (
    <div className={cn(
      "flex items-center gap-3 rounded-2xl border p-3 transition-all",
      urgent
        ? "border-sky-400/[0.22] bg-sky-400/[0.06]"
        : "border-white/[0.04] bg-white/[0.02]",
    )}>
      <div className={cn("w-14 shrink-0 text-[11px] font-bold tabular-nums", urgent ? "text-sky-300" : "text-white/30")}>{time}</div>
      <div className="min-w-0 flex-1">
        <p className="truncate text-[13px] font-semibold text-white/72">{title}</p>
        <p className="text-[10px] uppercase tracking-[0.14em] text-white/24">{meta}</p>
      </div>
      {urgent && <div className="h-1.5 w-1.5 shrink-0 rounded-full bg-sky-400 shadow-[0_0_6px_rgba(56,189,248,0.6)]" />}
    </div>
  );
}

function DailyPulseCard({
  accent,
  description,
  href,
  label,
  title,
}: {
  accent: "amber" | "cyan" | "emerald" | "red" | "violet";
  description: string;
  href: string;
  label: string;
  title: string;
}) {
  const accentClasses = {
    amber: "border-sky-400/[0.20] bg-sky-400/[0.06]",
    cyan: "border-sky-400/[0.20] bg-sky-400/[0.06]",
    emerald: "border-white/[0.08] bg-white/[0.03]",
    red: "border-red-500/[0.20] bg-red-500/[0.06]",
    violet: "border-white/[0.08] bg-white/[0.03]",
  };
  const labelColor = {
    amber: "text-sky-300/65",
    cyan: "text-sky-300/65",
    emerald: "text-white/45",
    red: "text-red-300/65",
    violet: "text-white/45",
  };

  return (
    <Link
      href={href}
      className={cn(
        "group block rounded-2xl border p-4 transition-all hover:brightness-110",
        accentClasses[accent],
      )}
    >
      <div className="flex items-start justify-between gap-3">
        <div className="min-w-0 flex-1">
          <p className={cn("text-[10px] font-bold uppercase tracking-[0.15em]", labelColor[accent])}>{label}</p>
          <p className="mt-1 truncate text-[14px] font-bold text-white/85">{title}</p>
          <p className="mt-1 line-clamp-2 text-[12px] leading-relaxed text-white/38">{description}</p>
        </div>
        <ArrowRight className="mt-1 h-3.5 w-3.5 shrink-0 text-white/25 transition-all group-hover:translate-x-0.5 group-hover:text-white/55" />
      </div>
    </Link>
  );
}

function MiniAchievement({ achievement, ready }: { achievement: Achievement; ready?: boolean }) {
  return (
    <Link href={`/achievements/${achievement.id}`} className="group block rounded-2xl border border-sky-400/[0.16] bg-sky-400/[0.04] p-3 transition-all hover:border-sky-400/[0.28] hover:bg-sky-400/[0.08]">
      <div className="flex items-center justify-between gap-3">
        <p className="truncate text-[13px] font-semibold text-white/78 group-hover:text-white/90 transition-colors">{achievement.icon} {achievement.title}</p>
        <span className={cn("rounded-lg px-2.5 py-0.5 text-[10px] font-bold uppercase tracking-[0.12em]", ready ? "bg-sky-400/[0.18] text-sky-300" : "bg-white/[0.06] text-white/35")}>
          {ready ? "Reward" : `${getAchievementProgressPercent(achievement)}%`}
        </span>
      </div>
      <p className="mt-1 truncate text-[12px] text-white/35">{ready ? achievement.reward_title : achievement.description || "No description"}</p>
    </Link>
  );
}

function EmptyPanel({ compact, description, title }: { compact?: boolean; description: string; title: string }) {
  return (
    <div className={cn("rounded-2xl border border-dashed border-white/[0.06] bg-white/[0.01] text-center", compact ? "p-4" : "p-8")}>
      <p className="text-[13px] font-semibold text-white/40">{title}</p>
      <p className="mt-1 text-[12px] text-white/22">{description}</p>
    </div>
  );
}