"use client";

import { type ReactNode, useCallback, useEffect, useRef, useState } from "react";
import { useRouter } from "next/navigation";
import {
  CalendarDays,
  Check,
  CheckCircle2,
  ChevronDown,
  ChevronLeft,
  Circle,
  Clock,
  Pause,
  Play,
  Plus,
  RotateCcw,
  Sparkles,
  Target,
  X,
  Zap,
} from "lucide-react";
import { Modal } from "@/components/ui/modal";
import { cn, isTaskDeadlineOverdue } from "@/lib/utils";
import { playTaskDone } from "@/lib/sounds";
import { createClient } from "@/lib/supabase/client";
import { useFocusStore, fmtDelta, fmtMs, getWorkElapsed } from "@/stores/focus-store";
import { useWorkspaceStore } from "@/stores/workspace-store";
import type { CalendarEvent, Task } from "@/types";

type FocusTask = Task & { subtasks: Task[] };

/* ── Block timer ─────────────────────────────────────────────────────────── */

type BlockType = "work" | "shortBreak" | "longBreak";

const BLOCK_LABELS: Record<BlockType, string> = {
  work:       "Deep Work",
  shortBreak: "Kurze Pause",
  longBreak:  "Lange Pause",
};

const BLOCK_COLORS: Record<BlockType, string> = {
  work:       "#7c3aed",
  shortBreak: "#059669",
  longBreak:  "#0284c7",
};

const BLOCK_DEFAULT_MINUTES: Record<BlockType, number> = {
  work:       90,
  shortBreak: 15,
  longBreak:  30,
};

function loadBlockMinutes(): Record<BlockType, number> {
  if (typeof window === "undefined") return { ...BLOCK_DEFAULT_MINUTES };
  try {
    const raw = localStorage.getItem("mindavio-block-minutes");
    if (!raw) return { ...BLOCK_DEFAULT_MINUTES };
    return { ...BLOCK_DEFAULT_MINUTES, ...JSON.parse(raw) };
  } catch {
    return { ...BLOCK_DEFAULT_MINUTES };
  }
}

function saveBlockMinutes(v: Record<BlockType, number>) {
  try { localStorage.setItem("mindavio-block-minutes", JSON.stringify(v)); } catch { /* ignore */ }
}

type FocusEventState = "upcoming" | "soon" | "running" | "finished";

function fmtEventTime(iso: string) {
  return new Intl.DateTimeFormat("de-DE", {
    hour: "2-digit",
    minute: "2-digit",
  }).format(new Date(iso));
}

function fmtEventDate(iso: string) {
  return new Intl.DateTimeFormat("de-DE", {
    weekday: "short",
    day: "numeric",
    month: "short",
  }).format(new Date(iso));
}

