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

    render() {
        // Real Data
        const healthData = JSON.parse(localStorage.getItem('hydroflux_health_data') || '{"steps": 0, "sleep": 0}');
        const steps = healthData.steps;
        const goal = 10000;
        const pct = Math.min((steps / goal) * 100, 100);
        const radius = 80;
        const circumference = 2 * Math.PI * radius;
        const offset = circumference - (pct / 100) * circumference;

        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-6">
                    <button id="backBtn" class="w-10 h-10 rounded-full bg-white flex items-center justify-center shadow-md">
                        <svg class="w-6 h-6 text-gray-700" 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">Fitness Activity</span>
                    <div class="w-10"></div>
                </div>

                <!-- Main Ring -->
                <div class="flex flex-col items-center justify-center mb-8">
                    <div class="relative w-64 h-64">
                        <svg class="transform -rotate-90 w-64 h-64 drop-shadow-xl">
                            <circle cx="128" cy="128" r="80" stroke="#E5E7EB" stroke-width="16" fill="none"></circle>
                            <circle cx="128" cy="128" r="80" stroke="#60A5FA" stroke-width="16" fill="none" stroke-linecap="round" 
                                style="stroke-dasharray: ${circumference}; stroke-dashoffset: ${offset}; transition: stroke-dashoffset 1s ease-out;"></circle>
                        </svg>
                        <div class="absolute inset-0 flex flex-col items-center justify-center">
                            <span class="text-4xl font-bold text-gray-800">${steps.toLocaleString()}</span>
                            <span class="text-gray-500 font-medium">steps today</span>
                        </div>
                    </div>
                </div>

                <!-- Stats Grid -->
                <div class="grid grid-cols-2 gap-4 mb-6">
                    <div class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100 flex flex-col items-center">
                        <span class="text-gray-400 text-xs uppercase font-bold tracking-wider mb-1">Calories</span>
                        <span class="text-2xl font-bold text-orange-500">420</span>
                        <span class="text-xs text-gray-400">kcal</span>
                    </div>
                    <div class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100 flex flex-col items-center">
                        <span class="text-gray-400 text-xs uppercase font-bold tracking-wider mb-1">Distance</span>
                        <span class="text-2xl font-bold text-blue-500">5.2</span>
                        <span class="text-xs text-gray-400">km</span>
                    </div>
                </div>

                <!-- Strava Map Placeholder -->
                <div class="bg-white rounded-3xl p-4 shadow-md flex-1 mb-4 relative overflow-hidden">
                    <div class="absolute inset-0 bg-gray-100 z-0">
                         <!-- CSS Pattern for fake map -->
                         <div style="background-image: radial-gradient(#cbd5e1 1px, transparent 1px); background-size: 20px 20px; width:100%; height:100%; opacity: 0.5;"></div>
                         <svg class="absolute inset-0 w-full h-full text-orange-500 opacity-80" viewBox="0 0 100 100" preserveAspectRatio="none">
                            <path d="M10,80 Q30,60 50,70 T90,30" fill="none" stroke="currentColor" stroke-width="3" stroke-dasharray="5,5" />
                         </svg>
                    </div>
                    <div class="relative z-10 flex items-center gap-3">
                         <div class="w-10 h-10 bg-[#FC4C02] rounded-lg flex items-center justify-center text-white font-bold">S</div>
                         <div>
                            <div class="font-bold text-gray-800">Morning Run</div>
                            <div class="text-xs text-gray-500">Synced via Strava</div>
                         </div>
                    </div>
                </div>
            </div>
        `;
    }

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