{{define "app_info"}}
{{template "layout_start" .}}

<div class="page-header">
    <div style="display:flex;align-items:center;gap:1rem">
        <a href="/stacks" class="btn btn-sm btn-outline">← Alkalmazások</a>
        <h2>{{.Meta.DisplayName}}</h2>
    </div>
    <div style="display:flex;align-items:center;gap:.5rem">
        {{if .Stack.Deployed}}
            <span class="stack-state-badge state-{{stateColor .Stack.State}}">{{stateLabel .Stack.State}}</span>
            {{if .Stack.Orphaned}}<span class="badge badge-orphaned">Elavult</span>{{end}}
            {{if .EffectiveSubdomain}}<a href="https://{{.EffectiveSubdomain}}.{{.Domain}}" target="_blank" class="btn btn-sm btn-outline">Megnyitás ↗</a>{{end}}
            <a href="/stacks/{{.Stack.Name}}/logs" class="btn btn-sm btn-outline">Napló</a>
            {{if .Stack.Orphaned}}
                <button class="btn btn-sm btn-danger" onclick="deleteOrphanStack('{{.Stack.Name}}')">Törlés</button>
            {{else}}
                <a href="/stacks/{{.Stack.Name}}/deploy" class="btn btn-sm btn-outline">Beállítások</a>
            {{end}}
        {{else}}
            <a href="/stacks/{{.Stack.Name}}/deploy" class="btn btn-sm btn-primary" onclick="return checkBeforeDeploy(event, '{{.Stack.Name}}')">Telepítés</a>
        {{end}}
    </div>
</div>

<!-- Hero section -->
<div class="app-info-hero">
    <img class="app-info-logo" src="{{logoURL .Meta.Slug}}"
         alt="{{.Meta.DisplayName}}"
         onerror="this.onerror=function(){this.style.display='none'};this.src='{{logoPNGURL .Meta.Slug}}'">
    <div class="app-info-hero-text">
        {{if .AppInfo.Tagline}}
            <p class="app-info-tagline">{{.AppInfo.Tagline}}</p>
        {{else}}
            <p class="app-info-tagline">{{.Meta.Description}}</p>
        {{end}}
        <div class="stack-meta-badges">
            <span class="meta-badge">~{{.Meta.Resources.MemRequest}} RAM</span>
            <span class="meta-badge">{{.Meta.Category}}</span>
            {{if .Meta.Resources.NeedsHDD}}<span class="meta-badge meta-badge-warn">HDD szükséges</span>{{end}}
            {{if .Meta.Resources.PiCompatible}}<span class="meta-badge meta-badge-ok">Pi kompatibilis</span>{{else}}<span class="meta-badge meta-badge-warn">Csak x86</span>{{end}}
            {{if .Meta.Resources.HungarianUI}}<span class="meta-badge meta-badge-ok">Magyar felület</span>{{end}}
        </div>
    </div>
</div>

