"use client"; import { useState, useEffect, useMemo } from "react"; import { Plus, Flame, Archive, ChevronLeft, ChevronRight, CheckCheck, } from "lucide-react"; import { Modal } from "@/components/ui/modal"; import { Input } from "@/components/ui/input"; import { Button } from "@/components/ui/button"; import { Skeleton } from "@/components/ui/skeleton"; import { cn } from "@/lib/utils"; import { useHabits } from "@/hooks/use-habits"; const ICONS = ["βœ…", "πŸ’ͺ", "πŸ“–", "🧘", "πŸƒ", "πŸ’§", "πŸ₯—", "πŸ’€", "πŸ“", "🎯", "🧠", "πŸ’°", "πŸ“±", "🚫", "⏰", "πŸ”₯"]; const COLORS = ["#6366f1", "#ec4899", "#f59e0b", "#10b981", "#3b82f6", "#8b5cf6", "#ef4444", "#06b6d4"]; const DAY_LABELS = ["Mo", "Di", "Mi", "Do", "Fr", "Sa", "So"]; function getToday(): string { const d = new Date(); return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`; } function addDays(date: string, n: number): string { const d = new Date(date + "T00:00:00"); d.setDate(d.getDate() + n); return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`; } function getWeekDates(offset: number): string[] { const today = getToday(); const d = new Date(today + "T00:00:00"); // Anchor to Monday of current week const dow = d.getDay() === 0 ? 6 : d.getDay() - 1; // 0=Mon, 6=Sun const monday = addDays(today, -dow + offset * 7); return Array.from({ length: 7 }, (_, i) => addDays(monday, i)); } /** Last 52 weeks Γ— 7 days grid (364 days) ending today */ function buildYearGrid(): string[][] { const today = getToday(); const d = new Date(today + "T00:00:00"); const dow = d.getDay() === 0 ? 6 : d.getDay() - 1; // Start from the Monday 52 weeks ago (364 days) const start = addDays(today, -(52 * 7 - 1) - dow); const weeks: string[][] = []; for (let w = 0; w < 53; w++) { const week: string[] = []; for (let d2 = 0; d2 < 7; d2++) { const date = addDays(start, w * 7 + d2); if (date <= today) week.push(date); else week.push(""); } if (week.some(Boolean)) weeks.push(week); } return weeks; } function buildMonthBuckets(weeks: string[][]): { key: string; label: string; dates: string[] }[] { const buckets = new Map(); weeks.flat().forEach((date) => { if (!date) return; const d = new Date(date + "T00:00:00"); const key = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}`; if (!buckets.has(key)) { buckets.set(key, { key, label: d.toLocaleDateString("de-DE", { month: "short" }), dates: [], }); } buckets.get(key)!.dates.push(date); }); return Array.from(buckets.values()); } export default function HabitsPage() { const { habits, completions, loading, createHabit, updateHabit, toggleCompletion, isCompleted, getStreak, fetchCompletions, } = useHabits(); const [weekOffset, setWeekOffset] = useState(0); const [formOpen, setFormOpen] = useState(false); const [newName, setNewName] = useState(""); const [newIcon, setNewIcon] = useState("βœ…"); const [newColor, setNewColor] = useState("#6366f1"); const [submitting, setSubmitting] = useState(false); const today = getToday(); const weekDates = useMemo(() => getWeekDates(weekOffset), [weekOffset]); const yearGrid = useMemo(() => buildYearGrid(), []); const monthBuckets = useMemo(() => buildMonthBuckets(yearGrid), [yearGrid]); // Fetch a full year of completions once β€” enough for week nav + heatmap useEffect(() => { const yearStart = addDays(today, -365); void fetchCompletions(yearStart, today); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); async function handleCreate() { if (!newName.trim() || submitting) return; setSubmitting(true); await createHabit({ name: newName.trim(), icon: newIcon, color: newColor }); setNewName(""); setNewIcon("βœ…"); setNewColor("#6366f1"); setSubmitting(false); setFormOpen(false); } // Heatmap: completions per date (count, max = habits.length) const completionsByDate = useMemo(() => { const map: Record> = {}; for (const c of completions) { if (!map[c.completed_date]) map[c.completed_date] = new Set(); map[c.completed_date].add(c.habit_id); } return map; }, [completions]); const monthSummaries = useMemo(() => { return monthBuckets.map((month) => { const done = month.dates.reduce((sum, date) => sum + (completionsByDate[date]?.size ?? 0), 0); const possible = month.dates.length * Math.max(1, habits.length); const ratio = possible > 0 ? done / possible : 0; return { ...month, done, ratio }; }); }, [completionsByDate, habits.length, monthBuckets]); // Today stats const todayDone = habits.filter((h) => isCompleted(h.id, today)).length; const todayTotal = habits.length; // Best streak across all habits const bestStreak = habits.reduce((max, h) => Math.max(max, getStreak(h.id)), 0); // Total completions ever (in loaded range) const totalCompletions = completions.length; function heatIntensity(date: string): 0 | 1 | 2 | 3 | 4 { if (!date) return 0; const done = completionsByDate[date]?.size ?? 0; if (done === 0) return 0; if (habits.length === 0) return 1; const ratio = done / habits.length; if (ratio >= 1) return 4; if (ratio >= 0.66) return 3; if (ratio >= 0.33) return 2; return 1; } const heatColors = [ "bg-white/[0.07]", "bg-emerald-500/20", "bg-emerald-500/35", "bg-emerald-500/55", "bg-emerald-500/80", ]; const weekLabel = (() => { if (weekOffset === 0) return "Diese Woche"; const s = new Date(weekDates[0] + "T00:00:00"); const e = new Date(weekDates[6] + "T00:00:00"); const opts: Intl.DateTimeFormatOptions = { day: "numeric", month: "short" }; return `${s.toLocaleDateString("de-DE", opts)} – ${e.toLocaleDateString("de-DE", opts)}`; })(); if (loading) { return (
); } return (
{/* ── Left Sidebar ───────────────────────────────────────────── */} {/* ── Main Area ──────────────────────────────────────────────── */}
{/* Top bar */}
{weekLabel}
{/* Today's progress bar */} {weekOffset === 0 && habits.length > 0 && (
0 ? `${(todayDone / todayTotal) * 100}%` : "0%" }} />
{todayDone}/{todayTotal} heute
)} {/* Column headers */} {habits.length > 0 && (
{weekDates.map((date, i) => { const isToday = date === today; return (
{DAY_LABELS[i]} {new Date(date + "T00:00:00").getDate()}
); })}
)} {/* Habit rows */}
{habits.length === 0 ? (
🎯

Noch keine Habits. Fang mit einem kleinen an β€” Konsistenz schlΓ€gt IntensitΓ€t.

) : ( habits.map((habit) => { const streak = getStreak(habit.id); const doneToday = isCompleted(habit.id, today); return (
{/* Habit name */}
{habit.icon} {habit.name}
{/* Day dots */} {weekDates.map((date) => { const done = isCompleted(habit.id, date); const isFuture = date > today; return ( ); })} {/* Streak */}
{streak > 0 ? ( {streak}πŸ”₯ ) : ( β€” )}
); }) )}
{/* ── Create Modal ──────────────────────────────────────────── */} {formOpen && ( setFormOpen(false)} title="Neues Habit" className="max-w-md">
setNewName(e.target.value)} autoFocus onKeyDown={(e) => e.key === "Enter" && void handleCreate()} />

Icon

{ICONS.map((icon) => ( ))}

Farbe

{COLORS.map((color) => (
{/* Preview */}
{newIcon} {newName || "Habit Name"}
)}
); }