@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="h3 mb-1">
                        <i class="fas fa-robot me-2 text-success"></i>
                        Profils de Scraping
                    </h1>
                    <p class="text-muted">Gérez vos profils de collecte de données</p>
                </div>
                <div>
                    <a href="{{ route('scraping-profiles.create') }}" class="btn btn-success btn-lg">
                        <i class="fas fa-plus me-2"></i>
                        Nouveau Profil
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Success Message -->
    @if (session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="fas fa-check-circle me-2"></i>
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <!-- Main Content Card -->
    <div class="row">
        <div class="col-12">
            <div class="card shadow-sm border-0">
                <div class="card-header bg-white border-bottom">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-list me-2"></i>
                            Liste des Profils
                        </h5>
                        <span class="badge bg-success">{{ $profiles->count() }} profil(s)</span>
                    </div>
                </div>

                <div class="card-body p-0">
                    @if ($profiles->isEmpty())
                        <!-- Empty State -->
                        <div class="text-center py-5">
                            <div class="mb-4">
                                <i class="fas fa-inbox fa-4x text-muted"></i>
                            </div>
                            <h4 class="text-muted mb-3">Aucun profil de scraping trouvé</h4>
                            <p class="text-muted mb-4">Commencez par créer votre premier profil de collecte de données</p>
                            <a href="{{ route('scraping-profiles.create') }}" class="btn btn-success">
                                <i class="fas fa-plus me-2"></i>
                                Créer un Profil
                            </a>
                        </div>
                    @else
                        <!-- Profiles Table -->
                        <div class="table-responsive">
                            <table class="table table-hover mb-0">
                                <thead class="table-light">
                                    <tr>
                                        <th class="border-0 ps-4">
                                            <i class="fas fa-tag me-2"></i>
                                            Nom
                                        </th>
                                        <th class="border-0">
                                            <i class="fas fa-globe me-2"></i>
                                            Plateforme
                                        </th>
                                        <th class="border-0">
                                            <i class="fas fa-link me-2"></i>
                                            URL de Connexion
                                        </th>
                                        <th class="border-0">
                                            <i class="fas fa-rss me-2"></i>
                                            URL des Posts
                                        </th>
                                        <th class="border-0">
                                            <i class="fas fa-toggle-on me-2"></i>
                                            Statut
                                        </th>
                                        <th class="border-0">
                                            <i class="fas fa-clock me-2"></i>
                                            Dernier Scraping
                                        </th>
                                        <th class="border-0">
                                            <i class="fas fa-info-circle me-2"></i>
                                            Statut d'exécution
                                        </th>
                                        <th class="border-0">Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($profiles as $profile)
                                        <tr>
                                            <td class="ps-4">
                                                <div class="d-flex align-items-center">
                                                    <div class="avatar-sm bg-success rounded me-3">
                                                        <i class="fas fa-user-circle text-white"></i>
                                                    </div>
                                                    <div>
                                                        <h6 class="mb-0">{{ $profile->name }}</h6>
                                                    </div>
                                                </div>
                                            </td>
                                            <td>
                                                <span class="badge bg-secondary">{{ parse_url($profile->website_url, PHP_URL_HOST) }}</span>
                                            </td>
                                            <td>
                                                <a href="{{ $profile->login_page_url }}" target="_blank" class="text-decoration-none">
                                                    <i class="fas fa-external-link-alt me-1"></i>
                                                    {{ Str::limit($profile->login_page_url, 30) }}
                                                </a>
                                            </td>
                                            <td>
                                                <a href="{{ $profile->posts_page_url }}" target="_blank" class="text-decoration-none">
                                                    <i class="fas fa-external-link-alt me-1"></i>
                                                    {{ Str::limit($profile->posts_page_url, 30) }}
                                                </a>
                                            </td>
                                            <td>
                                                @if($profile->is_active)
                                                    <span class="badge bg-success">
                                                        <i class="fas fa-check me-1"></i>
                                                        Actif
                                                    </span>
                                                @else
                                                    <span class="badge bg-danger">
                                                        <i class="fas fa-times me-1"></i>
                                                        Inactif
                                                    </span>
                                                @endif
                                            </td>
                                            <td>
                                                @if($profile->last_scraped_at)
                                                    <span class="text-muted">
                                                        <i class="fas fa-calendar me-1"></i>
                                                        {{ $profile->last_scraped_at->diffForHumans() }}
                                                    </span>
                                                @else
                                                    <span class="text-muted">
                                                        <i class="fas fa-minus me-1"></i>
                                                        Jamais
                                                    </span>
                                                @endif
                                            </td>
                                            <td>
                                                @if($profile->latestExecution)
                                                    @php
                                                        $status = $profile->latestExecution->status;
                                                        $badgeClass = match($status) {
                                                            \App\Enums\ScrapingExecutionStatus::Completed => 'bg-success',
                                                            \App\Enums\ScrapingExecutionStatus::Pending => 'bg-info',
                                                            \App\Enums\ScrapingExecutionStatus::Failed => 'bg-danger',
                                                            default => 'bg-secondary',
                                                        };
                                                    @endphp
                                                    <span class="badge {{ $badgeClass }}">
                                                        {{ $status->label() }}
                                                    </span>
                                                @else
                                                    <span class="badge bg-secondary">N/A</span>
                                                @endif
                                            </td>
                                            <td>
                                                <div class="dropdown">
                                                    <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
                                                        <i class="fas fa-ellipsis-v"></i>
                                                    </button>
                                                    <ul class="dropdown-menu">
                                                        <li><a class="dropdown-item" href="{{ route('scraping-profiles.show', $profile) }}"><i class="fas fa-eye me-2"></i>Voir</a></li>
                                                        <li><a class="dropdown-item text-success" href="{{ route('scraping-profiles.edit', $profile) }}"><i class="fas fa-edit me-2"></i>Modifier</a></li>
                                                        <li>
                                                            <a href="{{ route('scraping-profiles.run', $profile) }}" class="dropdown-item">
                                                                <i class="fas fa-play me-2"></i>Lancer
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="#" class="dropdown-item text-primary" 
                                                               onclick="event.preventDefault(); 
                                                                        if(confirm('Êtes-vous sûr de vouloir dupliquer ce profil ?')) { 
                                                                            document.getElementById('duplicate-form-{{ $profile->id }}').submit(); 
                                                                        }">
                                                                <i class="fas fa-copy me-2"></i>Dupliquer
                                                            </a>
                                                            <form id="duplicate-form-{{ $profile->id }}" action="{{ route('scraping-profiles.duplicate', $profile) }}" method="POST" style="display: none;">
                                                                @csrf
                                                            </form>
                                                        </li>
                                                        <li><hr class="dropdown-divider"></li>
                                                        <li>
                                                            <form action="{{ route('scraping-profiles.destroy', $profile) }}" method="POST" onsubmit="return confirm('Êtes-vous sûr de vouloir supprimer ce profil ?');">
                                                                @csrf
                                                                @method('DELETE')
                                                                <button type="submit" class="dropdown-item text-danger"><i class="fas fa-trash me-2"></i>Supprimer</button>
                                                            </form>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .avatar-sm {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
    }
    
    .card {
        border-radius: 0.75rem;
    }
    
    .btn-success {
        border-radius: 0.5rem;
        font-weight: 500;
    }
    
    .btn-success:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 15px rgba(40, 167, 69, 0.4);
    }
    
    .table th {
        font-weight: 600;
        color: #495057;
        font-size: 0.875rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }
    
    .table td {
        vertical-align: middle;
        padding: 1rem 0.75rem;
    }
    
    .badge {
        font-size: 0.75rem;
        font-weight: 500;
        padding: 0.5rem 0.75rem;
    }
    
    .alert {
        border-radius: 0.75rem;
        border: none;
    }
</style>
@endsection