@extends('layouts.app')

@section('title', 'Dashboard')

@section('content')
    <div class="page-header">
        <h1 class="page-title">Dashboard</h1>
    </div>

    {{-- Filtro global: período + hotel --}}
    <form method="GET" class="dash-filters" id="dash-filter-form">
        <label>Período
            <select name="period" onchange="document.getElementById('custom-range').style.display = this.value === 'custom' ? 'flex' : 'none'; this.form.submit();">
                <option value="today" @selected($svc->period === 'today')>Hoje</option>
                <option value="7d" @selected($svc->period === '7d')>7 dias</option>
                <option value="30d" @selected($svc->period === '30d')>30 dias</option>
                <option value="90d" @selected($svc->period === '90d')>90 dias</option>
                <option value="year" @selected($svc->period === 'year')>Este ano</option>
                <option value="custom" @selected($svc->period === 'custom')>Período personalizado</option>
            </select>
        </label>
        <div id="custom-range" style="display:{{ $svc->period === 'custom' ? 'flex' : 'none' }};gap:0.5rem;align-items:center;">
            <input type="date" name="date_from" value="{{ request('date_from') }}">
            <span class="muted">até</span>
            <input type="date" name="date_to" value="{{ request('date_to') }}">
            <button type="submit" class="secondary">Aplicar</button>
        </div>

        @if ($svc->accessibleHotels->count() > 1)
            <label>Hotel
                <select name="hotel_id" onchange="this.form.submit();">
                    <option value="">Todos os hotéis autorizados</option>
                    @foreach ($svc->accessibleHotels as $h)
                        <option value="{{ $h->id }}" @selected($svc->selectedHotelId == $h->id)>{{ $h->name }}</option>
                    @endforeach
                </select>
            </label>
        @elseif ($svc->accessibleHotels->count() === 1)
            <span class="dash-hotel-focus">{{ $svc->accessibleHotels->first()->name }}</span>
        @endif
    </form>

    {{-- KPI cards --}}
    <div class="kpi-grid">
        <div class="kpi-card" style="--kpi-accent:var(--color-primary);--kpi-accent-soft:var(--color-primary-soft);">
            <div class="kpi-top"><span class="kpi-icon"><x-icon name="users" /></span></div>
            <div class="kpi-value">{{ $kpis['partners']['value'] }}</div>
            <div class="kpi-label">Parceiros Ativos</div>
            @include('admin.dashboard._delta', ['delta' => $kpis['partners']['delta']])
        </div>

        <div class="kpi-card" style="--kpi-accent:var(--color-teal);--kpi-accent-soft:var(--color-teal-soft);">
            <div class="kpi-top"><span class="kpi-icon"><x-icon name="archive" /></span></div>
            <div class="kpi-value">{{ $kpis['downloads']['value'] }}</div>
            <div class="kpi-label">Downloads</div>
            @include('admin.dashboard._delta', ['delta' => $kpis['downloads']['delta']])
        </div>

        <div class="kpi-card" style="--kpi-accent:var(--color-purple);--kpi-accent-soft:var(--color-purple-soft);">
            <div class="kpi-top"><span class="kpi-icon"><x-icon name="eye" /></span></div>
            <div class="kpi-value">{{ $kpis['views']['value'] }}</div>
            <div class="kpi-label">Visualizações</div>
            @include('admin.dashboard._delta', ['delta' => $kpis['views']['delta']])
            <div class="kpi-note">{{ $kpis['views']['note'] }}</div>
        </div>

        <div class="kpi-card" style="--kpi-accent:var(--color-coral);--kpi-accent-soft:var(--color-coral-soft);">
            <div class="kpi-top"><span class="kpi-icon"><x-icon name="clipboard" /></span></div>
            <div class="kpi-value">{{ $kpis['salesBoxOpenRate']['value'] !== null ? $kpis['salesBoxOpenRate']['value'].'%' : '—' }}</div>
            <div class="kpi-label">Sales Box — Taxa de Abertura</div>
            <div class="kpi-note">{{ $kpis['salesBoxOpenRate']['opened'] }} de {{ $kpis['salesBoxOpenRate']['total'] }} links acedidos</div>
        </div>

        <div class="kpi-card" style="--kpi-accent:var(--color-gold);--kpi-accent-soft:var(--color-gold-soft);">
            <div class="kpi-top"><span class="kpi-icon"><x-icon name="mail" /></span></div>
            <div class="kpi-value">{{ $kpis['activeCampaigns']['value'] }}</div>
            <div class="kpi-label">Campanhas Ativas</div>
        </div>

        <div class="kpi-card" style="--kpi-accent:var(--color-success);--kpi-accent-soft:var(--color-success-soft);">
            <div class="kpi-top"><span class="kpi-icon"><x-icon name="hard-drive" /></span></div>
            @php $st = $kpis['storage']; @endphp
            <div class="kpi-value" style="font-size:1.3rem;">{{ fmt_size($st['usedBytes']) }} <span class="muted" style="font-size:0.85rem;font-weight:500;">/ {{ $st['quotaBytes'] ? fmt_size($st['quotaBytes']) : 'sem limite' }}</span></div>
            <div class="kpi-label">Armazenamento</div>
            @if ($st['percent'] !== null)
                <div class="storage-bar" style="margin-top:0.5rem;">
                    <div class="storage-bar-fill {{ $st['percent'] >= 100 ? 'is-full' : ($st['percent'] >= 90 ? 'is-critical' : ($st['percent'] >= 80 ? 'is-warning' : '')) }}" style="width:{{ $st['percent'] }}%;"></div>
                </div>
            @endif
        </div>
    </div>

    {{-- Atividade Travel Trade + Mercados --}}
    <div class="dash-grid-2">
        <div class="card">
            <h2 class="page-title" style="font-size:1.05rem;">Atividade Travel Trade</h2>
            @if (array_sum($series['downloads']) === 0 && array_sum($series['views']) === 0)
                <div class="empty-state">Ainda não existem dados suficientes para este período. A informação aparecerá automaticamente à medida que os parceiros utilizarem o Travel Trade.</div>
            @else
                <canvas id="activity-chart" height="110"></canvas>
            @endif
        </div>

        <div class="card">
            <h2 class="page-title" style="font-size:1.05rem;">Mercados com Maior Interesse</h2>
            @if (empty($markets))
                <div class="empty-state">Ainda não existem downloads suficientes para identificar mercados.</div>
            @else
                @foreach ($markets as $m)
                    <div class="market-bar-row">
                        <span class="market-flag">{{ $m['flag'] ?? '🌍' }}</span>
                        <span class="market-label">{{ $m['label'] }}</span>
                        <span class="market-bar-track"><span class="market-bar-fill" style="width:{{ $m['percent'] }}%;"></span></span>
                        <span class="market-total">{{ $m['total'] }}</span>
                    </div>
                @endforeach
            @endif
        </div>
    </div>

    {{-- Top Partners --}}
    <div class="card">
        <h2 class="page-title" style="font-size:1.05rem;">Top Partners</h2>
        @if (empty($topPartners))
            <div class="empty-state">Ainda não existem parceiros com atividade neste período.</div>
        @else
            <table>
                <thead><tr><th>Parceiro</th><th>Empresa</th><th>País</th><th>Mercado</th><th>Downloads</th><th>Última atividade</th><th></th></tr></thead>
                <tbody>
                    @foreach ($topPartners as $p)
                        <tr>
                            <td>{{ $p['name'] }}</td>
                            <td class="muted">{{ $p['company'] ?: '—' }}</td>
                            <td class="muted">{{ $p['country'] ?: '—' }}</td>
                            <td class="muted">{{ $p['market'] ?: '—' }}</td>
                            <td><strong>{{ $p['downloads'] }}</strong></td>
                            <td class="muted">{{ $p['lastAccess'] ? \Illuminate\Support\Carbon::parse($p['lastAccess'])->format('d/m/Y') : '—' }}</td>
                            <td style="text-align:right;"><a href="{{ route('admin.partners.edit', $p['id']) }}" class="icon-btn" title="Ver ficha"><x-icon name="edit" /></a></td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        @endif
    </div>

    {{-- Content Performance --}}
    <div class="card">
        <h2 class="page-title" style="font-size:1.05rem;">Content Performance</h2>
        <div class="tabs" id="cp-tabs">
            @foreach (['materials' => 'Mais descarregados', 'photos' => 'Fotografias', 'kits' => 'Sales Kits', 'campaigns' => 'Campanhas', 'unused' => 'Sem utilização', 'recent' => 'Atualizados'] as $key => $label)
                <a href="#cp-{{ $key }}" class="tab {{ $loop->first ? 'active' : '' }}"
                    onclick="document.querySelectorAll('.cp-panel').forEach(p=>p.style.display='none');document.querySelectorAll('#cp-tabs .tab').forEach(t=>t.classList.remove('active'));document.getElementById('cp-{{ $key }}').style.display='block';this.classList.add('active');return false;">
                    {{ $label }}
                </a>
            @endforeach
        </div>

        <div id="cp-materials" class="cp-panel" style="display:block;">
            @include('admin.dashboard._content-list', ['items' => $contentPerformance['topMaterials'], 'labelKey' => 'title', 'subKey' => 'hotel', 'countKey' => 'total'])
        </div>
        <div id="cp-photos" class="cp-panel" style="display:none;">
            @include('admin.dashboard._content-list', ['items' => $contentPerformance['topPhotos'], 'labelKey' => 'title', 'subKey' => 'hotel', 'countKey' => 'total'])
        </div>
        <div id="cp-kits" class="cp-panel" style="display:none;">
            @include('admin.dashboard._content-list', ['items' => $contentPerformance['topKits'], 'labelKey' => 'title', 'subKey' => 'hotel', 'countKey' => 'total'])
        </div>
        <div id="cp-campaigns" class="cp-panel" style="display:none;">
            @include('admin.dashboard._content-list', ['items' => $contentPerformance['topCampaigns'], 'labelKey' => 'name', 'subKey' => null, 'countKey' => 'downloads_count'])
        </div>
        <div id="cp-unused" class="cp-panel" style="display:none;">
            @if ($contentPerformance['unused']->isEmpty())
                <div class="empty-state">Todos os conteúdos publicados já tiveram pelo menos um download.</div>
            @else
                <ul class="content-perf-list">
                    @foreach ($contentPerformance['unused'] as $u)
                        <li><span>{{ $u->title }}</span><span class="muted">{{ $u->created_at->format('d/m/Y') }}</span></li>
                    @endforeach
                </ul>
            @endif
        </div>
        <div id="cp-recent" class="cp-panel" style="display:none;">
            @if ($contentPerformance['recentlyUpdated']->isEmpty())
                <div class="empty-state">Sem atualizações recentes de conteúdos.</div>
            @else
                <ul class="content-perf-list">
                    @foreach ($contentPerformance['recentlyUpdated'] as $u)
                        <li><span>{{ $u->title }}</span><span class="muted">{{ \Illuminate\Support\Carbon::parse($u->uploaded_at)->format('d/m/Y H:i') }}</span></li>
                    @endforeach
                </ul>
            @endif
        </div>
    </div>

    {{-- Interesse por Categoria + Travel Trade Score --}}
    <div class="dash-grid-2">
        <div class="card">
            <h2 class="page-title" style="font-size:1.05rem;">Interesse por Categoria</h2>
            @if (empty($categories))
                <div class="empty-state">Ainda não existem downloads suficientes para calcular o interesse por categoria.</div>
            @else
                <canvas id="category-chart" height="180"></canvas>
            @endif
        </div>

        <div class="card">
            <h2 class="page-title" style="font-size:1.05rem;">Travel Trade Score</h2>
            @if (! $score)
                <div class="empty-state">Seleciona um hotel específico no filtro acima para veres o Travel Trade Score.</div>
            @else
                <div class="score-ring">
                    <span class="score-number" style="color: {{ $score['score'] >= 80 ? 'var(--color-success-dark)' : ($score['score'] >= 50 ? 'var(--color-warning)' : 'var(--color-danger)') }};">{{ $score['score'] }}</span>
                    <span class="score-max">/ 100</span>
                </div>
                @if (! empty($score['recommendations']))
                    <p class="muted" style="margin:0.75rem 0 0.35rem;font-size:0.8rem;font-weight:600;">Para melhorar:</p>
                    <ul style="margin:0;padding-left:1.1rem;font-size:0.82rem;color:var(--color-text-muted);">
                        @foreach (array_slice($score['recommendations'], 0, 5) as $rec)
                            <li>{{ $rec }}</li>
                        @endforeach
                    </ul>
                @else
                    <p class="muted" style="font-size:0.82rem;">Perfil comercial completo. 🎉</p>
                @endif
            @endif
        </div>
    </div>

    {{-- AI Insights + Oportunidades --}}
    <div class="dash-grid-2">
        <div class="card">
            <h2 class="page-title" style="font-size:1.05rem;">✨ AI Insights</h2>
            @if (empty($insights))
                <div class="empty-state">Ainda não existem dados suficientes para gerar insights. A informação aparecerá automaticamente à medida que os parceiros utilizarem o Travel Trade.</div>
            @else
                @foreach ($insights as $insight)
                    <div class="insight-card"><x-icon name="sparkles" /><span>{{ $insight }}</span></div>
                @endforeach
            @endif
        </div>

        <div class="card">
            <h2 class="page-title" style="font-size:1.05rem;">Oportunidades</h2>
            @if (empty($opportunities))
                <div class="empty-state">Sem oportunidades comerciais identificadas neste momento.</div>
            @else
                @foreach ($opportunities as $opp)
                    <div class="opportunity-card type-{{ $opp['type'] }}"><x-icon :name="$opp['type'] === 'success' ? 'trending-up' : ($opp['type'] === 'warning' ? 'zap' : 'flag')" /><span>{{ $opp['text'] }}</span></div>
                @endforeach
            @endif
        </div>
    </div>

    {{-- Alertas: administrativos vs comunicações Travel Trade --}}
    <div class="dash-grid-2">
        <div class="card">
            <h2 class="page-title" style="font-size:1.05rem;">Alertas Administrativos</h2>
            @if (empty($adminAlerts))
                <div class="empty-state">Sem alertas administrativos.</div>
            @else
                @foreach ($adminAlerts as $alert)
                    <div class="opportunity-card type-warning"><x-icon name="zap" /><span>{{ $alert }}</span></div>
                @endforeach
            @endif
        </div>

        <div class="card">
            <h2 class="page-title" style="font-size:1.05rem;">Comunicações Travel Trade</h2>
            @if (empty($partnerCommunications))
                <div class="empty-state">Sem comunicações recentes para parceiros.</div>
            @else
                @foreach ($partnerCommunications as $comm)
                    <div class="partner-alert partner-alert-{{ strtolower($comm['priority']) }}" style="padding:0.5rem 0.75rem;margin-bottom:0.5rem;border-radius:var(--radius-sm);background:var(--color-surface-muted);">
                        <strong>{{ $comm['title'] }}</strong>
                        <span class="muted" style="font-size:0.75rem;"> — {{ $comm['status'] }} · {{ \Illuminate\Support\Carbon::parse($comm['createdAt'])->format('d/m/Y') }}</span>
                    </div>
                @endforeach
            @endif
        </div>
    </div>

    {{-- Atividade Recente --}}
    <div class="card">
        <h2 class="page-title" style="font-size:1.05rem;">Atividade Recente</h2>
        @if (empty($recentActivity))
            <div class="empty-state">Sem atividade recente registada.</div>
        @else
            <div class="activity-feed">
                @foreach ($recentActivity as $act)
                    <div class="activity-feed-row">
                        <span class="activity-time">{{ \Illuminate\Support\Carbon::parse($act['occurred_at'])->format('d/m H:i') }}</span>
                        <span>{{ $act['description'] }}</span>
                    </div>
                @endforeach
            </div>
        @endif
    </div>

    {{-- Últimas Entradas --}}
    @if (! empty($latestEntries))
        <div class="card" style="padding:0.5rem 1rem;">
            <h2 class="page-title" style="font-size:1.05rem;padding-top:0.75rem;">Últimas Entradas</h2>
            <table>
                <thead><tr><th>Conteúdo</th><th>Tipo</th><th>Hotel</th><th>Utilizador</th><th>Data/hora</th></tr></thead>
                <tbody>
                    @foreach ($latestEntries as $entry)
                        <tr>
                            <td><a href="{{ $entry['url'] }}">{{ $entry['content'] }}</a></td>
                            <td class="muted">{{ $entry['type'] }}</td>
                            <td class="muted">{{ $entry['hotel'] ?? '—' }}</td>
                            <td class="muted">{{ $entry['user'] ?? '—' }}</td>
                            <td class="muted">{{ optional($entry['at'])->format('d/m/Y H:i') ?? '—' }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    @endif
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>
    <script>
        (function () {
            var series = @json($series);
            var categories = @json($categories);

            var activityCanvas = document.getElementById('activity-chart');
            if (activityCanvas && window.Chart) {
                new Chart(activityCanvas, {
                    type: 'line',
                    data: {
                        labels: series.labels,
                        datasets: [
                            { label: 'Downloads', data: series.downloads, borderColor: '#0d9488', backgroundColor: 'rgba(13,148,136,0.08)', tension: 0.3, fill: true },
                            { label: 'Visualizações', data: series.views, borderColor: '#7c3aed', backgroundColor: 'rgba(124,58,237,0.06)', tension: 0.3, fill: true },
                        ],
                    },
                    options: {
                        responsive: true,
                        plugins: { legend: { position: 'bottom', labels: { boxWidth: 10, font: { size: 11 } } } },
                        scales: { y: { beginAtZero: true, ticks: { precision: 0 } } },
                    },
                });
            }

            var categoryCanvas = document.getElementById('category-chart');
            if (categoryCanvas && window.Chart && categories.length) {
                var palette = ['#2198f3', '#0d9488', '#7c3aed', '#f0653e', '#b8860b', '#52bf11', '#ee2d5a', '#ff9a13'];
                new Chart(categoryCanvas, {
                    type: 'doughnut',
                    data: {
                        labels: categories.map(function (c) { return c.label; }),
                        datasets: [{ data: categories.map(function (c) { return c.total; }), backgroundColor: palette }],
                    },
                    options: {
                        responsive: true,
                        plugins: { legend: { position: 'right', labels: { boxWidth: 10, font: { size: 11 } } } },
                    },
                });
            }
        })();
    </script>
@endpush