<?php
if (session_status() === PHP_SESSION_NONE) {
    session_start();
}

// 1. Deteksi Bahasa dari URL Jalur (/id/widget atau /en/widget) atau Parameter ?lang=
$uriPath = parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH);
$pathSegments = explode('/', trim($uriPath, '/'));
$langFromPath = (isset($pathSegments[0]) && in_array(strtolower($pathSegments[0]), array('id', 'en'))) ? strtolower($pathSegments[0]) : null;

if ($langFromPath) {
    $lang = $langFromPath;
    $_SESSION['app_lang'] = $lang;
} elseif (isset($_GET['lang']) && in_array(strtolower($_GET['lang']), ['id', 'en'])) {
    $lang = strtolower($_GET['lang']);
    $_SESSION['app_lang'] = $lang;
} elseif (!empty($_SESSION['app_lang'])) {
    $lang = $_SESSION['app_lang'];
} else {
    $lang = 'id';
}

ob_start(function($buffer) {
    $buffer = str_replace(["\r\n", "\r", "\n", "\t"], ' ', $buffer);
    return trim(preg_replace(['/\>[^\S ]+/s', '/[^\S ]+\</s', '/(\s)+/s'], ['>', '<', ' '], $buffer));
});

$translations = array(
    'id' => array(
        'search_ph'      => '🔍 Cari tema atau ayat renungan...',
        'months'         => ["01"=>"Januari","02"=>"Februari","03"=>"Maret","04"=>"April","05"=>"Mei","06"=>"Juni","07"=>"Juli","08"=>"Agustus","09"=>"September","10"=>"Oktober","11"=>"November","12"=>"Desember"],
        'loading_title'  => 'Mempersiapkan Firman Tuhan...',
        'loading_desc'   => 'Mengambil data renungan harian dari server...',
        'loading_badge'  => '📅 Memuat...',
        'not_found'      => 'Renungan tidak ditemukan.',
        'search_loading' => '🔍 Sedang mencari di database...',
        'search_failed'  => 'Gagal melakukan pencarian.',
        'maint_title'    => '🚧 Pemeliharaan Sistem',
        'maint_desc'     => 'Widget renungan sedang dalam penyesuaian berkala. Silakan kembali beberapa saat lagi.',
        'empty_month'    => 'Belum ada renungan pada bulan ini.',
        'service_down'   => '⚠️ Layanan sedang tidak tersedia.',
        'brand_sub'      => 'Renungan Harian Kristen'
    ),
    'en' => array(
        'search_ph'      => '🔍 Search topic or verse...',
        'months'         => ["01"=>"January","02"=>"February","03"=>"March","04"=>"April","05"=>"May","06"=>"June","07"=>"July","08"=>"August","09"=>"September","10"=>"October","11"=>"November","12"=>"December"],
        'loading_title'  => 'Preparing the Word of God...',
        'loading_desc'   => 'Fetching daily devotional data from server...',
        'loading_badge'  => '📅 Loading...',
        'not_found'      => 'Devotional not found.',
        'search_loading' => '🔍 Searching database...',
        'search_failed'  => 'Search failed.',
        'maint_title'    => '🚧 System Maintenance',
        'maint_desc'     => 'The devotional widget is undergoing scheduled adjustments. Please check back shortly.',
        'empty_month'    => 'No devotionals found for this month.',
        'service_down'   => '⚠️ Service currently unavailable.',
        'brand_sub'      => 'Daily Christian Devotional'
    )
);