export function FocusCenter() {
  const router = useRouter();
  const {
    focusStartTime,
    focusReturnPath,
    workTimerRunning,
    workTimerStart,
    workTimerElapsed,
    taskCompletions,
    completeFocusMode,
    pauseWorkTimer,
    recordTaskCompletion,
    resetWorkTimer,
    startWorkTimer,
  } = useFocusStore();

  const activeTeamId = useWorkspaceStore((state) => state.activeTeamId);
  const supabase = createClient();

  const [now, setNow] = useState(() => Date.now());
  const [tasks, setTasks] = useState<FocusTask[]>([]);
  const [events, setEvents] = useState<CalendarEvent[]>([]);
  const [manualDoneEventIds, setManualDoneEventIds] = useState<string[]>([]);
  const [selectedTask, setSelectedTask] = useState<FocusTask | null>(null);
  const [selectedEvent, setSelectedEvent] = useState<CalendarEvent | null>(null);
  const [loading, setLoading] = useState(true);
  const [showDone, setShowDone] = useState(false);
  const [showAddTask, setShowAddTask] = useState(false);
  const [addTaskTitle, setAddTaskTitle] = useState("");
  const [addTaskDescription, setAddTaskDescription] = useState("");
  const [addTaskFocus, setAddTaskFocus] = useState(true);
  const [addTaskSubtasks, setAddTaskSubtasks] = useState<string[]>([]);
  const [addTaskSaving, setAddTaskSaving] = useState(false);
  const [showAddEvent, setShowAddEvent] = useState(false);
  const [addEventTitle, setAddEventTitle] = useState("");
  const [addEventDescription, setAddEventDescription] = useState("");
  const [addEventDate, setAddEventDate] = useState(() => {
    const d = new Date();
    return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
  });
  const [addEventStart, setAddEventStart] = useState("09:00");
  const [addEventEnd, setAddEventEnd] = useState("10:00");
  const [addEventSaving, setAddEventSaving] = useState(false);

  // Block timer
  const blockAudioCtxRef = useRef<AudioContext | null>(null);
  const [blockMinutes, setBlockMinutes]   = useState<Record<BlockType, number>>(loadBlockMinutes);
  const [blockType, setBlockType]         = useState<BlockType>("work");
  const [blockRunning, setBlockRunning]   = useState(false);
  const [blockStartedAt, setBlockStartedAt] = useState<number | null>(null);
  const [blockSecondsAtStart, setBlockSecondsAtStart] = useState(() => loadBlockMinutes().work * 60);
  const [blockDone, setBlockDone]         = useState(false);
  const [showBlockSettings, setShowBlockSettings] = useState(false);

  const blockSecondsLeft = Math.max(
    0,
    blockRunning && blockStartedAt
      ? blockSecondsAtStart - Math.floor((now - blockStartedAt) / 1000)
      : blockSecondsAtStart,
  );

  const focusDuration = focusStartTime ? now - focusStartTime : 0;
  const workElapsed = getWorkElapsed(
    { workTimerRunning, workTimerStart, workTimerElapsed },
    now,
  );

  const completedIds = new Set(taskCompletions.map((completion) => completion.taskId));
  const manualDoneEventIdSet = new Set(manualDoneEventIds);
  const openTasks = tasks.filter((task) => !completedIds.has(task.id) && task.status !== "done");
  const doneTasks = taskCompletions.slice().reverse();
  const sortedTasks = [
    ...openTasks.filter((task) => task.is_focus),
    ...openTasks.filter((task) => !task.is_focus),
  ];

  const todayStr = new Date().toDateString();
  const todayEvents = events.filter(
    (event) => new Date(event.start_time).toDateString() === todayStr,
  );
  const upcomingEvents = events.filter(
    (event) => new Date(event.start_time).toDateString() !== todayStr,
  );

  const handleClose = useCallback(() => {
    const safeReturnPath =
      focusReturnPath && !focusReturnPath.startsWith("/focus")
        ? focusReturnPath
        : "/";

    router.push(safeReturnPath);
  }, [focusReturnPath, router]);

  const handleFinishFocus = useCallback(() => {
    completeFocusMode(activeTeamId);
    router.push("/focus/review");
  }, [activeTeamId, completeFocusMode, router]);

  const loadData = useCallback(async () => {
    setLoading(true);

    const todayStart = new Date();
    todayStart.setHours(0, 0, 0, 0);
    const weekEnd = new Date(Date.now() + 7 * 24 * 60 * 60 * 1000);

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

    const eventQuery = activeTeamId
      ? supabase
          .from("events")
          .select("*")
          .eq("team_id", activeTeamId)
          .gte("start_time", todayStart.toISOString())
          .lte("start_time", weekEnd.toISOString())
          .order("start_time")
          .limit(8)
      : supabase
          .from("events")
          .select("*")
          .is("team_id", null)
          .gte("start_time", todayStart.toISOString())
          .lte("start_time", weekEnd.toISOString())
          .order("start_time")
          .limit(8);

    const [{ data: taskData }, { data: eventData }] = await Promise.all([
      taskQuery,
      eventQuery,
    ]);

    const rootTasks: FocusTask[] = ((taskData as Task[]) || []).map((task) => ({
      ...task,
      subtasks: [],
    }));

    let hydratedTasks: FocusTask[] = rootTasks;

    if (rootTasks.length > 0) {
      const taskIds = rootTasks.map((task) => task.id);
      const subtaskQuery = activeTeamId
        ? supabase
            .from("tasks")
            .select("*")
            .eq("team_id", activeTeamId)
            .in("parent_task_id", taskIds)
            .order("sort_order")
            .order("created_at", { ascending: false })
        : supabase
            .from("tasks")
            .select("*")
            .is("team_id", null)
            .in("parent_task_id", taskIds)
            .order("sort_order")
            .order("created_at", { ascending: false });

      const { data: subtaskData } = await subtaskQuery;
      const subtasksByParent = new Map<string, Task[]>();

      ((subtaskData as Task[]) || []).forEach((subtask) => {
        const parentList = subtasksByParent.get(subtask.parent_task_id ?? "") || [];
        parentList.push(subtask);
        if (subtask.parent_task_id) {
          subtasksByParent.set(subtask.parent_task_id, parentList);
        }
      });

      hydratedTasks = rootTasks.map((task) => ({
        ...task,
        subtasks: subtasksByParent.get(task.id) || [],
      }));
    }

    const nextEvents = (eventData as CalendarEvent[]) || [];

    setTasks(hydratedTasks);
    setEvents(nextEvents);
    setManualDoneEventIds((current) =>
      current.filter((eventId) => nextEvents.some((event) => event.id === eventId)),
    );
    setSelectedTask((current) =>
      current ? hydratedTasks.find((task) => task.id === current.id) ?? null : null,
    );
    setSelectedEvent((current) =>
      current ? nextEvents.find((event) => event.id === current.id) ?? null : null,
    );
    setLoading(false);
  }, [activeTeamId, supabase]);

  useEffect(() => {
    const id = window.setInterval(() => setNow(Date.now()), 1000);
    return () => window.clearInterval(id);
  }, []);

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

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

  useEffect(() => {
    function handleKeyDown(event: KeyboardEvent) {
      if (selectedTask || selectedEvent) return;
      if (event.key === "Escape") {
        handleClose();
      }
    }

    document.addEventListener("keydown", handleKeyDown);
    return () => document.removeEventListener("keydown", handleKeyDown);
  }, [handleClose, selectedEvent, selectedTask]);

  // Block timer: play sound and mark done when countdown reaches 0
  useEffect(() => {
    if (blockRunning && blockSecondsLeft <= 0) {
      // Use the pre-unlocked AudioContext (resumed when user pressed Start)
      const ctx = blockAudioCtxRef.current;
      if (ctx && ctx.state === "running") {
        try {
          const notes = [
            { freq: 783.99, vol: 0.13, delay: 0,    dur: 0.90 },
            { freq: 659.25, vol: 0.13, delay: 0.22, dur: 0.85 },
            { freq: 523.25, vol: 0.15, delay: 0.44, dur: 1.20 },
          ];
          for (const { freq, vol, delay, dur } of notes) {
            const osc  = ctx.createOscillator();
            const gain = ctx.createGain();
            osc.connect(gain); gain.connect(ctx.destination);
            osc.type = "sine"; osc.frequency.value = freq;
            const t = ctx.currentTime + delay + 0.01;
            gain.gain.setValueAtTime(0.0001, t);
            gain.gain.linearRampToValueAtTime(vol, t + 0.015);
            gain.gain.exponentialRampToValueAtTime(0.0001, t + dur);
            osc.start(t); osc.stop(t + dur + 0.05);
          }
        } catch { /* ignore */ }
      }
      setBlockRunning(false);
      setBlockStartedAt(null);
      setBlockDone(true);
    }
  }, [blockSecondsLeft, blockRunning]);

  function handleBlockStartPause() {
    if (blockRunning) {
      const remaining = Math.max(
        0,
        blockSecondsAtStart - Math.floor((Date.now() - (blockStartedAt ?? Date.now())) / 1000),
      );
      setBlockSecondsAtStart(remaining);
      setBlockStartedAt(null);
      setBlockRunning(false);
    } else {
      // Unlock AudioContext during user gesture so it's ready for the completion sound later
      if (typeof window !== "undefined") {
        try {
          if (!blockAudioCtxRef.current) {
            const Ctor =
              (window as Window & typeof globalThis & { webkitAudioContext?: typeof AudioContext })
                .AudioContext ?? (window as unknown as { webkitAudioContext: typeof AudioContext }).webkitAudioContext;
            if (Ctor) blockAudioCtxRef.current = new Ctor();
          }
          void blockAudioCtxRef.current?.resume().catch(() => {});
        } catch { /* ignore */ }
      }
      setBlockStartedAt(Date.now());
      setBlockRunning(true);
      setBlockDone(false);
    }
  }

  function handleBlockStop() {
    setBlockRunning(false);
    setBlockStartedAt(null);
    setBlockSecondsAtStart(blockMinutes[blockType] * 60);
    setBlockDone(false);
  }

  function handleSwitchBlock(type: BlockType) {
    if (blockRunning) return;
    setBlockType(type);
    setBlockSecondsAtStart(blockMinutes[type] * 60);
    setBlockStartedAt(null);
    setBlockDone(false);
  }

  function handleUpdateBlockMinutes(type: BlockType, minutes: number) {
    const clamped = Math.max(1, Math.min(180, minutes));
    const next = { ...blockMinutes, [type]: clamped };
    setBlockMinutes(next);
    saveBlockMinutes(next);
    // If this is the active non-running block, also reset the countdown
    if (type === blockType && !blockRunning) {
      setBlockSecondsAtStart(clamped * 60);
      setBlockDone(false);
    }
  }

  async function handleAddTask() {
    const title = addTaskTitle.trim();
    if (!title || addTaskSaving) return;
    setAddTaskSaving(true);
    try {
      const { data: { user } } = await supabase.auth.getUser();
      if (!user) return;
      const { data: newTask } = await supabase
        .from("tasks")
        .insert({
          user_id: user.id,
          title,
          description: addTaskDescription.trim() || null,
          is_focus: addTaskFocus,
          status: "todo",
          team_id: activeTeamId ?? null,
        })
        .select("id")
        .single();

      // Create subtasks if any were added
      const subtaskTitles = addTaskSubtasks.map((s) => s.trim()).filter(Boolean);
      if (newTask && subtaskTitles.length > 0) {
        await supabase.from("tasks").insert(
          subtaskTitles.map((stTitle) => ({
            user_id: user.id,
            title: stTitle,
            status: "todo",
            team_id: activeTeamId ?? null,
            parent_task_id: newTask.id,
          })),
        );
      }

      setAddTaskTitle("");
      setAddTaskDescription("");
      setAddTaskSubtasks([]);
      setShowAddTask(false);
      void loadData();
    } finally {
      setAddTaskSaving(false);
    }
  }

  function localDateToIso(date: string, time: string): string {
    const [year, month, day] = date.split("-").map(Number);
    const [hours, minutes]   = time.split(":").map(Number);
    return new Date(year, (month ?? 1) - 1, day ?? 1, hours ?? 0, minutes ?? 0, 0, 0).toISOString();
  }

  async function handleAddEvent() {
    const title = addEventTitle.trim();
    if (!title || addEventSaving) return;
    setAddEventSaving(true);
    try {
      const { data: { user } } = await supabase.auth.getUser();
      if (!user) return;
      await supabase.from("events").insert({
        user_id: user.id,
        title,
        description: addEventDescription.trim() || null,
        start_time: localDateToIso(addEventDate, addEventStart),
        end_time:   localDateToIso(addEventDate, addEventEnd),
        all_day: false,
        team_id: activeTeamId ?? null,
      });
      setAddEventTitle("");
      setAddEventDescription("");
      setShowAddEvent(false);
      void loadData();
    } finally {
      setAddEventSaving(false);
    }
  }

  async function handleToggleSubtask(subtask: Task) {
    const newStatus: import("@/types").TaskStatus = subtask.status === "done" ? "todo" : "done";
    await supabase
      .from("tasks")
      .update({
        status: newStatus,
        completed_at: newStatus === "done" ? new Date().toISOString() : null,
      })
      .eq("id", subtask.id);

    const updateSubtasks = (list: Task[]): Task[] =>
      list.map((st) => (st.id === subtask.id ? { ...st, status: newStatus } : st));

    setTasks((prev) =>
      prev.map((t) => ({ ...t, subtasks: updateSubtasks(t.subtasks) })) as FocusTask[],
    );
    setSelectedTask((prev) =>
      prev ? { ...prev, subtasks: updateSubtasks(prev.subtasks) } : prev,
    );
  }

  async function handleToggleTask(task: Task) {
    const newStatus = task.status === "done" ? "todo" : "done";
    await supabase
      .from("tasks")
      .update({
        status: newStatus,
        completed_at: newStatus === "done" ? new Date().toISOString() : null,
      })
      .eq("id", task.id);

    if (newStatus === "done") {
      playTaskDone();
      recordTaskCompletion(task.id, task.title);
    }

    setTasks((prev) =>
      prev.map((item) =>
        item.id === task.id ? { ...item, status: newStatus } : item,
      ),
    );
    setSelectedTask((prev) =>
      prev && prev.id === task.id ? { ...prev, status: newStatus } : prev,
    );
  }

  function fmtEventRange(event: CalendarEvent) {
    if (event.all_day) return "Ganztägig";
    return `${fmtEventTime(event.start_time)} - ${fmtEventTime(event.end_time)}`;
  }

  function getEventState(event: CalendarEvent): FocusEventState {
    const start = new Date(event.start_time).getTime();
    const end = new Date(event.end_time).getTime();

    if (manualDoneEventIdSet.has(event.id) || now >= end) {
      return "finished";
    }

    if (now >= start) {
      return "running";
    }

    if (start - now <= 30 * 60 * 1000) {
      return "soon";
    }

    return "upcoming";
  }

  function toggleEventDone(eventId: string) {
    setManualDoneEventIds((current) =>
      current.includes(eventId)
        ? current.filter((id) => id !== eventId)
        : [...current, eventId],
    );
  }

  function getPrioColor(priority: string) {
    return {
      urgent: "#ef4444",
      high: "#f97316",
      medium: "#eab308",
      low: "#3b82f6",
    }[priority] ?? null;
  }

  return (
    <div className="min-h-screen bg-[radial-gradient(circle_at_top,#2b1d45_0%,#0b0a12_42%,#06060a_100%)] text-white">
      <div className="mx-auto flex min-h-screen w-full max-w-[1480px] flex-col px-5 py-5 md:px-8 md:py-8">
        <div className="mb-6 flex flex-col gap-4 rounded-[28px] border border-[#decfff]/15 bg-[#0f0d17]/82 p-5 shadow-[0_30px_80px_rgba(0,0,0,0.48)] backdrop-blur-xl md:flex-row md:items-center md:justify-between">
          <div className="flex items-start gap-4">
            <button
              onClick={handleClose}
              className="mt-0.5 flex h-10 w-10 items-center justify-center rounded-2xl border border-white/[0.08] bg-white/[0.03] text-white/50 transition-all hover:bg-white/[0.06] hover:text-white"
            >
              <ChevronLeft className="h-5 w-5" />
            </button>

            <div>
              <div className="flex items-center gap-3">
                <div className="flex h-11 w-11 items-center justify-center rounded-2xl bg-[#eadcff]/14">
                  <Target className="h-5 w-5 text-[#eddfff]" />
                </div>
                <div>
                  <p className="text-[11px] font-bold uppercase tracking-[0.22em] text-[#d7baff]/70">
                    Focus Center
                  </p>
                  <h1 className="mt-1 text-[28px] font-bold tracking-tight text-white">
                    Alles Wichtige in einer Seite
                  </h1>
                </div>
              </div>
              <p className="mt-3 max-w-2xl text-[14px] leading-relaxed text-white/45">
                Termine, Fokus-Tasks, Session-Zeiten und Fortschritt ohne Sidebar, Notifications oder anderen Schnickschnack.
              </p>
            </div>
          </div>

          <div className="flex flex-wrap items-center gap-3">
            <StatPill label="Im Fokus" value={fmtDelta(focusDuration)} color="violet" />
            <StatPill label="Tasks erledigt" value={taskCompletions.length} color="emerald" />
            <StatPill label="Vor dir" value={sortedTasks.length} color="violet" />
            <StatPill label="Termine geplant" value={events.length} color="sky" />
            <button
              onClick={handleFinishFocus}
              className="rounded-xl border border-red-500/20 bg-red-500/[0.08] px-4 py-2.5 text-[12px] font-semibold text-red-300 transition-all hover:bg-red-500/[0.12]"
            >
              Review & Abschluss
            </button>
          </div>
        </div>

        <div className="mb-6 rounded-[28px] border border-[#d8c4ff]/14 bg-[linear-gradient(135deg,rgba(234,220,255,0.14),rgba(118,92,204,0.06))] p-6 shadow-[0_18px_60px_rgba(0,0,0,0.35)]">
          <div className="flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between">
            <div>
              <p className="text-[11px] font-bold uppercase tracking-[0.22em] text-white/25">
                Arbeitszeit
              </p>
              <div className="mt-2 flex items-end gap-3">
                <span
                  className={cn(
                    "font-mono text-[54px] font-bold leading-none tracking-tight tabular-nums",
                    workTimerRunning
                      ? "text-white"
                      : workElapsed > 0
                        ? "text-white/55"
                        : "text-white/20",
                  )}
                >
                  {fmtMs(workElapsed)}
                </span>
                {!workTimerRunning && workElapsed > 0 && (
                  <span className="pb-1 text-[11px] font-bold uppercase tracking-[0.18em] text-white/20">
                    pausiert
                  </span>
                )}
              </div>
              <p className="mt-3 text-[13px] text-white/35">
                Im Focus Center seit{" "}
                <span className="font-semibold text-[#eddfff]">
                  {fmtDelta(focusDuration)}
                </span>
              </p>
            </div>

            <div className="flex items-center gap-3">
              <button
                onClick={() => (workTimerRunning ? pauseWorkTimer() : startWorkTimer())}
                className={cn(
                  "flex h-14 w-14 items-center justify-center rounded-2xl shadow-lg transition-all",
                  workTimerRunning
                    ? "bg-white/[0.08] text-white hover:bg-white/[0.12]"
                    : "bg-violet-500 text-white shadow-violet-500/30 hover:bg-violet-400",
                )}
              >
                {workTimerRunning ? (
                  <Pause className="h-5 w-5" />
                ) : (
                  <Play className="h-5 w-5 translate-x-0.5" />
                )}
              </button>

              {workElapsed > 0 && (
                <button
                  onClick={resetWorkTimer}
                  className="rounded-2xl border border-white/[0.08] bg-white/[0.03] p-4 text-white/30 transition-all hover:bg-white/[0.05] hover:text-white/55"
                  title="Timer zurücksetzen"
                >
                  <RotateCcw className="h-4 w-4" />
                </button>
              )}
            </div>
          </div>
        </div>

        {/* ── Block Timer ── */}
        <div className="mb-6 overflow-hidden rounded-[28px] border border-[#d8c4ff]/10 bg-[#0f0d17]/80 shadow-[0_18px_60px_rgba(0,0,0,0.35)]">
          <div className="flex items-center gap-5 p-5">
            {/* Countdown */}
            <div className="shrink-0">
              <p className="text-[10px] font-bold uppercase tracking-[0.2em] text-white/20">
                Block-Timer
              </p>
              <div
                className="mt-1.5 font-mono text-[40px] font-bold leading-none tabular-nums"
                style={{ color: BLOCK_COLORS[blockType] }}
              >
                {fmtMs(blockSecondsLeft * 1000)}
              </div>
            </div>

            <div className="flex flex-1 flex-col gap-3">
              {/* Block type selector */}
              <div className="flex flex-wrap gap-1.5">
                {(Object.keys(BLOCK_LABELS) as BlockType[]).map((type) => (
                  <button
                    key={type}
                    onClick={() => handleSwitchBlock(type)}
                    disabled={blockRunning}
                    className={cn(
                      "rounded-xl px-2.5 py-1 text-[10px] font-bold uppercase tracking-[0.12em] transition-all disabled:opacity-40 disabled:pointer-events-none",
                      blockType === type
                        ? "text-white/90"
                        : "text-white/30 hover:text-white/60 hover:bg-white/[0.04]",
                    )}
                    style={blockType === type ? { backgroundColor: `${BLOCK_COLORS[type]}22`, color: BLOCK_COLORS[type] } : {}}
                  >
                    {BLOCK_LABELS[type]}
                  </button>
                ))}
              </div>

              {/* Controls */}
              <div className="flex items-center gap-2">
                <button
                  onClick={handleBlockStartPause}
                  className="flex h-9 w-9 items-center justify-center rounded-2xl transition-all"
                  style={{
                    background:   blockRunning ? "rgba(255,255,255,0.06)" : `${BLOCK_COLORS[blockType]}22`,
                    border:       `1px solid ${BLOCK_COLORS[blockType]}40`,
                  }}
                >
                  {blockRunning
                    ? <Pause className="h-4 w-4 text-white/60" />
                    : <Play  className="h-4 w-4 translate-x-0.5" style={{ color: BLOCK_COLORS[blockType] }} />}
                </button>

                {(blockSecondsLeft < blockMinutes[blockType] * 60 || blockDone) && (
                  <button
                    onClick={handleBlockStop}
                    className="flex h-9 w-9 items-center justify-center rounded-xl border border-white/[0.06] bg-white/[0.03] text-white/30 transition-colors hover:text-white/60"
                    title="Zurücksetzen"
                  >
                    <RotateCcw className="h-3.5 w-3.5" />
                  </button>
                )}

                <button
                  onClick={() => setShowBlockSettings((v) => !v)}
                  disabled={blockRunning}
                  className={cn(
                    "ml-auto rounded-xl px-2.5 py-1.5 text-[10px] font-semibold uppercase tracking-[0.12em] transition-all disabled:opacity-40",
                    showBlockSettings ? "bg-white/[0.06] text-white/60" : "text-white/20 hover:text-white/45 hover:bg-white/[0.04]",
                  )}
                >
                  Zeiten anpassen
                </button>
              </div>
            </div>
          </div>

          {/* Progress bar */}
          <div className="mx-5 mb-4 h-[3px] overflow-hidden rounded-full bg-white/[0.04]">
            <div
              className="h-full rounded-full transition-all duration-1000"
              style={{
                width: `${Math.round(((blockMinutes[blockType] * 60 - blockSecondsLeft) / (blockMinutes[blockType] * 60)) * 100)}%`,
                backgroundColor: BLOCK_COLORS[blockType],
                opacity: 0.65,
              }}
            />
          </div>

          {/* Block done notification */}
          {blockDone && (
            <div className="mx-5 mb-4 flex items-center justify-between rounded-2xl border border-emerald-500/15 bg-emerald-500/[0.08] px-4 py-2.5">
              <p className="text-[12px] font-semibold text-emerald-300">
                {BLOCK_LABELS[blockType]} abgeschlossen!
              </p>
              <button
                onClick={() => {
                  const next: BlockType = blockType === "work" ? "shortBreak" : "work";
                  handleSwitchBlock(next);
                }}
                className="text-[11px] text-white/40 transition-colors hover:text-white/70"
              >
                Nächster Block →
              </button>
            </div>
          )}

          {/* Settings: duration inputs */}
          {showBlockSettings && (
            <div className="border-t border-white/[0.05] px-5 py-4">
              <p className="mb-3 text-[10px] font-bold uppercase tracking-[0.18em] text-white/20">
                Block-Dauer anpassen
              </p>
              <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
                {(Object.keys(BLOCK_LABELS) as BlockType[]).map((type) => (
                  <div key={type} className="space-y-1.5">
                    <p className="text-[10px] font-semibold text-white/35" style={{ color: `${BLOCK_COLORS[type]}bb` }}>
                      {BLOCK_LABELS[type]}
                    </p>
                    <div className="flex items-center gap-1">
                      <input
                        type="number"
                        min={1}
                        max={180}
                        value={blockMinutes[type]}
                        onChange={(e) => handleUpdateBlockMinutes(type, Number(e.target.value))}
                        className="w-full rounded-lg border border-white/[0.08] bg-white/[0.04] px-2 py-1.5 text-center text-[12px] font-bold text-white outline-none focus:border-violet-500/40"
                      />
                      <span className="shrink-0 text-[10px] text-white/25">min</span>
                    </div>
                  </div>
                ))}
              </div>
              <p className="mt-3 text-[10px] text-white/20">
                Vorschlag: Deep Work 90 min · Kurze Pause 15–20 min · Lange Pause 30 min
              </p>
            </div>
          )}
        </div>

        <div className="grid flex-1 gap-6 xl:grid-cols-[1.35fr_0.95fr]">
          <div className="flex min-h-0 flex-col overflow-hidden rounded-[28px] border border-white/[0.06] bg-[#0f0d17]/84 shadow-[0_18px_60px_rgba(0,0,0,0.35)]">
            <div className="flex items-center justify-between border-b border-white/[0.05] px-6 py-4">
              <div>
                <p className="text-[11px] font-bold uppercase tracking-[0.2em] text-white/20">
                  Fokus-Tasks
                </p>
                <p className="mt-1 text-[13px] text-white/35">
                  Offene Tasks ({sortedTasks.length})
                </p>
              </div>

              <div className="flex items-center gap-2">
                {workTimerRunning && (
                  <div className="flex items-center gap-2 rounded-full bg-emerald-500/10 px-3 py-1">
                    <span className="h-2 w-2 animate-pulse rounded-full bg-emerald-400" />
                    <span className="text-[11px] font-semibold text-emerald-300">
                      Wird gemessen
                    </span>
                  </div>
                )}
                <button
                  onClick={() => { setShowAddTask((v) => !v); setAddTaskTitle(""); }}
                  className="flex h-7 w-7 items-center justify-center rounded-lg border border-white/[0.08] bg-white/[0.03] text-white/30 transition-all hover:border-violet-500/30 hover:bg-violet-500/[0.08] hover:text-violet-300"
                  title="Task hinzufügen"
                >
                  <Plus className="h-3.5 w-3.5" />
                </button>
              </div>
            </div>

            {showAddTask && (
              <div className="border-b border-white/[0.05] px-4 py-3 space-y-2">
                {/* Title row */}
                <div className="flex items-center gap-2">
                  <input
                    autoFocus
                    type="text"
                    placeholder="Task-Titel..."
                    value={addTaskTitle}
                    onChange={(e) => setAddTaskTitle(e.target.value)}
                    onKeyDown={(e) => { if (e.key === "Escape") setShowAddTask(false); }}
                    className="min-w-0 flex-1 rounded-xl border border-white/[0.1] bg-white/[0.04] px-3 py-2 text-[13px] text-white outline-none placeholder:text-white/25 focus:border-violet-500/40"
                  />
                  <button
                    onClick={() => setAddTaskFocus((v) => !v)}
                    className={cn(
                      "shrink-0 rounded-xl border px-2.5 py-2 text-[10px] font-bold uppercase tracking-[0.12em] transition-all",
                      addTaskFocus
                        ? "border-violet-500/40 bg-violet-500/15 text-violet-300"
                        : "border-white/[0.08] text-white/30 hover:text-white/50",
                    )}
                  >
                    Highlight
                  </button>
                  <button
                    onClick={() => void handleAddTask()}
                    disabled={!addTaskTitle.trim() || addTaskSaving}
                    className="flex h-8 w-8 items-center justify-center rounded-xl bg-violet-500 text-white transition-all hover:bg-violet-400 disabled:opacity-40"
                  >
                    <Check className="h-3.5 w-3.5" />
                  </button>
                  <button
                    onClick={() => { setShowAddTask(false); setAddTaskTitle(""); setAddTaskDescription(""); setAddTaskSubtasks([]); }}
                    className="flex h-8 w-8 items-center justify-center rounded-xl border border-white/[0.08] text-white/30 transition-colors hover:text-white/60"
                  >
                    <X className="h-3.5 w-3.5" />
                  </button>
                </div>
                {/* Description */}
                <textarea
                  rows={2}
                  placeholder="Beschreibung (optional)..."
                  value={addTaskDescription}
                  onChange={(e) => setAddTaskDescription(e.target.value)}
                  className="w-full resize-none rounded-xl border border-white/[0.08] bg-white/[0.03] px-3 py-2 text-[12px] text-white/80 outline-none placeholder:text-white/20 focus:border-violet-500/30"
                />
                {/* Subtasks */}
                {addTaskSubtasks.map((st, idx) => (
                  <div key={idx} className="flex items-center gap-2">
                    <span className="shrink-0 text-white/20">└</span>
                    <input
                      type="text"
                      placeholder={`Unteraufgabe ${idx + 1}...`}
                      value={st}
                      onChange={(e) => setAddTaskSubtasks((prev) => prev.map((v, i) => i === idx ? e.target.value : v))}
                      onKeyDown={(e) => {
                        if (e.key === "Enter") setAddTaskSubtasks((prev) => [...prev, ""]);
                        if (e.key === "Backspace" && !st) setAddTaskSubtasks((prev) => prev.filter((_, i) => i !== idx));
                      }}
                      autoFocus
                      className="min-w-0 flex-1 rounded-xl border border-white/[0.08] bg-white/[0.03] px-3 py-1.5 text-[12px] text-white/80 outline-none placeholder:text-white/20 focus:border-violet-500/30"
                    />
                    <button
                      onClick={() => setAddTaskSubtasks((prev) => prev.filter((_, i) => i !== idx))}
                      className="shrink-0 text-white/20 hover:text-white/50 transition-colors"
                    >
                      <X className="h-3 w-3" />
                    </button>
                  </div>
                ))}
                <button
                  onClick={() => setAddTaskSubtasks((prev) => [...prev, ""])}
                  className="flex items-center gap-1.5 text-[11px] text-white/25 transition-colors hover:text-white/50"
                >
                  <Plus className="h-3 w-3" />
                  Unteraufgabe hinzufügen
                </button>
              </div>
            )}

            <div className="flex-1 overflow-y-auto p-3">
              {loading ? (
                <div className="flex flex-col gap-3">
                  {Array.from({ length: 5 }).map((_, index) => (
                    <div
                      key={index}
                      className="h-16 animate-pulse rounded-2xl bg-white/[0.04]"
                    />
                  ))}
                </div>
              ) : sortedTasks.length === 0 ? (
                <div className="flex flex-col items-center justify-center py-20 text-center">
                  <CheckCircle2 className="mb-3 h-9 w-9 text-emerald-400/45" />
                  <p className="text-[16px] font-semibold text-white/35">
                    Alle Fokus-Tasks erledigt
                  </p>
                  <p className="mt-1 text-[13px] text-white/20">
                    Stark. Deine Queue ist leer.
                  </p>
                </div>
              ) : (
                <div className="space-y-2">
                  {sortedTasks.map((task) => {
                    const prio = getPrioColor(task.priority);
                    const isOverdue = task.deadline && isTaskDeadlineOverdue(task.deadline);
                    const dueDate = task.deadline
                      ? new Intl.DateTimeFormat("de-DE", {
                          day: "numeric",
                          month: "short",
                        }).format(new Date(task.deadline))
                      : null;

                    return (
                      <div
                        key={task.id}
                        role="button"
                        tabIndex={0}
                        onClick={() => setSelectedTask(task)}
                        onKeyDown={(event) => {
                          if (event.key === "Enter" || event.key === " ") {
                            event.preventDefault();
                            setSelectedTask(task);
                          }
                        }}
                        className="group flex cursor-pointer items-center gap-4 rounded-2xl border border-white/[0.04] bg-white/[0.02] px-4 py-4 transition-all hover:border-white/[0.08] hover:bg-white/[0.04]"
                      >
                        <button
                          onClick={(event) => {
                            event.stopPropagation();
                            void handleToggleTask(task);
                          }}
                          className="shrink-0 text-white/20 transition-colors hover:text-white/60"
                        >
                          <Circle className="h-[18px] w-[18px]" />
                        </button>

                        <div className="min-w-0 flex-1">
                          <div className="flex items-center gap-2">
                            {task.is_focus && (
                              <span className="rounded-full bg-violet-500/15 px-2 py-0.5 text-[9px] font-bold uppercase tracking-[0.16em] text-violet-300">
                                Highlight
                              </span>
                            )}
                            <p className="truncate text-[14px] font-medium text-white/85">
                              {task.title}
                            </p>
                          </div>
                          {task.description && (
                            <p className="mt-1 truncate text-[12px] text-white/28">
                              {task.description}
                            </p>
                          )}
                          <div className="mt-1.5 flex items-center gap-2">
                            {prio && (
                              <span
                                className="h-1.5 w-1.5 rounded-full"
                                style={{ backgroundColor: prio }}
                              />
                            )}
                            {dueDate && (
                              <span
                                className={cn(
                                  "text-[11px]",
                                  isOverdue ? "font-semibold text-red-400" : "text-white/25",
                                )}
                              >
                                {isOverdue ? "Überfällig · " : ""}
                                {dueDate}
                              </span>
                            )}
                            {(task.subtasks?.length ?? 0) > 0 && (
                              <span className="text-[11px] text-white/25">
                                {task.subtasks.filter((subtask) => subtask.status === "done").length}/
                                {task.subtasks.length} Unteraufgaben
                              </span>
                            )}
                          </div>
                        </div>

                        <span className="shrink-0 text-[10px] font-bold uppercase tracking-[0.16em] text-white/18 transition-colors group-hover:text-white/35">
                          Details
                        </span>
                      </div>
                    );
                  })}
                </div>
              )}
            </div>

            {doneTasks.length > 0 && (
              <div className="border-t border-white/[0.05]">
                <button
                  onClick={() => setShowDone((value) => !value)}
                  className="flex w-full items-center justify-between px-6 py-3 text-left transition-colors hover:bg-white/[0.02]"
                >
                  <div className="flex items-center gap-2">
                    <CheckCircle2 className="h-4 w-4 text-emerald-400/65" />
                    <span className="text-[11px] font-bold uppercase tracking-[0.16em] text-white/20">
                      Erledigt ({doneTasks.length})
                    </span>
                  </div>
                  <ChevronDown
                    className={cn(
                      "h-4 w-4 text-white/20 transition-transform",
                      showDone && "rotate-180",
                    )}
                  />
                </button>

                {showDone && (
                  <div className="space-y-2 px-3 pb-3">
                    {doneTasks.map((completion, index) => (
                      <div
                        key={completion.taskId}
                        className="flex items-center gap-3 rounded-2xl bg-white/[0.02] px-4 py-3"
                      >
                        <CheckCircle2 className="h-[18px] w-[18px] shrink-0 text-emerald-400/60" />
                        <div className="min-w-0 flex-1">
                          <p className="truncate text-[12px] text-white/30 line-through">
                            {completion.taskTitle}
                          </p>
                        </div>
                        <div className="flex shrink-0 flex-col items-end">
                          <span className="rounded-md bg-emerald-500/10 px-2 py-0.5 text-[10px] font-semibold text-emerald-400">
                            {fmtDelta(completion.delta)}
                          </span>
                          {index < doneTasks.length - 1 && (
                            <span className="mt-0.5 text-[9px] text-white/15">
                              +{fmtDelta(doneTasks[index + 1]?.delta ?? 0)} zur nächsten
                            </span>
                          )}
                        </div>
                      </div>
                    ))}
                  </div>
                )}
              </div>
            )}
          </div>

          <div className="grid gap-6 lg:grid-rows-[1fr_auto]">
            <div className="overflow-hidden rounded-[28px] border border-white/[0.06] bg-[#0f0d17]/84 shadow-[0_18px_60px_rgba(0,0,0,0.35)]">
              <div className="flex items-center justify-between border-b border-white/[0.05] px-6 py-4">
                <div>
                  <p className="text-[11px] font-bold uppercase tracking-[0.2em] text-white/20">
                    Termine
                  </p>
                  <p className="mt-1 text-[13px] text-white/35">
                    Heute und die nächsten Tage
                  </p>
                </div>
                <button
                  onClick={() => { setShowAddEvent((v) => !v); setAddEventTitle(""); }}
                  className="flex h-7 w-7 items-center justify-center rounded-lg border border-white/[0.08] bg-white/[0.03] text-white/30 transition-all hover:border-sky-500/30 hover:bg-sky-500/[0.08] hover:text-sky-300"
                  title="Termin hinzufügen"
                >
                  <Plus className="h-3.5 w-3.5" />
                </button>
              </div>

              {showAddEvent && (
                <div className="border-b border-white/[0.05] px-4 py-3 space-y-2">
                  {/* Title + actions */}
                  <div className="flex items-center gap-2">
                    <input
                      autoFocus
                      type="text"
                      placeholder="Termin-Titel..."
                      value={addEventTitle}
                      onChange={(e) => setAddEventTitle(e.target.value)}
                      onKeyDown={(e) => { if (e.key === "Escape") setShowAddEvent(false); }}
                      className="min-w-0 flex-1 rounded-xl border border-white/[0.1] bg-white/[0.04] px-3 py-2 text-[13px] text-white outline-none placeholder:text-white/25 focus:border-sky-500/40"
                    />
                    <button
                      onClick={() => void handleAddEvent()}
                      disabled={!addEventTitle.trim() || addEventSaving}
                      className="flex h-8 w-8 items-center justify-center rounded-xl bg-sky-600 text-white transition-all hover:bg-sky-500 disabled:opacity-40"
                    >
                      <Check className="h-3.5 w-3.5" />
                    </button>
                    <button
                      onClick={() => { setShowAddEvent(false); setAddEventTitle(""); setAddEventDescription(""); }}
                      className="flex h-8 w-8 items-center justify-center rounded-xl border border-white/[0.08] text-white/30 transition-colors hover:text-white/60"
                    >
                      <X className="h-3.5 w-3.5" />
                    </button>
                  </div>
                  {/* Date + time */}
                  <div className="flex items-center gap-2">
                    <input
                      type="date"
                      value={addEventDate}
                      onChange={(e) => setAddEventDate(e.target.value)}
                      className="flex-1 rounded-xl border border-white/[0.1] bg-white/[0.04] px-3 py-2 text-[12px] text-white/80 outline-none focus:border-sky-500/40"
                    />
                    <input
                      type="time"
                      value={addEventStart}
                      onChange={(e) => setAddEventStart(e.target.value)}
                      className="w-[90px] rounded-xl border border-white/[0.1] bg-white/[0.04] px-2 py-2 text-center text-[12px] text-white/80 outline-none focus:border-sky-500/40"
                    />
                    <span className="text-white/25 text-[11px]">–</span>
                    <input
                      type="time"
                      value={addEventEnd}
                      onChange={(e) => setAddEventEnd(e.target.value)}
                      className="w-[90px] rounded-xl border border-white/[0.1] bg-white/[0.04] px-2 py-2 text-center text-[12px] text-white/80 outline-none focus:border-sky-500/40"
                    />
                  </div>
                  {/* Description */}
                  <textarea
                    rows={2}
                    placeholder="Beschreibung (optional)..."
                    value={addEventDescription}
                    onChange={(e) => setAddEventDescription(e.target.value)}
                    className="w-full resize-none rounded-xl border border-white/[0.08] bg-white/[0.03] px-3 py-2 text-[12px] text-white/80 outline-none placeholder:text-white/20 focus:border-sky-500/30"
                  />
                </div>
              )}

              <div className="space-y-5 p-4">
                <div>
                  <div className="mb-3 flex items-center gap-2">
                    <CalendarDays className="h-4 w-4 text-sky-400/70" />
                    <p className="text-[11px] font-bold uppercase tracking-[0.16em] text-white/20">
                      Heute
                    </p>
                  </div>

                  {todayEvents.length === 0 ? (
                    <div className="rounded-2xl bg-white/[0.02] px-4 py-5 text-center">
                      <p className="text-[13px] text-white/25">Keine Termine heute</p>
                    </div>
                  ) : (
                    <div className="space-y-2">
                      {todayEvents.map((event) => {
                        const state = getEventState(event);

                        return (
                          <EventCard
                            key={event.id}
                            event={event}
                            state={state}
                            timeLabel={fmtEventRange(event)}
                            onOpen={() => setSelectedEvent(event)}
                            onToggleDone={() => toggleEventDone(event.id)}
                            canToggle={now < new Date(event.end_time).getTime()}
                          />
                        );
                      })}
                    </div>
                  )}
                </div>

                {upcomingEvents.length > 0 && (
                  <div>
                    <div className="mb-3 flex items-center gap-2">
                      <Sparkles className="h-4 w-4 text-violet-300/70" />
                      <p className="text-[11px] font-bold uppercase tracking-[0.16em] text-white/20">
                        Nächste Tage
                      </p>
                    </div>

                    <div className="space-y-2">
                      {upcomingEvents.slice(0, 4).map((event) => (
                        <EventCard
                          key={event.id}
                          event={event}
                          state={getEventState(event)}
                          timeLabel={`${fmtEventDate(event.start_time)} · ${fmtEventRange(event)}`}
                          onOpen={() => setSelectedEvent(event)}
                          onToggleDone={() => toggleEventDone(event.id)}
                          canToggle={now < new Date(event.end_time).getTime()}
                          compact
                        />
                      ))}
                    </div>
                  </div>
                )}
              </div>
            </div>

            <div className="rounded-[28px] border border-white/[0.06] bg-[#0f0d17]/84 p-5 shadow-[0_18px_60px_rgba(0,0,0,0.35)]">
              <p className="text-[11px] font-bold uppercase tracking-[0.2em] text-white/20">
                Session Zusammenfassung
              </p>

              <div className="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-2">
                <SummaryCard label="Tasks" value={String(taskCompletions.length)} />
                <SummaryCard label="Arbeitszeit" value={fmtMs(workElapsed)} />
              </div>

              {taskCompletions.length > 0 && (
                <div className="mt-4 rounded-2xl bg-emerald-500/[0.07] p-4">
                  <div className="flex items-center gap-2">
                    <Zap className="h-4 w-4 text-emerald-300/70" />
                    <p className="text-[11px] font-bold uppercase tracking-[0.16em] text-emerald-300/80">
                      Ø pro Task
                    </p>
                  </div>
                  <p className="mt-2 text-[22px] font-bold text-emerald-200">
                    {fmtDelta(workElapsed / taskCompletions.length)}
                  </p>
                </div>
              )}

              <div className="mt-4 rounded-2xl border border-white/[0.04] bg-white/[0.02] px-4 py-3 text-[11px] text-white/22">
                ESC bringt dich zurück in die App. Dein Focus und die Arbeitszeit laufen weiter, bis du auf Review & Abschluss drückst.
              </div>
            </div>
          </div>
        </div>
      </div>

      <TaskDetailsModal
        task={selectedTask}
        onClose={() => setSelectedTask(null)}
        onToggleTask={handleToggleTask}
        onToggleSubtask={handleToggleSubtask}
      />

      <EventDetailsModal
        event={selectedEvent}
        state={selectedEvent ? getEventState(selectedEvent) : null}
        onClose={() => setSelectedEvent(null)}
        onToggleDone={() => {
          if (!selectedEvent) return;
          toggleEventDone(selectedEvent.id);
        }}
        canToggle={
          selectedEvent ? now < new Date(selectedEvent.end_time).getTime() : false
        }
      />
    </div>
  );
}

