<?php defined('BASEPATH') OR exit('No direct script access allowed'); ?>
<?php
function berita_time_ago($date_str) {
    if (!$date_str) return '';
    $diff = time() - strtotime($date_str);
    if ($diff < 60)       return 'Baru saja';
    if ($diff < 3600)     return floor($diff/60) . ' menit lalu';
    if ($diff < 86400)    return floor($diff/3600) . ' jam lalu';
    if ($diff < 2592000)  return floor($diff/86400) . ' hari lalu';
    if ($diff < 31536000) return floor($diff/2592000) . ' bulan lalu';
    return floor($diff/31536000) . ' tahun lalu';
}
?>
<style>
.bn-wrap { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }

.bn-header {
    background: linear-gradient(135deg, #0f766e, #14b8a6, #2dd4bf);
    border-radius: 16px;
    padding: 20px 24px;
    margin-bottom: 20px;
    box-shadow: 0 8px 28px rgba(15,118,110,.25);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}
.bn-header-title { color:#fff; font-weight:800; font-size:1rem; display:flex; align-items:center; gap:8px; }
.bn-header-sub   { color:rgba(255,255,255,.75); font-size:.75rem; margin-top:2px; }
.bn-source-badge {
    background: rgba(255,255,255,.2);
    color: #fff; border-radius:8px; padding:4px 12px;
    font-size:.72rem; font-weight:700; backdrop-filter:blur(4px);
    display:flex; align-items:center; gap:5px;
}
.bn-source-badge span { color:#ff4444; }
.bn-refresh {
    background:rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.4);
    color:#fff; border-radius:10px; padding:7px 14px; font-size:.75rem;
    font-weight:700; cursor:pointer; transition:.15s; display:flex; align-items:center; gap:5px;
}
.bn-refresh:hover { background:rgba(255,255,255,.35); }

.bn-tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
.bn-tab {
    background:#fff; border:1px solid #e2e8f0; border-radius:10px;
    padding:7px 14px; font-size:.78rem; font-weight:700; color:#64748b;
    text-decoration:none; transition:.15s; display:flex; align-items:center; gap:5px;
}
.bn-tab:hover { background:#f0fdfa; border-color:#14b8a6; color:#0f766e; }
.bn-tab.active { background:#0f766e; border-color:#0f766e; color:#fff; }

.bn-info  { font-size:.78rem; color:#64748b; margin-bottom:14px; }
.bn-error {
    background:#fef2f2; border:1px solid #fecaca; border-radius:12px;
    padding:14px 18px; color:#dc2626; font-size:.85rem; font-weight:600; margin-bottom:16px;
}

.bn-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:16px; }

.bn-card {
    background:#fff; border-radius:14px; overflow:hidden;
    border:1px solid #e2e8f0; box-shadow:0 2px 8px rgba(0,0,0,.05);
    transition:transform .15s, box-shadow .15s; display:flex; flex-direction:column;
}
.bn-card:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,.1); }
.bn-thumb-wrap {
    position:relative; aspect-ratio:16/9; overflow:hidden; background:#f1f5f9;
}
.bn-thumb-wrap img { width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.bn-card:hover .bn-thumb-wrap img { transform:scale(1.04); }
.bn-no-thumb {
    width:100%; height:100%; display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg, #f0fdfa, #ccfbf1);
}
.bn-no-thumb i { font-size:2.5rem; color:#99f6e4; }
.bn-cat-badge {
    position:absolute; top:8px; left:8px;
    background:rgba(15,118,110,.85); color:#fff; font-size:.65rem; font-weight:800;
    padding:3px 8px; border-radius:6px; backdrop-filter:blur(4px);
    text-transform:uppercase; letter-spacing:.3px;
}
.bn-card-body { padding:12px 14px 14px; flex:1; display:flex; flex-direction:column; gap:6px; }
.bn-card-title {
    font-size:.84rem; font-weight:700; color:#1e293b; line-height:1.45;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.bn-card-desc {
    font-size:.74rem; color:#64748b; line-height:1.55; flex:1;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.bn-card-footer { display:flex; align-items:center; justify-content:space-between; margin-top:4px; }
.bn-card-date { font-size:.68rem; color:#94a3b8; display:flex; align-items:center; gap:3px; }
.bn-card-date i { color:#14b8a6; }
.bn-read-btn {
    background:#f0fdfa; color:#0f766e; border:1px solid #99f6e4;
    border-radius:8px; padding:4px 12px; font-size:.7rem; font-weight:700;
    text-decoration:none; transition:.15s; display:flex; align-items:center; gap:4px;
}
.bn-read-btn:hover { background:#0f766e; color:#fff; border-color:#0f766e; }

/* Featured */
.bn-featured {
    grid-column:1/-1; display:grid; grid-template-columns:1.4fr 1fr;
    border-radius:16px; overflow:hidden; border:1px solid #e2e8f0;
    box-shadow:0 4px 16px rgba(0,0,0,.08); background:#fff; min-height:200px; transition:box-shadow .15s;
}
.bn-featured:hover { box-shadow:0 8px 32px rgba(0,0,0,.12); }
.bn-featured-thumb { position:relative; overflow:hidden; background:#f1f5f9; }
.bn-featured-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.bn-featured:hover .bn-featured-thumb img { transform:scale(1.03); }
.bn-featured-body { padding:20px 22px; display:flex; flex-direction:column; gap:10px; justify-content:center; }
.bn-featured-label {
    background:#0f766e; color:#fff; font-size:.65rem; font-weight:800;
    padding:3px 10px; border-radius:6px; width:fit-content;
    text-transform:uppercase; letter-spacing:.5px;
}
.bn-featured-title { font-size:1rem; font-weight:800; color:#1e293b; line-height:1.4; }
.bn-featured-desc {
    font-size:.78rem; color:#64748b; line-height:1.6;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}

.bn-empty { text-align:center; padding:50px 20px; color:#94a3b8; }
.bn-empty i { font-size:3.5rem; display:block; margin-bottom:12px; color:#e2e8f0; }

@media (max-width:768px) {
    .bn-featured { grid-template-columns:1fr; }
    .bn-featured-thumb { aspect-ratio:16/9; }
    .bn-featured-body { padding:14px 16px; }
}
@media (max-width:576px) {
    .bn-grid { grid-template-columns:1fr 1fr; gap:10px; }
    .bn-header { padding:14px; }
    .bn-tab { padding:6px 10px; font-size:.72rem; }
}
@media (max-width:400px) { .bn-grid { grid-template-columns:1fr; } }
@keyframes spin { to { transform:rotate(360deg); } }
</style>

<div class="bn-wrap">

<!-- Header -->
<div class="bn-header">
    <div>
        <div class="bn-header-title"><i class="bi bi-newspaper"></i> Berita Terkini</div>
        <div class="bn-header-sub">Berita terbaru dari CNN Indonesia</div>
    </div>
    <div style="display:flex;gap:8px;align-items:center;">
        <div class="bn-source-badge"><span>&#9654;</span> CNN Indonesia</div>
        <button class="bn-refresh" onclick="bnRefresh()">
            <i class="bi bi-arrow-clockwise" id="bnRefreshIcon"></i> Refresh
        </button>
    </div>
</div>

<!-- Tabs Kategori -->
<div class="bn-tabs">
    <?php foreach($feeds as $key => $feed): ?>
    <a href="<?php echo base_url('berita?kat='.$key) ?>"
       class="bn-tab <?php echo $kategori === $key ? 'active' : '' ?>">
        <i class="bi <?php echo $feed['icon'] ?>"></i> <?php echo $feed['label'] ?>
    </a>
    <?php endforeach; ?>
</div>

<!-- Error -->
<?php if($error): ?>
<div class="bn-error"><i class="bi bi-exclamation-triangle me-2"></i><?php echo $error ?></div>
<?php endif; ?>

<!-- Info -->
<?php if(!$error && !empty($berita)): ?>
<div class="bn-info">
    Menampilkan <strong><?php echo count($berita) ?></strong> berita
    <strong><?php echo htmlspecialchars($feeds[$kategori]['label']) ?></strong>
    &mdash; <span style="color:#94a3b8;">diperbarui setiap 15 menit</span>
</div>
<?php endif; ?>

<!-- Grid -->
<?php if(!empty($berita)): ?>
<div class="bn-grid" id="bnGrid">
    <?php foreach($berita as $i => $item): ?>
    <?php $read_url = base_url('berita/baca?kat='.$kategori.'&url='.urlencode($item['link'])); ?>

    <?php if($i === 0): ?>
    <div class="bn-featured">
        <div class="bn-featured-thumb">
            <?php if($item['thumb']): ?>
            <img src="<?php echo htmlspecialchars($item['thumb']) ?>"
                 alt="<?php echo htmlspecialchars($item['title']) ?>"
                 onerror="this.parentElement.innerHTML='<div style=\'height:100%;display:flex;align-items:center;justify-content:center;background:#f0fdfa\'><i class=\'bi bi-newspaper\' style=\'font-size:3rem;color:#99f6e4\'></i></div>'">
            <?php else: ?>
            <div class="bn-no-thumb" style="height:100%;"><i class="bi bi-newspaper"></i></div>
            <?php endif; ?>
            <?php if($item['category']): ?>
            <div class="bn-cat-badge"><?php echo htmlspecialchars($item['category']) ?></div>
            <?php endif; ?>
        </div>
        <div class="bn-featured-body">
            <div class="bn-featured-label">Berita Utama</div>
            <div class="bn-featured-title"><?php echo htmlspecialchars($item['title']) ?></div>
            <?php if($item['desc']): ?>
            <div class="bn-featured-desc"><?php echo htmlspecialchars($item['desc']) ?>...</div>
            <?php endif; ?>
            <div style="display:flex;align-items:center;justify-content:space-between;margin-top:4px;">
                <span class="bn-card-date">
                    <i class="bi bi-clock"></i> <?php echo berita_time_ago($item['pubdate']) ?>
                </span>
                <a href="<?php echo $read_url ?>" class="bn-read-btn">
                    Baca <i class="bi bi-arrow-right"></i>
                </a>
            </div>
        </div>
    </div>

    <?php else: ?>
    <div class="bn-card">
        <div class="bn-thumb-wrap">
            <?php if($item['thumb']): ?>
            <img src="<?php echo htmlspecialchars($item['thumb']) ?>"
                 alt="<?php echo htmlspecialchars($item['title']) ?>"
                 loading="lazy"
                 onerror="this.parentElement.innerHTML='<div class=\'bn-no-thumb\'><i class=\'bi bi-newspaper\'></i></div>'">
            <?php else: ?>
            <div class="bn-no-thumb"><i class="bi bi-newspaper"></i></div>
            <?php endif; ?>
            <?php if($item['category']): ?>
            <div class="bn-cat-badge"><?php echo htmlspecialchars($item['category']) ?></div>
            <?php endif; ?>
        </div>
        <div class="bn-card-body">
            <div class="bn-card-title"><?php echo htmlspecialchars($item['title']) ?></div>
            <?php if($item['desc']): ?>
            <div class="bn-card-desc"><?php echo htmlspecialchars($item['desc']) ?>...</div>
            <?php endif; ?>
            <div class="bn-card-footer">
                <span class="bn-card-date">
                    <i class="bi bi-clock"></i> <?php echo berita_time_ago($item['pubdate']) ?>
                </span>
                <a href="<?php echo $read_url ?>" class="bn-read-btn">
                    Baca <i class="bi bi-arrow-right"></i>
                </a>
            </div>
        </div>
    </div>
    <?php endif; ?>

    <?php endforeach; ?>
</div>

<?php else: ?>
<div class="bn-empty">
    <i class="bi bi-newspaper"></i>
    <div style="font-size:.9rem;font-weight:700;color:#64748b;">Tidak ada berita tersedia</div>
    <div style="font-size:.78rem;margin-top:5px;">Coba refresh atau pilih kategori lain</div>
</div>
<?php endif; ?>

</div>

<script>
var BN_BASE = '<?php echo base_url(); ?>';
var BN_KAT  = '<?php echo $kategori ?>';
function bnRefresh() {
    var icon = document.getElementById('bnRefreshIcon');
    icon.style.animation = 'spin .6s linear infinite';
    fetch(BN_BASE + 'berita/ajax_load', {
        method: 'POST',
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        body: 'kat=' + encodeURIComponent(BN_KAT)
    })
    .then(r => r.json())
    .then(d => { icon.style.animation = ''; if(d.ok) location.reload(); })
    .catch(() => { icon.style.animation = ''; });
}
</script>