/* global React, Icon, Avatar, AvatarGroup, Tag, dateFmt, dateState */ const { useState, useEffect, useRef, useMemo } = React; // Hardcoded team list for the MVP. Comes from the seed data in primitives.jsx. // Replace with a Supabase query when memberships exist. const TEAM_MEMBERS = [ "Marina Costa", "Diego Tavares", "Helena Ribeiro", "Pedro Almeida", "Bruno Santos", "Sofia Lima", "João Pereira", ]; const CHECKLIST_DEMO_TEXTS = [ "Levantar requisitos com stakeholders", "Esboçar fluxo no Figma", "Validar com 3 usuários", "Implementar primeiro protótipo", "Pareamento com QA", "Documentar no Notion", "Review com design lead", "Ajustes de microcopy", "Testes em iOS e Android", "Lançar em beta", "Coletar feedback", "Versão final", ]; const dateToInputValue = (d) => { if (!d) return ""; const y = d.getFullYear(); const m = String(d.getMonth() + 1).padStart(2, "0"); const day = String(d.getDate()).padStart(2, "0"); return `${y}-${m}-${day}`; }; // ============ TASK MODAL ============ const TaskModal = ({ card, columnName, onClose, onUpdate, onDelete }) => { const [title, setTitle] = useState(card.title); const [desc, setDesc] = useState(card.desc || ""); const [showAssigneePicker, setShowAssigneePicker] = useState(false); const [editingDate, setEditingDate] = useState(false); const titleRef = useRef(null); const assigneePickerRef = useRef(null); const dateInputRef = useRef(null); useEffect(() => { const onKey = (e) => { if (e.key === "Escape") { if (showAssigneePicker) setShowAssigneePicker(false); else if (editingDate) setEditingDate(false); else onClose(); } }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [onClose, showAssigneePicker, editingDate]); useEffect(() => { if (titleRef.current) { titleRef.current.style.height = "auto"; titleRef.current.style.height = titleRef.current.scrollHeight + "px"; } }, [title]); // Click outside to close the assignee picker useEffect(() => { if (!showAssigneePicker) return; const handler = (e) => { if (assigneePickerRef.current && !assigneePickerRef.current.contains(e.target)) { setShowAssigneePicker(false); } }; document.addEventListener("mousedown", handler); return () => document.removeEventListener("mousedown", handler); }, [showAssigneePicker]); // Focus the date input when entering edit mode useEffect(() => { if (editingDate && dateInputRef.current) { dateInputRef.current.focus(); // Try to open the native picker on browsers that support it try { dateInputRef.current.showPicker?.(); } catch (e) {} } }, [editingDate]); const commit = () => onUpdate({ title: title.trim() || card.title, desc }); // Hydrate checklist items from the card model. Older cards only carry // { done, total }; we expand into a stable items array on first edit. const checklist = useMemo(() => { if (!card.checklist) return []; if (Array.isArray(card.checklist.items)) return card.checklist.items; return Array.from({ length: card.checklist.total }, (_, i) => ({ text: CHECKLIST_DEMO_TEXTS[i % CHECKLIST_DEMO_TEXTS.length], done: i < card.checklist.done, })); }, [card.checklist]); const toggleAssignee = (name) => { const current = card.assignees || []; const next = current.includes(name) ? current.filter((n) => n !== name) : [...current, name]; onUpdate({ assignees: next }); }; const handleDateChange = (value) => { if (!value) { onUpdate({ due: null }); } else { const [y, m, d] = value.split("-").map(Number); onUpdate({ due: new Date(y, m - 1, d) }); } }; const toggleChecklistItem = (idx) => { const next = checklist.map((it, i) => (i === idx ? { ...it, done: !it.done } : it)); const doneCount = next.filter((it) => it.done).length; onUpdate({ checklist: { done: doneCount, total: next.length, items: next } }); }; const due = card.due ? dateFmt(card.due) : null; const assignees = card.assignees || []; return ( <>