@extends('nexus.layouts.app')

@section('page-title', 'Blog')
@section('sys-mode', 'BLOG')

@section('head')
<style>
    .nblog-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
    .nblog-scroll::-webkit-scrollbar-track { background: #0a0a0a; }
    .nblog-scroll::-webkit-scrollbar-thumb { background: #3a3a3a; border-radius: 3px; }
    .nblog-scroll::-webkit-scrollbar-thumb:hover { background: #e8842a; }
    .nblog-scroll { scrollbar-width: thin; scrollbar-color: #3a3a3a #0a0a0a; }
</style>
@endsection

@section('content')
<div class="page-header">
    <div>
        <h1>BLOG <span style="color: #e8842a;">POSTS</span></h1>
        <p class="page-header-sub">Markdown-authored posts on disk</p>
    </div>
    <div class="page-header-right">
        <a href="{{ route('nexus.blog.create') }}"
           style="background: #e8842a; color: #0a0a0a; padding: 8px 16px; border-radius: 3px; text-decoration: none; font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; display: inline-block;">
            + New Post
        </a>
    </div>
</div>

@if(session('status'))
    <div style="background: rgba(34,197,94,0.08); border-left: 2px solid #22c55e; color: #4ade80; padding: 10px 14px; margin: 16px 0; font-family: 'IBM Plex Mono', monospace; font-size: 12px;">
        {{ session('status') }}
    </div>
@endif

{{-- METRIC ROW --}}
<div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid #1e1e1e; border-bottom: 1px solid #1e1e1e; margin: 24px 0;">
    <div style="padding: 20px 24px; border-right: 1px solid #1e1e1e;">
        <div style="font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: #7a7a7a; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 8px;">Total Posts</div>
        <div style="font-family: 'Bebas Neue', sans-serif; font-size: 32px; color: #eaeaea; line-height: 1;">{{ $metrics['total_posts'] }}</div>
    </div>
    <div style="padding: 20px 24px; border-right: 1px solid #1e1e1e;">
        <div style="font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: #7a7a7a; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 8px;">Categories Used</div>
        <div style="font-family: 'Bebas Neue', sans-serif; font-size: 32px; color: #eaeaea; line-height: 1;">{{ $metrics['categories_used'] }}</div>
    </div>
    <div style="padding: 20px 24px; border-right: 1px solid #1e1e1e;">
        <div style="font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: #7a7a7a; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 8px;">Authors</div>
        <div style="font-family: 'Bebas Neue', sans-serif; font-size: 32px; color: #eaeaea; line-height: 1;">{{ $metrics['total_authors'] }}</div>
    </div>
    <div style="padding: 20px 24px;">
        <div style="font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: #7a7a7a; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 8px;">Last Published</div>
        <div style="font-family: 'IBM Plex Mono', monospace; font-size: 16px; color: #eaeaea; line-height: 1.2;">{{ $metrics['last_published'] ?? '—' }}</div>
    </div>
</div>

{{-- POST TABLE --}}
<div style="margin-top: 24px;">
    <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;">
        <span style="font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: #7a7a7a; letter-spacing: 2px; text-transform: uppercase;">Post Registry</span>
        <span style="font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: #555;">{{ count($posts) }} entries</span>
    </div>

    <table style="width: 100%; border-collapse: collapse; font-family: 'IBM Plex Mono', monospace; font-size: 12px;">
        <thead>
            <tr style="border-top: 1px solid #1e1e1e; border-bottom: 1px solid #1e1e1e;">
                <th style="padding: 12px 16px; color: #7a7a7a; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; text-align: left; font-size: 10px;">Title</th>
                <th style="padding: 12px 16px; color: #7a7a7a; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; text-align: left; font-size: 10px;">Category</th>
                <th style="padding: 12px 16px; color: #7a7a7a; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; text-align: left; font-size: 10px;">Author</th>
                <th style="padding: 12px 16px; color: #7a7a7a; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; text-align: left; font-size: 10px;">Updated</th>
                <th style="padding: 12px 16px; color: #7a7a7a; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; text-align: right; font-size: 10px;">Actions</th>
            </tr>
        </thead>
        <tbody>
        @forelse($posts as $p)
            <tr style="border-bottom: 1px solid #1e1e1e;">
                <td style="padding: 14px 16px;">
                    <a href="{{ route('nexus.blog.edit', ['slug' => $p['slug']]) }}"
                       style="color: #eaeaea; text-decoration: none; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500; line-height: 1.4;">
                        {{ $p['title'] }}
                    </a>
                    <div style="color: #555; font-size: 10px; margin-top: 4px; letter-spacing: 0.5px;">{{ $p['slug'] }}</div>
                </td>
                <td style="padding: 14px 16px; color: #aaa; letter-spacing: 1px;">{{ $p['category'] }}</td>
                <td style="padding: 14px 16px; color: #aaa;">{{ $p['author'] }}</td>
                <td style="padding: 14px 16px; color: #7a7a7a;">{{ $p['updated_at'] ?? '—' }}</td>
                <td style="padding: 14px 16px; text-align: right; white-space: nowrap;">
                    <a href="{{ $p['public_url'] }}" target="_blank" rel="noopener" style="color: #7a7a7a; text-decoration: none; margin-right: 14px; letter-spacing: 1px; text-transform: uppercase; font-size: 10px;">View</a>
                    <a href="{{ route('nexus.blog.edit', ['slug' => $p['slug']]) }}" style="color: #e8842a; text-decoration: none; margin-right: 14px; letter-spacing: 1px; text-transform: uppercase; font-size: 10px; font-weight: 700;">Edit</a>
                    <form method="POST" action="{{ route('nexus.blog.destroy', ['slug' => $p['slug']]) }}" style="display: inline;"
                          onsubmit="return confirm('Delete {{ $p['slug'] }}? This is permanent.');">
                        @csrf
                        @method('DELETE')
                        <button type="submit" style="background: none; border: none; color: #dc2626; font-family: inherit; font-size: 10px; cursor: pointer; padding: 0; letter-spacing: 1px; text-transform: uppercase;">Delete</button>
                    </form>
                </td>
            </tr>
        @empty
            <tr><td colspan="5" style="padding: 40px; text-align: center; color: #555; font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 1px;">
                No posts yet. <a href="{{ route('nexus.blog.create') }}" style="color: #e8842a;">Create the first one</a>.
            </td></tr>
        @endforelse
        </tbody>
    </table>
</div>
@endsection