@extends('layouts.app')

@section('title', 'Transmissões - GIGAX ARENA')
@section('page_title', 'Transmissões')

@section('content')
@php
    $streams = collect($streams ?? []);
    $creators = collect($creators ?? []);
    $liveCount = (int) ($liveCount ?? $streams->where('is_live', true)->count());

    $platformMeta = [
        'youtube'   => ['name' => 'YouTube',   'icon' => '▶', 'class' => 'youtube'],
        'tiktok'    => ['name' => 'TikTok',    'icon' => '♪', 'class' => 'tiktok'],
        'twitch'    => ['name' => 'Twitch',    'icon' => '◫', 'class' => 'twitch'],
        'kick'      => ['name' => 'Kick',      'icon' => 'K', 'class' => 'kick'],
        'instagram' => ['name' => 'Instagram', 'icon' => '◎', 'class' => 'instagram'],
        'facebook'  => ['name' => 'Facebook',  'icon' => 'f', 'class' => 'facebook'],
        'site'      => ['name' => 'Site',      'icon' => '↗', 'class' => 'site'],
    ];
@endphp

<div class="gx-streams-page">

    <section class="gx-stream-hero">
        <div>
            <span class="gx-kicker">GIGAX ARENA</span>
            <h1>Transmissões & Criadores</h1>
            <p>Acompanhe canais e criadores reais da comunidade. Cada card abre diretamente a plataforma em uso.</p>
        </div>

        <div class="gx-live-counter {{ $liveCount > 0 ? 'is-live' : '' }}">
            <i></i>
            <strong>{{ $liveCount }}</strong>
            <span>{{ $liveCount === 1 ? 'ao vivo agora' : 'ao vivo agora' }}</span>
        </div>
    </section>

    <section class="gx-section">
        <div class="gx-section-head">
            <div>
                <span class="gx-kicker">AO VIVO</span>
                <h2>Transmissões</h2>
            </div>
            <span class="gx-section-count">{{ $streams->count() }} encontradas</span>
        </div>

        @if($streams->isEmpty())
            <div class="gx-empty">
                <div class="gx-empty-icon">◉</div>
                <strong>Nenhuma transmissão ao vivo no momento</strong>
                <span>Quando um canal real entrar ao vivo ou uma transmissão for cadastrada, ela aparecerá aqui automaticamente.</span>
            </div>
        @else
            <div class="gx-live-grid">
                @foreach($streams as $stream)
                    @php
                        $platform = strtolower((string) data_get($stream, 'platform', 'site'));
                        $meta = $platformMeta[$platform] ?? $platformMeta['site'];
                        $url = (string) data_get($stream, 'url', '#');
                        $thumb = (string) data_get($stream, 'thumbnail', '');
                        $title = (string) data_get($stream, 'title', 'Transmissão');
                        $channel = (string) data_get($stream, 'channel', 'Criador');
                        $isLive = (bool) data_get($stream, 'is_live', false);
                        $viewers = data_get($stream, 'viewers');
                    @endphp

                    <a
                        class="gx-live-card"
                        href="{{ $url }}"
                        target="_blank"
                        rel="noopener noreferrer"
                    >
                        <div class="gx-live-thumb">
                            @if($thumb)
                                <img src="{{ $thumb }}" alt="{{ $title }}" loading="lazy">
                            @else
                                <div class="gx-thumb-fallback {{ $meta['class'] }}">{{ $meta['icon'] }}</div>
                            @endif

                            @if($isLive)
                                <span class="gx-live-badge">AO VIVO</span>
                            @endif

                            <span class="gx-platform-badge {{ $meta['class'] }}">
                                {{ $meta['icon'] }} {{ $meta['name'] }}
                            </span>
                        </div>

                        <div class="gx-live-body">
                            <strong>{{ $title }}</strong>
                            <span>{{ $channel }}</span>

                            <div class="gx-live-footer">
                                <small>
                                    @if(is_numeric($viewers))
                                        {{ number_format((int)$viewers, 0, ',', '.') }} assistindo
                                    @else
                                        Abrir na plataforma
                                    @endif
                                </small>
                                <b>↗</b>
                            </div>
                        </div>
                    </a>
                @endforeach
            </div>
        @endif
    </section>

    <section class="gx-section">
        <div class="gx-section-head">
            <div>
                <span class="gx-kicker">COMUNIDADE</span>
                <h2>YouTubers, TikTokers e criadores</h2>
            </div>
            <span class="gx-section-count">{{ $creators->count() }} cadastrados</span>
        </div>

        @if($creators->isEmpty())
            <div class="gx-empty gx-empty-small">
                <div class="gx-empty-icon">＋</div>
                <strong>Nenhum criador cadastrado</strong>
                <span>Cadastre canais reais no <code>config/gigax_streams.php</code>. Nenhum exemplo é exibido.</span>
            </div>
        @else
            <div class="gx-creators-grid">
                @foreach($creators as $creator)
                    @php
                        $platform = strtolower((string) data_get($creator, 'platform', 'site'));
                        $meta = $platformMeta[$platform] ?? $platformMeta['site'];
                        $name = (string) data_get($creator, 'name', 'Criador');
                        $avatar = (string) data_get($creator, 'avatar', '');
                        $username = (string) data_get($creator, 'username', '');
                        $description = (string) data_get($creator, 'description', '');
                    @endphp

                    <a
                        class="gx-creator-card"
                        href="{{ data_get($creator, 'url') }}"
                        target="_blank"
                        rel="noopener noreferrer"
                    >
                        <div class="gx-creator-avatar">
                            @if($avatar)
                                <img
                                    src="{{ $avatar }}"
                                    alt="{{ $name }}"
                                    loading="lazy"
                                    onerror="this.style.display='none';this.nextElementSibling.style.display='grid';"
                                >
                                <span style="display:none">{{ mb_strtoupper(mb_substr($name, 0, 1)) }}</span>
                            @else
                                <span>{{ mb_strtoupper(mb_substr($name, 0, 1)) }}</span>
                            @endif

                            <em class="{{ $meta['class'] }}">{{ $meta['icon'] }}</em>
                        </div>

                        <div class="gx-creator-info">
                            <div class="gx-creator-name">
                                <strong>{{ $name }}</strong>
                                @if(data_get($creator, 'verified'))
                                    <i title="Verificado">✓</i>
                                @endif
                            </div>

                            <span>{{ $username !== '' ? $username : $meta['name'] }}</span>

                            @if($description !== '')
                                <small>{{ $description }}</small>
                            @endif
                        </div>

                        <div class="gx-creator-open">↗</div>
                    </a>
                @endforeach
            </div>
        @endif
    </section>

    <section class="gx-platform-strip">
        <span>Plataformas suportadas:</span>
        <b class="youtube">▶ YouTube</b>
        <b class="tiktok">♪ TikTok</b>
        <b class="twitch">◫ Twitch</b>
        <b class="kick">K Kick</b>
        <b class="instagram">◎ Instagram</b>
        <b class="facebook">f Facebook</b>
        <b class="site">↗ Outros sites</b>
    </section>

