<?php require APPROOT . '/app/Views/layouts/header.php'; ?>
<div class="max-w-7xl mx-auto mb-10 space-y-8">
    
    <div class="flex flex-col md:flex-row md:items-center justify-between pb-4">
        <div class="mb-4 md:mb-0">
            <h1 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-1"><?php echo $data['title']; ?></h1>
            <p class="text-sm text-gray-600 dark:text-gray-400"><?php echo $data['description']; ?></p>
        </div>
        
        <form action="<?php echo URLROOT; ?>/updates/forceSync" method="POST" class="w-full md:w-auto">
            <button type="submit" class="w-full md:w-auto bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700/50 hover:bg-gray-50 dark:hover:bg-gray-700/80 text-gray-800 dark:text-gray-200 font-bold py-2.5 px-6 rounded-lg text-sm transition-colors flex justify-center items-center shadow-sm">
                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path></svg>
                Force Sync
            </button>
        </form>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        
        <div class="lg:col-span-2 space-y-8">
            
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700/50 overflow-hidden">
                <div class="p-5 border-b border-gray-200 dark:border-gray-700/50 bg-gray-50 dark:bg-gray-900/40 flex justify-between items-center">
                    <h2 class="text-sm font-bold text-gray-900 dark:text-white flex items-center uppercase tracking-wider">
                        <svg class="w-4 h-4 mr-2 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path></svg>
                        Software Version
                    </h2>
                    
                    <?php
                        $versionBadgeClass = 'bg-green-50 text-green-700 border-green-200 dark:bg-green-900/10 dark:text-green-400 dark:border-green-800/30';
                        
                        if (isset($data['update']->update_available) && $data['update']->update_available && !empty($data['update']->new_version)) {
                            $c = array_pad(explode('.', preg_replace('/[^0-9.]/', '', $data['current_version'])), 3, 0);
                            $n = array_pad(explode('.', preg_replace('/[^0-9.]/', '', $data['update']->new_version)), 3, 0);
                            $diff = (($n[0] - $c[0]) * 100) + (($n[1] - $c[1]) * 10) + ($n[2] - $c[2]);
                            
                            if ($diff >= 2) {
                                $versionBadgeClass = 'bg-red-50 text-red-700 border-red-200 dark:bg-red-900/10 dark:text-red-400 dark:border-red-800/30';
                            } else {
                                $versionBadgeClass = 'bg-yellow-50 text-yellow-700 border-yellow-200 dark:bg-yellow-900/10 dark:text-yellow-400 dark:border-yellow-800/30';
                            }
                        }
                    ?>
                    <span class="text-[10px] font-mono px-3 py-1 rounded border uppercase tracking-widest font-bold <?php echo $versionBadgeClass; ?>">
                        Current: v<?php echo htmlspecialchars($data['current_version']); ?>
                    </span>
                </div>
                
                <div class="p-6">
                    <?php if (isset($data['update']->update_available) && $data['update']->update_available): ?>
                        <div class="bg-blue-50 dark:bg-blue-900/10 border border-blue-200 dark:border-blue-800/30 rounded-xl p-6 mb-6">
                            <div class="flex items-start">
                                <div class="bg-blue-100 dark:bg-blue-900/30 p-2.5 rounded-xl mr-4 text-blue-600 dark:text-blue-400 shadow-inner">
                                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
                                </div>
                                <div>
                                    <h3 class="text-lg font-bold text-blue-900 dark:text-blue-300">Version <?php echo htmlspecialchars($data['update']->new_version); ?> is available!</h3>
                                    <p class="text-xs text-blue-700 dark:text-blue-400/80 mt-1 mb-4">Released on <?php echo date('F j, Y', strtotime($data['update']->release_date)); ?></p>
                                    
                                    <div class="prose dark:prose-invert prose-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-900/50 p-4 rounded-lg border border-blue-100 dark:border-blue-800/30 mb-6">
                                        <strong>Release Notes:</strong><br>
                                        <?php echo $data['update']->release_notes; ?>
                                    </div>
                                    
                                    <form action="<?php echo URLROOT; ?>/updates/process" method="POST" onsubmit="confirmAction(event, this, 'Install OTA Update', 'Are you sure you want to download and install this update? Ensure you have backed up your database if necessary.');">
                                        <button type="submit" class="bg-primary hover:opacity-90 text-white font-bold py-3 px-6 rounded-lg transition-all focus:ring-4 focus:ring-primary/50 shadow-sm flex items-center">
                                            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
                                            Download & Install Update Now
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    <?php else: ?>
                        <div class="text-center py-8">
                            <div class="mx-auto flex items-center justify-center h-16 w-16 rounded-2xl bg-green-50 dark:bg-green-900/20 text-green-600 dark:text-green-400 mb-4 shadow-inner border border-green-100 dark:border-green-800/30">
                                <svg class="h-8 w-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                            </div>
                            <h3 class="text-xl font-bold text-gray-900 dark:text-white">You are up to date!</h3>
                            <p class="text-sm text-gray-500 dark:text-gray-400 mt-2">You are running the latest version of the software.</p>
                        </div>
                    <?php endif; ?>
                </div>
            </div>

            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700/50 overflow-hidden">
                <div class="p-5 border-b border-gray-200 dark:border-gray-700/50 bg-gray-50 dark:bg-gray-900/40 flex justify-between items-center">
                    <h2 class="text-sm font-bold text-gray-900 dark:text-white flex items-center uppercase tracking-wider">
                        <svg class="w-4 h-4 mr-2 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
                        Active License Information
                    </h2>
                </div>
                <div class="p-6">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        
                        <div class="md:col-span-2 bg-gray-50 dark:bg-gray-900/30 p-5 rounded-xl border border-gray-200 dark:border-gray-700/50">
                            <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-wider mb-2">Registration Key</label>
                            <form action="<?php echo URLROOT; ?>/updates/updateKey" method="POST" class="flex flex-col sm:flex-row gap-3" onsubmit="confirmAction(event, this, 'Update License Key', 'Are you sure you want to change the active license key? This will instantly trigger a re-validation against the master server.');">
                                <input type="text" name="new_license_key" value="<?php echo htmlspecialchars($data['license_key']); ?>" class="w-full px-4 py-2.5 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900/80 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary outline-none font-mono uppercase tracking-widest transition-colors shadow-inner" required>
                                <button type="submit" class="bg-gray-800 dark:bg-gray-700 hover:bg-gray-900 dark:hover:bg-gray-600 text-white px-8 py-2.5 rounded-lg font-bold transition-colors whitespace-nowrap shadow-sm">
                                    Update Key
                                </button>
                            </form>
                        </div>

                        <div>
                            <span class="block text-[10px] font-bold text-gray-500 uppercase tracking-wider mb-1">Registered To</span>
                            <span class="text-gray-900 dark:text-white font-medium text-sm">
                                <?php echo htmlspecialchars($data['license']->client_name ?? 'Unregistered'); ?>
                            </span>
                        </div>
                        <div>
                            <span class="block text-[10px] font-bold text-gray-500 uppercase tracking-wider mb-1">Product Assignment</span>
                            <span class="text-gray-900 dark:text-white font-medium text-sm"><?php echo htmlspecialchars($data['license']->product_name ?? 'Unknown'); ?></span>
                        </div>
                        
                        <div>
                            <span class="block text-[10px] font-bold text-gray-500 uppercase tracking-wider mb-1">License Type</span>
                            <span class="text-gray-900 dark:text-white font-medium text-sm capitalize">
                                <?php echo htmlspecialchars($data['license']->license_type ?? 'Standard'); ?> License
                            </span>
                        </div>
                        <div>
                            <span class="block text-[10px] font-bold text-gray-500 uppercase tracking-wider mb-1.5">Status</span>
                            <?php if (isset($data['license']->status) && ($data['license']->status === 'active' || $data['license']->status === 'valid')): ?>
                                <span class="px-2 py-0.5 inline-flex text-[10px] font-bold uppercase tracking-wider rounded border bg-green-50 text-green-700 border-green-200 dark:bg-green-900/10 dark:text-green-400 dark:border-green-800/30">Verified</span>
                            <?php else: ?>
                                <span class="px-2 py-0.5 inline-flex text-[10px] font-bold uppercase tracking-wider rounded border bg-red-50 text-red-700 border-red-200 dark:bg-red-900/10 dark:text-red-400 dark:border-red-800/30">Invalid</span>
                            <?php endif; ?>
                        </div>
                        
                        <div>
                            <span class="block text-[10px] font-bold text-gray-500 uppercase tracking-wider mb-1">Provided By</span>
                            <span class="text-gray-900 dark:text-white font-medium text-sm">
                                <a href="https://christodev.co.za" target="_blank" class="text-primary hover:underline font-bold">Christo Lochenberg</a>
                            </span>
                        </div>
                        <div>
                            <span class="block text-[10px] font-bold text-gray-500 uppercase tracking-wider mb-1">Expiry Date</span>
                            <span class="text-gray-900 dark:text-white font-medium text-sm">
                                <?php 
                                    if (!empty($data['license']->expires_at)) {
                                        $expDate = strtotime($data['license']->expires_at);
                                        $daysLeft = ceil(($expDate - time()) / 86400);
                                        $formattedDate = date('F j, Y', $expDate);
                                        
                                        if ($daysLeft > 0) {
                                            echo $formattedDate . " <span class='text-xs text-gray-500 dark:text-gray-400 ml-1 font-normal'>({$daysLeft} days remaining)</span>";
                                        } else {
                                            echo "<span class='text-red-600 dark:text-red-400 font-bold'>" . $formattedDate . " (Expired)</span>";
                                        }
                                    } else {
                                        echo 'Lifetime (Perpetual)';
                                    }
                                ?>
                            </span>
                        </div>

                    </div>
                </div>
            </div>
        </div>

        <div class="lg:col-span-1">
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700/50 overflow-hidden h-full flex flex-col">
                <div class="p-5 border-b border-gray-200 dark:border-gray-700/50 bg-gray-50 dark:bg-gray-900/40 flex justify-between items-center">
                    <h2 class="text-sm font-bold text-gray-900 dark:text-white flex items-center uppercase tracking-wider">
                        <svg class="w-4 h-4 mr-2 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"></path></svg>
                        Developer News Feed
                    </h2>
                </div>
                
                <div class="p-5 flex-grow overflow-y-auto">
                    <?php 
                        $uniqueNews = [];
                        if (isset($data['news']->product_news) && is_array($data['news']->product_news)) {
                            foreach ($data['news']->product_news as $news) {
                                $clonedNews = clone $news;
                                $clonedNews->news_type = 'App News';
                                $uniqueKey = md5($clonedNews->title . $clonedNews->date);
                                $uniqueNews[$uniqueKey] = $clonedNews;
                            }
                        }
                        if (isset($data['news']->global_news) && is_array($data['news']->global_news)) {
                            foreach ($data['news']->global_news as $news) {
                                $clonedNews = clone $news;
                                $clonedNews->news_type = 'Global News';
                                $uniqueKey = md5($clonedNews->title . $clonedNews->date);
                                $uniqueNews[$uniqueKey] = $clonedNews;
                            }
                        }
                        
                        $allNews = array_values($uniqueNews);
                        usort($allNews, function($a, $b) {
                            $timeA = isset($a->timestamp) ? strtotime($a->timestamp) : strtotime($a->date);
                            $timeB = isset($b->timestamp) ? strtotime($b->timestamp) : strtotime($b->date);
                            return $timeB - $timeA;
                        });
                        
                        // LIMIT SET TO 7
                        $allNews = array_slice($allNews, 0, 7);
                    ?>

                    <?php if (empty($allNews)): ?>
                        <div class="text-center text-gray-500 py-8 text-sm">No recent announcements.</div>
                    <?php else: ?>
                        <div class="space-y-4">
                            <?php foreach ($allNews as $index => $news): ?>
                                <?php 
                                    $badgeClass = ($news->news_type === 'Global News') 
                                        ? 'bg-blue-50 text-blue-700 border-blue-200 dark:bg-blue-900/10 dark:text-blue-400 dark:border-blue-800/30' 
                                        : 'bg-purple-50 text-purple-700 border-purple-200 dark:bg-purple-900/10 dark:text-purple-400 dark:border-purple-800/30';
                                ?>
                                <div class="border border-gray-200 dark:border-gray-700/50 rounded-xl overflow-hidden bg-white dark:bg-gray-800 transition-all">
                                    <button type="button" class="accordion-btn w-full px-5 py-4 flex justify-between items-center bg-gray-50 dark:bg-gray-900/40 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors focus:outline-none" data-target="content-<?php echo $index; ?>">
                                        <div class="text-left pr-4">
                                            <div class="flex items-center space-x-2 mb-2">
                                                <span class="px-2 py-0.5 text-[9px] font-bold uppercase tracking-wider rounded border <?php echo $badgeClass; ?>">
                                                    <?php echo $news->news_type; ?>
                                                </span>
                                                <p class="text-[10px] uppercase tracking-wider text-gray-400 dark:text-gray-500 font-bold"><?php echo htmlspecialchars($news->date); ?></p>
                                            </div>
                                            <h4 class="font-bold text-gray-900 dark:text-white text-sm leading-tight">
                                                <?php echo html_entity_decode($news->title ?? '', ENT_QUOTES, 'UTF-8'); ?>
                                            </h4>
                                        </div>
                                        <svg class="w-5 h-5 text-gray-400 dark:text-gray-500 transform transition-transform duration-300 accordion-icon shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                                    </button>
                                    
                                    <div id="content-<?php echo $index; ?>" class="accordion-content px-5 py-5 border-t border-gray-100 dark:border-gray-700/50 hidden">
                                        <div class="text-sm text-gray-600 dark:text-gray-400 prose dark:prose-invert max-w-none prose-p:my-2 prose-ul:my-2 prose-li:my-0.5 prose-headings:mb-3">
                                            <?php echo $news->content; ?>
                                        </div>
                                    </div>
                                </div>
                            <?php endforeach; ?>
                        </div>
                    <?php endif; ?>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const accordionBtns = document.querySelectorAll('.accordion-btn');
    
    accordionBtns.forEach(btn => {
        btn.addEventListener('click', function() {
            const targetId = this.getAttribute('data-target');
            const content = document.getElementById(targetId);
            const icon = this.querySelector('.accordion-icon');

            if (content.classList.contains('hidden')) {
                content.classList.remove('hidden');
                icon.classList.add('rotate-180');
            } else {
                content.classList.add('hidden');
                icon.classList.remove('rotate-180');
            }
        });
    });
});
</script>
<?php require APPROOT . '/app/Views/layouts/footer.php'; ?>