<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Puppy Care Tracker (Multi-Day)</title>
    <style>
        :root {
            --bg-color: #f4f6f9;
            --card-bg: #ffffff;
            --text-main: #2d3748;
            --text-muted: #718096;
            --primary: #4299e1;
            --pee-color: #ecc94b;
            --poop-color: #b7791f;
            --food-color: #ed8936;
            --water-color: #3182ce;
            --sleep-color: #9f7aea;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        }

        body {
            background-color: var(--bg-color);
            color: var(--text-main);
            padding: 15px;
            max-width: 500px;
            margin: 0 auto;
            padding-bottom: 40px;
        }

        header {
            text-align: center;
            margin: 15px 0 25px 0;
        }

        header h1 {
            font-size: 1.5rem;
            color: #1a202c;
            margin-bottom: 5px;
        }

        header p {
            font-size: 0.9rem;
            color: var(--text-muted);
        }

        /* Timers Grid */
        .timers-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
            margin-bottom: 25px;
        }

        .timer-card {
            background: var(--card-bg);
            padding: 12px;
            border-radius: 12px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.04);
            border-left: 4px solid var(--primary);
            display: flex;
            flex-direction: column;
        }

        .timer-card.pee { border-left-color: var(--pee-color); }
        .timer-card.poop { border-left-color: var(--poop-color); }
        .timer-card.food { border-left-color: var(--food-color); }
        .timer-card.water { border-left-color: var(--water-color); }
        .timer-card.sleep { border-left-color: var(--sleep-color); }

        .timer-label {
            font-size: 0.75rem;
            text-transform: uppercase;
            font-weight: 700;
            color: var(--text-muted);
            margin-bottom: 4px;
        }

        .timer-time {
            font-size: 1.1rem;
            font-weight: bold;
            color: #1a202c;
        }

        /* Action Buttons */
        .actions-section {
            background: var(--card-bg);
            padding: 20px;
            border-radius: 16px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
            margin-bottom: 25px;
        }

        .section-title {
            font-size: 1rem;
            margin-bottom: 15px;
            font-weight: 600;
            color: #4a5568;
        }

        .buttons-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
        }

        .btn {
            border: none;
            padding: 14px;
            border-radius: 12px;
            color: white;
            font-size: 0.95rem;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            transition: transform 0.1s, opacity 0.2s;
            -webkit-tap-highlight-color: transparent;
        }

        .btn:active {
            transform: scale(0.96);
        }

        .btn-pee { background-color: var(--pee-color); color: #4a3700; }
        .btn-poop { background-color: var(--poop-color); }
        .btn-food { background-color: var(--food-color); }
        .btn-water { background-color: var(--water-color); }
        .btn-nap { background-color: #b48ead; }
        .btn-sleep { background-color: var(--sleep-color); }

        /* Multi-Day History Layout */
        .history-section {
            background: var(--card-bg);
            padding: 20px;
            border-radius: 16px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
        }

        .day-group {
            margin-bottom: 12px;
            border: 1px solid #e2e8f0;
            border-radius: 10px;
            overflow: hidden;
        }

        .day-header {
            background: #edf2f7;
            padding: 12px 15px;
            font-weight: bold;
            font-size: 0.95rem;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            user-select: none;
        }

        .day-summary-icons {
            font-size: 0.85rem;
            color: var(--text-muted);
            font-weight: normal;
        }

        .day-content {
            display: none;
            padding: 0 15px;
            background: #fff;
        }

        .day-content.open {
            display: block;
        }

        .log-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 0;
            border-bottom: 1px solid #edf2f7;
            font-size: 0.9rem;
        }

        .log-item:last-child {
            border-bottom: none;
        }

        .log-tag {
            padding: 4px 8px;
            border-radius: 6px;
            font-size: 0.75rem;
            font-weight: bold;
            color: white;
            text-transform: uppercase;
            min-width: 65px;
            text-align: center;
        }

        .tag-pee { background-color: var(--pee-color); color: #4a3700; }
        .tag-poop { background-color: var(--poop-color); }
        .tag-food { background-color: var(--food-color); }
        .tag-water { background-color: var(--water-color); }
        .tag-nap { background-color: #b48ead; }
        .tag-sleep { background-color: var(--sleep-color); }

        .log-time {
            color: var(--text-muted);
            font-size: 0.85rem;
        }
    </style>
</head>
<body>

    <header>
        <h1>🐾 Puppy Care Log</h1>
        <p>Family Sync Dashboard</p>
    </header>

    <!-- Real-time Status Timers -->
    <div class="timers-grid">
        <div class="timer-card pee">
            <span class="timer-label">Last Pee</span>
            <span class="timer-time" id="timer-pee">--</span>
        </div>
        <div class="timer-card poop">
            <span class="timer-label">Last Poop</span>
            <span class="timer-time" id="timer-poop">--</span>
        </div>
        <div class="timer-card food">
            <span class="timer-label">Last Food</span>
            <span class="timer-time" id="timer-food">--</span>
        </div>
        <div class="timer-card water">
            <span class="timer-label">Last Water</span>
            <span class="timer-time" id="timer-water">--</span>
        </div>
        <div class="timer-card sleep" style="grid-column: span 2;">
            <span class="timer-label">Last Sleep Activity</span>
            <span class="timer-time" id="timer-sleep">--</span>
        </div>
    </div>

    <!-- Quick Log Actions -->
    <div class="actions-section">
        <div class="section-title">Tap to Log Event</div>
        <div class="buttons-grid">
            <button class="btn btn-pee" onclick="logEvent('pee')">💦 Pee</button>
            <button class="btn btn-poop" onclick="logEvent('poop')">💩 Poop</button>
            <button class="btn btn-food" onclick="logEvent('food')">🍖 Food</button>
            <button class="btn btn-water" onclick="logEvent('water')">💧 Water</button>
            <button class="btn btn-nap" onclick="logEvent('nap')">💤 Start Nap</button>
            <button class="btn btn-sleep" onclick="logEvent('sleep')">🌙 Night Sleep</button>
        </div>
    </div>

    <!-- Behavior History grouped by Day -->
    <div class="history-section">
        <div class="section-title" style="display: flex; justify-content: space-between;">
            <span>Behavior Logs History</span>
            <span style="font-size: 0.75rem; color: #e53e3e; cursor: pointer; font-weight: normal;" onclick="clearLogs()">Reset All</span>
        </div>
        <div id="history-grouped-container">
            <!-- Programmatically grouped day sections go here -->
        </div>
    </div>

    <script>
        let appData = {
            logs: [],
            lastEvents: { pee: null, poop: null, food: null, water: null, sleep: null }
        };

        // Tracks which day panels are expanded by the user
        let expandedDays = { "Today": true }; 

        function init() {
            const savedData = localStorage.getItem('puppyTrackerDataMultiDay');
            if (savedData) {
                appData = JSON.parse(savedData);
            }
            updateTimers();
            renderGroupedLogs();
            setInterval(updateTimers, 30000);
        }

        function logEvent(type) {
            const now = new Date();
            const timestamp = now.toISOString();
            
            appData.logs.unshift({
                type: type,
                time: timestamp
            });

            if (type === 'nap' || type === 'sleep') {
                appData.lastEvents['sleep'] = timestamp;
            } else {
                appData.lastEvents[type] = timestamp;
            }

            saveAndRefresh();
        }

        function saveAndRefresh() {
            localStorage.setItem('puppyTrackerDataMultiDay', JSON.stringify(appData));
            updateTimers();
            renderGroupedLogs();
        }

        function toggleDaySection(dayLabel) {
            expandedDays[dayLabel] = !expandedDays[dayLabel];
            const contentEl = document.getElementById(`content-${dayLabel.replace(/\s+/g, '-')}`);
            if (contentEl) {
                contentEl.classList.toggle('open');
            }
        }

        function getDayLabel(dateObj) {
            const today = new Date();
            const yesterday = new Date();
            yesterday.setDate(today.getDate() - 1);

            if (dateObj.toDateString() === today.toDateString()) return "Today";
            if (dateObj.toDateString() === yesterday.toDateString()) return "Yesterday";
            
            return dateObj.toLocaleDateString([], { weekday: 'long', month: 'short', day: 'numeric' });
        }

        function renderGroupedLogs() {
            const container = document.getElementById('history-grouped-container');
            container.innerHTML = '';

            if (appData.logs.length === 0) {
                container.innerHTML = '<div style="color: var(--text-muted); text-align: center; padding: 20px 0; font-size: 0.9rem;">No behaviors recorded yet.</div>';
                return;
            }

            const groups = {};
            appData.logs.forEach(log => {
                const label = getDayLabel(new Date(log.time));
                if (!groups[label]) groups[label] = [];
                groups[label].push(log);
            });

            Object.keys(groups).forEach(dayLabel => {
                const dayLogs = groups[dayLabel];
                
                const counts = { pee: 0, poop: 0, food: 0, sleep: 0 };
                dayLogs.forEach(l => {
                    if (l.type === 'nap' || l.type === 'sleep') counts.sleep++;
                    else counts[l.type]++;
                });

                const summaryText = `💦${counts.pee} 💩${counts.poop} 🍖${counts.food} 💤${counts.sleep}`;
                const safeId = dayLabel.replace(/\s+/g, '-');
                const isOpen = expandedDays[dayLabel] ? 'open' : '';

                const dayGroupDiv = document.createElement('div');
                dayGroupDiv.className = 'day-group';
                
                dayGroupDiv.innerHTML = `
                    <div class="day-header" onclick="toggleDaySection('${dayLabel}')">
                        <span>${dayLabel}</span>
                        <span class="day-summary-icons">${summaryText}</span>
                    </div>
                    <div class="day-content ${isOpen}" id="content-${safeId}">
                    </div>
                `;

                const contentList = dayGroupDiv.querySelector('.day-content');
                
                dayLogs.forEach(log => {
                    const logDate = new Date(log.time);
                    const timeString = logDate.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
                    
                    const item = document.createElement('div');
                    item.className = 'log-item';
                    item.innerHTML = `
                        <span class="log-tag tag-${log.type}">${log.type}</span>
                        <span class="log-time">${timeString}</span>
                    `;
                    contentList.appendChild(item);
                });

                container.appendChild(dayGroupDiv);
            });
        }

        function updateTimers() {
            const now = new Date();
            const types = ['pee', 'poop', 'food', 'water', 'sleep'];
            
            types.forEach(type => {
                const timerEl = document.getElementById(`timer-${type}`);
                const lastTimeStr = appData.lastEvents[type];
                
                if (!lastTimeStr) {
                    timerEl.innerText = '--';
                    return;
                }

                const lastTime = new Date(lastTimeStr);
                const diffMs = now - lastTime;
                const diffMins = Math.floor(diffMs / 60000);
                
                if (diffMins < 60) {
                    timerEl.innerText = `${diffMins}m ago`;
                } else {
                    const hours = Math.floor(diffMins / 60);
                    const mins = diffMins % 60;
                    timerEl.innerText = `${hours}h ${mins}m ago`;
                }
            });
        }

        function clearLogs() {
            if(confirm("Warning: This clears all history items across all days. Proceed?")) {
                appData = {
                    logs: [],
                    lastEvents: { pee: null, poop: null, food: null, water: null, sleep: null }
                };
                expandedDays = { "Today": true };
                localStorage.removeItem('puppyTrackerDataMultiDay');
                saveAndRefresh();
            }
        }

        window.onload = init;
    </script>
</body>
</html>