<?php
$page_title  = 'TMDB Settings';
$page_active = 'tmdb_settings';
require __DIR__ . '/includes/page_header.php';
?>

<div class="-mx-6 -mt-6 px-6 py-5 mb-6 border-b border-dark-700" style="background:#111;">
    <p class="text-xs font-semibold text-primary-400 uppercase tracking-wider mb-1">
        <span class="text-dark-400">Master Panel</span> / WebViews / TMDB Settings
    </p>
    <h2 class="text-2xl font-bold text-white flex items-center gap-3">
        <i class="ph ph-database text-primary-400"></i> TMDB Settings
    </h2>
</div>

<form id="tmdb-form" class="grid grid-cols-1 xl:grid-cols-3 gap-6">
    <!-- Source -->
    <div class="card">
        <div class="card-head"><h3><i class="ph ph-key text-primary-400"></i> Source</h3></div>
        <div class="p-5 text-xs text-dark-400 mb-2">Authentication and metadata language.</div>
        <div class="p-5 pt-0 space-y-4">
            <div>
                <label class="form-label text-xs">TMDB API Key</label>
                <input class="form-input mono" name="tmdb_api_key" placeholder="your TMDB API key">
                <p class="text-[10px] text-dark-400 mt-1">Get one free at <a href="https://themoviedb.org/settings/api" target="_blank" class="text-primary-400">themoviedb.org/settings/api</a></p>
            </div>
            <div>
                <label class="form-label text-xs">Metadata Language</label>
                <select class="form-input" name="metadata_language">
                    <option value="en-US">English (US) (en-US)</option>
                    <option value="es-ES">Spanish (es-ES)</option>
                    <option value="fr-FR">French (fr-FR)</option>
                    <option value="de-DE">German (de-DE)</option>
                    <option value="pt-BR">Portuguese BR (pt-BR)</option>
                    <option value="zh-CN">Chinese (zh-CN)</option>
                    <option value="pl-PL">Polish (pl-PL)</option>
                </select>
                <p class="text-[10px] text-dark-400 mt-1">Translates titles + descriptions only. Doesn't change which movies are shown.</p>
            </div>
        </div>
    </div>

    <!-- What to Fetch -->
    <div class="card">
        <div class="card-head"><h3><i class="ph ph-list-checks text-primary-400"></i> What to Fetch</h3></div>
        <div class="p-5 text-xs text-dark-400 mb-2">Source feed and content character.</div>
        <div class="p-5 pt-0 space-y-4">
            <div>
                <label class="form-label text-xs">Feed Type</label>
                <select class="form-input" name="feed_type">
                    <option value="trending_week">Trending This Week — recommended</option>
                    <option value="trending_day">Trending Today</option>
                    <option value="popular">Popular</option>
                    <option value="top_rated">Top Rated</option>
                    <option value="now_playing">Now Playing</option>
                </select>
                <p class="text-[10px] text-dark-400 mt-1">Trending This Week is recommended — refreshed daily with the most-watched titles.</p>
            </div>
            <div>
                <label class="form-label text-xs">Region</label>
                <select class="form-input" name="region">
                    <option value="US">🇺🇸 United States (US)</option>
                    <option value="GB">🇬🇧 United Kingdom (GB)</option>
                    <option value="CA">🇨🇦 Canada (CA)</option>
                    <option value="AU">🇦🇺 Australia (AU)</option>
                    <option value="DE">🇩🇪 Germany (DE)</option>
                    <option value="PL">🇵🇱 Poland (PL)</option>
                </select>
                <p class="text-[10px] text-dark-400 mt-1">Country for release dates and ratings — change this if your audience is outside the US.</p>
            </div>
            <div>
                <label class="form-label text-xs">Original Audio Languages</label>
                <input class="form-input mono" name="original_audio_languages" value="en">
                <p class="text-[10px] text-dark-400 mt-1">Two-letter language codes, separated by commas. <code>en</code> keeps it English-only; <code>en,es</code> adds Spanish.</p>
            </div>
        </div>
    </div>

    <!-- Safety Filters -->
    <div class="card">
        <div class="card-head"><h3><i class="ph ph-shield-check text-primary-400"></i> Safety Filters</h3></div>
        <div class="p-5 text-xs text-dark-400 mb-2">Layered defence against unwanted content.</div>
        <div class="p-5 pt-0 space-y-4">
            <label class="flex items-center gap-2 text-sm text-white">
                <input type="checkbox" name="block_adult" value="1" checked class="form-check">
                Block TMDB-flagged adult content <span class="text-dark-400 text-xs">(recommended ON)</span>
            </label>
            <div>
                <label class="form-label text-xs flex items-center justify-between">Minimum Vote Count <span class="text-primary-400" id="vc-display">500</span></label>
                <input class="form-input" type="range" name="min_vote_count" min="0" max="2000" step="50" value="500"
                       oninput="document.getElementById('vc-display').textContent=this.value">
                <p class="text-[10px] text-dark-400 mt-1">Hides obscure titles that only a handful of viewers have rated. <strong>500</strong> is a safe default; raise it to <strong>1000+</strong> for mainstream titles only.</p>
            </div>
            <div>
                <label class="form-label text-xs">Custom Block List</label>
                <textarea class="form-input mono text-xs" name="block_list" rows="4" placeholder="Malena&#10;Lust, Caution&#10;365 Days&#10;/^.*erotic.*$/i"></textarea>
                <p class="text-[10px] text-dark-400 mt-1">One title per line. Any title containing this text will be hidden.</p>
            </div>
        </div>
    </div>

    <div class="xl:col-span-3 flex justify-end gap-2">
        <button type="submit" class="btn-primary"><i class="ph ph-floppy-disk"></i> Save TMDB Settings</button>
    </div>
</form>

<script>
const TMDB_KEYS = ['tmdb_api_key','metadata_language','feed_type','region',
                   'original_audio_languages','mix_movies_tv','block_adult',
                   'cert_cap','min_vote_count','block_list'];

async function loadTmdb() {
    try {
        const { settings } = await api.get('api/webview_settings.php?keys=' + TMDB_KEYS.join(','));
        const f = document.getElementById('tmdb-form');
        TMDB_KEYS.forEach(k => {
            if (!f[k]) return;
            const v = settings[k] ?? '';
            if (f[k].type === 'checkbox') f[k].checked = v === '1' || v === 'on' || v === 'true';
            else f[k].value = v;
        });
        if (settings.min_vote_count) document.getElementById('vc-display').textContent = settings.min_vote_count;
    } catch (e) { /* first-load, no rows yet */ }
}
document.getElementById('tmdb-form').addEventListener('submit', async (e) => {
    e.preventDefault();
    const f = e.target;
    const pairs = { action: 'save' };
    TMDB_KEYS.forEach(k => {
        if (!f[k]) return;
        pairs[k] = f[k].type === 'checkbox' ? (f[k].checked ? '1' : '0') : f[k].value;
    });
    try {
        await api.post('api/webview_settings.php', pairs);
        toast('TMDB settings saved', 'success');
    } catch (err) { toast(err.message, 'error'); }
});
loadTmdb();
</script>

<?php require __DIR__ . '/includes/page_footer.php'; ?>
