@extends('layouts.app')

@section('title', 'Admin Dashboard')
@section('page-title', 'Dashboard')
@section('page-subtitle', 'Overview of all companies and system activity')

@section('page-actions')
    <a href="/admin/companies/create" class="btn-primary">
        <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
        Add Company
    </a>
@endsection

@section('content')
    {{-- Stats Row --}}
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6 animate-fade-up">
        {{-- Total Companies --}}
        <div class="stat-card">
            <div class="stat-icon bg-primary-100 text-primary-600">
                <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
            </div>
            <div class="stat-value">{{ $stats['total_companies'] }}</div>
            <div class="stat-label">Total Companies</div>
        </div>

        {{-- Active Companies --}}
        <div class="stat-card">
            <div class="stat-icon bg-success-100 text-success-600">
                <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
            </div>
            <div class="stat-value">{{ $stats['active_companies'] }}</div>
            <div class="stat-label">Active Companies</div>
        </div>

        {{-- Total Users --}}
        <div class="stat-card">
            <div class="stat-icon bg-accent-500/10 text-accent-600">
                <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
            </div>
            <div class="stat-value">{{ $stats['total_users'] }}</div>
            <div class="stat-label">Total Users</div>
        </div>

        {{-- Onboarding --}}
        <div class="stat-card">
            <div class="stat-icon bg-warning-100 text-warning-600">
                <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
            </div>
            <div class="stat-value">{{ $stats['onboarding'] }}</div>
            <div class="stat-label">Onboarding</div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-4" style="animation-delay: 0.1s;">

        {{-- Companies List --}}
        <div class="lg:col-span-2 card-static animate-fade-up">
            <div class="card-header">
                <h3 class="card-header-title">Companies</h3>
                <a href="/admin/companies" class="btn-ghost">View all &rarr;</a>
            </div>
            <div class="card-body">
                @if($companies->count() > 0)
                    <div class="space-y-3">
                        @foreach($companies->take(5) as $company)
                        <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                            <div class="flex items-center gap-3">
                                @if($company->logo)
                                    <img src="{{ $company->logo_url }}" class="w-10 h-10 rounded-lg object-cover" alt="{{ $company->name }}">
                                @else
                                    <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-primary-600 to-accent-500 flex items-center justify-center text-white font-display font-semibold text-sm">
                                        {{ $company->initials }}
                                    </div>
                                @endif
                                <div>
                                    <p class="text-sm font-medium text-gray-800">{{ $company->name }}</p>
                                    <p class="text-xxs text-gray-400">{{ $company->users_count }} users &middot; {{ $company->modules_count }} modules</p>
                                </div>
                            </div>
                            <span class="badge badge-{{ $company->status }}">
                                <span class="badge-dot"></span>
                                {{ ucfirst($company->status) }}
                            </span>
                        </div>
                        @endforeach
                    </div>
                @else
                    @include('layouts.components.empty-state', [
                        'icon' => 'box',
                        'title' => 'No companies yet',
                        'message' => 'Create your first client company to get started.',
                        'actionUrl' => '/admin/companies/create',
                        'actionLabel' => 'Add Company',
                    ])
                @endif
            </div>
        </div>

        {{-- Recent Activity --}}
        <div class="card-static animate-fade-up" style="animation-delay: 0.15s;">
            <div class="card-header">
                <h3 class="card-header-title">Recent Activity</h3>
            </div>
            <div class="card-body">
                @if($recentActivity->count() > 0)
                    <div class="space-y-3">
                        @foreach($recentActivity as $activity)
                        <div class="flex items-start gap-3">
                            <div class="w-2 h-2 rounded-full bg-primary-600 mt-1.5 flex-shrink-0"></div>
                            <div class="min-w-0">
                                <p class="text-sm text-gray-700 truncate">{{ $activity->description }}</p>
                                <p class="text-xxs text-gray-400">{{ $activity->created_at->diffForHumans() }}</p>
                            </div>
                        </div>
                        @endforeach
                    </div>
                @else
                    <p class="text-sm text-gray-400 text-center py-8">No activity yet</p>
                @endif
            </div>
        </div>
    </div>
@endsection