function EventCard({
  canToggle,
  compact = false,
  event,
  onOpen,
  onToggleDone,
  state,
  timeLabel,
}: {
  canToggle: boolean;
  compact?: boolean;
  event: CalendarEvent;
  onOpen: () => void;
  onToggleDone: () => void;
  state: FocusEventState;
  timeLabel: string;
}) {
  const stateMeta = {
    upcoming: {
      badge: null,
      badgeClassName: "",
      cardClassName: "border-white/[0.05] bg-white/[0.02]",
      titleClassName: "text-white/80",
    },
    soon: {
      badge: "Bald",
      badgeClassName: "bg-amber-500/20 text-amber-300",
      cardClassName: "border-amber-500/30 bg-amber-500/[0.08]",
      titleClassName: "text-white/90",
    },
    running: {
      badge: "Läuft",
      badgeClassName: "bg-emerald-500/20 text-emerald-300",
      cardClassName: "border-emerald-500/30 bg-emerald-500/[0.08]",
      titleClassName: "text-white",
    },
    finished: {
      badge: "Beendet",
      badgeClassName: "bg-white/[0.08] text-white/45",
      cardClassName: "border-white/[0.03] bg-white/[0.02] opacity-65",
      titleClassName: "text-white/30 line-through",
    },
  } satisfies Record<
    FocusEventState,
    {
      badge: string | null;
      badgeClassName: string;
      cardClassName: string;
      titleClassName: string;
    }
  >;

  const meta = stateMeta[state];

  return (
    <div
      role="button"
      tabIndex={0}
      onClick={onOpen}
      onKeyDown={(keyboardEvent) => {
        if (keyboardEvent.key === "Enter" || keyboardEvent.key === " ") {
          keyboardEvent.preventDefault();
          onOpen();
        }
      }}
      className={cn(
        "group cursor-pointer rounded-2xl border px-4 py-3 transition-all hover:border-white/[0.1] hover:bg-white/[0.04]",
        meta.cardClassName,
        compact && "flex items-start gap-3",
      )}
    >
      {compact && (
        <div className="flex h-10 w-10 shrink-0 flex-col items-center justify-center rounded-xl bg-white/[0.04]">
          <span className="text-[9px] font-bold uppercase text-white/30">
            {new Intl.DateTimeFormat("de-DE", {
              weekday: "short",
            }).format(new Date(event.start_time))}
          </span>
          <span className="text-[14px] font-bold text-white/60">
            {new Date(event.start_time).getDate()}
          </span>
        </div>
      )}

      <div className="flex min-w-0 flex-1 items-start gap-3">
        <button
          onClick={(clickEvent) => {
            clickEvent.stopPropagation();
            if (!canToggle && state === "finished") return;
            onToggleDone();
          }}
          disabled={!canToggle && state === "finished"}
          className="mt-0.5 shrink-0 text-white/30 transition-colors hover:text-white/70 disabled:cursor-default disabled:hover:text-white/30"
          title={state === "finished" ? "Termin beendet" : "Termin als erledigt markieren"}
        >
          {state === "finished" ? (
            <CheckCircle2 className="h-[18px] w-[18px]" />
          ) : (
            <Circle className="h-[18px] w-[18px]" />
          )}
        </button>

        <div className="min-w-0 flex-1">
          <div className="flex items-start justify-between gap-3">
            <div className="min-w-0">
              <p className={cn("truncate text-[13px] font-medium", meta.titleClassName)}>
                {event.title}
              </p>
              {event.description && (
                <p className="mt-1 line-clamp-2 text-[11px] text-white/28">
                  {event.description}
                </p>
              )}
            </div>
            {meta.badge && (
              <span
                className={cn(
                  "rounded-full px-2 py-0.5 text-[9px] font-bold uppercase tracking-[0.16em]",
                  meta.badgeClassName,
                )}
              >
                {meta.badge}
              </span>
            )}
          </div>
          <div className="mt-2 flex items-center gap-1.5 text-[11px] text-white/30">
            <Clock className="h-3 w-3" />
            <span>{timeLabel}</span>
          </div>
        </div>
      </div>
    </div>
  );
}

