@extends('layouts.app')

@section('content')
<div class="dashboard-container">
    <!-- Header do Dashboard -->
    <div class="dashboard-header">
        <h1 class="dashboard-title">Dashboard</h1>
        <p class="dashboard-subtitle">Links de afiliados gerados</p>
    </div>

    <!-- Cards de Estatísticas -->
    <div class="stats-grid">
        <div class="stat-card total">
            <div class="stat-icon">
                <i class="bi bi-link-45deg"></i>
            </div>
            <div class="stat-content">
                <h3 class="stat-number">{{ $stats['total'] }}</h3>
                <p class="stat-label">Total de Links</p>
            </div>
        </div>

        <div class="stat-card amazon">
            <div class="stat-icon">
                <i class="bi bi-amazon"></i>
            </div>
            <div class="stat-content">
                <h3 class="stat-number">{{ $stats['amazon'] }}</h3>
                <p class="stat-label">Amazon</p>
            </div>
        </div>

        <div class="stat-card mercadolivre">
            <div class="stat-icon">
                <i class="bi bi-cart"></i>
            </div>
            <div class="stat-content">
                <h3 class="stat-number">{{ $stats['mercadolivre'] }}</h3>
                <p class="stat-label">Mercado Livre</p>
            </div>
        </div>

        <div class="stat-card shopee">
            <div class="stat-icon">
                <i class="bi bi-shop"></i>
            </div>
            <div class="stat-content">
                <h3 class="stat-number">{{ $stats['shopee'] }}</h3>
                <p class="stat-label">Shopee</p>
            </div>
        </div>

        <div class="stat-card today">
            <div class="stat-icon">
                <i class="bi bi-calendar-check"></i>
            </div>
            <div class="stat-content">
                <h3 class="stat-number">{{ $stats['today'] }}</h3>
                <p class="stat-label">Hoje</p>
            </div>
        </div>
    </div>

    <!-- Pipeline de Monitoramento (Etapa 5) -->
    @canany(['monitoring.offers.view', 'monitoring.sources.view', 'monitoring.targets.view'])
    <div class="mt-4 mb-2 pipeline-section">
        <h5 class="fw-semibold text-muted mb-2">
            <i class="bi bi-broadcast-pin me-2"></i>Pipeline de Monitoramento
            @if(!$pipeline['auto_enabled'])
                <span class="badge bg-warning text-dark ms-2" style="font-size:0.7rem">Automático desligado</span>
            @else
                <span class="badge bg-success ms-2" style="font-size:0.7rem">Automático ativo</span>
            @endif
        </h5>
        <p class="text-muted small mb-3">Infraestrutura, ofertas por plataforma e publicação</p>

        {{-- Linha 1: infra + fila --}}
        <div class="stats-grid stats-grid-pipeline mb-3">
            <a href="{{ route('admin.monitoring.sources.index') }}" class="text-decoration-none stat-card-link">
                <div class="stat-card pipeline-infra">
                    <div class="stat-icon">
                        <i class="bi bi-rss"></i>
                    </div>
                    <div class="stat-content">
                        <h3 class="stat-number">{{ $pipeline['sources_active'] }}</h3>
                        <p class="stat-label">Fontes ativas</p>
                    </div>
                </div>
            </a>
            <a href="{{ route('admin.monitoring.targets.index') }}" class="text-decoration-none stat-card-link">
                <div class="stat-card pipeline-infra">
                    <div class="stat-icon">
                        <i class="bi bi-send"></i>
                    </div>
                    <div class="stat-content">
                        <h3 class="stat-number">{{ $pipeline['targets_active'] }}</h3>
                        <p class="stat-label">Destinos ativos</p>
                    </div>
                </div>
            </a>
            <a href="{{ route('admin.monitoring.offers.index', ['status' => 'ready']) }}" class="text-decoration-none stat-card-link">
                <div class="stat-card pipeline-ready">
                    <div class="stat-icon">
                        <i class="bi bi-hourglass-split"></i>
                    </div>
                    <div class="stat-content">
                        <h3 class="stat-number">{{ $pipeline['offers_ready'] }}</h3>
                        <p class="stat-label">Prontas</p>
                    </div>
                </div>
            </a>
        </div>

        {{-- Linha 2: ofertas por plataforma (ML / AM / Shopee) --}}
        <div class="stats-grid stats-grid-pipeline mb-3">
            <a href="{{ route('admin.monitoring.offers.index', ['platform' => 'mercadolivre']) }}" class="text-decoration-none stat-card-link">
                <div class="stat-card mercadolivre">
                    <div class="stat-icon">
                        <i class="bi bi-cart"></i>
                    </div>
                    <div class="stat-content">
                        <h3 class="stat-number">{{ $pipeline['offers_mercadolivre'] }}</h3>
                        <p class="stat-label">Ofertas ML</p>
                    </div>
                </div>
            </a>
            <a href="{{ route('admin.monitoring.offers.index', ['platform' => 'amazon']) }}" class="text-decoration-none stat-card-link">
                <div class="stat-card amazon">
                    <div class="stat-icon">
                        <i class="bi bi-amazon"></i>
                    </div>
                    <div class="stat-content">
                        <h3 class="stat-number">{{ $pipeline['offers_amazon'] }}</h3>
                        <p class="stat-label">Ofertas Amazon</p>
                    </div>
                </div>
            </a>
            <a href="{{ route('admin.monitoring.offers.index', ['platform' => 'shopee']) }}" class="text-decoration-none stat-card-link">
                <div class="stat-card shopee">
                    <div class="stat-icon">
                        <i class="bi bi-shop"></i>
                    </div>
                    <div class="stat-content">
                        <h3 class="stat-number">{{ $pipeline['offers_shopee'] }}</h3>
                        <p class="stat-label">Ofertas Shopee</p>
                    </div>
                </div>
            </a>
        </div>

        {{-- Linha 3: publicação e falhas --}}
        <div class="stats-grid stats-grid-pipeline mb-4">
            <a href="{{ route('admin.monitoring.offers.index', ['status' => 'published']) }}" class="text-decoration-none stat-card-link">
                <div class="stat-card pipeline-publish-today">
                    <div class="stat-icon">
                        <i class="bi bi-calendar-day"></i>
                    </div>
                    <div class="stat-content">
                        <h3 class="stat-number">{{ $pipeline['offers_published_today'] }}</h3>
                        <p class="stat-label">Publicadas hoje</p>
                    </div>
                </div>
            </a>
            <a href="{{ route('admin.monitoring.offers.index', ['status' => 'published']) }}" class="text-decoration-none stat-card-link">
                <div class="stat-card pipeline-publish-total">
                    <div class="stat-icon">
                        <i class="bi bi-check2-all"></i>
                    </div>
                    <div class="stat-content">
                        <h3 class="stat-number">{{ $pipeline['offers_published_total'] }}</h3>
                        <p class="stat-label">Publicadas (total)</p>
                    </div>
                </div>
            </a>
            <a href="{{ route('admin.monitoring.offers.index', ['status' => 'fetch_failed']) }}" class="text-decoration-none stat-card-link">
                <div class="stat-card pipeline-failed">
                    <div class="stat-icon">
                        <i class="bi bi-cloud-lightning-rain"></i>
                    </div>
                    <div class="stat-content">
                        <h3 class="stat-number">{{ $pipeline['offers_failed'] }}</h3>
                        <p class="stat-label">Falha scraping</p>
                    </div>
                </div>
            </a>
        </div>
    </div>

    {{-- Últimas publicações --}}
    @if($recentPublications->isNotEmpty())
    <div class="card shadow-sm border-0 mb-4">
        <div class="card-header bg-white d-flex justify-content-between align-items-center">
            <span class="fw-semibold"><i class="bi bi-clock-history me-2"></i>Últimas publicações</span>
            <a href="{{ route('admin.monitoring.offers.index', ['status' => 'published']) }}" class="btn btn-sm btn-outline-secondary">
                Ver todas
            </a>
        </div>
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0 small">
                <thead class="table-light">
                    <tr>
                        <th>Título</th>
                        <th>Canal</th>
                        <th>Publicado</th>
                    </tr>
                </thead>
                <tbody>
                @foreach($recentPublications as $log)
                    <tr>
                        <td>
                            <a href="{{ route('admin.monitoring.offers.show', $log->offer) }}" class="text-decoration-none">
                                {{ Str::limit($log->offer?->product_title ?? '#' . $log->processed_offer_id, 60) }}
                            </a>
                        </td>
                        <td><code>{{ $log->target?->channel_identifier ?? '—' }}</code></td>
                        <td class="text-muted">{{ $log->created_at?->diffForHumans() }}</td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>
    </div>
    @endif
    @endcanany

    <!-- Filtros -->
    <div class="filters-card">
        <form method="GET" action="{{ route('admin.dashboard') }}" class="filters-form">
            <div class="filter-group">
                <label for="platform">Plataforma</label>
                <select name="platform" id="platform" class="form-control">
                    <option value="">Todas</option>
                    <option value="amazon" {{ request('platform') == 'amazon' ? 'selected' : '' }}>Amazon</option>
                    <option value="mercadolivre" {{ request('platform') == 'mercadolivre' ? 'selected' : '' }}>Mercado Livre</option>
                    <option value="shopee" {{ request('platform') == 'shopee' ? 'selected' : '' }}>Shopee</option>
                </select>
            </div>

            <div class="filter-group">
                <label for="date_from">Data Inicial</label>
                <input type="date" name="date_from" id="date_from" class="form-control" value="{{ request('date_from') }}">
            </div>

            <div class="filter-group">
                <label for="date_to">Data Final</label>
                <input type="date" name="date_to" id="date_to" class="form-control" value="{{ request('date_to') }}">
        </div>

            <div class="filter-actions">
                <button type="submit" class="btn btn-primary">
                    <i class="bi bi-funnel"></i> Filtrar
                </button>
                <a href="{{ route('admin.dashboard') }}" class="btn btn-secondary">
                    <i class="bi bi-x-circle"></i> Limpar
                </a>
            </div>
        </form>
                            </div>

    <!-- Tabela de Links -->
    <div class="links-card">
        <div class="table-responsive">
            <table class="table">
                <thead>
                    <tr>
                        <th>Produto</th>
                        <th>Preço</th>
                        <th>Plataforma</th>
                        <th>Data</th>
                        <th>Link</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($links as $link)
                    <tr>
                        <td>
                            <div class="product-name">{{ $link->product_name }}</div>
                        </td>
                        <td>
                            @if($link->price)
                                <span class="price">R$ {{ number_format($link->price, 2, ',', '.') }}</span>
                @else
                                <span class="text-muted">-</span>
                            @endif
                        </td>
                        <td>
                            <span class="platform-badge platform-{{ $link->platform }}">
                                @if($link->platform == 'amazon')
                                    <i class="bi bi-amazon"></i>
                                @elseif($link->platform == 'mercadolivre')
                                    <i class="bi bi-cart"></i>
                                @elseif($link->platform == 'shopee')
                                    <i class="bi bi-shop"></i>
                @endif
                                {{ $link->platform_name }}
                            </span>
                        </td>
                        <td>
                            <div class="date">{{ $link->created_at->format('d/m/Y') }}</div>
                            <div class="time">{{ $link->created_at->format('H:i') }}</div>
                        </td>
                        <td>
                            <a href="{{ $link->link }}" target="_blank" class="btn btn-sm btn-outline-primary" title="Abrir link">
                                <i class="bi bi-box-arrow-up-right"></i>
                            </a>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="5" class="text-center py-5">
                            <i class="bi bi-inbox" style="font-size: 3rem; color: var(--text-muted);"></i>
                            <p class="text-muted mt-3">Nenhum link gerado ainda</p>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <!-- Paginação -->
        @if($links->hasPages())
        <div class="pagination-wrapper">
            {{ $links->links() }}
        </div>
        @endif
    </div>
