import { useState, useEffect, useRef, useCallback } from "react"; import { Star, Plus, Check, X, Flame, Trophy, Clock, Sparkles, ChevronLeft, Trash2, Play, Pause, RotateCcw, } from "lucide-react"; const QUOTES = [ "Una idea nueva es emocionante — pero terminar la anterior es lo que construye algo real.", "No necesitas más ideas. Necesitas una estrella más encendida hoy.", "Tu mente salta rápido de un proyecto a otro; este espacio es para anclarte a uno.", "El progreso pequeño de hoy vale más que el plan perfecto de mañana.", "Termina algo pequeño. Eso entrena al cerebro a confiar en ti otra vez.", "No es falta de talento. Es falta de una siguiente estrella clara.", "Cada proyecto sin terminar te cuesta más que tiempo: te cuesta impulso.", "Enciende una estrella. Solo una. Eso ya es avanzar.", "La constancia no es emoción constante, es volver aunque no tengas ganas.", "Tu creatividad es un activo — dirigida a un solo proyecto, es imparable.", ]; function todayStr() { return new Date().toISOString().slice(0, 10); } function daysBetween(a, b) { const d1 = new Date(a); const d2 = new Date(b); return Math.round((d2 - d1) / 86400000); } function uid() { return Math.random().toString(36).slice(2, 10); } function getStarPositions(n, w, h) { if (n <= 1) return [{ x: w / 2, y: h / 2 }]; const positions = []; const marginX = w * 0.12; const usableW = w - marginX * 2; for (let i = 0; i < n; i++) { const t = i / (n - 1); const x = marginX + t * usableW; const wave = Math.sin(t * Math.PI * 1.4 + i * 0.6) * (h * 0.18); const y = h / 2 + wave; positions.push({ x, y }); } return positions; } export default function FinishIt() { const [view, setView] = useState("dashboard"); const [projects, setProjects] = useState([]); const [activeProjectId, setActiveProjectId] = useState(null); const [streak, setStreak] = useState({ current: 0, best: 0, lastActive: null }); const [ready, setReady] = useState(false); const [quote, setQuote] = useState(QUOTES[0]); // form state const [formName, setFormName] = useState(""); const [formWhy, setFormWhy] = useState(""); const [formMilestones, setFormMilestones] = useState(["", ""]); useEffect(() => { setQuote(QUOTES[Math.floor(Math.random() * QUOTES.length)]); (async () => { try { const res = await window.storage.get("finishit-data", false); if (res && res.value) { const parsed = JSON.parse(res.value); setProjects(parsed.projects || []); setStreak(parsed.streak || { current: 0, best: 0, lastActive: null }); } } catch (e) { // first time use } finally { setReady(true); } })(); }, []); const persist = useCallback(async (nextProjects, nextStreak) => { try { await window.storage.set( "finishit-data", JSON.stringify({ projects: nextProjects, streak: nextStreak }), false ); } catch (e) { console.error("No se pudo guardar", e); } }, []); const bumpStreak = useCallback( (currentProjects) => { const today = todayStr(); let next = { ...streak }; if (streak.lastActive === today) { // already counted today } else if (streak.lastActive && daysBetween(streak.lastActive, today) === 1) { next.current = streak.current + 1; next.lastActive = today; } else { next.current = 1; next.lastActive = today; } next.best = Math.max(next.best, next.current); setStreak(next); persist(currentProjects, next); }, [streak, persist] ); const resetForm = () => { setFormName(""); setFormWhy(""); setFormMilestones(["", ""]); }; const createProject = () => { if (!formName.trim()) return; const milestones = formMilestones .filter((m) => m.trim()) .map((text) => ({ id: uid(), text: text.trim(), done: false, doneAt: null })); if (milestones.length === 0) return; const newProject = { id: uid(), name: formName.trim(), why: formWhy.trim(), milestones, createdAt: todayStr(), completedAt: null, }; const updated = [newProject, ...projects]; setProjects(updated); persist(updated, streak); resetForm(); setActiveProjectId(newProject.id); setView("project"); }; const toggleMilestone = (projectId, milestoneId) => { let justCompleted = false; const updated = projects.map((p) => { if (p.id !== projectId) return p; const milestones = p.milestones.map((m) => { if (m.id !== milestoneId) return m; return { ...m, done: !m.done, doneAt: !m.done ? todayStr() : null }; }); const allDone = milestones.every((m) => m.done); if (allDone && !p.completedAt) justCompleted = true; return { ...p, milestones, completedAt: allDone ? p.completedAt || todayStr() : null, }; }); setProjects(updated); bumpStreak(updated); if (justCompleted) { setQuote("¡Constelación completa! Esto es lo que se siente terminar algo. Guárdalo."); } }; const deleteProject = (id) => { const updated = projects.filter((p) => p.id !== id); setProjects(updated); persist(updated, streak); if (activeProjectId === id) { setActiveProjectId(null); setView("dashboard"); } }; const activeProjects = projects.filter((p) => !p.completedAt); const completedProjects = projects.filter((p) => p.completedAt); const activeProject = projects.find((p) => p.id === activeProjectId); const bg = { backgroundColor: "#12142B", backgroundImage: "radial-gradient(circle at 20% 20%, #ffffff10 1px, transparent 1px), radial-gradient(circle at 60% 70%, #ffffff08 1px, transparent 1px), radial-gradient(circle at 85% 30%, #ffffff10 1px, transparent 1px)", backgroundSize: "140px 140px, 90px 90px, 160px 160px", }; if (!ready) return