function TaskDetailsModal({
  onClose,
  onToggleSubtask,
  onToggleTask,
  task,
}: {
  onClose: () => void;
  onToggleSubtask: (subtask: Task) => Promise<void>;
  onToggleTask: (task: FocusTask) => Promise<void>;
  task: FocusTask | null;
}) {
  if (!task) return null;

  const doneSubtasks = task.subtasks.filter((subtask) => subtask.status === "done").length;
  const deadlineLabel = task.deadline
    ? new Intl.DateTimeFormat("de-DE", {
        day: "numeric",
        month: "long",
        hour: "2-digit",
        minute: "2-digit",
      }).format(new Date(task.deadline))
    : null;

  return (
    <Modal
      open={Boolean(task)}
      onClose={onClose}
      className="max-w-2xl border border-[#decfff]/20 bg-[#110f1a] p-0 text-white shadow-[0_30px_100px_rgba(0,0,0,0.55)]"
    >
      <div className="border-b border-white/[0.06] px-6 py-5">
        <div className="flex items-start justify-between gap-4">
          <div className="min-w-0">
            <p className="text-[11px] font-bold uppercase tracking-[0.18em] text-[#d7baff]/65">
              Task Details
            </p>
            <h2 className="mt-2 text-[24px] font-bold tracking-tight text-white">
              {task.title}
            </h2>
          </div>

          <div className="flex shrink-0 items-center gap-2">
            <button
              onClick={() => void onToggleTask(task)}
              disabled={task.status === "done"}
              className="inline-flex items-center gap-2 rounded-xl bg-emerald-500/14 px-3 py-2 text-[12px] font-semibold text-emerald-300 transition-colors hover:bg-emerald-500/20 disabled:cursor-default disabled:opacity-50"
            >
              <Check className="h-4 w-4" />
              {task.status === "done" ? "Erledigt" : "Als erledigt markieren"}
            </button>
            <button
              onClick={onClose}
              className="flex h-8 w-8 items-center justify-center rounded-xl bg-red-500/10 text-red-400 transition-colors hover:bg-red-500/20"
            >
              <X className="h-4 w-4" />
            </button>
          </div>
        </div>

        <div className="mt-4 flex flex-wrap gap-2">
          <DetailBadge label={task.is_focus ? "Highlight" : "Task"} tone="violet" />
          <DetailBadge label={`Priorität ${task.priority}`} tone="neutral" />
          {deadlineLabel && <DetailBadge label={`Fällig ${deadlineLabel}`} tone="neutral" />}
          {task.subtasks.length > 0 && (
            <DetailBadge
              label={`${doneSubtasks}/${task.subtasks.length} Unteraufgaben`}
              tone="emerald"
            />
          )}
        </div>
      </div>

      <div className="space-y-5 px-6 py-5">
        <DetailSection title="Beschreibung">
          {task.description ? (
            <p className="whitespace-pre-wrap text-[14px] leading-relaxed text-white/72">
              {task.description}
            </p>
          ) : (
            <p className="text-[13px] text-white/28">Keine Beschreibung hinterlegt.</p>
          )}
        </DetailSection>

        <DetailSection title="Unteraufgaben">
          {task.subtasks.length === 0 ? (
            <p className="text-[13px] text-white/28">Keine Unteraufgaben vorhanden.</p>
          ) : (
            <div className="space-y-2">
              {task.subtasks.map((subtask) => (
                <div
                  key={subtask.id}
                  className="flex items-start gap-3 rounded-2xl border border-white/[0.05] bg-white/[0.03] px-4 py-3"
                >
                  <button
                    onClick={() => void onToggleSubtask(subtask)}
                    className="mt-0.5 shrink-0 transition-colors hover:scale-110"
                    title={subtask.status === "done" ? "Als offen markieren" : "Als erledigt markieren"}
                  >
                    {subtask.status === "done" ? (
                      <CheckCircle2 className="h-4 w-4 text-emerald-400/70" />
                    ) : (
                      <Circle className="h-4 w-4 text-white/24 hover:text-white/60" />
                    )}
                  </button>
                  <div className="min-w-0">
                    <p
                      className={cn(
                        "text-[13px] font-medium text-white/80",
                        subtask.status === "done" && "line-through text-white/35",
                      )}
                    >
                      {subtask.title}
                    </p>
                    {subtask.description && (
                      <p className="mt-1 whitespace-pre-wrap text-[12px] text-white/35">
                        {subtask.description}
                      </p>
                    )}
                  </div>
                </div>
              ))}
            </div>
          )}
        </DetailSection>
      </div>
    </Modal>
  );
}