</div>
@endsection

@push('styles')
<style>
.gx-streams-page,.gx-streams-page *{box-sizing:border-box}
.gx-streams-page{display:grid;gap:14px;width:100%}
.gx-stream-hero,.gx-section,.gx-platform-strip{
    border:1px solid #183149;
    background:linear-gradient(180deg,#0c1b28,#09151f);
    border-radius:12px
}
.gx-stream-hero{
    min-height:130px;padding:24px 28px;
    display:flex;align-items:center;justify-content:space-between;gap:24px;
    background:
        radial-gradient(circle at 88% 50%,rgba(0,239,121,.12),transparent 30%),
        linear-gradient(110deg,#0c1b28,#081923)
}
.gx-kicker{
    display:block;color:#00ef79;font-size:9px;font-weight:900;
    letter-spacing:.14em;text-transform:uppercase
}
.gx-stream-hero h1{margin:7px 0 8px;font-size:28px;font-weight:800}
.gx-stream-hero p{margin:0;max-width:760px;color:#8ba2b5;font-size:11px;line-height:1.55}
.gx-live-counter{
    min-width:135px;padding:15px 17px;border:1px solid #204054;border-radius:10px;
    display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:7px;background:#0a1721
}
.gx-live-counter i{width:8px;height:8px;border-radius:50%;background:#627789}
.gx-live-counter.is-live{border-color:#176d4d}.gx-live-counter.is-live i{background:#ff3152;box-shadow:0 0 14px rgba(255,49,82,.55)}
.gx-live-counter strong{font-size:14px}.gx-live-counter span{font-size:8px;color:#8ca2b3}
.gx-section{padding:16px}
.gx-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.gx-section-head h2{margin:4px 0 0;font-size:16px}
.gx-section-count{
    border:1px solid #173047;border-radius:20px;background:#0a1721;
    padding:6px 9px;color:#7890a3;font-size:8px
}
.gx-live-grid{
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px
}
.gx-live-card{
    overflow:hidden;border:1px solid #173047;border-radius:10px;background:#081620;
    color:#eaf4fa;text-decoration:none;transition:.16s ease
}
.gx-live-card:hover{
    transform:translateY(-2px);border-color:#00ef79;box-shadow:0 15px 35px rgba(0,0,0,.22)
}
.gx-live-thumb{position:relative;aspect-ratio:16/9;background:#071019;overflow:hidden}
.gx-live-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.gx-thumb-fallback{width:100%;height:100%;display:grid;place-items:center;font-size:30px;background:#0b1823}
.gx-live-badge{
    position:absolute;left:8px;bottom:8px;padding:4px 6px;border-radius:5px;
    background:#ff3152;color:#fff;font-size:7px;font-weight:900
}
.gx-platform-badge{
    position:absolute;right:8px;top:8px;padding:4px 6px;border-radius:5px;
    background:rgba(3,10,16,.85);font-size:7px;font-weight:900
}
.gx-live-body{padding:10px}
.gx-live-body>strong,.gx-live-body>span{
    display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.gx-live-body>strong{font-size:10px}.gx-live-body>span{margin-top:4px;color:#00ef79;font-size:8px}
.gx-live-footer{
    display:flex;justify-content:space-between;gap:8px;align-items:center;
    margin-top:9px;padding-top:8px;border-top:1px solid #142838
}
.gx-live-footer small{color:#70889a;font-size:7px}.gx-live-footer b{color:#00ef79}
.gx-creators-grid{
    display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px
}
.gx-creator-card{
    min-height:74px;display:grid;grid-template-columns:46px 1fr 24px;gap:9px;align-items:center;
    padding:10px;border:1px solid #173047;border-radius:9px;background:#081620;
    color:#eaf4fa;text-decoration:none;transition:.16s ease
}
.gx-creator-card:hover{border-color:#00ef79;background:#0a1b24;transform:translateY(-1px)}
.gx-creator-avatar{
    width:46px;height:46px;border:1px solid #1d4158;border-radius:50%;
    background:#0b2233;position:relative
}
.gx-creator-avatar>img,.gx-creator-avatar>span{
    width:100%;height:100%;border-radius:50%;object-fit:cover
}
.gx-creator-avatar>span{display:grid;place-items:center;font-size:16px;font-weight:900}
.gx-creator-avatar em{
    position:absolute;right:-2px;bottom:-2px;width:18px;height:18px;border-radius:50%;
    display:grid;place-items:center;border:2px solid #081620;background:#12202c;
    font-style:normal;font-size:8px;font-weight:900
}
.gx-creator-info{min-width:0}
.gx-creator-name{display:flex;align-items:center;gap:4px;min-width:0}
.gx-creator-name strong{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gx-creator-name i{font-style:normal;color:#00ef79;font-size:8px}
.gx-creator-info>span{display:block;margin-top:3px;color:#7f96a9;font-size:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gx-creator-info>small{display:block;margin-top:4px;color:#5f7789;font-size:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gx-creator-open{color:#00ef79;font-size:14px}
.gx-empty{
    min-height:190px;border:1px dashed #1b3b4f;border-radius:10px;background:#07141d;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;padding:24px;color:#70889a
}
.gx-empty-small{min-height:125px}
.gx-empty-icon{width:38px;height:38px;border:1px solid #1c445b;border-radius:10px;display:grid;place-items:center;color:#00ef79;margin-bottom:9px}
.gx-empty strong{color:#e4eef5;font-size:11px}
.gx-empty span{max-width:620px;margin-top:5px;font-size:8px;line-height:1.6}
.gx-empty code{color:#00ef79}
.gx-platform-strip{
    display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:11px 14px
}
.gx-platform-strip>span{color:#7890a3;font-size:8px;margin-right:4px}
.gx-platform-strip b{padding:5px 7px;border:1px solid #173047;border-radius:6px;font-size:7px;background:#081620}
.youtube{color:#ff3152!important}.tiktok{color:#f5f5f5!important}.twitch{color:#a970ff!important}
.kick{color:#53fc18!important}.instagram{color:#ff65ad!important}.facebook{color:#69a7ff!important}.site{color:#00ef79!important}

@media(max-width:1400px){.gx-live-grid{grid-template-columns:repeat(3,1fr)}.gx-creators-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:1100px){.gx-live-grid{grid-template-columns:repeat(2,1fr)}.gx-creators-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){
    .gx-stream-hero{align-items:flex-start;flex-direction:column}
    .gx-live-grid{grid-template-columns:1fr}
    .gx-creators-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:480px){.gx-creators-grid{grid-template-columns:1fr}}
</style>
@endpush