@extends('layouts.app')

@section('title', 'Dashboard - Social Scheduler')

@section('content')
<div class="topbar">
    <h4 class="mb-0 fw-bold"><i class="bi bi-speedometer2 me-2 text-primary"></i>Dashboard</h4>
    <a href="{{ route('posts.create') }}" class="btn btn-primary">
        <i class="bi bi-plus-lg me-1"></i> New Post
    </a>
</div>

<!-- Statistics Cards -->
<div class="row g-4 mb-4">
    <div class="col-md-3">
        <div class="stat-card" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
            <i class="bi bi-file-post"></i>
            <div class="stat-value">{{ $stats['total_posts'] }}</div>
            <div class="stat-label">Total Posts</div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stat-card" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
            <i class="bi bi-calendar-event"></i>
            <div class="stat-value">{{ $stats['scheduled_posts'] }}</div>
            <div class="stat-label">Scheduled</div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stat-card" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
            <i class="bi bi-check-circle"></i>
            <div class="stat-value">{{ $stats['published_posts'] }}</div>
            <div class="stat-label">Published</div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stat-card" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
            <i class="bi bi-pencil-square"></i>
            <div class="stat-value">{{ $stats['draft_posts'] }}</div>
            <div class="stat-label">Drafts</div>
        </div>
    </div>
</div>

<div class="row g-4">
    <!-- Recent Posts -->
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <span><i class="bi bi-clock-history me-2"></i>Recent Posts</span>
                <a href="{{ route('posts.index') }}" class="btn btn-sm btn-outline-primary">View All</a>
            </div>
            <div class="card-body p-0">
                @if($recent_posts->isEmpty())
                    <div class="text-center py-5 text-muted">
                        <i class="bi bi-inbox" style="font-size: 3rem;"></i>
                        <p class="mt-2">No posts yet. Create your first post!</p>
                        <a href="{{ route('posts.create') }}" class="btn btn-primary btn-sm">Create Post</a>
                    </div>
                @else
                    <div class="table-responsive">
                        <table class="table table-hover mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th>Content</th>
                                    <th>Platforms</th>
                                    <th>Status</th>
                                    <th>Date</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($recent_posts as $post)
                                <tr>
                                    <td>
                                        <a href="{{ route('posts.show', $post) }}" class="text-decoration-none text-dark">
                                            <div class="post-content" style="max-width: 300px; max-height: 3em; overflow: hidden;">
                                                {{ Str::limit($post->content, 80) }}
                                            </div>
                                        </a>
                                    </td>
                                    <td>
                                        @foreach($post->platforms as $platform)
                                            <span class="platform-icon me-1" style="background-color: {{ $platform->platform_color }};"
                                                  title="{{ $platform->account_name }}">
                                                <i class="bi {{ $platform->platform_icon }}"></i>
                                            </span>
                                        @endforeach
                                    </td>
                                    <td>
                                        <span class="badge {{ $post->status_badge_class }}">
                                            {{ $post->status_label }}
                                        </span>
                                    </td>
                                    <td class="text-muted" style="font-size: 0.875rem;">
                                        {{ $post->created_at->diffForHumans() }}
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @endif
            </div>
        </div>
    </div>

    <!-- Recent Activity -->
    <div class="col-lg-4">
        <div class="card">
            <div class="card-header">
                <i class="bi bi-activity me-2"></i>Recent Activity
            </div>
            <div class="card-body">
                @if($recent_activity->isEmpty())
                    <div class="text-center py-4 text-muted">
                        <i class="bi bi-journal" style="font-size: 2rem;"></i>
                        <p class="mt-2 mb-0">No activity yet</p>
                    </div>
                @else
                    @foreach($recent_activity as $activity)
                    <div class="activity-item">
                        <div class="d-flex align-items-start gap-2">
                            <div class="rounded-circle bg-light d-flex align-items-center justify-content-center flex-shrink-0"
                                 style="width:32px;height:32px;">
                                <i class="bi bi-{{ match($activity->action) {
                                    'register' => 'person-plus',
                                    'login' => 'box-arrow-in-right',
                                    'logout' => 'box-arrow-right',
                                    'create_post' => 'file-plus',
                                    'update_post' => 'pencil',
                                    'delete_post' => 'trash',
                                    'create_social_account' => 'plus-circle',
                                    'post_published' => 'check-circle',
                                    default => 'bell'
                                } }}" style="font-size: 0.8rem;"></i>
                            </div>
                            <div>
                                <div style="font-size: 0.875rem;">{{ $activity->description }}</div>
                                <div class="text-muted" style="font-size: 0.75rem;">
                                    {{ $activity->created_at->diffForHumans() }}
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                @endif
            </div>
        </div>
    </div>
</div>
@endsection