<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DarkHan Transit: Поездки и Попутчики</title>
    
    <!-- API Яндекс.Карт v2.1 -->
    <script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&apikey=497b7952-45e3-42e1-8843-f166164284b1" type="text/javascript"></script>
    
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400..900&display=swap');
        
        :root {
            --color-primary: #0b68a8;
            --color-secondary: #2196F3;
            --color-success: #10b981;
            --color-bg: #f4f7f9;
        }

        body { font-family: 'Inter', sans-serif; background: var(--color-bg); margin: 0; color: #1f2937; -webkit-tap-highlight-color: transparent; }

        header { background: var(--color-primary); color: white; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 10px rgba(0,0,0,0.15); }

        .container { max-width: 600px; margin: 0 auto; padding: 15px; }

        /* Кнопки */
        .btn { border: none; padding: 12px 20px; border-radius: 12px; font-weight: 600; cursor: pointer; transition: 0.2s; text-decoration: none; display: inline-block; text-align: center; font-size: 14px; }
        .btn-primary { background: var(--color-secondary); color: white; width: 100%; box-sizing: border-box; }
        .btn-outline { border: 1px solid #d1d5db; background: white; color: #374151; width: 100%; box-sizing: border-box; }

        /* Карточки */
        .card { background: white; border-radius: 18px; padding: 20px; margin-bottom: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); border-left: 6px solid #d1d5db; cursor: pointer; transition: 0.1s; }
        .card:active { transform: scale(0.98); }
        .card-offer { border-left-color: var(--color-secondary); }
        .card-request { border-left-color: #9333ea; }

        /* Модалки */
        .modal { position: fixed; inset: 0; background: rgba(0,0,0,0.75); display: flex; align-items: center; justify-content: center; z-index: 2000; padding: 10px; }
        .modal-content { background: white; border-radius: 24px; width: 100%; max-width: 500px; padding: 25px; position: relative; box-sizing: border-box; max-height: 95vh; overflow-y: auto; }
        
        #map-picker { height: 350px; width: 100%; border-radius: 16px; margin: 10px 0; background: #eee; overflow: hidden; }

        .hidden { display: none !important; }
        
        input, select { width: 100%; padding: 14px; border: 1px solid #ddd; border-radius: 12px; margin-top: 5px; box-sizing: border-box; background: #fff; font-size: 15px; outline: none; }
        input:focus { border-color: var(--color-secondary); }

        .address-box { font-size: 14px; background: #eef6ff; padding: 15px; border-radius: 14px; border: 1px solid #bcdbff; margin: 10px 0; }
        .addr-main { color: #0b68a8; font-weight: 800; font-size: 16px; display: block; }
        .addr-sub { color: #6b7280; font-size: 12px; display: block; margin-top: 2px; }

        .nav-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-top: 15px; }
        .nav-link { font-size: 12px; padding: 12px 5px; background: #f9fafb; border: 1px solid #ddd; border-radius: 12px; text-decoration: none; color: #333; text-align: center; font-weight: 600; }
    </style>
</head>
<body>

    <header>
        <div style="font-weight: 900; font-size: 1.2rem;">🚀 DarkHan Transit</div>
        <button onclick="openAddModal()" class="btn" style="background:var(--color-success); color:white; padding:8px 16px">+ Создать</button>
    </header>

    <main class="container">
        <div id="ride-board">Загрузка поездок...</div>
    </main>

    <!-- Модалка создания -->
    <div id="add-modal" class="modal hidden">
        <div class="modal-content">
            <h2 style="margin:0 0 20px 0; font-size: 1.4rem;">Новое объявление</h2>
            <form id="add-form">
                <div style="display:flex; gap:10px; margin-bottom:15px">
                    <label style="flex:1; background:#f3f4f6; padding:12px; border-radius:12px; text-align:center; cursor:pointer">
                        <input type="radio" name="postType" value="offer" checked> Водитель
                    </label>
                    <label style="flex:1; background:#f3f4f6; padding:12px; border-radius:12px; text-align:center; cursor:pointer">
                        <input type="radio" name="postType" value="request"> Пассажир
                    </label>
                </div>

                <div style="display:grid; grid-template-columns:1fr 1fr; gap:12px">
                    <select name="fromCity" id="fromCitySelect" required>
                        <option value="Костанай">Костанай</option>
                        <option value="Тюмень">Тюмень</option>
                        <option value="Курган">Курган</option>
                        <option value="Челябинск">Челябинск</option>
                    </select>
                    <select name="toCity" required>
                        <option value="Тюмень">Тюмень</option>
                        <option value="Костанай">Костанай</option>
                        <option value="Курган">Курган</option>
                        <option value="Челябинск">Челябинск</option>
                    </select>
                </div>

                <button type="button" onclick="openMapPicker()" class="btn btn-outline" style="margin-top:15px; border-color:var(--color-secondary); color:var(--color-secondary)">
                    📍 Указать улицу и номер дома
                </button>
                
                <div id="selected-address-box" class="address-box hidden">
                    <span id="res-street-house" class="addr-main"></span>
                    <span id="res-city" class="addr-sub"></span>
                </div>

                <div style="display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:10px">
                    <input type="date" name="date" required>
                    <input type="time" name="time" required>
                    <input type="number" name="price" placeholder="Цена KZT" required>
                    <input type="number" name="seats" placeholder="Мест" required min="1">
                </div>
                
                <input type="tel" name="phone" placeholder="77071234567" style="margin-top:10px" required>

                <div style="display:flex; gap:10px; margin-top:25px">
                    <button type="button" onclick="closeModals()" class="btn btn-outline" style="flex:1">Отмена</button>
                    <button type="submit" id="main-submit-btn" class="btn btn-primary" style="flex:1">Опубликовать</button>
                </div>
            </form>
        </div>
    </div>

    <!-- Модалка карты -->
    <div id="map-modal" class="modal hidden">
        <div class="modal-content" style="max-width: 600px;">
            <h3 style="margin:0">Где встречаемся?</h3>
            <button onclick="getCurrentLocation()" class="btn" style="background:#f3f4f6; width:100%; margin:10px 0; font-size:12px; border:1px solid #ddd">🎯 Моё местоположение</button>
            <div id="map-picker"></div>
            <div id="map-address-preview" class="address-box">
                <span id="preview-street" class="addr-main">Кликните на карту...</span>
                <span id="preview-city" class="addr-sub">Чтобы выбрать адрес</span>
            </div>
            <button id="confirm-map-btn" onclick="saveMapPoint()" class="btn btn-primary">Выбрать это место</button>
        </div>
    </div>

    <!-- Модалка подробностей -->
    <div id="detail-modal" class="modal hidden">
        <div class="modal-content" id="detail-render"></div>
    </div>

    <script type="module">
        import { initializeApp } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-app.js";
        import { getFirestore, collection, addDoc, onSnapshot, query, orderBy, serverTimestamp } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-firestore.js";
        import { getAuth, signInAnonymously, onAuthStateChanged } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-auth.js";

        // --- КОНФИГУРАЦИЯ ---
        const firebaseConfig = {
            apiKey: "AIzaSyA5vA1Q3QfpJRsT5hZuN_YItWzy1hI7CJA",
            authDomain: "perevozka-90345.firebaseapp.com",
            projectId: "perevozka-90345",
            storageBucket: "perevozka-90345.firebasestorage.app",
            messagingSenderId: "673503743298",
            appId: "G-589WDN054P"
        };
        
        const TELEGRAM_BRIDGE_URL = "https://script.google.com/macros/s/AKfycbxWWyv8pltsr63CnACe4lufy1E9ioSGv2obj-sHwswVNL4LPsUskaDONkoPkBX5hOWS8A/exec"; 

        const app = initializeApp(firebaseConfig);
        const db = getFirestore(app);
        const auth = getAuth(app);

        let yMap = null, yPlacemark = null;
        let pCoords = null, pStreet = null, pHouse = null, pFull = null;
        window.ridesData = [];

        onAuthStateChanged(auth, async (user) => {
            if (!user) await signInAnonymously(auth);
            loadRides();
        });

        // --- УПРАВЛЕНИЕ UI ---
        window.openAddModal = () => document.getElementById('add-modal').classList.remove('hidden');
        window.closeModals = () => document.querySelectorAll('.modal').forEach(m => m.classList.add('hidden'));

        // --- ЛОГИКА КАРТЫ (ЯНДЕКС) ---
        window.openMapPicker = () => {
            document.getElementById('map-modal').classList.remove('hidden');
            const city = document.getElementById('fromCitySelect').value;

            ymaps.ready(() => {
                if (!yMap) {
                    yMap = new ymaps.Map("map-picker", { center: [53.214, 63.624], zoom: 12, controls: ['zoomControl'] });
                    yMap.events.add('click', (e) => handleSelection(e.get('coords')));
                }
                ymaps.geocode(city).then(res => yMap.setCenter(res.geoObjects.get(0).geometry.getCoordinates(), 12));
            });
        };

        window.getCurrentLocation = () => {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition((pos) => {
                    const coords = [pos.coords.latitude, pos.coords.longitude];
                    yMap.setCenter(coords, 16);
                    handleSelection(coords);
                });
            }
        };

        async function handleSelection(coords) {
            pCoords = coords;
            if (yPlacemark) yPlacemark.geometry.setCoordinates(coords);
            else {
                yPlacemark = new ymaps.Placemark(coords, {}, { preset: 'islands#blueCircleDotIcon' });
                yMap.geoObjects.add(yPlacemark);
            }

            document.getElementById('preview-street').innerText = "🔍 Определение адреса...";
            const res = await ymaps.geocode(coords);
            const obj = res.geoObjects.get(0);
            
            if (obj) {
                pFull = obj.getAddressLine();
                pStreet = obj.getThoroughfare() || obj.getLocalities()[0] || "Точка на карте";
                pHouse = obj.getPremiseNumber() || "";
                
                document.getElementById('preview-street').innerText = `${pStreet} ${pHouse}`;
                document.getElementById('preview-city').innerText = pFull;
            }
        }

        window.saveMapPoint = () => {
            if (!pCoords) return alert("Выберите точку на карте!");
            document.getElementById('res-street-house').innerText = `${pStreet} ${pHouse}`;
            document.getElementById('res-city').innerText = pFull;
            document.getElementById('selected-address-box').classList.remove('hidden');
            document.getElementById('map-modal').classList.add('hidden');
        };

        // --- ОТПРАВКА В TELEGRAM ---
        async function sendToTelegram(data) {
            if (!TELEGRAM_BRIDGE_URL || TELEGRAM_BRIDGE_URL.includes("ВАША_ССЫЛКА")) return;
            try {
                await fetch(TELEGRAM_BRIDGE_URL, {
                    method: 'POST',
                    mode: 'no-cors',
                    body: JSON.stringify(data)
                });
            } catch (e) { console.error("TG Error:", e); }
        }

        // --- FIREBASE ---
        function loadRides() {
            onSnapshot(query(collection(db, "rides"), orderBy("timestamp", "desc")), (snap) => {
                const rides = snap.docs.map(d => ({id: d.id, ...d.data()}));
                window.ridesData = rides;
                document.getElementById('ride-board').innerHTML = rides.map(r => `
                    <div class="card" style="border-left-color: ${r.postType==='offer'?'#2196F3':'#9333ea'}" onclick="showRideDetail('${r.id}')">
                        <div style="display:flex; justify-content:space-between">
                            <div style="flex:1">
                                <div style="font-weight:800; font-size:1.1rem">${r.fromCity} ➔ ${r.toCity}</div>
                                <div style="font-size:13px; color:var(--color-primary); font-weight:700; margin-top:4px">📍 ${r.pStreet || 'Место встречи'} ${r.pHouse || ''}</div>
                                <div style="font-size:11px; color:#999; margin-top:4px">📅 ${r.date} • ${r.time}</div>
                            </div>
                            <div style="font-weight:900; color:#0b68a8; font-size:1.2rem">${r.price} KZT</div>
                        </div>
                    </div>
                `).join('');
            });
        }

        window.showRideDetail = (id) => {
            const r = window.ridesData.find(x => x.id === id);
            const [lat, lng] = r.pCoords || [0,0];
            document.getElementById('detail-render').innerHTML = `
                <h2 style="margin:0; text-align:center">${r.fromCity} ➔ ${r.toCity}</h2>
                <p style="text-align:center; font-weight:bold; color:#666; margin-bottom:15px">${r.postType==='offer'?'🚗 ВОДИТЕЛЬ':'🙋‍♂️ ПАССАЖИР'}</p>
                <div class="address-box">
                    <span class="addr-main">${r.pStreet || 'Место встречи'} ${r.pHouse || ''}</span>
                    <span class="addr-sub">${r.pFull || ''}</span>
                </div>
                <div style="background:#f9fafb; padding:15px; border-radius:15px; margin:15px 0; font-size:14px; display:grid; grid-template-columns:1fr 1fr; gap:10px">
                    <div>📅 <b>Дата:</b> ${r.date}</div>
                    <div>🕒 <b>Время:</b> ${r.time}</div>
                    <div>👥 <b>Мест:</b> ${r.seats}</div>
                    <div style="color:var(--color-primary); font-weight:800">💰 ${r.price} KZT</div>
                </div>
                <div class="nav-grid">
                    <a href="yandexmaps://maps.yandex.ru/?pt=${lng},${lat}&z=16&l=map" class="nav-link">Яндекс</a>
                    <a href="https://www.google.com/maps/search/?api=1&query=${lat},${lng}" target="_blank" class="nav-link">Google</a>
                    <a href="dgis://2gis.ru/geo/${lng},${lat}" class="nav-link">2GIS</a>
                </div>
                <a href="https://wa.me/${r.phone}" target="_blank" class="btn btn-primary" style="margin-top:20px; background:#25D366">Написать в WhatsApp</a>
                <button onclick="closeModals()" class="btn btn-outline" style="margin-top:10px; width:100%">Закрыть</button>
            `;
            document.getElementById('detail-modal').classList.remove('hidden');
        };

        document.getElementById('add-form').onsubmit = async (e) => {
            e.preventDefault();
            const fd = new FormData(e.target);
            if(!pCoords) return alert("Укажите место на карте!");
            
            const btn = document.getElementById('main-submit-btn');
            btn.disabled = true; btn.innerText = "Публикация...";

            const rideData = {
                fromCity: fd.get('fromCity'), toCity: fd.get('toCity'),
                postType: fd.get('postType'), date: fd.get('date'),
                time: fd.get('time'), price: fd.get('price'),
                seats: fd.get('seats'), phone: fd.get('phone'),
                pCoords, pStreet, pHouse, pFull,
                timestamp: serverTimestamp()
            };

            try {
                await addDoc(collection(db, "rides"), rideData);
                await sendToTelegram(rideData); // Отправка в телегу
                e.target.reset(); pCoords = null;
                document.getElementById('selected-address-box').classList.add('hidden');
                closeModals();
            } catch (err) { alert(err.message); }
            finally { btn.disabled = false; btn.innerText = "Опубликовать"; }
        };
    </script>
</body>
</html>