</div>

<style>
    .dashboard-container {
        padding: 24px;
    }

    .dashboard-header {
        margin-bottom: 32px;
    }

    .dashboard-title {
        font-size: 32px;
        font-weight: 700;
        color: var(--text-primary);
        margin: 0 0 8px 0;
    }

    .dashboard-subtitle {
        font-size: 16px;
        color: var(--text-secondary);
        margin: 0;
    }

    /* Stats Grid */
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 20px;
        margin-bottom: 32px;
    }

    .stat-card {
        background: white;
        border-radius: 12px;
        padding: 24px;
        display: flex;
        align-items: center;
        gap: 16px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        transition: transform 0.2s;
    }

    .stat-card:hover {
        transform: translateY(-2px);
    }

    .stat-icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        color: white;
    }

    .stat-card.total .stat-icon { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
    .stat-card.amazon .stat-icon { background: linear-gradient(135deg, #FF9900 0%, #FFB84D 100%); }
    .stat-card.mercadolivre .stat-icon { background: linear-gradient(135deg, #FFE600 0%, #FFF066 100%); color: #333; }
    .stat-card.shopee .stat-icon { background: linear-gradient(135deg, #EE4D2D 0%, #FF6945 100%); }
    .stat-card.today .stat-icon { background: linear-gradient(135deg, #00d2ff 0%, #3a7bd5 100%); }

    /* Pipeline: mesmo padrão visual, 3 colunas no desktop */
    .stats-grid-pipeline {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
        margin-bottom: 0;
    }

    @media (max-width: 992px) {
        .stats-grid-pipeline {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 576px) {
        .stats-grid-pipeline {
            grid-template-columns: 1fr;
        }
    }

    a.stat-card-link {
        display: block;
        color: inherit;
    }

    a.stat-card-link:hover .stat-card {
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    }

    .stat-card.pipeline-infra .stat-icon { background: linear-gradient(135deg, #0dcaf0 0%, #0aa2c0 100%); }
    .stat-card.pipeline-ready .stat-icon { background: linear-gradient(135deg, #0d6efd 0%, #6ea8fe 100%); }
    .stat-card.pipeline-publish-today .stat-icon { background: linear-gradient(135deg, #198754 0%, #20c997 100%); }
    .stat-card.pipeline-publish-total .stat-icon { background: linear-gradient(135deg, #157347 0%, #479f76 100%); }
    .stat-card.pipeline-failed .stat-icon { background: linear-gradient(135deg, #dc3545 0%, #e35d6a 100%); }

    .stat-content {
        flex: 1;
    }

    .stat-number {
        font-size: 28px;
        font-weight: 700;
        color: var(--text-primary);
        margin: 0;
    }

    .stat-label {
        font-size: 14px;
        color: var(--text-secondary);
        margin: 0;
    }

    /* Filters */
    .filters-card {
        background: white;
        border-radius: 12px;
        padding: 24px;
        margin-bottom: 24px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

    .filters-form {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 16px;
        align-items: end;
    }

    .filter-group {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .filter-group label {
        font-size: 14px;
        font-weight: 500;
        color: var(--text-primary);
    }

    .filter-actions {
        display: flex;
        gap: 8px;
    }

    /* Links Table */
    .links-card {
        background: white;
        border-radius: 12px;
        padding: 24px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

    .table {
        width: 100%;
        margin: 0;
    }

    .table th {
        font-size: 14px;
        font-weight: 600;
        color: var(--text-secondary);
        padding: 12px 16px;
        border-bottom: 2px solid var(--border-color);
    }

    .table td {
        padding: 16px;
        border-bottom: 1px solid var(--border-subtle);
        vertical-align: middle;
    }

    .product-name {
        font-size: 14px;
        font-weight: 500;
        color: var(--text-primary);
        max-width: 400px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .price {
        font-size: 16px;
        font-weight: 600;
        color: #10b981;
    }

    .platform-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        border-radius: 6px;
        font-size: 12px;
        font-weight: 500;
    }

    .platform-badge.platform-amazon {
        background: #FFF3E0;
        color: #E65100;
    }

    .platform-badge.platform-mercadolivre {
        background: #FFFDE7;
        color: #F57F17;
    }

    .platform-badge.platform-shopee {
        background: #FFE0E0;
        color: #D32F2F;
    }

    .date {
        font-size: 14px;
        color: var(--text-primary);
        font-weight: 500;
    }

    .time {
        font-size: 12px;
        color: var(--text-muted);
    }

    .btn {
        padding: 8px 16px;
        border-radius: 8px;
        border: none;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .btn-primary {
        background: var(--primary-color);
        color: white;
    }

    .btn-primary:hover {
        background: var(--primary-hover);
    }

    .btn-secondary {
        background: #6c757d;
        color: white;
    }

    .btn-secondary:hover {
        background: #5a6268;
    }

    .btn-sm {
        padding: 6px 12px;
        font-size: 12px;
    }

    .btn-outline-primary {
        background: transparent;
        border: 1px solid var(--primary-color);
        color: var(--primary-color);
    }

    .btn-outline-primary:hover {
        background: var(--primary-color);
        color: white;
    }

    .pagination-wrapper {
        margin-top: 24px;
        display: flex;
        justify-content: center;
    }

    @media (max-width: 768px) {
        .filters-form {
            grid-template-columns: 1fr;
        }

        .filter-actions {
            grid-column: 1;
        }

        .table-responsive {
            overflow-x: auto;
        }
    }
</style>
@endsection