@extends('layouts.app')

@section('title', 'Gestão de Hashtags')

@push('styles')
<style>
.hashtag-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 1rem;
    background: var(--phoenix-primary-bg-subtle);
    color: var(--phoenix-primary);
    margin: 0.125rem;
}

.trending-badge {
    background: var(--phoenix-warning-bg-subtle);
    color: var(--phoenix-warning);
}

.platform-stat {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    background: var(--phoenix-gray-100);
    border-radius: 0.25rem;
    margin-right: 0.5rem;
}

.stat-card {
    transition: all 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
</style>
@endpush

@section('content')
<div class="row g-3 mb-4">
    <div class="col-auto">
        <h2 class="mb-0">Hashtags</h2>
    </div>
    <div class="col-auto ms-auto">
        <a href="{{ route('hashtags.groups') }}" class="btn btn-phoenix-secondary">
            <i class="fas fa-layer-group me-2"></i>Grupos de Hashtags
        </a>
    </div>
</div>

<!-- Statistics Cards -->
<div class="row g-3 mb-4">
    <div class="col-sm-6 col-md-3">
        <div class="card stat-card">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="flex-1">
                        <h6 class="mb-0">Total de Hashtags</h6>
                        <h4 class="mb-0 mt-2">{{ number_format($stats['total']) }}</h4>
                    </div>
                    <div class="ms-2">
                        <i class="fas fa-hashtag fa-2x text-primary opacity-50"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-md-3">
        <div class="card stat-card">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="flex-1">
                        <h6 class="mb-0">Em Alta</h6>
                        <h4 class="mb-0 mt-2">{{ number_format($stats['trending']) }}</h4>
                    </div>
                    <div class="ms-2">
                        <i class="fas fa-fire fa-2x text-warning opacity-50"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-md-3">
        <div class="card stat-card">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="flex-1">
                        <h6 class="mb-0">Usadas Hoje</h6>
                        <h4 class="mb-0 mt-2">{{ number_format($stats['used_today']) }}</h4>
                    </div>
                    <div class="ms-2">
                        <i class="fas fa-calendar-day fa-2x text-success opacity-50"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-md-3">
        <div class="card stat-card">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="flex-1">
                        <h6 class="mb-0">Top Platform</h6>
                        <h4 class="mb-0 mt-2">
                            @if($stats['top_platform']['platform'])
                                {{ ucfirst($stats['top_platform']['platform']) }}
                            @else
                                -
                            @endif
                        </h4>
                    </div>
                    <div class="ms-2">
                        <i class="fas fa-crown fa-2x text-info opacity-50"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Filters -->
<div class="card mb-4">
    <div class="card-body">
        <form method="GET" action="{{ route('hashtags.index') }}" class="row g-3">
            <div class="col-md-4">
                <label class="form-label">Cliente</label>
                <select name="cliente_id" class="form-select">
                    <option value="">Todos os clientes</option>
                    @foreach($clientes as $cliente)
                        <option value="{{ $cliente->id }}" {{ request('cliente_id') == $cliente->id ? 'selected' : '' }}>
                            {{ $cliente->nome }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-4">
                <label class="form-label">Buscar</label>
                <input type="text" name="search" class="form-control" placeholder="Digite a hashtag..."
                       value="{{ request('search') }}">
            </div>
            <div class="col-md-2">
                <label class="form-label">Status</label>
                <select name="trending" class="form-select">
                    <option value="">Todas</option>
                    <option value="1" {{ request('trending') == '1' ? 'selected' : '' }}>Em Alta</option>
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label">&nbsp;</label>
                <button type="submit" class="btn btn-primary w-100">
                    <i class="fas fa-search me-2"></i>Filtrar
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Hashtags Table -->
<div class="card">
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-sm fs-9 mb-0">
                <thead>
                    <tr>
                        <th>Hashtag</th>
                        <th>Cliente</th>
                        <th>Uso Total</th>
                        <th>Semana</th>
                        <th>Mês</th>
                        <th>Plataformas</th>
                        <th>Último Uso</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($hashtags as $hashtag)
                        <tr>
                            <td>
                                <span class="hashtag-badge {{ $hashtag->is_trending ? 'trending-badge' : '' }}">
                                    {{ $hashtag->hashtag }}
                                </span>
                            </td>
                            <td>
                                @if($hashtag->cliente)
                                    <span class="badge badge-phoenix badge-phoenix-primary">
                                        {{ $hashtag->cliente->nome }}
                                    </span>
                                @else
                                    <span class="text-muted">Global</span>
                                @endif
                            </td>
                            <td>{{ number_format($hashtag->usage_count) }}</td>
                            <td>{{ number_format($hashtag->weekly_count) }}</td>
                            <td>{{ number_format($hashtag->monthly_count) }}</td>
                            <td>
                                @if($hashtag->platform_stats)
                                    @foreach($hashtag->platform_stats as $platform => $stats)
                                        <span class="platform-stat">
                                            <i class="{{ App\Enums\PlataformaRedeSocial::from($platform)->icon() }}"
                                               style="color: {{ App\Enums\PlataformaRedeSocial::from($platform)->color() }}"></i>
                                            <span class="ms-1">{{ $stats['count'] }}</span>
                                        </span>
                                    @endforeach
                                @else
                                    <span class="text-muted">-</span>
                                @endif
                            </td>
                            <td>
                                @if($hashtag->last_used_at)
                                    <span title="{{ $hashtag->last_used_at->format('d/m/Y H:i') }}">
                                        {{ $hashtag->last_used_at->diffForHumans() }}
                                    </span>
                                @else
                                    <span class="text-muted">Nunca</span>
                                @endif
                            </td>
                            <td>
                                @if($hashtag->is_trending)
                                    <span class="badge bg-warning">
                                        <i class="fas fa-fire me-1"></i>Em Alta
                                    </span>
                                @else
                                    <span class="badge bg-secondary">Normal</span>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="text-center py-4">
                                <div class="text-muted">
                                    <i class="fas fa-hashtag fa-3x mb-3 d-block opacity-50"></i>
                                    Nenhuma hashtag encontrada
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($hashtags->hasPages())
            <div class="mt-3">
                {{ $hashtags->withQueryString()->links() }}
            </div>
        @endif
    </div>
</div>
@endsection

@push('scripts')
<script>
// Auto-refresh stats every 60 seconds
setInterval(function() {
    // Implement real-time updates if needed
}, 60000);
</script>
@endpush