@extends('layouts.app')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2 class="fw-bold text-gradient">Admin Dashboard</h2>
    <a href="{{ route('dashboard.index') }}" class="btn btn-outline-primary">Back to Global Dashboard</a>
</div>

<div class="row">
    <div class="col-md-4">
        <div class="card bg-white border-0 shadow-sm p-4 text-center">
            <h5 class="text-muted">Total Users</h5>
            <h2 class="text-primary fw-bold">1</h2>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card bg-white border-0 shadow-sm p-4 text-center">
            <h5 class="text-muted">Total Articles Cached</h5>
            <h2 class="text-success fw-bold">{{\App\Models\Article::count()}}</h2>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card bg-white border-0 shadow-sm p-4 text-center">
            <h5 class="text-muted">Registered Ports</h5>
            <h2 class="text-info fw-bold">{{\App\Models\Pelabuhan::count()}}</h2>
        </div>
    </div>
</div>

<div class="row mt-4">
    <div class="col-md-12">
        <div class="card bg-white border-0 shadow-sm p-4">
            <h5 class="mb-4">System Settings & Data Management</h5>
            <p class="text-muted">This area is reserved for managing users, port datasets, and reviewing AI analysis accuracy for articles.</p>
            <div class="row g-4 mt-2">
                <!-- Manage Users -->
                <div class="col-md-4">
                    <a href="{{ route('admin.users.index') }}" class="text-decoration-none d-block h-100">
                        <div class="card h-100 border-0" style="background: linear-gradient(145deg, #eff6ff, #dbeafe); border-radius: 16px; transition: transform 0.3s ease, box-shadow 0.3s ease;" onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 10px 25px rgba(37,99,235,0.15)';" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='none';">
                            <div class="card-body p-4 text-center">
                                <div style="width: 56px; height: 56px; background: #2563eb; color: white; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 1rem; box-shadow: 0 4px 10px rgba(37,99,235,0.3);">
                                    <i class="bi bi-people-fill"></i>
                                </div>
                                <h6 class="fw-bold mb-2" style="color: #1e3a8a;">User Management</h6>
                                <p class="small mb-0" style="color: #64748b;">Add, edit, assign roles, or remove access for administrators and users.</p>
                            </div>
                        </div>
                    </a>
                </div>

                <!-- Manage News -->
                <div class="col-md-4">
                    <a href="{{ route('admin.news.index') }}" class="text-decoration-none d-block h-100">
                        <div class="card h-100 border-0" style="background: linear-gradient(145deg, #fffbeb, #fef3c7); border-radius: 16px; transition: transform 0.3s ease, box-shadow 0.3s ease;" onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 10px 25px rgba(217,119,6,0.15)';" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='none';">
                            <div class="card-body p-4 text-center">
                                <div style="width: 56px; height: 56px; background: #d97706; color: white; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 1rem; box-shadow: 0 4px 10px rgba(217,119,6,0.3);">
                                    <i class="bi bi-newspaper"></i>
                                </div>
                                <h6 class="fw-bold mb-2" style="color: #92400e;">News Moderation</h6>
                                <p class="small mb-0" style="color: #64748b;">Review cached global news articles, manage data, and delete irrelevant entries.</p>
                            </div>
                        </div>
                    </a>
                </div>

                <!-- Lexicon Dictionary -->
                <div class="col-md-4">
                    <a href="javascript:void(0)" onclick="alert('Module under construction!')" class="text-decoration-none d-block h-100">
                        <div class="card h-100 border-0" style="background: linear-gradient(145deg, #ecfdf5, #d1fae5); border-radius: 16px; transition: transform 0.3s ease, box-shadow 0.3s ease;" onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 10px 25px rgba(5,150,105,0.15)';" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='none';">
                            <div class="card-body p-4 text-center">
                                <div style="width: 56px; height: 56px; background: #059669; color: white; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 1rem; box-shadow: 0 4px 10px rgba(5,150,105,0.3);">
                                    <i class="bi bi-journal-text"></i>
                                </div>
                                <h6 class="fw-bold mb-2" style="color: #065f46;">Lexicon Dictionary</h6>
                                <p class="small mb-0" style="color: #64748b;">Tune AI detection keywords and sentiment analysis sets. (Coming Soon)</p>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection