<!DOCTYPE html>
<html lang="kk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
    <title>Жылқы Шежіре Green Edition</title>
    <style>
        :root { 
            --primary: #2d5a27; /* Зеленый цвет вместо золотого */
            --primary-light: #e8f5e9;
            --primary-dark: #1b3d17;
            --dark: #1e272e;
            --white: #ffffff;
            --bg: #f4f7f6;
            --shadow: 0 10px 25px rgba(0,0,0,0.08);
            /* Орнамент теперь тоже зеленоватый */
            --ornament: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 100 100'%3E%3Cpath d='M50 5 L60 25 L50 45 L40 25 Z M5 50 L25 40 L45 50 L25 60 Z M50 95 L40 75 L50 55 L60 75 Z M95 50 L75 60 L55 50 L75 40 Z' fill='none' stroke='%232d5a27' stroke-width='1' opacity='0.05'/%3E%3C/svg%3E");
        }

        /* Общие настройки для компактности в APK */
        * { transition: all 0.2s ease; box-sizing: border-box; outline: none; -webkit-tap-highlight-color: transparent; }

        body { 
            font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; 
            background-color: var(--bg);
            background-image: var(--ornament);
            margin: 0; padding: 10px 10px 100px 10px; 
            color: var(--dark);
            font-size: 14px; /* Чуть меньше базовый шрифт */
        }

        h3 { text-align: center; font-size: 20px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--dark); margin: 20px 0; }
        h3::after { content: ""; display: block; width: 50px; height: 3px; background: var(--primary); margin: 8px auto; border-radius: 2px; }

        .tab-content { display: none; animation: fadeIn 0.4s ease; }
        .tab-content.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }

        /* Сетка статистики */
        .stats-grid { display: flex; gap: 10px; overflow-x: auto; padding: 10px 5px; scrollbar-width: none; }
        .stats-grid::-webkit-scrollbar { display: none; }
        .stat-card { 
            background: var(--white); min-width: 100px; padding: 15px 10px; 
            border-radius: 20px; text-align: center; box-shadow: var(--shadow);
            border: 1px solid transparent; flex-shrink: 0;
        }
        .stat-card.active-filter { border-color: var(--primary); background: var(--primary-light); transform: scale(1.05); }
        .stat-card b { display: block; font-size: 22px; color: var(--primary); }
        .stat-card span { font-size: 10px; font-weight: 700; color: #7f8c8d; text-transform: uppercase; }

        /* Карточка лошади */
        .card { 
            background: var(--white); border-radius: 25px; padding: 15px; 
            box-shadow: var(--shadow); margin-bottom: 15px;
            border: 1px solid rgba(45, 90, 39, 0.1); position: relative;
        }

        .horse-img {
            width: 85px; height: 85px; border-radius: 20px; object-fit: cover;
            border: 2px solid var(--primary); box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }

        .horse-desc { 
            font-size: 13px; color: #576574; margin-top: 12px; 
            background: #f0f7ef; padding: 12px; border-radius: 15px; 
            border-left: 4px solid var(--primary); line-height: 1.5;
        }

        .archive-reason { font-size: 11px; color: #e74c3c; font-style: italic; margin-top: 5px; font-weight: bold; }

        .tag { 
            background: var(--primary-light); color: var(--primary-dark); padding: 4px 12px; 
            border-radius: 10px; font-size: 11px; font-weight: 700; margin-top: 6px; display: inline-block;
        }

        /* Поиск */
        #search { 
            background: var(--white); border: 2px solid var(--primary-light); padding: 15px 15px 15px 45px; 
            border-radius: 20px; width: 100%; font-size: 16px; box-shadow: var(--shadow); margin-bottom: 10px;
        }

        /* Дерево */
        .tree-branch { margin-left: 35px; border-left: 2px dashed var(--primary); padding-left: 20px; margin-top: 15px; }
        .tree-node { position: relative; margin-bottom: 15px; }
        .tree-node::before { content: ""; position: absolute; left: -20px; top: 22px; width: 20px; height: 2px; background: var(--primary); }
        
        .horse-pill { 
            background: white; padding: 8px 15px 8px 8px; border-radius: 50px; 
            display: inline-flex; align-items: center; gap: 10px; 
            box-shadow: 0 5px 15px rgba(0,0,0,0.05); border: 1px solid var(--primary-light);
        }
        .tree-avatar { width: 35px; height: 35px; border-radius: 50%; object-fit: cover; border: 2px solid var(--primary); }

        /* Нижнее меню */
        .nav-bar { 
            position: fixed; bottom: 20px; left: 15px; right: 15px; 
            background: var(--dark); display: flex; height: 75px; 
            border-radius: 25px; z-index: 1000; box-shadow: 0 15px 35px rgba(0,0,0,0.3);
            border: 2px solid var(--primary); overflow: hidden;
        }
        .nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #a4b0be; border: none; background: none; outline: none; }
        .nav-item.active { color: #fff; background: var(--primary); }
        .nav-item span { font-size: 24px; }
        .nav-item b { font-size: 10px; margin-top: 4px; text-transform: uppercase; letter-spacing: 0.5px; }

        /* Кнопки */
        .btn-gold {
            background: linear-gradient(135deg, #2d5a27 0%, #1b3d17 100%);
            color: white; border: none; padding: 16px; border-radius: 18px;
            font-weight: 800; width: 100%; font-size: 15px; letter-spacing: 1px; box-shadow: 0 5px 15px rgba(45,90,39,0.3);
        }
        .btn-gold:active { transform: scale(0.98); }

        .check-tabun { transform: scale(1.4); accent-color: var(--primary); }

        /* Формы */
        input, select, textarea { 
            background: #fff; border: 2px solid var(--primary-light); padding: 14px; 
            border-radius: 15px; margin-bottom: 15px; width: 100%; font-size: 15px;
        }
        input:focus { border-color: var(--primary); }
    </style>
</head>
<body>

<div id="photoModal" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.9); z-index:2000; align-items:center; justify-content:center;" onclick="this.style.display='none'">
    <img id="modalImg" style="max-width:95%; max-height:85%; border: 3px solid var(--primary); border-radius:15px;">
</div>

<div id="tab-list" class="tab-content active">
    <div id="statsBox" class="stats-grid"></div>
    <div style="position:relative; margin: 0 5px;">
        <span style="position:absolute; left:15px; top:15px; opacity:0.5;">🔍</span>
        <input type="text" id="search" placeholder="Іздеу (аты, сипаты...)" oninput="render()">
    </div>
    <div id="listView"></div>
</div>

<div id="tab-tree" class="tab-content">
    <div class="card" style="min-height: 80vh; overflow-x: auto;">
        <h3>🌳 Шежіре Ағашы</h3>
        <div id="treeView"></div>
    </div>
</div>

<div id="tab-archive" class="tab-content">
    <div class="card" style="background: var(--dark); color: white; border: 2px solid var(--primary);">
        <h3 style="color:var(--primary-light); margin-top:0;">📦 Архив және Басқару</h3>
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
            <button class="btn-gold" style="font-size:12px;" onclick="exportData()">📤 ЭКСПОРТ</button>
            <button class="btn-gold" style="font-size:12px;" onclick="document.getElementById('importFile').click()">📥 ИМПОРТ</button>
        </div>
        <input type="file" id="importFile" accept=".json" hidden onchange="importData(event)">
    </div>
    <div id="archiveView"></div>
</div>

<div id="tab-form" class="tab-content">
    <div class="card">
        <h3 id="formTitle">Жаңа тұлпар</h3>
        <div onclick="document.getElementById('photoInput').click()" style="cursor:pointer; background:#f9fbf9; border:3px dashed var(--primary); border-radius:25px; height:180px; display:flex; align-items:center; justify-content:center; overflow:hidden; margin-bottom:15px;">
            <img id="photoPreview" style="display:none; width:100%; height:100%; object-fit:cover;">
            <div id="photoPlaceholder" style="text-align:center; color:var(--primary);">
                <span style="font-size:40px;">📸</span><br><b>Фото жүктеу</b>
            </div>
        </div>
        <input type="file" id="photoInput" accept="image/*" hidden onchange="processFile()">
        
        <input type="hidden" id="editIdx" value="-1">
        <input type="text" id="name" placeholder="Аты (мысалы: Бозқасқа)">
        <div style="display:flex; gap:10px;">
            <select id="gender"><option value="Кобыла">♀️ Бие</option><option value="Жеребец">♂️ Айғыр</option></select>
            <input type="number" id="year" placeholder="Туған жылы">
        </div>
        <select id="type"><option>Бие</option><option>Айғыр</option><option>Құнан</option><option>Байтал</option><option>Тай</option><option>Жабағы</option><option>Құлын</option></select>
        <select id="motherSelect"></select>
        
        <div style="background:#f9fbf9; padding:15px; border-radius:20px; border:1px solid var(--primary-light); margin-bottom:15px; display:flex; align-items:center; gap:15px;">
            <b>Түсі:</b>
            <input type="color" id="color1" value="#2d5a27" style="width:40px; height:40px; border:none; border-radius:50%; padding:0; background:none;">
            <label style="display:flex; align-items:center; gap:5px;"><input type="checkbox" id="isAla" onchange="toggleAla()"> Ала</label>
            <input type="color" id="color2" style="display:none; width:40px; height:40px; border:none; border-radius:50%; padding:0; background:none;" value="#ffffff">
        </div>

        <textarea id="desc" placeholder="Қосымша сипаттама (енесі, ерекшелігі...)" rows="3"></textarea>
        <button class="btn-gold" onclick="handleSave()">✅ САҚТАУ</button>
        <button id="btnCancel" class="btn-gold" style="display:none; background:#ff7675; margin-top:10px;" onclick="resetForm()">❌ БАС ТАРТУ</button>
    </div>
</div>

<nav class="nav-bar">
    <button class="nav-item active" onclick="switchTab('list', this)"><span>📋</span><b>Тізім</b></button>
    <button class="nav-item" onclick="switchTab('tree', this)"><span>🌳</span><b>Шежіре</b></button>
    <button class="nav-item" onclick="switchTab('archive', this)"><span>📦</span><b>Архив</b></button>
    <button class="nav-item" onclick="switchTab('form', this)"><span>➕</span><b>Қосу</b></button>
</nav>

<script>
    const CURRENT_YEAR = new Date().getFullYear();
    let horses = [], archive = [], currentPhoto = "", currentFilter = "all";

    // Загрузка данных
    try {
        horses = JSON.parse(localStorage.getItem('h_db_v7')) || [];
        archive = JSON.parse(localStorage.getItem('h_db_archive_v7')) || [];
    } catch(e) {}

    function switchTab(id, el) {
        document.querySelectorAll('.tab-content').forEach(t => t.classList.remove('active'));
        document.getElementById('tab-' + id).classList.add('active');
        document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active'));
        if(el) el.classList.add('active');
        render();
    }

    function toggleTabun(idx) {
        horses[idx].inTabun = !horses[idx].inTabun;
        saveData();
        render();
    }

    function render() {
        const q = document.getElementById('search').value.toLowerCase();
        
        // Фильтрация
        let filtered = horses;
        if (currentFilter === 'tabun') filtered = horses.filter(h => h.inTabun);
        else if (currentFilter !== 'all') filtered = horses.filter(h => h.type === currentFilter);
        
        filtered = filtered.filter(h => h.name.toLowerCase().includes(q) || h.desc.toLowerCase().includes(q));

        // Отрисовка списка
        document.getElementById('listView').innerHTML = filtered.map((h) => {
            const idx = horses.indexOf(h);
            const bg = h.clr.includes(',') ? `linear-gradient(45deg, ${h.clr.split(',')[0]} 50%, ${h.clr.split(',')[1]} 50%)` : h.clr;
            return `
            <div class="card">
                <div style="display:flex; align-items:center; gap:15px;">
                    <div onclick="openPhoto('${h.photo}')" style="position:relative;">
                        ${h.photo ? `<img src="${h.photo}" class="horse-img">` : `<div class="horse-img" style="background:${bg}"></div>`}
                        <div style="position:absolute; bottom:0; right:0; background:white; border-radius:50%; width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:2px solid var(--primary); font-size:12px; font-weight:bold;">${h.gender==='Кобыла'?'♀':'♂'}</div>
                    </div>
                    <div style="flex:1" onclick="editHorse(${idx})">
                        <b style="font-size:18px;">${h.name}</b><br>
                        <small style="color:#666;">${CURRENT_YEAR - h.year} жас • ${h.type}</small><br>
                        ${h.mother ? `<div class="tag">🐴 Анасы: ${h.mother}</div>` : ''}
                    </div>
                    <div style="display:flex; flex-direction:column; align-items:center; gap:10px;">
                        <input type="checkbox" class="check-tabun" ${h.inTabun ? 'checked' : ''} onclick="toggleTabun(${idx})">
                        <button onclick="moveToArchive(${idx})" style="border:none; background:none; font-size:22px;">📦</button>
                    </div>
                </div>
                ${h.desc ? `<div class="horse-desc">${h.desc}</div>` : ''}
            </div>`;
        }).join('');

        // Архив
        document.getElementById('archiveView').innerHTML = archive.map((h, i) => {
            const bg = h.clr.includes(',') ? `linear-gradient(45deg, ${h.clr.split(',')[0]} 50%, ${h.clr.split(',')[1]} 50%)` : h.clr;
            return `
            <div class="card" style="opacity:0.8; filter: grayscale(0.3);">
                <div style="display:flex; align-items:center; gap:15px;">
                    <div onclick="openPhoto('${h.photo}')">
                        ${h.photo ? `<img src="${h.photo}" class="horse-img" style="width:60px; height:60px;">` : `<div class="horse-img" style="background:${bg}; width:60px; height:60px;"></div>`}
                    </div>
                    <div style="flex:1">
                        <b>${h.name}</b><br>
                        <div class="archive-reason">${h.archiveReason || 'Архив'}</div>
                    </div>
                    <div style="display:flex; gap:10px;">
                        <button onclick="restoreFromArchive(${i})" style="border:none; background:none; font-size:24px;">🔄</button>
                        <button onclick="deleteForever(${i})" style="border:none; background:none; font-size:24px;">🗑️</button>
                    </div>
                </div>
            </div>`;
        }).join('');

        // Статистика
        const stats = {}; horses.forEach(h => stats[h.type] = (stats[h.type] || 0) + 1);
        let statsHtml = `<div class="stat-card ${currentFilter === 'all' ? 'active-filter' : ''}" onclick="setFilter('all')"><b>${horses.length}</b><span>Жалпы</span></div>`;
        statsHtml += `<div class="stat-card ${currentFilter === 'tabun' ? 'active-filter' : ''}" onclick="setFilter('tabun')"><b>${horses.filter(h=>h.inTabun).length}</b><span>Өрісте</span></div>`;
        Object.keys(stats).sort().forEach(k => {
            statsHtml += `<div class="stat-card ${currentFilter === k ? 'active-filter' : ''}" onclick="setFilter('${k}')"><b>${stats[k]}</b><span>${k}</span></div>`;
        });
        document.getElementById('statsBox').innerHTML = statsHtml;

        // Дерево и Выбор матери
        const roots = horses.filter(h => !h.mother || !horses.some(p => p.name === h.mother));
        document.getElementById('treeView').innerHTML = roots.map(r => drawNode(r)).join('');
        
        document.getElementById('motherSelect').innerHTML = '<option value="">Анасын таңдаңыз (Егер бар болса)</option>' + 
            horses.filter(h => h.gender === 'Кобыла').map(h => `<option value="${h.name}">${h.name}</option>`).join('');
    }

    function setFilter(f) { currentFilter = f; render(); }

    function moveToArchive(i) {
        const reason = prompt("Себебін жазыңыз (мысалы: Сатылды, Соғым...):");
        if(reason !== null) {
            horses[i].archiveReason = reason;
            archive.push(horses[i]);
            horses.splice(i, 1);
            saveData(); render();
        }
    }

    function restoreFromArchive(i) {
        if(confirm("Бұл тұлпарды тізімге қайтару?")) {
            delete archive[i].archiveReason;
            horses.push(archive[i]);
            archive.splice(i, 1);
            saveData(); render();
        }
    }

    function deleteForever(i) {
        if(confirm("Мәліметті біржола жою?")) { archive.splice(i, 1); saveData(); render(); }
    }

    function drawNode(h) {
        const bg = h.clr.includes(',') ? `linear-gradient(45deg, ${h.clr.split(',')[0]} 50%, ${h.clr.split(',')[1]} 50%)` : h.clr;
        const gColor = h.gender === 'Кобыла' ? '#ff7675' : '#74b9ff';
        const age = CURRENT_YEAR - h.year;
        let html = `
            <div class="tree-node">
                <div class="horse-pill" style="${h.inTabun ? 'border-color: #2ecc71;' : ''}">
                    <div style="width:5px; height:20px; background:${gColor}; border-radius:10px;"></div>
                    <div onclick="openPhoto('${h.photo}')">
                        ${h.photo ? `<img src="${h.photo}" class="tree-avatar">` : `<div class="tree-avatar" style="background:${bg}"></div>`}
                    </div>
                    <div onclick="editHorse(${horses.indexOf(h)})" style="line-height:1.2;">
                        <b style="font-size:14px;">${h.name} ${h.inTabun ? '🌿' : ''}</b><br>
                        <small style="font-size:10px; color:#666;">${age} жас • ${h.type}</small>
                    </div>
                </div>`;
        const kids = horses.filter(k => k.mother === h.name && h.name !== "");
        if(kids.length) html += `<div class="tree-branch">${kids.map(k => drawNode(k)).join('')}</div>`;
        return html + `</div>`;
    }

    function handleSave() {
        const id = parseInt(document.getElementById('editIdx').value);
        const name = document.getElementById('name').value.trim();
        if(!name) return alert("Атын жазыңыз!");
        
        const data = {
            name,
            gender: document.getElementById('gender').value,
            year: parseInt(document.getElementById('year').value) || CURRENT_YEAR,
            type: document.getElementById('type').value,
            mother: document.getElementById('motherSelect').value,
            desc: document.getElementById('desc').value,
            photo: currentPhoto || (id !== -1 ? horses[id].photo : ""),
            clr: document.getElementById('isAla').checked ? `${document.getElementById('color1').value},${document.getElementById('color2').value}` : document.getElementById('color1').value,
            inTabun: id !== -1 ? horses[id].inTabun : true
        };

        if(id === -1) horses.push(data); else horses[id] = data;
        saveData(); resetForm(); render(); switchTab('list');
    }

    function processFile() {
        const file = document.getElementById('photoInput').files[0];
        if (!file) return;
        const reader = new FileReader();
        reader.onload = (e) => {
            const img = new Image();
            img.onload = () => {
                const canvas = document.createElement('canvas');
                const MAX = 600;
                let w = img.width, h = img.height;
                if (w > h && w > MAX) { h *= MAX/w; w = MAX; } else if (h > MAX) { w *= MAX/h; h = MAX; }
                canvas.width = w; canvas.height = h;
                canvas.getContext('2d').drawImage(img, 0, 0, w, h);
                currentPhoto = canvas.toDataURL('image/jpeg', 0.8);
                document.getElementById('photoPreview').src = currentPhoto;
                document.getElementById('photoPreview').style.display = 'block';
                document.getElementById('photoPlaceholder').style.display = 'none';
            };
            img.src = e.target.result;
        };
        reader.readAsDataURL(file);
    }

    function editHorse(i) {
        const h = horses[i];
        document.getElementById('editIdx').value = i;
        document.getElementById('name').value = h.name;
        document.getElementById('year').value = h.year;
        document.getElementById('desc').value = h.desc;
        document.getElementById('gender').value = h.gender;
        document.getElementById('type').value = h.type;
        document.getElementById('motherSelect').value = h.mother;
        currentPhoto = h.photo || "";
        if(currentPhoto) {
            document.getElementById('photoPreview').src = currentPhoto;
            document.getElementById('photoPreview').style.display = 'block';
            document.getElementById('photoPlaceholder').style.display = 'none';
        }
        document.getElementById('formTitle').innerText = "Өңдеу: " + h.name;
        document.getElementById('btnCancel').style.display = "block";
        switchTab('form');
    }

    function resetForm() {
        document.getElementById('editIdx').value = "-1";
        document.getElementById('name').value = "";
        document.getElementById('year').value = "";
        document.getElementById('desc').value = "";
        document.getElementById('formTitle').innerText = "Жаңа тұлпар";
        currentPhoto = "";
        document.getElementById('photoPreview').style.display = 'none';
        document.getElementById('photoPlaceholder').style.display = 'block';
        document.getElementById('btnCancel').style.display = "none";
    }

    function saveData() {
        localStorage.setItem('h_db_v7', JSON.stringify(horses));
        localStorage.setItem('h_db_archive_v7', JSON.stringify(archive));
    }

    function openPhoto(src) { if(src && src.length > 10) { document.getElementById('modalImg').src = src; document.getElementById('photoModal').style.display='flex'; } }
    function toggleAla() { document.getElementById('color2').style.display = document.getElementById('isAla').checked ? 'inline-block' : 'none'; }
    
    function exportData() {
        const dataStr = JSON.stringify({ horses, archive });
        if (window.AppInventor) {
            window.AppInventor.setWebViewString(dataStr);
        } else {
            const blob = new Blob([dataStr], { type: "application/json" });
            const url = URL.createObjectURL(blob);
            const a = document.createElement("a");
            a.href = url; a.download = `shezhire_v7.json`;
            a.click();
        }
    }

    function importData(e) {
        const file = e.target.files[0];
        if (!file) return;
        const reader = new FileReader();
        reader.onload = (ev) => {
            try {
                const res = JSON.parse(ev.target.result);
                if(confirm("Деректерді ауыстыруды растайсыз ба?")) {
                    horses = res.horses || [];
                    archive = res.archive || [];
                    saveData(); render();
                }
            } catch(e) { alert("Қате файл!"); }
        };
        reader.readAsText(file);
    }
    render();
</script>
</body>
</html>