@extends('layouts.app')
@section('title', 'Admin Panel')
@section('breadcrumb')
    <span style="font-weight:600;color:var(--text-primary);">Admin Panel</span>
@endsection

@section('content')
    <div class="page-header">
        <h1>⚙️ Admin Dashboard</h1>
    </div>

    {{-- System Stats --}}
    <div class="grid grid-4 mb-6">
        <div class="stat-card">
            <div class="stat-card-header">
                <div class="stat-card-icon" style="background:rgba(99,102,241,0.15);color:var(--accent-primary);">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:20px;height:20px;"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
                </div>
            </div>
            <div class="stat-card-value" style="color:var(--accent-primary);">{{ $stats['users'] }}</div>
            <div class="stat-card-label">Total Users <span class="text-xs text-muted">({{ $stats['active_users'] }} active)</span></div>
        </div>
        <div class="stat-card">
            <div class="stat-card-header">
                <div class="stat-card-icon" style="background:rgba(236,72,153,0.15);color:var(--accent-pink);">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:20px;height:20px;"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path></svg>
                </div>
            </div>
            <div class="stat-card-value" style="color:var(--accent-pink);">{{ $stats['projects'] }}</div>
            <div class="stat-card-label">Projects</div>
        </div>
        <div class="stat-card">
            <div class="stat-card-header">
                <div class="stat-card-icon" style="background:rgba(34,197,94,0.15);color:var(--accent-green);">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:20px;height:20px;"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
                </div>
            </div>
            <div class="stat-card-value" style="color:var(--accent-green);">{{ $stats['completed_tasks'] }}<span class="text-sm text-muted">/{{ $stats['tasks'] }}</span></div>
            <div class="stat-card-label">Tasks Completed</div>
        </div>
        <div class="stat-card">
            <div class="stat-card-header">
                <div class="stat-card-icon" style="background:rgba(249,115,22,0.15);color:var(--accent-orange);">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:20px;height:20px;"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle></svg>
                </div>
            </div>
            <div class="stat-card-value" style="color:var(--accent-orange);">{{ $stats['teams'] }}</div>
            <div class="stat-card-label">Teams <span class="text-xs text-muted">({{ $stats['tags'] }} tags)</span></div>
        </div>
    </div>

    {{-- Quick Actions --}}
    <div class="grid grid-4 mb-6">
        <a href="{{ route('admin.users') }}" class="card" style="text-decoration:none;padding:20px;text-align:center;transition:transform 0.15s,box-shadow 0.15s;">
            <div style="font-size:1.8rem;margin-bottom:8px;">👥</div>
            <div class="font-semibold" style="color:var(--text-primary);">User Management</div>
            <div class="text-xs text-muted">{{ $stats['users'] }} users</div>
        </a>
        <a href="{{ route('admin.projects') }}" class="card" style="text-decoration:none;padding:20px;text-align:center;transition:transform 0.15s,box-shadow 0.15s;">
            <div style="font-size:1.8rem;margin-bottom:8px;">📁</div>
            <div class="font-semibold" style="color:var(--text-primary);">Projects</div>
            <div class="text-xs text-muted">{{ $stats['projects'] }} projects</div>
        </a>
        <a href="{{ route('admin.tags') }}" class="card" style="text-decoration:none;padding:20px;text-align:center;transition:transform 0.15s,box-shadow 0.15s;">
            <div style="font-size:1.8rem;margin-bottom:8px;">🏷️</div>
            <div class="font-semibold" style="color:var(--text-primary);">Tags</div>
            <div class="text-xs text-muted">{{ $stats['tags'] }} tags</div>
        </a>
        <a href="{{ route('admin.settings') }}" class="card" style="text-decoration:none;padding:20px;text-align:center;transition:transform 0.15s,box-shadow 0.15s;">
            <div style="font-size:1.8rem;margin-bottom:8px;">🎨</div>
            <div class="font-semibold" style="color:var(--text-primary);">Branding</div>
            <div class="text-xs text-muted">Logo & Colors</div>
        </a>
    </div>

    <div style="display:grid;grid-template-columns:1fr 1fr;gap:24px;">
        {{-- Companies --}}
        <div class="card">
            <div class="card-header">
                <span class="card-header-title">Recent Users</span>
                <a href="{{ route('admin.users') }}" class="btn btn-ghost btn-sm">View All</a>
            </div>
            <div>
                @foreach($recentUsers as $user)
                    <div class="task-item">
                        <div class="avatar avatar-sm">{{ $user->initials }}</div>
                        <div class="task-info">
                            <div class="task-title">{{ $user->name }}</div>
                            <div class="text-xs text-muted">{{ $user->email }}</div>
                        </div>
                        <span class="badge badge-{{ $user->is_active ? 'success' : 'danger' }}">{{ $user->is_active ? 'Active' : 'Inactive' }}</span>
                    </div>
                @endforeach
            </div>
        </div>

        {{-- Recent Activity --}}
        <div class="card">
            <div class="card-header">
                <span class="card-header-title">Recent Activity</span>
                <a href="{{ route('admin.activity-log') }}" class="btn btn-ghost btn-sm">View All</a>
            </div>
            <div class="card-body" style="padding:12px 20px;">
                @if($recentActivities->count())
                <div class="activity-timeline activity-timeline-compact">
                    @foreach($recentActivities as $activity)
                        <div class="activity-timeline-item">
                            <div class="activity-timeline-connector">
                                <div class="activity-timeline-dot" style="background:{{ $activity->color }}1a;color:{{ $activity->color }};border-color:{{ $activity->color }}33;">
                                    {!! $activity->svg_icon !!}
                                </div>
                                @if(!$loop->last)
                                    <div class="activity-timeline-line"></div>
                                @endif
                            </div>
                            <div class="activity-timeline-content">
                                <div class="activity-timeline-text">
                                    <strong>{{ $activity->causer->name ?? 'System' }}</strong>
                                    <span>{{ Str::limit($activity->description, 60) }}</span>
                                </div>
                                <div class="activity-timeline-time">{{ $activity->created_at->diffForHumans() }}</div>
                            </div>
                        </div>
                    @endforeach
                </div>
                @else
                    <div class="text-center text-muted" style="padding:24px;">No activity yet.</div>
                @endif
            </div>
        </div>
    </div>
@endsection