import os
import json
from PIL import Image

SCRIPT_DIR = os.path.dirname(os.path.abspath(__file__))
FULL_DIR = os.path.join(SCRIPT_DIR, "..", "full")
THUMB_DIR = os.path.join(SCRIPT_DIR, "..", "thumbs")
KAT_FILE = os.path.join(SCRIPT_DIR, "kategoriak.json")
KEP_FILE = os.path.join(SCRIPT_DIR, "kepek.json")
# A tvc_galeria.html két szinttel feljebb van a data mappához képest
OUTPUT_HTML = os.path.join(SCRIPT_DIR, "..", "..", "tvc_galeria.html")

THUMB_MAX_SIZE = (300, 300)

def generate_thumbnails(kepek_adatok):
    print("Bélyegképek ellenőrzése / generálása...")
    if not os.path.exists(THUMB_DIR):
        os.makedirs(THUMB_DIR)

    meglevo_thumbs = set(os.listdir(THUMB_DIR))
    generalva = 0

    for kep in kepek_adatok:
        fajlnev = kep['fajlnev']
        thumb_name = f"tn_{fajlnev}"
        
        if thumb_name not in meglevo_thumbs:
            full_path = os.path.join(FULL_DIR, fajlnev)
            thumb_path = os.path.join(THUMB_DIR, thumb_name)
            
            if os.path.exists(full_path):
                try:
                    with Image.open(full_path) as img:
                        img.thumbnail(THUMB_MAX_SIZE)
                        img.save(thumb_path)
                        generalva += 1
                except Exception as e:
                    print(f"Hiba a kép feldolgozásakor ({fajlnev}): {e}")
    
    if generalva > 0:
        print(f"Sikeresen generálva {generalva} új bélyegkép.")

def generate_html(kategoriak, kepek_adatok):
    print("HTML generálása...")
    
    # Adatok csoportosítása kategóriák szerint
    kat_dict = {kat['id']: kat['nev'] for kat in kategoriak}
    kepek_by_kat = {kat['id']: [] for kat in kategoriak}
    
    for kep in kepek_adatok:
        kat_id = kep.get('kategoria', 0)
        if kat_id not in kepek_by_kat:
            kepek_by_kat[kat_id] = []
        kepek_by_kat[kat_id].append(kep)

    # Generáljunk SEO adatokat a kategóriák neveiből
    kat_nevek = [kat['nev'] for kat in kategoriak if kat['id'] != 0]
    keywords_str = "Videoton TVC, galéria, képek, fotók, " + ", ".join(kat_nevek)
    desc_str = f"Videoton TV Computer (TVC) hatalmas képgaléria archívum. Kategóriák: {', '.join(kat_nevek[:5])} és még sok más."

    html = """<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Galéria - Videoton TV Computer</title>
    <meta name="description" content=\"""" + desc_str + """\">
    <meta name="keywords" content=\"""" + keywords_str + """\">
    <link rel="stylesheet" href="../style.css">
    <script src="../menu.js" defer></script>
    <style>
        .gallery-card {
            background-color: #FFFFFF;
            border: 1px solid #AAA;
            padding: 10px;
            text-align: center;
            border-radius: 6px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .gallery-card img {
            max-width: 100%;
            max-height: 250px;
            height: auto;
            border: 1px solid #ddd;
            cursor: pointer;
            margin: 0 auto 10px auto;
            display: block;
        }
        .gallery-card p {
            color: #444;
            font-size: 13px;
            margin: 0;
            line-height: 1.4;
            font-style: italic;
        }
        .gallery-category-title {
            color: #222;
            font-size: 24px;
            border-bottom: 2px solid #FF0000;
            padding-bottom: 5px;
            margin-top: 40px;
            margin-bottom: 20px;
            text-transform: uppercase;
        }
        
        /* Reszponzív Jump Menu */
        .jump-menu ul {
            display: grid !important;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
        }
        .jump-menu li {
            border-bottom: 1px solid #eee !important;
            padding-bottom: 10px !important;
        }
        @media (max-width: 992px) {
            .jump-menu ul { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 600px) {
            .jump-menu ul { grid-template-columns: 1fr; }
        }
        
        .top-link {
            float: right;
            text-decoration: none;
            font-size: 18px;
            color: #cc0000;
            background: #eee;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            margin-top: 5px;
            transition: background 0.2s;
        }
        .top-link:hover {
            background: #ddd;
        }
    </style>
</head>
<body>
    <div class="layout">
        <aside id="sidebar-container" class="sidebar"></aside>
        <main class="content">
            <header class="page-header">
                <h1>Galéria</h1>
            </header>
            
            <div id="jump-top" class="jump-menu">
                <h2>GYORSMENÜ A KATEGÓRIÁKHOZ:</h2>
                <ul>
"""
    # Csak a látható kategóriák használata a mentett sorrendben
    sorted_kats = [(kat['id'], kat['nev']) for kat in kategoriak if kat.get('lathato', True)]

    # Jump menu
    for kat_id, nev in sorted_kats:
        if kepek_by_kat.get(kat_id):  # Csak azokat listázzuk, amiben van kép
            html += f"                    <li><a href=\"#kat_{kat_id}\">{nev}</a></li>\n"
            
    html += """                </ul>
            </div>
            
            <div class="hardware-body">
"""
    
    # Kategóriák és képek
    for kat_id, nev in sorted_kats:
        kepek = kepek_by_kat.get(kat_id, [])
        if not kepek:
            continue
            
        html += f"                <h2 id=\"kat_{kat_id}\" class=\"gallery-category-title\">{nev}<a href=\"#jump-top\" class=\"top-link\" title=\"Vissza a tetejére\">▲</a></h2>\n"
        html += "                <div class=\"content-grid\">\n"
        
        for kep in kepek:
            fajlnev = kep['fajlnev']
            megjegyzes = kep.get('megjegyzes', '').strip()
            
            thumb_url = f"galeria/thumbs/tn_{fajlnev}"
            full_url = f"galeria/full/{fajlnev}"
            
            html += "                    <div class=\"gallery-card\">\n"
            html += f"                        <a href=\"{full_url}\" onclick=\"document.getElementById('lightbox').style.display='flex'; document.getElementById('lightbox-img').src=this.href; return false;\">\n"
            html += f"                            <img src=\"{thumb_url}\" alt=\"{fajlnev}\">\n"
            html += "                        </a>\n"
            if megjegyzes:
                html += f"                        <p>{megjegyzes}</p>\n"
            html += "                    </div>\n"
            
        html += "                </div>\n"
        
    html += """            </div>
        </main>
    </div>
    <div id="lightbox" onclick="this.style.display='none'"><img id="lightbox-img" src=""></div>
</body>
</html>
"""
    
    with open(OUTPUT_HTML, 'w', encoding='utf-8') as f:
        f.write(html)
    print(f"HTML elkészült: {OUTPUT_HTML}")

def main():
    if not os.path.exists(KAT_FILE) or not os.path.exists(KEP_FILE):
        print("Hiba: Nem találhatók a JSON fájlok! Futtasd előbb az update_gallery_db.py-t!")
        return

    with open(KAT_FILE, 'r', encoding='utf-8') as f:
        kategoriak = json.load(f)
        
    with open(KEP_FILE, 'r', encoding='utf-8') as f:
        kepek_adatok = json.load(f)
        
    generate_thumbnails(kepek_adatok)
    generate_html(kategoriak, kepek_adatok)

if __name__ == "__main__":
    main()
