const KEY="homeGlowDataV1";
const DEFAULT_ROOMS=[["Kitchen","🍳"],["Bathroom","🚿"],["Bedroom","🛏️"],["Living Room","🛋️"],["Laundry","🧺"]];
const DEFAULT_TASKS=[
 ["Make the beds","Bedroom"],["Wash dishes","Kitchen"],["Wipe kitchen counters","Kitchen"],
 ["Clean the bathroom sink","Bathroom"],["Vacuum the living room","Living Room"]
];
let state=JSON.parse(localStorage.getItem(KEY)||"null")||{
 rooms:DEFAULT_ROOMS.map(([name,emoji],i)=>({id:"r"+i,name,emoji})),
 tasks:DEFAULT_TASKS.map(([text,room],i)=>({id:"t"+i,text,room,done:false}))
};
let modalMode="task";
function save(){localStorage.setItem(KEY,JSON.stringify(state))}
function esc(x){return String(x).replace(/[&<>"']/g,m=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#039;"}[m]))}
function stats(){let total=state.tasks.length,done=state.tasks.filter(x=>x.done).length;return{total,done,pct:total?Math.round(done/total*100):0}}
function nav(id){document.querySelectorAll(".page").forEach(x=>x.classList.toggle("active",x.id===id));document.querySelectorAll(".nav button").forEach(x=>x.classList.toggle("active",x.dataset.page===id));render()}
function task(t){return `<label class="task ${t.done?"done":""}"><input type="checkbox" ${t.done?"checked":""} onchange="toggleTask('${t.id}')"><span>${esc(t.text)} <small class="small">· ${esc(t.room)}</small></span></label>`}
function render(){
 const s=stats(), rooms=state.rooms;
 document.getElementById("homeTasks").innerHTML=state.tasks.length?state.tasks.map(task).join(""):`<div class="empty">No tasks yet. Add one below.</div>`;
 document.getElementById("allTasks").innerHTML=state.tasks.length?state.tasks.map(task).join(""):`<div class="empty">No tasks yet.</div>`;
 document.getElementById("rooms").innerHTML=rooms.length?rooms.map(r=>`<div class="room" onclick="roomView('${r.id}')">${esc(r.emoji)}<strong>${esc(r.name)}</strong><span class="small">${state.tasks.filter(t=>t.roomId===r.id||t.room===r.name).length} tasks</span><button class="delete" onclick="event.stopPropagation();deleteRoom('${r.id}')">×</button></div>`).join(""):`<div class="empty">No rooms yet.</div>`;
 document.getElementById("percent").textContent=s.pct+"%";document.getElementById("fill").style.width=s.pct+"%";
 ["pCompleted","pDone"].forEach(id=>{let e=document.getElementById(id);if(e)e.textContent=s.done});
 document.getElementById("pRemaining").textContent=s.total-s.done;document.getElementById("pPercent").textContent=s.pct+"%";document.getElementById("pTotal").textContent=s.total;document.getElementById("goalFill").style.width=s.pct+"%";
 const sel=document.getElementById("newRoom");sel.innerHTML=rooms.map(r=>`<option value="${r.id}">${esc(r.emoji)} ${esc(r.name)}</option>`).join("");
}
function toggleTask(id){let t=state.tasks.find(x=>x.id===id);if(!t)return;t.done=!t.done;save();render();toast(t.done?"Task complete! ✨":"Task unchecked")}
function roomView(id){let r=state.rooms.find(x=>x.id===id);if(!r)return;nav("tasks");document.getElementById("allTasks").innerHTML=state.tasks.filter(t=>t.roomId===id||t.room===r.name).map(task).join("")||`<div class="empty">No tasks in ${esc(r.name)} yet.</div>`;toast(r.name)}
function openTask(){modalMode="task";document.getElementById("modalTitle").textContent="✨ Add a cleaning task";document.getElementById("taskForm").style.display="block";document.getElementById("roomForm").style.display="none";document.getElementById("saveModal").textContent="Add Task";document.getElementById("modal").classList.add("open");render();setTimeout(()=>document.getElementById("newTask").focus(),50)}
function openRoom(){modalMode="room";document.getElementById("modalTitle").textContent="🏠 Add a room";document.getElementById("taskForm").style.display="none";document.getElementById("roomForm").style.display="block";document.getElementById("saveModal").textContent="Add Room";document.getElementById("modal").classList.add("open");setTimeout(()=>document.getElementById("roomName").focus(),50)}
function closeModal(){document.getElementById("modal").classList.remove("open");document.getElementById("newTask").value="";document.getElementById("roomName").value="";document.getElementById("roomEmoji").value=""}
function saveModal(){
 if(modalMode==="task"){let text=document.getElementById("newTask").value.trim(),roomId=document.getElementById("newRoom").value;if(!text){toast("Enter a task name");return}let r=state.rooms.find(x=>x.id===roomId);state.tasks.push({id:"t"+Date.now(),text,roomId,room:r?.name||"Other",done:false});save();closeModal();nav("tasks");toast("Task added! ✨");return}
 let name=document.getElementById("roomName").value.trim(),emoji=document.getElementById("roomEmoji").value.trim()||"🏠";if(!name){toast("Enter a room name");return}if(state.rooms.some(r=>r.name.toLowerCase()===name.toLowerCase())){toast("That room already exists");return}
 state.rooms.push({id:"r"+Date.now(),name,emoji});save();closeModal();render();toast("Room added! 🏠")
}
function deleteRoom(id){let r=state.rooms.find(x=>x.id===id);if(!r)return;if(!confirm(`Delete ${r.name}? Its tasks will stay under Other.`))return;state.rooms=state.rooms.filter(x=>x.id!==id);state.tasks.forEach(t=>{if(t.roomId===id){t.roomId="";t.room="Other"}});save();render();toast("Room deleted")}
function toast(m){let x=document.getElementById("toast");x.textContent=m;x.style.display="block";clearTimeout(window._t);window._t=setTimeout(()=>x.style.display="none",1600)}
document.getElementById("app").innerHTML=`
<header><div class="brand"><div class="logo">🏡</div><div><h1>HOME GLOW</h1><div class="tag">Clean home. Clear mind.</div></div></div><div class="date" id="date"></div></header>
<section id="home" class="page active"><div class="hero"><h2>Good morning! ✨</h2><p>Let's make your home glow.</p><div class="progress-row"><span>Today's progress</span><span id="percent">0%</span></div><div class="bar"><div class="fill" id="fill"></div></div></div>
<div class="card"><div class="card-title"><h3>🧹 Today's Cleaning</h3><button onclick="openTask()">＋ Add Task</button></div><div id="homeTasks" class="tasks"></div></div>
<div class="card"><div class="card-title"><h3>🏠 Rooms</h3><button class="secondary" onclick="openRoom()">＋ Add Room</button></div><div id="rooms" class="room-grid"></div></div></section>
<section id="tasks" class="page"><div class="card"><div class="card-title"><h3>🧹 All Tasks</h3><button onclick="openTask()">＋ Add Task</button></div><div id="allTasks" class="tasks"></div></div></section>
<section id="schedule" class="page"><div class="card"><div class="card-title"><h3>📅 Cleaning Schedule</h3></div><div class="schedule-grid"><div class="schedule-item"><strong>☀️ Daily</strong><br><span class="small">Dishes, beds, counters, quick tidy</span></div><div class="schedule-item"><strong>🌿 Monday</strong><br><span class="small">Bathrooms + laundry</span></div><div class="schedule-item"><strong>🧹 Wednesday</strong><br><span class="small">Vacuum + dust</span></div><div class="schedule-item"><strong>✨ Friday</strong><br><span class="small">Kitchen deep clean</span></div><div class="schedule-item"><strong>🏡 Saturday</strong><br><span class="small">Whole-home reset</span></div><div class="schedule-item"><strong>🌙 Monthly</strong><br><span class="small">Windows, fridge, fans & extras</span></div></div></div></section>
<section id="progress" class="page"><div class="card"><h3>⭐ Your Progress</h3><p class="small">Every little task makes your home glow.</p><div class="stats-grid"><div class="stat"><span class="small">Completed</span><br><b id="pCompleted">0</b></div><div class="stat"><span class="small">Remaining</span><br><b id="pRemaining">0</b></div><div class="stat"><span class="small">Completion</span><br><b id="pPercent">0%</b></div><div class="stat"><span class="small">Total tasks</span><br><b id="pTotal">0</b></div></div></div><div class="card"><h3>🌟 Cleaning Goal</h3><div class="bar"><div class="fill" id="goalFill"></div></div></div></section>
<nav class="nav"><button data-page="home" class="active">🏠 Home</button><button data-page="tasks">🧹 Tasks</button><button data-page="schedule">📅 Schedule</button><button data-page="progress">⭐ Progress</button></nav>
<div id="modal" class="modal"><div class="box"><h3 id="modalTitle"></h3><div id="taskForm"><label>Task name</label><input id="newTask" placeholder="Example: Dust the shelves"><label>Room</label><select id="newRoom"></select></div><div id="roomForm" style="display:none"><label>Room name</label><input id="roomName" placeholder="Example: Office"><label>Emoji</label><input id="roomEmoji" maxlength="4" placeholder="🖥️"></div><div class="actions"><button class="secondary" onclick="closeModal()">Cancel</button><button id="saveModal" onclick="saveModal()">Save</button></div></div></div>
<div id="toast" class="toast"></div>`;
document.querySelectorAll(".nav button").forEach(b=>b.onclick=()=>nav(b.dataset.page));
document.getElementById("date").textContent=new Date().toLocaleDateString(undefined,{weekday:"short",month:"short",day:"numeric"});
document.getElementById("modal").addEventListener("click",e=>{if(e.target.id==="modal")closeModal()});
render();
if("serviceWorker" in navigator) navigator.serviceWorker.register("sw.js").catch(()=>{});