function EventDetailsModal({
  canToggle,
  event,
  onClose,
  onToggleDone,
  state,
}: {
  canToggle: boolean;
  event: CalendarEvent | null;
  onClose: () => void;
  onToggleDone: () => void;
  state: FocusEventState | null;
}) {
  if (!event || !state) return null;

  const start = new Date(event.start_time);
  const end = new Date(event.end_time);
  const durationMs = end.getTime() - start.getTime();
  const statusLabel = {
    upcoming: "Geplant",
    soon: "Bald",
    running: "Läuft",
    finished: "Beendet",
  }[state];

  return (
    <Modal
      open={Boolean(event)}
      onClose={onClose}
      className="max-w-2xl border border-[#decfff]/20 bg-[#110f1a] p-0 text-white shadow-[0_30px_100px_rgba(0,0,0,0.55)]"
    >
      <div className="border-b border-white/[0.06] px-6 py-5">
        <div className="flex items-start justify-between gap-4">
          <div className="min-w-0">
            <p className="text-[11px] font-bold uppercase tracking-[0.18em] text-[#d7baff]/65">
              Termin Details
            </p>
            <h2
              className={cn(
                "mt-2 text-[24px] font-bold tracking-tight text-white",
                state === "finished" && "line-through text-white/40",
              )}
            >
              {event.title}
            </h2>
          </div>

          <div className="flex shrink-0 items-center gap-2">
            {canToggle && (
              <button
                onClick={onToggleDone}
                className="inline-flex items-center gap-2 rounded-xl bg-emerald-500/14 px-3 py-2 text-[12px] font-semibold text-emerald-300 transition-colors hover:bg-emerald-500/20"
              >
                <Check className="h-4 w-4" />
                {state === "finished" ? "Wieder öffnen" : "Vorzeitig abschließen"}
              </button>
            )}
            <button
              onClick={onClose}
              className="flex h-8 w-8 items-center justify-center rounded-xl bg-red-500/10 text-red-400 transition-colors hover:bg-red-500/20"
            >
              <X className="h-4 w-4" />
            </button>
          </div>
        </div>

        <div className="mt-4 flex flex-wrap gap-2">
          <DetailBadge label={statusLabel} tone={state === "finished" ? "neutral" : "emerald"} />
          <DetailBadge
            label={event.all_day ? "Ganztägig" : `${fmtEventTime(event.start_time)} - ${fmtEventTime(event.end_time)}`}
            tone="neutral"
          />
          <DetailBadge
            label={new Intl.DateTimeFormat("de-DE", {
              weekday: "long",
              day: "numeric",
              month: "long",
            }).format(start)}
            tone="neutral"
          />
          {!event.all_day && <DetailBadge label={`Dauer ${fmtDelta(durationMs)}`} tone="violet" />}
        </div>
      </div>

      <div className="space-y-5 px-6 py-5">
        <DetailSection title="Beschreibung">
          {event.description ? (
            <p className="whitespace-pre-wrap text-[14px] leading-relaxed text-white/72">
              {event.description}
            </p>
          ) : (
            <p className="text-[13px] text-white/28">Keine Beschreibung hinterlegt.</p>
          )}
        </DetailSection>

        <DetailSection title="Zeitrahmen">
          <div className="rounded-2xl border border-white/[0.05] bg-white/[0.03] px-4 py-4">
            <div className="flex items-center gap-2 text-[12px] font-semibold uppercase tracking-[0.16em] text-white/30">
              <Clock className="h-4 w-4" />
              Zeitfenster
            </div>
            <p className="mt-3 text-[14px] text-white/72">
              {new Intl.DateTimeFormat("de-DE", {
                weekday: "long",
                day: "numeric",
                month: "long",
                hour: "2-digit",
                minute: "2-digit",
              }).format(start)}
            </p>
            <p className="mt-1 text-[13px] text-white/40">
              bis{" "}
              {new Intl.DateTimeFormat("de-DE", {
                hour: "2-digit",
                minute: "2-digit",
              }).format(end)}
            </p>
          </div>
        </DetailSection>
      </div>
    </Modal>
  );
}

