"<!DOCTYPE html>\n<html lang=\"ru\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Автозапчасти - Регистрация и Гараж</title>\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <script src=\"https://telegram.org/js/telegram-web-app.js\"></script>\n</head>\n<body class=\"bg-slate-50 text-slate-800 font-sans antialiased min-h-screen flex flex-col justify-between\">\n\n    <div class=\"container mx-auto px-4 py-6 max-w-md\">\n        <header class=\"text-center mb-6\">\n            <h1 class=\"text-2xl font-bold text-blue-600\">🚗 АвтоМаркет TG</h1>\n            <p class=\"text-sm text-slate-500\">Ваш личный помощник по запчастям</p>\n        </header>\n\n        <div id=\"register-section\" class=\"bg-white p-6 rounded-2xl shadow-sm border border-slate-100 hidden\">\n            <h2 class=\"text-lg font-semibold mb-4 text-slate-700\">Регистрация в системе</h2>\n            <form id=\"register-form\" class=\"space-y-4\">\n                <div>\n                    <label class=\"block text-xs font-medium text-slate-500 uppercase mb-1\">Имя *</label>\n                    <input type=\"text\" id=\"reg-first-name\" required class=\"w-full px-3 py-2 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500\">\n                </div>\n                <div>\n                    <label class=\"block text-xs font-medium text-slate-500 uppercase mb-1\">Фамилия</label>\n                    <input type=\"text\" id=\"reg-last-name\" class=\"w-full px-3 py-2 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500\">\n                </div>\n                <div>\n                    <label class=\"block text-xs font-medium text-slate-500 uppercase mb-1\">Телефон *</label>\n                    <input type=\"tel\" id=\"reg-phone\" placeholder=\"+7 (999) 000-00-00\" required class=\"w-full px-3 py-2 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500\">\n                </div>\n\n                <hr class=\"my-4 border-slate-100\">\n                <h3 class=\"text-sm font-semibold text-slate-600 mb-2\">Ваш первый автомобиль</h3>\n                <div>\n                    <label class=\"block text-xs font-medium text-slate-500 uppercase mb-1\">Марка *</label>\n                    <input type=\"text\" id=\"car-brand\" placeholder=\"например, Toyota\" required class=\"w-full px-3 py-2 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500\">\n                </div>\n                <div>\n                    <label class=\"block text-xs font-medium text-slate-500 uppercase mb-1\">Модель *</label>\n                    <input type=\"text\" id=\"car-model\" placeholder=\"например, Camry\" required class=\"w-full px-3 py-2 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500\">\n                </div>\n                <div>\n                    <label class=\"block text-xs font-medium text-slate-500 uppercase mb-1\">Год выпуска</label>\n                    <input type=\"number\" id=\"car-year\" placeholder=\"2018\" class=\"w-full px-3 py-2 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500\">\n                </div>\n\n                <button type=\"submit\" class=\"w-full bg-blue-600 text-white py-3 rounded-xl font-medium hover:bg-blue-700 transition shadow-lg shadow-blue-500/20 mt-4\">\n                    Зарегистрироваться\n                </button>\n            </form>\n        </div>\n\n        <div id=\"dashboard-section\" class=\"space-y-6 hidden\">\n            <div class=\"bg-white p-5 rounded-2xl shadow-sm border border-slate-100 flex items-center justify-between\">\n                <div>\n                    <p class=\"text-xs text-slate-400 uppercase font-medium\">Добро пожаловать</p>\n                    <h2 id=\"user-greeting\" class=\"text-lg font-bold text-slate-800\">Имя Фамилия</h2>\n                    <p id=\"user-phone-display\" class=\"text-xs text-slate-500\">+7...</p>\n                </div>\n                <div class=\"bg-blue-50 text-blue-600 p-3 rounded-xl\">👤</div>\n            </div>\n\n            <div class=\"bg-white p-5 rounded-2xl shadow-sm border border-slate-100\">\n                <div class=\"flex justify-between items-center mb-4\">\n                    <h3 class=\"font-semibold text-slate-700\">Мой гараж (Автомобили)</h3>\n                    <button onclick=\"openAddCarModal()\" class=\"text-xs bg-blue-50 text-blue-600 px-3 py-1.5 rounded-lg font-medium hover:bg-blue-100 transition\">+ Добавить</button>\n                </div>\n                <div id=\"vehicles-list\" class=\"space-y-3\"></div>\n            </div>\n        </div>\n\n        <div id=\"add-car-modal\" class=\"fixed inset-0 bg-black/40 backdrop-blur-sm hidden items-center justify-center p-4 z-50\">\n            <div class=\"bg-white w-full max-w-sm p-6 rounded-2xl shadow-xl space-y-4\">\n                <h3 class=\"text-lg font-semibold text-slate-800\">Добавить автомобиль</h3>\n                <form id=\"add-car-form\" class=\"space-y-3\">\n                    <div>\n                        <label class=\"block text-xs font-medium text-slate-500 uppercase mb-1\">Марка *</label>\n                        <input type=\"text\" id=\"modal-car-brand\" required class=\"w-full px-3 py-2 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500\">\n                    </div>\n                    <div>\n                        <label class=\"block text-xs font-medium text-slate-500 uppercase mb-1\">Модель *</label>\n                        <input type=\"text\" id=\"modal-car-model\" required class=\"w-full px-3 py-2 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500\">\n                    </div>\n                    <div>\n                        <label class=\"block text-xs font-medium text-slate-500 uppercase mb-1\">Год выпуска</label>\n                        <input type=\"number\" id=\"modal-car-year\" class=\"w-full px-3 py-2 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500\">\n                    </div>\n                    <div class=\"flex space-x-2 pt-2\">\n                        <button type=\"button\" onclick=\"closeAddCarModal()\" class=\"w-1/2 bg-slate-100 text-slate-600 py-2.5 rounded-xl font-medium hover:bg-slate-200 transition\">Отмена</button>\n                        <button type=\"submit\" class=\"w-1/2 bg-blue-600 text-white py-2.5 rounded-xl font-medium hover:bg-blue-700 transition\">Добавить</button>\n                    </div>\n                </form>\n            </div>\n        </div>\n    </div>\n\n    <script>\n        const tg = window.Telegram.WebApp;\n        tg.expand();\n\n        const telegramId = tg.initDataUnsafe?.user?.id ? String(tg.initDataUnsafe.user.id) : \"test_user_12345\";\n        const defaultFirstName = tg.initDataUnsafe?.user?.first_name || \"Клиент\";\n        document.getElementById('reg-first-name').value = defaultFirstName;\n\n        async function checkUser() {\n            try {\n                const response = await fetch(`/api/users/${telegramId}/vehicles`);\n                if (response.ok) {\n                    const vehicles = await response.json();\n                    showDashboard(vehicles);\n                } else {\n                    document.getElementById('register-section').classList.remove('hidden');\n                }\n            } catch (e) {\n                document.getElementById('register-section').classList.remove('hidden');\n            }\n        }\n\n        document.getElementById('register-form').addEventListener('submit', async (e) => {\n            e.preventDefault();\n            const data = {\n                telegram_id: telegramId,\n                first_name: document.getElementById('reg-first-name').value,\n                last_name: document.getElementById('reg-last-name').value || null,\n                phone: document.getElementById('reg-phone').value,\n                initial_vehicle: {\n                    brand: document.getElementById('car-brand').value,\n                    model: document.getElementById('car-model').value,\n                    year: document.getElementById('car-year').value ? parseInt(document.getElementById('car-year').value) : null\n                }\n            };\n\n            const res = await fetch('/api/register', {\n                method: 'POST',\n                headers: { 'Content-Type': 'application/json' },\n                body: JSON.stringify(data)\n            });\n\n            if (res.ok) {\n                const user = await res.json();\n                showDashboard(user.vehicles);\n            } else {\n                alert('Ошибка регистрации.');\n            }\n        });\n\n        function showDashboard(vehicles) {\n            document.getElementById('register-section').classList.add('hidden');\n            document.getElementById('dashboard-section').classList.remove('hidden');\n            document.getElementById('user-greeting').innerText = document.getElementById('reg-first-name').value || \"Пользователь\";\n            renderVehicles(vehicles);\n        }\n\n        function renderVehicles(vehicles) {\n            const list = document.getElementById('vehicles-list');\n            list.innerHTML = '';\n            if (vehicles.length === 0) {\n                list.innerHTML = '<p class=\"text-xs text-slate-400\">В гараже пока нет автомобилей.</p>';\n                return;\n            }\n            vehicles.forEach(car => {\n                list.innerHTML += `\n                    <div class=\"bg-slate-50 border border-slate-100 p-3 rounded-xl flex justify-between items-center\">\n                        <div>\n                            <h4 class=\"font-semibold text-slate-800\">${car.brand} ${car.model}</h4>\n                            <p class=\"text-xs text-slate-500\">${car.year ? 'Год: ' + car.year : ''}</p>\n                        </div>\n                        <span class=\"text-xs bg-emerald-50 text-emerald-600 px-2 py-1 rounded font-medium\">Активен</span>\n                    </div>\n                `;\n            });\n        }\n\n        function openAddCarModal() {\n            document.getElementById('add-car-modal').classList.remove('hidden');\n            document.getElementById('add-car-modal').classList.add('flex');\n        }\n        function closeAddCarModal() {\n            document.getElementById('add-car-modal').classList.add('hidden');\n            document.getElementById('add-car-modal').classList.remove('flex');\n        }\n\n        document.getElementById('add-car-form').addEventListener('submit', async (e) => {\n            e.preventDefault();\n            const carData = {\n                brand: document.getElementById('modal-car-brand').value,\n                model: document.getElementById('modal-car-model').value,\n                year: document.getElementById('modal-car-year').value ? parseInt(document.getElementById('modal-car-year').value) : null\n            };\n\n            const res = await fetch(`/api/users/${telegramId}/vehicles`, {\n                method: 'POST',\n                headers: { 'Content-Type': 'application/json' },\n                body: JSON.stringify(carData)\n            });\n\n            if (res.ok) {\n                closeAddCarModal();\n                const updatedRes = await fetch(`/api/users/${telegramId}/vehicles`);\n                const vehicles = await updatedRes.json();\n                renderVehicles(vehicles);\n                document.getElementById('add-car-form').reset();\n            } else {\n                alert('Не удалось добавить автомобиль');\n            }\n        });\n\n        checkUser();\n    </script>\n</body>\n</html>\n"