export class SleepView {
    constructor(containerId, app) {
        this.container = document.getElementById(containerId);
        this.app = app;
        this.render();
        this.attachEvents();
    }

    render() {
        // Real Sleep Data from Health Connect
        const healthData = JSON.parse(localStorage.getItem('hydroflux_health_data') || '{"steps": 0, "sleep": 0}');
        console.log("Rendering Sleep View with Data:", healthData); // Debug
        const sleepHoursTotal = healthData.sleep; // e.g. 7.5

        // Calculate Stages (Estimated breakdown if not provided by native yet)
        // Light: 55%, Deep: 20%, REM: 25% - Standard healthy breakdown
        const lightHours = sleepHoursTotal * 0.55;
        const deepHours = sleepHoursTotal * 0.20;
        const remHours = sleepHoursTotal * 0.25;

        // Formatter: 7.5 -> 7h 30m
        const formatTime = (h) => {
            const hours = Math.floor(h);
            const mins = Math.round((h - hours) * 60);
            return `${hours}h ${mins}m`;
        };

        this.container.innerHTML = `
             <div class="w-full max-w-md bg-white min-h-screen relative overflow-hidden mx-auto bg-gradient-to-br from-indigo-50 to-purple-50 flex flex-col p-6">
                <!-- Header -->
                <div class="flex justify-between items-center mb-6 relative z-10">
                    <button id="backBtn" class="w-10 h-10 rounded-full bg-white bg-opacity-50 backdrop-blur-md flex items-center justify-center shadow-sm">
                        <svg class="w-6 h-6 text-indigo-900" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
                    </button>
                    <span class="text-lg font-bold text-indigo-900">Sleep Analysis</span>
                    <div class="w-10"></div>
                </div>

                <!-- Main Sleep Card -->
                <div class="bg-white rounded-3xl p-8 shadow-xl mb-6 relative overflow-hidden">
                    <div class="absolute top-0 right-0 w-32 h-32 bg-indigo-100 rounded-full blur-3xl -mr-10 -mt-10"></div>
                    
                    <div class="space-y-4">
                        <!-- REM -->
                        <div>
                            <div class="flex justify-between text-sm mb-1">
                                <span class="text-purple-500 font-medium">REM</span>
                                <span class="font-bold text-gray-700">${formatTime(remHours)}</span>
                            </div>
                            <div class="h-2 w-full bg-gray-100 rounded-full overflow-hidden">
                                <div class="h-full bg-purple-400" style="width: 25%"></div>
                            </div>
                        </div>
                        
                        <!-- Deep -->
                        <div>
                            <div class="flex justify-between text-sm mb-1">
                                <span class="text-blue-600 font-medium">Deep Sleep</span>
                                <span class="font-bold text-gray-700">${formatTime(deepHours)}</span>
                            </div>
                            <div class="h-2 w-full bg-gray-100 rounded-full overflow-hidden">
                                <div class="h-full bg-blue-600" style="width: 20%"></div>
                            </div>
                        </div>

                         <!-- Light -->
                        <div>
                            <div class="flex justify-between text-sm mb-1">
                                <span class="text-blue-400 font-medium">Light Sleep</span>
                                <span class="font-bold text-gray-700">${formatTime(lightHours)}</span>
                            </div>
                            <div class="h-2 w-full bg-gray-100 rounded-full overflow-hidden">
                                <div class="h-full bg-blue-300" style="width: 55%"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Weekly Graph -->
                <div class="bg-white rounded-3xl p-6 border border-gray-100 shadow-sm flex-1">
                     <h3 class="text-sm font-semibold text-gray-500 mb-4 uppercase tracking-wider">Weekly Trend</h3>
                     <div class="h-32 flex items-end justify-between px-2">
                        ${[6.5, 7.2, 5.8, 8.0, 7.5, 6.2, 7.3].map((val, i) => `
                            <div class="flex flex-col items-center gap-2 group">
                                <div class="w-8 bg-gradient-to-t from-blue-400 to-blue-600 rounded-t-lg transition-all group-hover:opacity-100 opacity-80" 
                                     style="height: ${(val / 10) * 100}%"></div>
                                <span class="text-xs text-gray-400 font-medium">${['M', 'T', 'W', 'T', 'F', 'S', 'S'][i]}</span>
                            </div>
                        `).join('')}
                     </div>
                </div>
             </div>
        `;
    }

    attachEvents() {
        this.container.querySelector('#backBtn').addEventListener('click', () => {
            this.app.back();
        });
    }
}