function DetailSection({
  children,
  title,
}: {
  children: ReactNode;
  title: string;
}) {
  return (
    <section>
      <p className="text-[11px] font-bold uppercase tracking-[0.18em] text-white/26">
        {title}
      </p>
      <div className="mt-3">{children}</div>
    </section>
  );
}

function DetailBadge({
  label,
  tone,
}: {
  label: string;
  tone: "emerald" | "neutral" | "violet";
}) {
  const toneClasses = {
    emerald: "bg-emerald-500/14 text-emerald-300",
    neutral: "bg-white/[0.05] text-white/55",
    violet: "bg-violet-500/14 text-violet-200",
  };

  return (
    <span
      className={cn(
        "rounded-full px-3 py-1 text-[10px] font-bold uppercase tracking-[0.14em]",
        toneClasses[tone],
      )}
    >
      {label}
    </span>
  );
}

function StatPill({
  label,
  value,
  color,
}: {
  label: string;
  value: number | string;
  color: "emerald" | "sky" | "violet";
}) {
  const colors = {
    emerald: "bg-emerald-500/10 text-emerald-300",
    sky: "bg-sky-500/10 text-sky-300",
    violet: "bg-violet-500/10 text-violet-200",
  };

  return (
    <div className={cn("rounded-2xl px-4 py-3 text-center", colors[color])}>
      <p className="text-[18px] font-bold leading-none">{value}</p>
      <p className="mt-1 text-[10px] font-semibold uppercase tracking-[0.16em] opacity-70">
        {label}
      </p>
    </div>
  );
}

function SummaryCard({ label, value }: { label: string; value: string }) {
  return (
    <div className="rounded-2xl bg-white/[0.03] p-4 text-center">
      <p className="text-[24px] font-bold leading-none text-white">{value}</p>
      <p className="mt-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-white/25">
        {label}
      </p>
    </div>
  );
}