import os
import re

# Paths
SCRIPT_DIR = os.path.dirname(os.path.abspath(__file__))
source_file = os.path.join(SCRIPT_DIR, 'viewlist.txt')
output_dir = os.path.join(SCRIPT_DIR, '..', '..')
gamepic_dir = os.path.join(output_dir, 'gamepic')

def get_letter(name):
    if not name: return '#'
    n = name
    if n.startswith('$ '): n = n[2:]
    elif n.startswith('$'): n = n[1:]
    if not n: return '0'
    c = n[0].upper()
    if c.isdigit(): return '0'
    mapping = {'Á': 'A', 'É': 'E', 'Í': 'I', 'Ó': 'O', 'Ö': 'O', 'Ő': 'O', 'Ú': 'U', 'Ü': 'U', 'Ű': 'U'}
    c = mapping.get(c, c)
    if not c.isalpha(): return '0'
    return c

def generate_abc_nav(active_letter):
    letters = "0ABCDEFGHIJKLMNOPQRSTUVWXYZ"
    nav = '<div class="abc-nav">'
    for l in letters:
        active = ' class="active"' if l == active_letter else ''
        # Use lowercase filenames for the links
        nav += f'<a href="tvc_programok_{l.lower()}.html"{active}>{l}</a>'
    nav += '</div>'
    return nav