$t = isset($translations[$lang]) ? $translations[$lang] : $translations['id'];
$tahunSekarang = (int)date('Y');
?>
<!DOCTYPE html>
<html lang="<?php echo $lang; ?>">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Widget Renungan Harian Kristen - renungan.my.id</title>
    <meta name="robots" content="index, follow">

    <style>
        :root {
            --bg-page: #faf7f2;
            --text-main: #2c2520;
            --text-muted: #6b5d52;
            --accent-primary: #926634;
            --accent-dark: #4a3b32;
            --accent-soft: rgba(146, 102, 52, 0.08);
            --border-color: #e6ded5;
            --card-bg: #ffffff;
            --input-bg: #ffffff;
        }

        @media (prefers-color-scheme: dark) {
            :root {
                --bg-page: #121212;
                --text-main: #e0e0e0;
                --text-muted: #a0958d;
                --accent-primary: #d4af37;
                --accent-dark: #f0eae1;
                --accent-soft: rgba(212, 175, 55, 0.15);
                --border-color: #2e2e2e;
                --card-bg: #1e1e1e;
                --input-bg: #252525;
            }
        }

        html.dark-theme {
            --bg-page: #121212;
            --text-main: #e0e0e0;
            --text-muted: #a0958d;
            --accent-primary: #d4af37;
            --accent-dark: #f0eae1;
            --accent-soft: rgba(212, 175, 55, 0.15);
            --border-color: #2e2e2e;
            --card-bg: #1e1e1e;
            --input-bg: #252525;
        }

        html.light-theme {
            --bg-page: #faf7f2;
            --text-main: #2c2520;
            --text-muted: #6b5d52;
            --accent-primary: #926634;
            --accent-dark: #4a3b32;
            --accent-soft: rgba(146, 102, 52, 0.08);
            --border-color: #e6ded5;
            --card-bg: #ffffff;
            --input-bg: #ffffff;
        }

        * { box-sizing: border-box; }

        body {
            margin: 0;
            padding: 12px;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            background: var(--bg-page);
            color: var(--text-main);
            -webkit-font-smoothing: antialiased;
        }
        
        .widget-header { margin-bottom: 12px; }

        .search-input {
            width: 100%;
            padding: 8px 14px;
            font-size: 13px;
            border: 1px solid var(--border-color);
            border-radius: 20px;
            background: var(--input-bg);
            color: var(--text-main);
            outline: none;
            margin-bottom: 8px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.02);
        }

        .search-input:focus {
            border-color: var(--accent-primary);
            box-shadow: 0 0 0 3px rgba(146, 102, 52, 0.12);
        }

        .filter-container { display: flex; gap: 6px; }

        .filter-select {
            flex: 1;
            padding: 6px 10px;
            font-size: 12px;
            font-weight: 500;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            background: var(--input-bg);
            color: var(--text-main);
            cursor: pointer;
            outline: none;
        }

        .filter-select:focus { border-color: var(--accent-primary); }

        #container-widget { display: flex; flex-direction: column; gap: 10px; }

        .widget-card {
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            padding: 12px 14px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .widget-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            border-color: rgba(146, 102, 52, 0.35);
        }

        .meta-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            margin-bottom: 6px;
            font-size: 11px;
        }

        .badge-date {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            color: var(--accent-dark);
            background: var(--accent-soft);
            padding: 2px 8px;
            border-radius: 12px;
            font-weight: 600;
        }

        .badge-verse {
            color: var(--text-muted);
            font-style: italic;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 60%;
            text-align: right;
        }

        .title-link { text-decoration: none; display: block; margin-bottom: 6px; }

        .title {
            font-size: 13.5px;
            font-weight: 700;
            color: var(--accent-primary);
            line-height: 1.35;
        }

        .title-link:hover .title { color: var(--text-main); text-decoration: underline; }

        .content {
            font-size: 12.5px;
            line-height: 1.55;
            color: var(--text-main);
            opacity: 0.92;
            text-align: justify;
        }

        .widget-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 10px;
            padding-top: 6px;
            border-top: 1px dashed var(--border-color);
        }

        .link-brand {
            font-size: 11px;
            font-weight: 600;
            color: var(--accent-primary);
            text-decoration: none;
        }

        .link-brand:hover { text-decoration: underline; }

        .info-text {
            font-size: 12px;
            color: var(--text-muted);
            text-align: center;
            font-style: italic;
            padding: 18px 0;
            background: var(--card-bg);
            border-radius: 8px;
            border: 1px dashed var(--border-color);
        }

        .loading-pulse { animation: pulse 1.5s infinite ease-in-out; }

        @keyframes pulse {
            0%, 100% { opacity: 0.6; }
            50% { opacity: 1; }
        }
    </style>
