@extends('eliteadmin::layouts.app')

@section('title', 'Modules')
@section('page_class', 'page-modules')

@section('content')
    <div class="page-header">
        <div>
            <h1 class="page-title">Modules</h1>
            <nav class="breadcrumb">
                <a href="{{ route('dashboard') }}" class="breadcrumb-item">Home</a>
                <span class="breadcrumb-item active">Modules</span>
            </nav>
        </div>
        <div class="page-header-actions">
            @can('viewAny', \App\Http\Controllers\Marketplace\MarketplaceController::class)
                <a href="{{ route('marketplace.index') }}" class="btn btn-outline-primary btn-sm">
                    <i class="bi bi-shop me-1"></i> Browse Marketplace
                </a>
            @endcan
        </div>
    </div>

    <div class="row g-3 mb-4">
        <div class="col-sm-6 col-xl-3">
            <x-eliteadmin::stat-card label="Installed" :value="(string) $installedCount" icon="bi-puzzle" accent="var(--accent-color)" />
        </div>
        <div class="col-sm-6 col-xl-3">
            <x-eliteadmin::stat-card label="Enabled" :value="(string) $enabledCount" icon="bi-check-circle" accent="var(--success-color)" />
        </div>
        <div class="col-sm-6 col-xl-3">
            <x-eliteadmin::stat-card label="Disabled" :value="(string) $disabledCount" icon="bi-pause-circle" accent="var(--warning-color)" />
        </div>
        <div class="col-sm-6 col-xl-3">
            <x-eliteadmin::stat-card label="Updates Available" :value="(string) $updatesCount" icon="bi-arrow-up-circle" accent="var(--info-color)" />
        </div>
    </div>

    <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
        <h5 class="mb-0">Installed Modules</h5>
        <span class="text-muted small">Click a module card to open its dashboard. Uninstalling removes module access.</span>
    </div>

    <div class="row g-4">
        @forelse ($modules as $module)
            @php
                $isInstalled = $module->status === \App\Enums\ModuleStatus::Installed;
                $entryUrl = $entryRoutes[$module->id] ?? null;
            @endphp
            <div class="col-sm-6 col-lg-4 col-xl-3">
                <div @class(['card h-100 module-card', 'module-card-clickable' => $isInstalled && $entryUrl])>
                    @if ($isInstalled && $entryUrl)
                        <a href="{{ $entryUrl }}" class="module-card-link text-decoration-none text-reset">
                            <div class="card-body d-flex flex-column pb-2">
                                <div class="d-flex align-items-start justify-content-between mb-2">
                                    <div class="module-card-icon">
                                        <i class="bi bi-puzzle"></i>
                                    </div>
                                    <span class="badge bg-success">{{ ucfirst($module->status->value) }}</span>
                                </div>

                                <h5 class="card-title mb-1">{{ $module->name }}</h5>
                                <p class="card-text text-muted small flex-grow-1 mb-0">
                                    Version {{ $module->version }}
                                    @if ($module->installed_at)
                                        · Installed {{ $module->installed_at->format('M j, Y') }}
                                    @endif
                                </p>

                                <p class="small text-primary mb-0 mt-3">
                                    <i class="bi bi-box-arrow-in-right me-1"></i> Click to open dashboard
                                </p>
                            </div>
                        </a>
                    @else
                        <div class="card-body d-flex flex-column">
                            <div class="d-flex align-items-start justify-content-between mb-2">
                                <div class="module-card-icon">
                                    <i class="bi bi-puzzle"></i>
                                </div>
                                <span @class([
                                    'badge',
                                    'bg-success' => $isInstalled,
                                    'bg-secondary' => $module->status === \App\Enums\ModuleStatus::Disabled,
                                    'bg-danger' => $module->status === \App\Enums\ModuleStatus::Failed,
                                ])>
                                    {{ ucfirst($module->status->value) }}
                                </span>
                            </div>

                            <h5 class="card-title mb-1">{{ $module->name }}</h5>
                            <p class="card-text text-muted small flex-grow-1 mb-0">
                                Version {{ $module->version }}
                                @if ($module->installed_at)
                                    · Installed {{ $module->installed_at->format('M j, Y') }}
                                @endif
                            </p>
                        </div>
                    @endif

                    <div class="card-footer bg-transparent border-top-0 pt-0">
                        <div class="d-flex gap-2">
                            <a href="{{ route('modules.show', $module) }}" class="btn btn-outline-secondary btn-sm flex-grow-1">
                                Details
                            </a>
                            @if ($isInstalled)
                                @can('uninstall', $module)
                                    <form
                                        action="{{ route('modules.destroy', $module) }}"
                                        method="POST"
                                        class="flex-grow-1"
                                        onsubmit="return confirm('Uninstall {{ $module->name }}? Users will lose access to this module until it is reinstalled.');"
                                    >
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-outline-danger btn-sm w-100" title="Uninstall">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </form>
                                @endcan
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        @empty
            <div class="col-12">
                <div class="card">
                    <div class="card-body text-center text-muted py-5">
                        <i class="bi bi-puzzle display-4 d-block mb-3"></i>
                        <p class="mb-0">
                            No modules installed.
                            @can('viewAny', \App\Http\Controllers\Marketplace\MarketplaceController::class)
                                <a href="{{ route('marketplace.index') }}">Browse the marketplace</a> to get started.
                            @endcan
                        </p>
                    </div>
                </div>
            </div>
        @endforelse
    </div>
@endsection

@push('styles')
<style>
    .module-card-clickable {
        transition: transform 0.15s ease, box-shadow 0.15s ease;
    }

    .module-card-clickable:hover {
        transform: translateY(-2px);
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.12);
    }

    .module-card-link {
        display: block;
        cursor: pointer;
    }

    .module-card-link:hover .card-title {
        color: var(--accent-color);
    }

    .module-card-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        border-radius: 0.5rem;
        background: color-mix(in srgb, var(--accent-color), transparent 88%);
        color: var(--accent-color);
    }
</style>
@endpush