def generate_page(letter, games):
    abc_nav = generate_abc_nav(letter)
    
    # SEO generálás
    game_names = [g['name'] for g in games[:5]]
    creators = list(set([g['creator'] for g in games if g['creator'] and g['creator'] != '-']))[:5]
    
    if games:
        desc_str = f"Letölthető Videoton TVC játékok és programok a(z) {letter} betűnél. Olyan szoftverekkel, mint: {', '.join(game_names)}."
    else:
        desc_str = f"Letölthető Videoton TVC játékok és programok a(z) {letter} betűnél."
        
    keywords_str = f"Videoton TVC, TV-Computer, játékok, letöltés, programok, {letter} betű"
    if creators:
        keywords_str += ", " + ", ".join(creators)
    if game_names:
        keywords_str += ", " + ", ".join(game_names)
        
    html = f"""<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Játékok - {letter} - Videoton TVC</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>
        .abc-nav {{ display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 25px; background: #333; padding: 12px; border-radius: 6px; }}
        .abc-nav a {{ display: inline-block; width: 32px; height: 32px; line-height: 32px; text-align: center; background: #555; color: #fff; text-decoration: none; font-weight: bold; border-radius: 4px; font-size: 0.9em; }}
        .abc-nav a:hover, .abc-nav a.active {{ background: #48ff00; color: #000; }}
        
        .game-item {{ background: #fff; color: #333; border-radius: 8px; margin-bottom: 40px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.2); border: 1px solid #ddd; }}
        .game-header {{ background: linear-gradient(90deg, #1a1a1a 0%, #333 100%); color: #48ff00; padding: 15px 25px; display: flex; justify-content: space-between; align-items: center; border-bottom: 3px solid #48ff00; }}
        .game-header h2 {{ margin: 0; font-size: 1.4em; letter-spacing: 1.5px; color: #48ff00 !important; text-shadow: 0 0 10px rgba(72, 255, 0, 0.4); text-transform: uppercase; }}
        .game-header span {{ font-weight: bold; background: rgba(72, 255, 0, 0.1); color: #48ff00; padding: 4px 12px; border: 1px solid rgba(72, 255, 0, 0.3); border-radius: 20px; font-size: 0.85em; }}
        
        .game-body {{ padding: 20px; display: flex; gap: 25px; flex-wrap: wrap; }}
        .game-info {{ flex: 2; min-width: 300px; }}
        .game-images {{ flex: 1.2; min-width: 280px; display: flex; flex-direction: column; gap: 12px; align-items: center; }}
        
        .main-thumb {{ width: 100%; max-width: 360px; height: auto; border: 2px solid #444; border-radius: 6px; cursor: zoom-in; box-shadow: 0 4px 12px rgba(0,0,0,0.3); background: #000; transition: transform 0.2s; }}
        .main-thumb:hover {{ transform: scale(1.02); }}
        .extra-thumbs {{ display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 5px; }}
        .extra-thumbs img {{ width: 100px; height: 75px; object-fit: cover; border: 2px solid #eee; border-radius: 4px; cursor: zoom-in; opacity: 0.9; transition: all 0.2s; background: #000; }}
        .extra-thumbs img:hover {{ opacity: 1; border-color: #48ff00; transform: translateY(-2px); }}
        
        .meta-grid {{ display: grid; grid-template-columns: auto 1fr; gap: 10px; margin-bottom: 20px; }}
        .meta-label {{ font-weight: bold; color: #666; font-size: 0.9em; }}
        .meta-value {{ font-weight: 500; color: #111; }}
        
        .description {{ background: #f9f9f9; padding: 15px; border-radius: 6px; border-left: 4px solid #444; margin-bottom: 20px; line-height: 1.5; color: #444; font-style: italic; }}
        
        .actions {{ display: flex; gap: 15px; align-items: center; margin-top: 20px; border-top: 1px solid #eee; padding-top: 20px; }}
        .download-btn {{ display: inline-flex; align-items: center; gap: 10px; background: #000; color: #48ff00; padding: 10px 25px; border-radius: 6px; text-decoration: none; font-weight: bold; border: 2px solid #000; transition: all 0.2s; }}
        .download-btn:hover {{ background: #48ff00; color: #000; }}
        .download-btn img {{ width: 24px; }}
        
        /* Responsive video container - now using global .video-responsive */
        
        /* Lightbox specific scaling */
        #lightbox {{
            display: none; position: fixed; z-index: 9999; top: 0; left: 0; 
            width: 100%; height: 100%; background: rgba(0,0,0,0.95); 
            justify-content: center; align-items: center; cursor: zoom-out;
        }}
        #lightbox-img {{
            max-width: 95vw; max-height: 95vh;
            width: auto; height: auto;
            border: 3px solid #48ff00;
            image-rendering: pixelated; /* Retro pixel art sharp zoom */
            box-shadow: 0 0 30px rgba(72, 255, 0, 0.3);
            transform: scale(1);
            transition: transform 0.2s;
        }}
        /* Force upscale small images in lightbox */
        .upscale {{
            width: 80% !important;
            height: auto !important;
            object-fit: contain;
        }}
    </style>
</head>
<body>
    <div class="layout">
        <aside id="sidebar-container" class="sidebar"></aside>
        <main class="content">
            <a href="tvc_programok.html" class="back-link" style="color: #48ff00; font-weight: bold; text-decoration: none; display: inline-block; margin-bottom: 20px;">&larr; Vissza a Programok főoldalra</a>
            <h1 class="cim">Letölthető programok: {letter}</h1>
            <p style="text-align: center; font-weight: bold; font-size: 1.2em; color: #444; margin-top: -10px; margin-bottom: 20px;">Összesen: {len(games)} darab</p>
            {abc_nav}
            <div class="game-list">
    """
    for g in games:
        img_html = ""
        if g['img'] and g['img'].lower() != 'nincs':
            name_part, ext = os.path.splitext(g['img'])
            base_name = re.sub(r'_[123]$', '', name_part)
            candidates = [f"{base_name}{ext}"] + [f"{base_name}_{i}{ext}" for i in range(1, 4)]
            found_imgs = []
            for cand in candidates:
                if os.path.exists(os.path.join(gamepic_dir, cand)) and cand not in found_imgs:
                    found_imgs.append(cand)
            
            if found_imgs:
                main_img = found_imgs[0]
                img_html = f'<img src="gamepic/{main_img}" class="main-thumb" alt="{g["name"]}">'
                if len(found_imgs) > 1:
                    img_html += '<div class="extra-thumbs">'
                    for ex in found_imgs[1:]:
                        img_html += f'<img src="gamepic/{ex}" alt="{g["name"]} extra">'
                    img_html += '</div>'
        
        video_html = ""
        if g['youtube']:
            yt_url = g['youtube']
            if 'watch?v=' in yt_url:
                yt_id = yt_url.split('watch?v=')[1].split('&')[0]
                yt_url = f"https://www.youtube.com/embed/{yt_id}"
            video_html = f'<div class="video-responsive"><iframe src="{yt_url}" frameborder="0" allowfullscreen></iframe></div>'

        dl_btn = f'<a href="gamezip/{g["zip"]}" class="download-btn"><img src="pic/disk.jpg" alt="ZIP"> Letöltés (.zip)</a>' if g['zip'] else ""

        html += f"""
            <div class="game-item">
                <div class="game-header"><h2>{g['name']}</h2><span>{g['year']}</span></div>
                <div class="game-body">
                    <div class="game-images">{img_html}</div>
                    <div class="game-info">
                        <div class="meta-grid">
                            <span class="meta-label">Készítette:</span><span class="meta-value">{g['creator']}</span>
                            <span class="meta-label">Típus:</span><span class="meta-value">{g['type']}</span>
                            <span class="meta-label">Fájlok száma:</span><span class="meta-value">{g['files']}</span>
                        </div>
                        {f'<div class="description">{g["desc"]}</div>' if g['desc'] else ''}
                        {video_html}
                        <div class="actions">{dl_btn}</div>
                    </div>
                </div>
            </div>
        """
    html += """</div></main></div>
    <div id="lightbox" onclick="this.style.display='none'">
        <img id="lightbox-img" src="">
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const lightbox = document.getElementById('lightbox');
            const lightboxImg = document.getElementById('lightbox-img');
            document.querySelectorAll('.game-images img').forEach(el => {
                el.addEventListener('click', (e) => {
                    e.stopPropagation();
                    lightboxImg.src = el.src;
                    
                    // Reset class
                    lightboxImg.classList.remove('upscale');
                    
                    // Check natural dimensions after load
                    const tempImg = new Image();
                    tempImg.src = el.src;
                    tempImg.onload = () => {
                        if (tempImg.naturalWidth < 600) {
                            lightboxImg.classList.add('upscale');
                        }
                    };
                    
                    lightbox.style.display = 'flex';
                });
            });
        });
    </script>
</body></html>"""
    return html

def main():
    if not os.path.exists(source_file): return
    with open(source_file, 'r', encoding='cp1250', errors='ignore') as f:
        lines = f.readlines()[4:]
    alphabet = {}
    for line in lines:
        parts = line.strip('\n').split('\t')
        if len(parts) < 8: continue
        name = parts[0].strip()
        if name.startswith('$ '): name = name[2:]
        elif name.startswith('$'): name = name[1:]
        game = {
            'name': name, 'year': parts[2].strip(), 'creator': parts[3].strip(),
            'type': parts[4].strip().replace(" - [nem kategorizált]", ""), 
            'files': parts[5].strip(), 'zip': parts[6].strip(),
            'img': parts[7].strip(), 'desc': parts[8].strip() if len(parts) > 8 else "",
            'youtube': parts[9].strip() if len(parts) > 9 else ""
        }
        letter = get_letter(game['name'])
        if letter not in alphabet: alphabet[letter] = []
        alphabet[letter].append(game)
    for l in alphabet: alphabet[l].sort(key=lambda x: x['name'].lower())
    for l in "0ABCDEFGHIJKLMNOPQRSTUVWXYZ":
        games = alphabet.get(l, [])
        content = generate_page(l, games)
        # Use LOWERCASE filename
        with open(os.path.join(output_dir, f"tvc_programok_{l.lower()}.html"), 'w', encoding='utf-8') as out:
            out.write(content)
        print(f"Generated tvc_programok_{l.lower()}.html")

    total_count = sum(len(games) for games in alphabet.values())
    update_main_page(total_count)

def update_main_page(total_count):
    main_page_path = os.path.join(output_dir, 'tvc_programok.html')
    if not os.path.exists(main_page_path):
        return
    with open(main_page_path, 'r', encoding='utf-8') as f:
        content = f.read()
    
    import re
    if 'id="total-games-count"' in content:
        content = re.sub(r'<p id="total-games-count"[^>]*>.*?</p>', f'<p id="total-games-count" style="text-align: center; font-weight: bold; font-size: 1.3em; margin-bottom: 20px; color: #cc0000;">Összesen {total_count} darab letölthető program</p>', content)
    else:
        content = content.replace('<div class="abc-nav"', f'<p id="total-games-count" style="text-align: center; font-weight: bold; font-size: 1.3em; margin-bottom: 20px; color: #cc0000;">Összesen {total_count} darab letölthető program</p>\n            <div class="abc-nav"')
        
    with open(main_page_path, 'w', encoding='utf-8') as f:
        f.write(content)
    print(f"Updated tvc_programok.html with total count: {total_count}")

if __name__ == "__main__":
    main()