</head>
<body>

    <div class="widget-header">
        <input 
            type="search" 
            id="search-box" 
            class="search-input" 
            placeholder="<?php echo $t['search_ph']; ?>" 
            oninput="prosesPencarian()"
        >
        
        <div class="filter-container">
            <select id="pilih-bulan-widget" class="filter-select" onchange="muatDataArsipWidget()">
                <?php foreach ($t['months'] as $num => $mName): ?>
                    <option value="<?php echo $num; ?>"><?php echo $mName; ?></option>
                <?php endforeach; ?>
            </select>
            
            <select id="pilih-tahun-widget" class="filter-select" onchange="muatDataArsipWidget()">
                <?php for ($thn = $tahunSekarang - 1; $thn <= $tahunSekarang + 1; $thn++): ?>
                    <option value="<?php echo $thn; ?>" <?php echo ($thn === $tahunSekarang) ? 'selected' : ''; ?>><?php echo $thn; ?></option>
                <?php endfor; ?>
            </select>
        </div>
    </div>

    <div id="container-widget">
        <div class="widget-card loading-pulse">
            <div class="meta-bar">
                <span class="badge-date"><?php echo $t['loading_badge']; ?></span>
            </div>
            <div class="title"><?php echo $t['loading_title']; ?></div>
            <div class="content"><?php echo $t['loading_desc']; ?></div>
        </div>
    </div>
    
    <div class="widget-footer">
        <span style="font-size: 10.5px; color: var(--text-muted);"><?php echo $t['brand_sub']; ?></span>
        <a href="https://renungan.my.id/<?php echo $lang; ?>" target="_blank" class="link-brand">🌐 renungan.my.id</a>
    </div>

    <script>
        var currentLang = "<?php echo $lang; ?>";
        var semuaDataRenungan = [];
        var jumlahTampilDefault = 200;

        function formatTanggalRilis(tglIso, isEn) {
            if (!tglIso) return "";
            var parts = tglIso.split('-');
            if (parts.length !== 3) return tglIso;
            
            var yyyy = parts[0];
            var mm = parseInt(parts[1], 10);
            var dd = parseInt(parts[2], 10);

            var bulanId = ["", "Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember"];
            var bulanEn = ["", "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

            return isEn ? (dd + " " + bulanEn[mm] + " " + yyyy) : (dd + " " + bulanId[mm] + " " + yyyy);
        }

        function escapeHtml(text) {
            if (!text) return '';
            var map = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#039;' };
            return String(text).replace(/[&<>"']/g, function(m) { return map[m]; });
        }

        function renderData(dataArray, batasMaksimal) {
            var container = document.getElementById('container-widget');
            if (!container) return;
            container.innerHTML = ""; 

            if (!dataArray || dataArray.length === 0) {
                container.innerHTML = '<div class="info-text"><?php echo $t['not_found']; ?></div>';
                return;
            }

            var totalLoop = Math.min(batasMaksimal, dataArray.length);
            var isEn = (currentLang === 'en');
            var langPrefix = isEn ? 'en' : 'id';

            for (var i = 0; i < totalLoop; i++) {
                var renungan = dataArray[i];
                
                var judulTampil = (isEn && renungan.judul_en) ? renungan.judul_en : renungan.judul;
                var nasTampilVal = (isEn && renungan.nas_en) ? renungan.nas_en : renungan.nas;
                var isiTampil = (isEn && renungan.isi_en) ? renungan.isi_en : renungan.isi;
                var slugTampil = (isEn && renungan.slug_en) ? renungan.slug_en : renungan.slug;

                var ringkasan = isiTampil || nasTampilVal || "";
                if (ringkasan.length > 135) {
                    ringkasan = ringkasan.substring(0, 135) + "...";
                }

                var urlArtikel = 'https://renungan.my.id/' + langPrefix + '/' + encodeURIComponent(slugTampil);
                var tglTampil = formatTanggalRilis(renungan.tanggal_rilis, isEn) || renungan.tanggal || 'Devotional';
                var nasTampil = nasTampilVal ? escapeHtml(nasTampilVal) : '';

                var widgetItem = document.createElement('div');
                widgetItem.className = 'widget-card';
                widgetItem.innerHTML = 
                    '<div class="meta-bar">' +
                        '<span class="badge-date">📅 ' + escapeHtml(tglTampil) + '</span>' +
                        (nasTampil ? '<span class="badge-verse" title="' + nasTampil + '">' + nasTampil + '</span>' : '') +
                    '</div>' +
                    '<a href="' + urlArtikel + '" target="_blank" class="title-link">' +
                        '<div class="title">📌 ' + escapeHtml(judulTampil) + '</div>' +
                    '</a>' +
                    '<div class="content">' + escapeHtml(ringkasan) + '</div>';

                container.appendChild(widgetItem);
            }
        }

        var timerPencarian = null;
        function prosesPencarian() {
            clearTimeout(timerPencarian);
            var inputEl = document.getElementById('search-box');
            var kataKunci = inputEl ? inputEl.value.trim() : '';

            timerPencarian = setTimeout(function() {
                if (kataKunci === "") {
                    muatDataArsipWidget();
                    return;
                }

                var container = document.getElementById('container-widget');
                if (container) {
                    container.innerHTML = '<div class="info-text"><?php echo $t['search_loading']; ?></div>';
                }

                fetch('/api/get_arsip.php?q=' + encodeURIComponent(kataKunci) + '&lang=' + encodeURIComponent(currentLang))
                    .then(function(res) { return res.json(); })
                    .then(function(data) {
                        renderData(Array.isArray(data) ? data : [], (data || []).length);
                    })
                    .catch(function() {
                        if (container) container.innerHTML = '<div class="info-text"><?php echo $t['search_failed']; ?></div>';
                    });
            }, 300);
        }

        function muatDataArsipWidget() {
            var container = document.getElementById('container-widget');
            if (!container) return;

            container.innerHTML = 
                '<div class="widget-card loading-pulse">' +
                    '<div class="meta-bar"><span class="badge-date">' + escapeHtml("<?php echo $t['loading_badge']; ?>") + '</span></div>' +
                    '<div class="title">' + escapeHtml("<?php echo $t['loading_title']; ?>") + '</div>' +
                    '<div class="content">' + escapeHtml("<?php echo $t['loading_desc']; ?>") + '</div>' +
                '</div>';

            var elBulan = document.getElementById('pilih-bulan-widget');
            var elTahun = document.getElementById('pilih-tahun-widget');
            var bulan = elBulan ? elBulan.value : "";
            var tahun = elTahun ? elTahun.value : "";

            var apiUrl = '/api/get_arsip.php?bulan=' + encodeURIComponent(bulan) + '&tahun=' + encodeURIComponent(tahun) + '&lang=' + encodeURIComponent(currentLang);

            fetch(apiUrl)
                .then(function(res) {
                    if (res.status === 503) {
                        container.innerHTML = 
                            '<div class="widget-card" style="border-left: 3px solid #d9534f;">' +
                                '<div class="title" style="color: #d9534f;"><?php echo $t['maint_title']; ?></div>' +
                                '<div class="content"><?php echo $t['maint_desc']; ?></div>' +
                            '</div>';
                        return null;
                    }
                    return res.json();
                })
                .then(function(dataJson) {
                    if (dataJson === null) return;
                    semuaDataRenungan = Array.isArray(dataJson) ? dataJson : [];
                    
                    if (semuaDataRenungan.length > 0) {
                        renderData(semuaDataRenungan, jumlahTampilDefault);
                    } else {
                        fetch('/api/get_arsip.php?lang=' + encodeURIComponent(currentLang))
                            .then(function(r) { return r.json(); })
                            .then(function(dataFallback) {
                                var arrFallback = Array.isArray(dataFallback) ? dataFallback : [];
                                if (arrFallback.length > 0) {
                                    renderData(arrFallback, jumlahTampilDefault);
                                } else {
                                    container.innerHTML = '<div class="info-text"><?php echo $t['empty_month']; ?></div>';
                                }
                            })
                            .catch(function() {
                                container.innerHTML = '<div class="info-text"><?php echo $t['empty_month']; ?></div>';
                            });
                    }
                })
                .catch(function(error) {
                    console.error("Gagal memuat widget:", error);
                    container.innerHTML = '<div class="info-text"><?php echo $t['service_down']; ?></div>';
                });
        }

        function initWidget() {
            var urlParams = new URLSearchParams(window.location.search);
            jumlahTampilDefault = parseInt(urlParams.get('jumlah'), 10) || 200; 

            var temaPilihan = urlParams.get('theme');
            if (temaPilihan === 'dark') {
                document.documentElement.className = 'dark-theme';
            } else if (temaPilihan === 'light') {
                document.documentElement.className = 'light-theme';
            }
            
            var waktuSekarang = new Date();
            var kodeBulan = String(waktuSekarang.getMonth() + 1).padStart(2, '0');
            var kodeTahun = String(waktuSekarang.getFullYear());

            var selBulan = document.getElementById('pilih-bulan-widget');
            var selTahun = document.getElementById('pilih-tahun-widget');

            if (selBulan) selBulan.value = kodeBulan;
            if (selTahun && selTahun.querySelector('option[value="' + kodeTahun + '"]')) {
                selTahun.value = kodeTahun;
            }

            muatDataArsipWidget();
        }

        window.addEventListener('message', function(event) {
            if (event.data && event.data.type === 'SET_THEME') {
                if (event.data.theme === 'dark') {
                    document.documentElement.className = 'dark-theme';
                } else if (event.data.theme === 'light') {
                    document.documentElement.className = 'light-theme';
                }
            }
        });
        
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', initWidget);
        } else {
            initWidget();
        }
    </script>
</body>
</html>
<?php 
ob_end_flush(); 
?>