@extends('layouts.app')

@section('content')
<div class="reveal">
    <!-- Colorful Hero Header -->
    <div class="row mb-5">
        <div class="col-12">
            <div class="pro-card border-0 bg-white shadow-lg overflow-hidden position-relative" style="min-height: 300px;">
                <div class="row align-items-center g-0">
                    <div class="col-lg-7 p-5 position-relative z-1">
                        <span class="badge bg-primary bg-opacity-10 text-primary px-3 py-2 rounded-pill fw-bold mb-3">WORKSPACE OVERVIEW</span>
                        <h1 class="display-5 fw-bold mb-3 text-dark">Welcome back, <span class="text-primary">{{ Auth::user()->name }}</span>!</h1>
                        <p class="lead text-muted mb-4">Your AI-powered second brain is ready. Organize, summarize, and learn faster than ever before.</p>
                        <div class="d-flex gap-3">
                            <a href="{{ route('notes.create') }}" class="btn-pro">
                                <i class="bi bi-plus-circle me-2"></i> Create New Note
                            </a>
                            <button class="btn-edu-accent" data-bs-toggle="modal" data-bs-target="#uploadPdfModal">
                                <i class="bi bi-file-earmark-pdf me-2"></i> Import Document
                            </button>
                        </div>
                    </div>
                    <div class="col-lg-5 d-none d-lg-block position-relative">
                        <img src="{{ asset('hero_dashboard.png') }}" class="img-fluid w-100 h-100 object-fit-cover" alt="Education Hero" style="max-height: 350px;">
                        <!-- Subtle Gradient Overlay -->
                        <div class="position-absolute top-0 start-0 w-100 h-100" style="background: linear-gradient(90deg, #ffffff 0%, transparent 20%);"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Vibrant Stats Grid -->
    <div class="row g-4 mb-5">
        <div class="col-md-3">
            <div class="pro-card h-100 border-start border-4 border-primary">
                <div class="d-flex align-items-center gap-3">
                    <div class="rounded-circle bg-primary bg-opacity-10 text-primary d-flex align-items-center justify-content-center" style="width: 48px; height: 48px;">
                        <i class="bi bi-journal-text fs-4"></i>
                    </div>
                    <div>
                        <div class="text-small text-uppercase fw-bold opacity-50">Total Notes</div>
                        <div class="h3 fw-bold mb-0 text-dark">{{ $stats['total_notes'] }}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="pro-card h-100 border-start border-4 border-warning">
                <div class="d-flex align-items-center gap-3">
                    <div class="rounded-circle bg-warning bg-opacity-10 text-warning d-flex align-items-center justify-content-center" style="width: 48px; height: 48px;">
                        <i class="bi bi-folder2 fs-4"></i>
                    </div>
                    <div>
                        <div class="text-small text-uppercase fw-bold opacity-50">Folders</div>
                        <div class="h3 fw-bold mb-0 text-dark">{{ $stats['total_categories'] }}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="pro-card h-100 border-start border-4 border-info">
                <div class="d-flex align-items-center gap-3">
                    <div class="rounded-circle bg-info bg-opacity-10 text-info d-flex align-items-center justify-content-center" style="width: 48px; height: 48px;">
                        <i class="bi bi-stars fs-4"></i>
                    </div>
                    <div>
                        <div class="text-small text-uppercase fw-bold opacity-50">AI Summaries</div>
                        <div class="h3 fw-bold mb-0 text-dark">{{ $stats['ai_summaries'] }}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="pro-card h-100 border-start border-4 border-success">
                <div class="d-flex align-items-center gap-3">
                    <div class="rounded-circle bg-success bg-opacity-10 text-success d-flex align-items-center justify-content-center" style="width: 48px; height: 48px;">
                        <i class="bi bi-clock-history fs-4"></i>
                    </div>
                    <div>
                        <div class="text-small text-uppercase fw-bold opacity-50">Updates</div>
                        <div class="h3 fw-bold mb-0 text-dark">{{ $stats['recent_updates'] }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-5">
        <!-- Activity Section -->
        <div class="col-lg-8">
            <div class="d-flex align-items-center justify-content-between mb-4">
                <h4 class="fw-bold mb-0 text-dark">Recent Knowledge</h4>
                <a href="{{ route('notes.index') }}" class="btn btn-link text-primary text-decoration-none fw-bold p-0">View All activity &rarr;</a>
            </div>

            <div class="d-flex flex-column gap-3">
                @forelse($recentNotes as $note)
                <a href="{{ route('notes.show', $note) }}" class="pro-card text-decoration-none d-flex align-items-center justify-content-between hover-lift bg-white">
                    <div class="d-flex align-items-center gap-4">
                        <div class="rounded-4 p-3 text-white" style="background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);">
                            <i class="bi bi-file-earmark-text fs-5"></i>
                        </div>
                        <div>
                            <div class="fw-bold text-dark mb-1 fs-5">{{ $note->title }}</div>
                            <div class="text-small d-flex align-items-center gap-2">
                                <span class="badge bg-light text-muted border rounded-pill">{{ $note->category->name ?? 'Uncategorized' }}</span>
                                <span class="opacity-50">•</span>
                                <span class="opacity-75"><i class="bi bi-clock me-1"></i> {{ $note->updated_at->diffForHumans() }}</span>
                            </div>
                        </div>
                    </div>
                    <i class="bi bi-chevron-right text-primary"></i>
                </a>
                @empty
                <div class="pro-card text-center py-5 opacity-50 bg-light border-0">
                    <i class="bi bi-journal-x fs-1 mb-3"></i>
                    <p class="mb-0">No notes yet. Start your journey by creating one!</p>
                </div>
                @endforelse
            </div>
        </div>

        <!-- Sidebar Widgets -->
        <div class="col-lg-4">
            <div class="pro-card border-0 shadow-sm mb-4" style="background: #f8fafc;">
                <h5 class="fw-bold mb-4 text-dark d-flex align-items-center gap-2">
                    <i class="bi bi-folder2-open text-warning"></i> Quick Folders
                </h5>
                <div class="d-flex flex-column gap-2">
                    @foreach($categories as $category)
                    <a href="{{ route('notes.index', ['category' => $category->id]) }}" class="d-flex justify-content-between align-items-center p-3 rounded-3 text-decoration-none transition-all hover-bg-light border bg-white">
                        <span class="text-dark fw-semibold small"><i class="bi bi-circle-fill me-2" style="font-size: 0.5rem; color: #4f46e5;"></i> {{ $category->name }}</span>
                        <span class="badge bg-primary bg-opacity-10 text-primary rounded-pill">{{ $category->notes_count }}</span>
                    </a>
                    @endforeach
                </div>
                <a href="{{ route('categories.index') }}" class="btn btn-outline-primary w-100 mt-4 rounded-pill fw-bold">Manage Library</a>
            </div>

            <div class="pro-card border-0 shadow-lg text-white" style="background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);">
                <div class="d-flex align-items-center gap-3 mb-3">
                    <div class="bg-warning text-dark rounded-circle d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                        <i class="bi bi-stars"></i>
                    </div>
                    <h5 class="fw-bold mb-0">AI Assistant</h5>
                </div>
                <p class="opacity-75 small mb-4">Deep dive into your notes with AI. Ask questions, generate mind maps, and unlock your full potential.</p>
                <button class="btn btn-warning w-100 rounded-pill fw-bold text-dark py-2">Launch AI Hub</button>
            </div>
        </div>
    </div>
</div>

<style>
    .hover-bg-light:hover { background-color: #f1f5f9 !important; border-color: #cbd5e1 !important; }
    .transition-all { transition: all 0.2s ease; }
    .object-fit-cover { object-fit: cover; }
</style>
@endsection