<!-- Screenshots (graceful — hidden if assets don't exist) -->
<div class="app-screenshots" id="screenshots">
    <img src="{{screenshotURL .Meta.Slug 1}}" alt="" class="app-screenshot"
         onerror="this.style.display='none'">
    <img src="{{screenshotURL .Meta.Slug 2}}" alt="" class="app-screenshot"
         onerror="this.style.display='none'">
    <img src="{{screenshotURL .Meta.Slug 3}}" alt="" class="app-screenshot"
         onerror="this.style.display='none'">
</div>

{{if .HasAppInfo}}
<div class="app-info-grid">
    {{if .AppInfo.UseCases}}
    <div class="app-info-card">
        <h3>Mire használható?</h3>
        <ul class="app-info-list">
            {{range .AppInfo.UseCases}}<li>{{.}}</li>{{end}}
        </ul>
    </div>
    {{end}}

    {{if .AppInfo.FirstSteps}}
    <div class="app-info-card">
        <h3>Első lépések</h3>
        <ol class="app-info-list">
            {{range .AppInfo.FirstSteps}}<li>{{.}}</li>{{end}}
        </ol>
    </div>
    {{end}}

    {{if .AppInfo.Prerequisites}}
    <div class="app-info-card">
        <h3>Előfeltételek</h3>
        <ul class="app-info-list">
            {{range .AppInfo.Prerequisites}}<li>{{.}}</li>{{end}}
        </ul>
    </div>
    {{end}}

    {{if .AppInfo.DefaultCreds}}
    <div class="app-info-card">
        <h3>Alapértelmezett belépés</h3>
        <p class="app-info-creds">{{.AppInfo.DefaultCreds}}</p>
        <p class="app-info-creds-warn">Az első bejelentkezés után azonnal változtasd meg!</p>
    </div>
    {{end}}

    {{if .AppInfo.DocsURL}}
    <div class="app-info-card">
        <h3>Dokumentáció</h3>
        <p><a href="{{.AppInfo.DocsURL}}" target="_blank" class="app-info-link">Hivatalos dokumentáció ↗</a></p>
    </div>
    {{end}}
</div>
{{end}}

{{if .HasOptionalConfig}}
<div class="app-optional-config">
    <h3>Opcionális beállítások</h3>
    {{range .OptionalConfig}}
    <div class="config-group">
        <h4>{{.Group}}</h4>
        {{if .Description}}<p class="config-group-desc">{{.Description}}</p>{{end}}

        <div class="config-fields">
            {{range .Fields}}
            <div class="config-field">
                <label for="opt-{{.EnvVar}}">{{.Label}}</label>
                {{if .HelpText}}<p class="config-field-help">{{.HelpText}}</p>{{end}}
                {{if .HelpURL}}<p class="config-field-help"><a href="{{.HelpURL}}" target="_blank">Regisztrációs útmutató ↗</a></p>{{end}}
                <input type="{{if eq .Type "secret_input"}}password{{else}}text{{end}}"
                       id="opt-{{.EnvVar}}"
                       name="{{.EnvVar}}"
                       class="config-input"
                       value="{{index $.CurrentValues .EnvVar}}"
                       placeholder="{{.Label}}"
                       autocomplete="off">
            </div>
            {{end}}
        </div>
    </div>
    {{end}}

    <div class="config-actions">
        <button class="btn btn-primary" id="save-optional-config" onclick="saveOptionalConfig('{{.Stack.Name}}')">
            Mentés
        </button>
        <span id="config-save-status" class="config-save-status"></span>
    </div>
</div>

<script>
async function saveOptionalConfig(stackName) {
    const btn = document.getElementById('save-optional-config');
    const status = document.getElementById('config-save-status');
    const inputs = document.querySelectorAll('.config-input');

    const values = {};
    inputs.forEach(function(input) {
        values[input.name] = input.value;
    });

    btn.disabled = true;
    btn.textContent = 'Mentés...';
    status.textContent = '';
    status.className = 'config-save-status';

    try {
        const resp = await fetch('/api/stacks/' + stackName + '/optional-config', {
            method: 'POST',
            headers: Object.assign({'Content-Type': 'application/json'}, csrfHeaders()),
            body: JSON.stringify({values: values})
        });
        const data = await resp.json();

        if (data.ok) {
            status.textContent = (data.message || 'Mentve');
            status.className = 'config-save-status config-save-ok';
        } else {
            status.textContent = (data.error || 'Hiba');
            status.className = 'config-save-status config-save-err';
        }
    } catch(err) {
        status.textContent = 'Hálózati hiba';
        status.className = 'config-save-status config-save-err';
    }

    btn.disabled = false;
    btn.textContent = 'Mentés';

    setTimeout(function() { status.textContent = ''; }, 5000);
}
</script>
{{end}}

{{if .HasIntegrations}}
<div class="app-optional-config">
    <h3>Integrációk</h3>
    <p class="config-group-desc">
        Más telepített alkalmazásokkal való összekapcsolás. Az integráció automatikusan felfüggesztődik, ha bármelyik alkalmazás leáll, és újraaktiválódik indításkor.
    </p>

    {{range .Integrations}}
    <div class="config-field" style="display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 0;border-bottom:1px solid var(--border)">
        <div style="flex:1">
            <strong>{{.Label}}</strong>
            <p class="config-field-help" style="margin:0">{{.Description}}</p>
            {{if not .TargetDeployed}}
                <span class="badge badge-muted" style="margin-top:.25rem;display:inline-block">Nincs telepítve</span>
            {{else if not .TargetRunning}}
                <span class="badge badge-orphaned" style="margin-top:.25rem;display:inline-block">Célalkalmazás leállítva</span>
            {{else if eq .Status "error"}}
                <span class="badge badge-orphaned" style="margin-top:.25rem;display:inline-block">Hiba</span>
            {{else if .Enabled}}
                <span class="badge badge-ok" style="margin-top:.25rem;display:inline-block">Aktív</span>
            {{end}}
        </div>
        <label class="toggle">
            <input type="checkbox"
                   {{if .Enabled}}checked{{end}}
                   {{if not .TargetDeployed}}disabled title="A célalkalmazás nincs telepítve"{{end}}
                   {{if and .TargetDeployed (not .TargetRunning)}}disabled title="A célalkalmazás nem fut"{{end}}
                   onchange="toggleIntegration('{{$.Stack.Name}}', '{{.Target}}', this.checked, this)">
            <span class="toggle-label"></span>
        </label>
    </div>
    {{end}}
</div>

<script>
async function toggleIntegration(provider, target, enable, checkbox) {
    checkbox.disabled = true;
    try {
        var resp = await fetch('/api/integrations/' + provider + '/' + target, {
            method: 'POST',
            headers: Object.assign({'Content-Type': 'application/json'}, csrfHeaders()),
            body: JSON.stringify({enable: enable})
        });
        var data = await resp.json();
        if (!data.ok) {
            checkbox.checked = !enable;
            alert(data.error || 'Hiba történt');
        } else {
            // Reload to update status badges
            setTimeout(function(){ location.reload(); }, 500);
            return;
        }
    } catch(err) {
        checkbox.checked = !enable;
        alert('Hálózati hiba');
    }
    checkbox.disabled = false;
}
</script>
{{end}}

{{if .GeoGlobalEnabled}}
<div class="app-optional-config">
    <h3>Földrajzi korlátozás</h3>
    <p class="config-group-desc">
        Az alkalmazás egyéni országkorlátozás nélkül a globális beállítást követi.
    </p>

    <label class="toggle" style="margin-bottom:1rem">
        <input type="checkbox" id="app-geo-override-toggle"
               {{if .GeoAppOverride}}checked{{end}}
               onchange="toggleAppGeoOverride(this.checked)">
        <span class="toggle-label">Egyéni országkorlátozás</span>
    </label>

    <div id="app-geo-override-details" {{if not .GeoAppOverride}}style="display:none"{{end}}>
        <div class="form-group">
            <label>Engedélyezett országok ehhez az alkalmazáshoz</label>
            <div class="geo-country-selector">
                <input type="text" id="app-geo-search" class="form-control config-input"
                       placeholder="Ország keresése..." autocomplete="off"
                       oninput="filterAppGeoCountries(this.value)"
                       onfocus="showAppGeoList()"
                       onblur="setTimeout(function(){hideAppGeoList()},200)">
                <div class="geo-country-list" id="app-geo-country-list"></div>
            </div>
            <div class="geo-selected-tags" id="app-geo-tags"></div>
        </div>
        <div class="config-actions">
            <button class="btn btn-primary" onclick="saveAppGeoOverride()">Mentés</button>
            <span id="app-geo-status" class="config-save-status"></span>
        </div>
    </div>
</div>

<script>
(function(){
    var allCountries = [];
    var appGeoCountries = {{json .GeoAppOverrideCountries}};
    var stackName = '{{.Stack.Name}}';

    function loadCountries(cb) {
        if (allCountries.length > 0) { cb(); return; }
        fetch('/api/geo/countries', {headers: csrfHeaders()})
            .then(function(r){return r.json()})
            .then(function(d){ if(d.ok) allCountries = d.data; cb(); })
            .catch(function(){ cb(); });
    }

    window.toggleAppGeoOverride = function(enabled) {
        document.getElementById('app-geo-override-details').style.display = enabled ? '' : 'none';
        if (enabled) {
            if (!appGeoCountries || appGeoCountries.length === 0) {
                appGeoCountries = {{json .GeoGlobalCountries}};
            }
            loadCountries(renderAppGeoTags);
        } else {
            // Remove override
            fetch('/api/stacks/' + stackName + '/geo/override', {method:'DELETE', headers:csrfHeaders()});
        }
    };

    window.showAppGeoList = function() { loadCountries(function(){ filterAppGeoCountries(''); }); };
    window.hideAppGeoList = function() { document.getElementById('app-geo-country-list').style.display='none'; };

    window.filterAppGeoCountries = function(q) {
        var list = document.getElementById('app-geo-country-list');
        q = q.toLowerCase();
        var html = ''; var count = 0;
        for (var i = 0; i < allCountries.length && count < 15; i++) {
            var c = allCountries[i];
            if (appGeoCountries.indexOf(c.code) >= 0) continue;
            if (q && c.name.toLowerCase().indexOf(q) < 0 && c.code.toLowerCase().indexOf(q) < 0) continue;
            html += '<div class="geo-country-option" onmousedown="addAppGeoCountry(\'' + c.code + '\')">'
                + esc(c.name) + ' <small>(' + c.code + ')</small></div>';
            count++;
        }
        list.innerHTML = html || '<div class="geo-country-option" style="opacity:.5">Nincs találat</div>';
        list.style.display = (count > 0 || q) ? '' : 'none';
    };

    window.addAppGeoCountry = function(code) {
        if (appGeoCountries.indexOf(code) >= 0) return;
        appGeoCountries.push(code);
        renderAppGeoTags();
        document.getElementById('app-geo-search').value = '';
        hideAppGeoList();
    };

    window.removeAppGeoCountry = function(code) {
        appGeoCountries = appGeoCountries.filter(function(c){return c !== code});
        renderAppGeoTags();
    };

    function renderAppGeoTags() {
        var el = document.getElementById('app-geo-tags');
        var html = '';
        for (var i = 0; i < appGeoCountries.length; i++) {
            var code = appGeoCountries[i];
            var name = code;
            for (var j = 0; j < allCountries.length; j++) {
                if (allCountries[j].code === code) { name = allCountries[j].name; break; }
            }
            html += '<span class="geo-tag">' + esc(name) + ' (' + code + ') '
                + '<span class="geo-tag-remove" onclick="removeAppGeoCountry(\'' + code + '\')">&times;</span></span>';
        }
        el.innerHTML = html;
    }

    window.saveAppGeoOverride = function() {
        var status = document.getElementById('app-geo-status');
        fetch('/api/stacks/' + stackName + '/geo/override', {
            method: 'POST',
            headers: Object.assign({'Content-Type':'application/json'}, csrfHeaders()),
            body: JSON.stringify({allowed_countries: appGeoCountries})
        })
        .then(function(r){return r.json()})
        .then(function(d){
            status.textContent = d.ok ? (d.message || 'Mentve') : (d.error || 'Hiba');
            status.className = 'config-save-status ' + (d.ok ? 'config-save-ok' : 'config-save-err');
            setTimeout(function(){ status.textContent=''; }, 5000);
        })
        .catch(function(){
            status.textContent = 'Hálózati hiba';
            status.className = 'config-save-status config-save-err';
        });
    };

    function esc(s) { var d = document.createElement('div'); d.textContent = s; return d.innerHTML; }

    if (document.getElementById('app-geo-override-toggle') && document.getElementById('app-geo-override-toggle').checked) {
        loadCountries(renderAppGeoTags);
    }
})();
</script>
{{end}}

{{template "layout_end" .}}
{{end}}