@extends('portal.layouts.master')
@section('title', 'Finance News')
@section('page-title', 'Finance News')

@section('extra-css')
/* ══════════════════════════════════════════════
   PORTAL — Finance News
   ══════════════════════════════════════════════ */

.news-shell {
    max-width: 1200px;
    margin: 0 auto;
}

/* ── Top bar ── */
.news-topbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

/* ── Category tabs ── */
.news-tabs {
    display: flex;
    gap: .35rem;
    flex-wrap: wrap;
    flex: 1;
}
.news-tab {
    padding: .38rem .85rem;
    border-radius: 6px;
    border: 1px solid #2b3139;
    background: #131722;
    color: #848e9c;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}
.news-tab:hover { border-color: #f0b90b; color: #f0b90b; }
.news-tab.active { background: #f0b90b; border-color: #f0b90b; color: #1a1d27; }

/* ── Search ── */
.news-search-wrap {
    position: relative;
    flex-shrink: 0;
}
.news-search-wrap i {
    position: absolute;
    left: .75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #5e6673;
    font-size: .85rem;
    pointer-events: none;
}
.news-search {
    background: #131722;
    border: 1px solid #2b3139;
    border-radius: 6px;
    color: #eaecef;
    font-size: .83rem;
    padding: .38rem .85rem .38rem 2.1rem;
    width: 220px;
    outline: none;
    transition: border-color .15s;
}
.news-search:focus { border-color: #f0b90b; }
.news-search::placeholder { color: #5e6673; }

/* ── Status bar ── */
.news-status {
    font-size: .75rem;
    color: #5e6673;
    margin-bottom: 1rem;
    min-height: 1.2em;
}

/* ── Grid ── */
.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
}

/* ── Article card ── */
.news-card {
    background: #131722;
    border: 1px solid #2b3139;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color .15s, transform .15s;
}
.news-card:hover { border-color: #3d4554; transform: translateY(-2px); }

.news-card-img {
    width: 100%;
    height: 175px;
    object-fit: cover;
    background: #1a1d27;
    display: block;
    flex-shrink: 0;
}
.news-card-img-placeholder {
    width: 100%;
    height: 175px;
    background: linear-gradient(135deg, #1a1d27 0%, #252b3a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.news-card-img-placeholder i { font-size: 2.5rem; color: #2b3139; }

.news-card-body {
    padding: .85rem 1rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.news-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .4rem;
}
.news-card-source {
    font-size: .68rem;
    font-weight: 700;
    color: #f0b90b;
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 55%;
}
.news-card-time {
    font-size: .67rem;
    color: #5e6673;
    white-space: nowrap;
}
.news-card-title {
    font-size: .88rem;
    font-weight: 700;
    color: #eaecef;
    line-height: 1.35;
    margin-bottom: .45rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.news-card-desc {
    font-size: .78rem;
    color: #848e9c;
    line-height: 1.45;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: .75rem;
}
.news-card-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: auto;
}
.news-card-link {
    font-size: .75rem;
    font-weight: 700;
    color: #f0b90b;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}
.news-card-link:hover { color: #ffd166; text-decoration: none; }

/* ── Skeleton loader ── */
.news-skeleton-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
}
.news-skeleton-card {
    background: #131722;
    border: 1px solid #2b3139;
    border-radius: 10px;
    overflow: hidden;
}
.skel {
    background: linear-gradient(90deg, #1f2535 25%, #29344a 50%, #1f2535 75%);
    background-size: 200% 100%;
    animation: skel-shimmer 1.4s infinite;
    border-radius: 4px;
}
@keyframes skel-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.skel-img { height: 175px; border-radius: 0; }
.skel-body { padding: .85rem 1rem; }
.skel-line { height: .75rem; margin-bottom: .6rem; }
.skel-title { width: 85%; height: .9rem; }
.skel-sub1  { width: 60%; height: .75rem; }
.skel-sub2  { width: 75%; height: .75rem; }
.skel-sub3  { width: 45%; height: .75rem; }

/* ── No results / error ── */
.news-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem 1rem;
    color: #5e6673;
}
.news-empty i { font-size: 2.5rem; margin-bottom: .75rem; display: block; }
.news-empty p { font-size: .9rem; }

/* ── Responsive ── */
@media (max-width: 600px) {
    .news-grid, .news-skeleton-grid { grid-template-columns: 1fr; }
    .news-search { width: 100%; }
    .news-topbar { flex-direction: column; align-items: stretch; }
}
@endsection

@section('content')
<div class="news-shell">

    {{-- Top bar: category tabs + search --}}
    <div class="news-topbar">
        <div class="news-tabs" id="newsTabs">
            @foreach($tabs as $slug => $tab)
            <button class="news-tab {{ $category === $slug ? 'active' : '' }}"
                    data-category="{{ $slug }}">
                {{ $tab['label'] }}
            </button>
            @endforeach
        </div>
        <div class="news-search-wrap">
            <i class="fas fa-search"></i>
            <input type="text" class="news-search" id="newsSearch"
                   placeholder="Search news…" autocomplete="off"
                   value="">
        </div>
    </div>

    <div class="news-status" id="newsStatus">
        @if(count($articles) > 0)
            Showing {{ count($articles) }} articles
            @if($updatedAt)
                @if(\Carbon\Carbon::parse($updatedAt)->lt(now()->subMinutes(150))) · Delayed @endif
                · Last updated {{ \Carbon\Carbon::parse($updatedAt)->diffForHumans() }}
            @endif
        @else
            News is temporarily unavailable while the first local snapshot is prepared.
        @endif
    </div>

    {{-- Article grid --}}
    <div class="news-grid" id="newsGrid">
        @forelse($articles as $article)
        @include('portal.partials.news-card', ['article' => $article])
        @empty
        <div class="news-empty">
            <i class="fas fa-newspaper"></i>
            <p>No locally stored articles are available yet.</p>
        </div>
        @endforelse
    </div>

</div>
@endsection

@push('scripts')
<script>
(function () {
    const PROXY_URL  = '{{ route('portal.news.img') }}';
    const SNAPSHOTS  = @json($newsSnapshots);
    const grid       = document.getElementById('newsGrid');
    const status     = document.getElementById('newsStatus');
    const searchEl   = document.getElementById('newsSearch');

    let activeCategory = '{{ $category }}';

    /* ─── Skeleton ─── */
    function showSkeleton () {
        const skels = Array.from({ length: 6 }, () => `
            <div class="news-skeleton-card">
                <div class="skel skel-img"></div>
                <div class="skel-body">
                    <div class="skel skel-line skel-title" style="margin-bottom:.8rem"></div>
                    <div class="skel skel-line skel-sub1"></div>
                    <div class="skel skel-line skel-sub2"></div>
                    <div class="skel skel-line skel-sub3"></div>
                </div>
            </div>`).join('');
        grid.className = 'news-skeleton-grid';
        grid.innerHTML = skels;
        status.textContent = 'Loading…';
    }

    /* ─── Render articles ─── */
    function renderArticles (articles, category) {
        grid.className = 'news-grid';
        if (!articles || articles.length === 0) {
            grid.innerHTML = `
                <div class="news-empty">
                    <i class="fas fa-newspaper"></i>
                    <p>No articles found. Try a different category or search term.</p>
                </div>`;
            status.textContent = 'No articles found.';
            return;
        }
        grid.innerHTML = articles.map(articleHTML).join('');
        const updatedAt = SNAPSHOTS[category] && SNAPSHOTS[category].updated_at;
        const delayed = updatedAt && (Date.now() - new Date(updatedAt).getTime() > 150 * 60 * 1000);
        status.textContent = 'Showing ' + articles.length + ' articles'
            + (delayed ? ' · Delayed' : '')
            + (updatedAt ? ' · Last updated ' + timeAgo(new Date(updatedAt)) : '');
    }

    /* ─── Image proxy helper ─── */
    function proxyImg (rawUrl) {
        if (!rawUrl) return null;
        try { return PROXY_URL + '?u=' + encodeURIComponent(btoa(unescape(encodeURIComponent(rawUrl)))); }
        catch (e) { return rawUrl; }
    }

    /* ─── Build article HTML ─── */
    function articleHTML (a) {
        const rawImg  = a.urlToImage || null;
        const proxied = proxyImg(rawImg);
        const onerrorHandler = `this.parentNode.innerHTML='<div class=\\'news-card-img-placeholder\\'><i class=\\'fas fa-newspaper\\'></i></div>'`;
        const imgHtml = proxied
            ? `<img class="news-card-img" src="${escHtml(proxied)}" alt="" loading="lazy" onerror="${onerrorHandler}">`
            : `<div class="news-card-img-placeholder"><i class="fas fa-newspaper"></i></div>`;

        const source  = escHtml((a.source && a.source.name) ? a.source.name : '');
        const title   = escHtml(a.title   || '');
        const desc    = escHtml(a.description || '');
        const url     = escHtml(a.url || '#');
        const time    = a.publishedAt ? timeAgo(new Date(a.publishedAt)) : '';

        return `
        <div class="news-card">
            ${imgHtml}
            <div class="news-card-body">
                <div class="news-card-meta">
                    <span class="news-card-source">${source}</span>
                    <span class="news-card-time">${time}</span>
                </div>
                <div class="news-card-title">${title}</div>
                ${desc ? `<div class="news-card-desc">${desc}</div>` : ''}
                <div class="news-card-footer">
                    <a href="${url}" target="_blank" rel="noopener noreferrer" class="news-card-link">
                        Read full article <i class="fas fa-external-link-alt" style="font-size:.65rem"></i>
                    </a>
                </div>
            </div>
        </div>`;
    }

    /* ─── Instant local category/search ─── */
    function fetchNews (category, q) {
        const articles = (SNAPSHOTS[category] && SNAPSHOTS[category].articles) || [];
        const needle = String(q || '').trim().toLocaleLowerCase();
        const filtered = needle === '' ? articles : articles.filter(article => [
            article.title || '', article.description || '',
            article.source && article.source.name ? article.source.name : '',
        ].join(' ').toLocaleLowerCase().includes(needle));
        renderArticles(filtered, category);
    }

    /* ─── Tab click ─── */
    document.getElementById('newsTabs').addEventListener('click', e => {
        const btn = e.target.closest('.news-tab');
        if (!btn) return;
        document.querySelectorAll('.news-tab').forEach(t => t.classList.remove('active'));
        btn.classList.add('active');
        activeCategory = btn.dataset.category;
        searchEl.value = '';
        fetchNews(activeCategory, '');
    });

    /* ─── Instant local search ─── */
    searchEl.addEventListener('input', () => {
        fetchNews(activeCategory, searchEl.value.trim());
    });

    /* ─── Helpers ─── */
    function escHtml (str) {
        return String(str)
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;');
    }

    function timeAgo (date) {
        const diff = Math.max(0, Date.now() - date.getTime());
        const mins  = Math.floor(diff / 60000);
        const hours = Math.floor(diff / 3600000);
        const days  = Math.floor(diff / 86400000);
        if (mins < 2)   return 'Just now';
        if (mins < 60)  return mins + 'm ago';
        if (hours < 24) return hours + 'h ago';
        if (days < 7)   return days + 'd ago';
        return date.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
    }
})();
</script>
@endpush