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

    render() {
        // Real Sleep Data
        const healthData = JSON.parse(localStorage.getItem('hydroflux_health_data') || '{"steps": 0, "sleep": 0}');
        const sleepHoursTotal = healthData.sleep;
        const sleepHours = Math.floor(sleepHoursTotal);
        const sleepMins = Math.round((sleepHoursTotal - sleepHours) * 60);

        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-blue-50 to-white flex flex-col p-6">
                 <!-- Header -->
                <div class="flex justify-between items-center mb-8">
                    <button id="backBtn" class="w-10 h-10 rounded-full bg-white flex items-center justify-center shadow-md text-gray-700">
                        <svg class="w-6 h-6" 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-gray-800">Sleep Analysis</span>
                    <div class="w-10"></div>
                </div>

                <!-- Main Stat -->
                <div class="text-center mb-10">
                    <div class="flex items-baseline justify-center gap-1">
                        <span class="text-6xl font-bold text-blue-600">${sleepHours}</span>
                        <span class="text-xl font-medium text-gray-400">h</span>
                        <span class="text-6xl font-bold text-blue-600">${sleepMins}</span>
                        <span class="text-xl font-medium text-gray-400">m</span>
                    </div>
                    <div class="text-gray-500 text-sm mt-2">Total Sleep Duration</div>
                </div>

                <!-- Chart -->
                <div class="bg-white rounded-3xl p-6 mb-6 shadow-sm border border-gray-100">
                    <h3 class="text-sm font-semibold text-gray-500 mb-6 uppercase tracking-wider">Sleep Stages</h3>
                    
                    <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">1h 45m</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">2h 10m</span>
                            </div>
                            <div class="h-2 w-full bg-gray-100 rounded-full overflow-hidden">
                                <div class="h-full bg-blue-600" style="width: 35%"></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">3h 25m</span>
                            </div>
                            <div class="h-2 w-full bg-gray-100 rounded-full overflow-hidden">
                                <div class="h-full bg-blue-300" style="width: 40%"></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();
        });
    }
}
