@php
    $isEdit = !empty($item->id);
    $media = old('media', $isEdit ? $item->media->map(function($m){
        return [
            'type' => $m->type,
            'url' => $m->url,
            'caption' => $m->caption,
            'sort_order' => $m->sort_order,
        ];
    })->values()->toArray() : []);
@endphp

<div class="azp-news-container">
    <div class="azp-news-grid">

        {{-- COLUNA ESQUERDA --}}
        <div class="azp-main-col">
            <div class="azp-card main-content">
                <div class="azp-card-header">
                    <span class="icon">📝</span>
                    <h2 class="azp-card-title">Conteúdo da Notícia</h2>
                </div>

                <div class="field">
                    <label class="azp-label">Título</label>
                    <input type="text" name="title" value="{{ old('title', $item->title) }}"
                           class="azp-input" maxlength="180" required placeholder="Ex.: Torneio de sábado + novidades da loja">
                    <div class="azp-hint">Curto e impactante. Máximo 180 caracteres.</div>
                    @error('title') <div class="azp-error-msg">{{ $message }}</div> @enderror
                </div>

                <div class="field">
                    <label class="azp-label">Corpo da Notícia</label>
                    <textarea name="body" rows="12" class="azp-input azp-textarea" required
                              placeholder="Escreve aqui o conteúdo detalhado...">{{ old('body', $item->body) }}</textarea>
                    @error('body') <div class="azp-error-msg">{{ $message }}</div> @enderror
                </div>
            </div>

            <div class="azp-card media-section">
                <div class="azp-card-header">
                    <span class="icon">🖼️</span>
                    <h2 class="azp-card-title">Galeria e Media</h2>
                </div>

                <div class="azp-upload-zone">
                    <div class="upload-wrapper">
                        <input type="file" name="uploads[]" multiple accept="image/*" id="newsUploads" class="file-input">
                        <div class="upload-content">
                            <span class="upload-icon">📤</span>
                            <span class="upload-text">Clique ou arraste imagens para carregar</span>
                            <span class="upload-hint">JPG, PNG ou WebP (Máx. 6MB cada)</span>
                        </div>
                    </div>
                    <div id="uploadPreview" class="upload-preview-grid"></div>
                </div>

                <div class="azp-video-paste-box">
                    <label class="azp-label">Importar Vídeos (YouTube/Vimeo)</label>
                    <div class="paste-group">
                        <textarea id="videoPaste" rows="2" class="azp-input" placeholder="Cole os links aqui (um por linha)..."></textarea>
                        <button type="button" class="azp-btn-secondary" id="addVideoBtn">Adicionar</button>
                    </div>
                </div>

                <div id="mediaWrap" class="media-list">
                    @foreach($media as $i => $m)
                        <div class="media-row azp-card" style="padding:16px; margin-bottom:12px; position:relative;" data-media-row>
                            <div class="media-grid-inputs" style="display:grid; grid-template-columns: 140px 1fr 1fr 70px; gap:12px;">
                                <div class="field" style="margin:0">
                                    <label class="azp-label">Tipo</label>
                                    <select name="media[{{ $i }}][type]" class="azp-input media-type">
                                        <option value="image" {{ $m['type'] === 'image' ? 'selected' : '' }}>Imagem</option>
                                        <option value="video" {{ $m['type'] === 'video' ? 'selected' : '' }}>Vídeo</option>
                                    </select>
                                </div>
                                <div class="field" style="margin:0">
                                    <label class="azp-label">URL</label>
                                    <input name="media[{{ $i }}][url]" value="{{ $m['url'] }}" class="azp-input media-url" placeholder="https://... ou news/...">
                                </div>
                                <div class="field" style="margin:0">
                                    <label class="azp-label">Legenda</label>
                                    <input name="media[{{ $i }}][caption]" value="{{ $m['caption'] ?? '' }}" class="azp-input" placeholder="Opcional">
                                </div>
                                <div class="field" style="margin:0">
                                    <label class="azp-label">Ord.</label>
                                    <input name="media[{{ $i }}][sort_order]" value="{{ $m['sort_order'] ?? $i }}" class="azp-input">
                                </div>
                            </div>

                            <div class="media-preview-container" style="margin-top:12px; border-radius:8px; overflow:hidden; background:#f8fafc; border:1px solid #e2e8f0;">
                                <div class="media-preview">
                                    {{-- O JavaScript vai preencher o preview aqui --}}
                                </div>
                            </div>

                            <button type="button" data-remove-media style="position:absolute; top:-8px; right:-8px; width:24px; height:24px; border-radius:50%; background:#ef4444; color:white; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 4px rgba(0,0,0,0.1);">×</button>
                        </div>
                    @endforeach
                </div>

                <button type="button" class="azp-btn-ghost" id="addMediaBtn">
                    <span class="plus-icon">+</span> Adicionar Linha de Media
                </button>
            </div>
        </div>

        {{-- COLUNA DIREITA --}}
        <div class="azp-side-col">

            <div class="azp-card">
                <div class="azp-card-header">
                    <span class="icon">⚙️</span>
                    <h2 class="azp-card-title">Publicação</h2>
                </div>

                <div class="field switch-field">
                    <div class="switch-info">
                        <label class="azp-label no-margin">Notícia Interna</label>
                        <div class="azp-hint">Visível apenas no backoffice</div>
                    </div>
                    <label class="azp-switch">
                        {{-- Campo escondido para garantir que o valor 0 é enviado --}}
                        <input type="hidden" name="is_internal" value="0">

                        <input type="checkbox" name="is_internal" value="1" id="isInternalToggle"
                            {{ old('is_internal', (int)($item->is_internal ?? 0)) ? 'checked' : '' }}>
                        <span class="slider"></span>
                    </label>
                </div>

                <div class="field" id="clubField">
                    <label class="azp-label">Clube Associado</label>
                    <select name="club_id" id="clubSelect" class="azp-input">
                        <option value="">Geral (Público Global)</option>
                        @foreach($clubs as $c)
                            <option value="{{ $c->id }}" {{ (string)old('club_id', $item->club_id) === (string)$c->id ? 'selected' : '' }}>
                                {{ $c->name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="field">
                    <label class="azp-label">Estado</label>
                    <select name="status" class="azp-input">
                        <option value="draft" {{ old('status', $item->status) === 'draft' ? 'selected' : '' }}>Rascunho</option>
                        <option value="published" {{ old('status', $item->status) === 'published' ? 'selected' : '' }}>Publicado</option>
                    </select>
                </div>

                <div class="field">
                    <label class="azp-label">Data de Agendamento</label>
                    <input type="datetime-local" name="published_at" class="azp-input"
                           value="{{ old('published_at', $item->published_at ? \Carbon\Carbon::parse($item->published_at)->format('Y-m-d\TH:i') : '') }}">
                </div>
            </div>

            <div class="azp-card actions-card">
                <button type="submit" class="azp-btn-primary w-full">
                    {{ $isEdit ? 'Guardar Alterações' : 'Publicar Notícia' }}
                </button>
                <a href="{{ route('admin.news.index') }}" class="azp-btn-outline w-full">Cancelar</a>

                @if($isEdit)
                    <div class="meta-info">
                        <div><span>Criada:</span> {{ \Carbon\Carbon::parse($item->created_at)->format('d/m H:i') }}</div>
                        <div><span>Editada:</span> {{ \Carbon\Carbon::parse($item->updated_at)->format('d/m H:i') }}</div>
                    </div>
                @endif
            </div>

            @if($isEdit)
                <a href="{{ route('admin.news.show', $item->id) }}" target="_blank" class="preview-banner">
                    <span>Visualizar Live Preview</span>
                    <span class="external-icon">↗</span>
                </a>
            @endif
        </div>
    </div>
</div>

<style>
    /* Variáveis e Reset */
    :root {
        --azp-primary: #2563eb;
        --azp-primary-hover: #1d4ed8;
        --azp-bg: #f8fafc;
        --azp-card-border: rgba(226, 232, 240, 0.8);
        --azp-text-main: #1e293b;
        --azp-text-muted: #64748b;
        --azp-radius: 12px;
    }

    .azp-news-container {
        font-family: 'Inter', system-ui, -apple-system, sans-serif;
        color: var(--azp-text-main);
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
    }

    .azp-news-grid {
        display: grid;
        grid-template-columns: 1fr 340px;
        gap: 24px;
    }

    /* Cards */
    .azp-card {
        background: #fff;
        border-radius: var(--azp-radius);
        border: 1px solid var(--azp-card-border);
        padding: 24px;
        margin-bottom: 24px;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    }

    .azp-card-header {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 20px;
        border-bottom: 1px solid #f1f5f9;
        padding-bottom: 12px;
    }

    .azp-card-title {
        font-size: 1.1rem;
        font-weight: 600;
        margin: 0;
        color: #0f172a;
    }

    /* Inputs */
    .field { margin-bottom: 20px; }
    .azp-label {
        display: block;
        font-size: 0.85rem;
        font-weight: 600;
        margin-bottom: 6px;
        color: #475569;
    }
    .azp-label.no-margin { margin-bottom: 0; }

    .azp-input {
        width: 100%;
        padding: 10px 14px;
        border-radius: 8px;
        border: 1px solid #cbd5e1;
        font-size: 0.95rem;
        transition: all 0.2s;
        box-sizing: border-box;
    }

    .azp-input:focus {
        outline: none;
        border-color: var(--azp-primary);
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    }

    .azp-hint { font-size: 0.8rem; color: var(--azp-text-muted); margin-top: 5px; }

    /* Switch Styling */
    .azp-switch {
        position: relative;
        display: inline-block;
        width: 48px;
        height: 24px;
    }

    .azp-switch input { opacity: 0; width: 0; height: 0; }

    .slider {
        position: absolute;
        cursor: pointer;
        top: 0; left: 0; right: 0; bottom: 0;
        background-color: #cbd5e1;
        transition: .4s;
        border-radius: 24px;
    }

    .slider:before {
        position: absolute;
        content: "";
        height: 18px; width: 18px;
        left: 3px; bottom: 3px;
        background-color: white;
        transition: .4s;
        border-radius: 50%;
    }

    input:checked + .slider { background-color: var(--azp-primary); }
    input:checked + .slider:before { transform: translateX(24px); }

    .switch-field {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #f8fafc;
        padding: 12px;
        border-radius: 10px;
    }

    /* Upload Zone */
    .azp-upload-zone {
        border: 2px dashed #cbd5e1;
        border-radius: var(--azp-radius);
        padding: 20px;
        text-align: center;
        transition: all 0.2s;
        background: #fcfcfd;
        margin-bottom: 20px;
    }

    .upload-wrapper { position: relative; cursor: pointer; }
    .file-input {
        position: absolute;
        inset: 0; opacity: 0; cursor: pointer;
    }

    .upload-icon { font-size: 2rem; display: block; margin-bottom: 10px; }
    .upload-text { display: block; font-weight: 600; font-size: 0.95rem; }

    .upload-preview-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
        gap: 12px;
        margin-top: 15px;
    }

    /* Media Item List */
    .media-row {
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        padding: 16px;
        margin-bottom: 12px;
        position: relative;
    }

    .media-grid-inputs {
        display: grid;
        grid-template-columns: 120px 1fr 1fr 60px;
        gap: 12px;
    }

    /* Buttons */
    .azp-btn-primary {
        background: var(--azp-primary);
        color: white;
        border: none;
        padding: 12px 20px;
        border-radius: 8px;
        font-weight: 600;
        cursor: pointer;
        transition: background 0.2s;
    }
    .azp-btn-primary:hover { background: var(--azp-primary-hover); }

    .azp-btn-outline {
        background: transparent;
        border: 1px solid #cbd5e1;
        padding: 11px 20px;
        border-radius: 8px;
        color: var(--azp-text-main);
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 0.9rem;
    }

    .azp-btn-ghost {
        width: 100%;
        padding: 12px;
        background: #f1f5f9;
        border: 1px dashed #cbd5e1;
        border-radius: 8px;
        color: #475569;
        font-weight: 600;
        cursor: pointer;
        margin-top: 10px;
    }

    .w-full { width: 100%; }

    /* Mobile */
    @media (max-width: 1024px) {
        .azp-news-grid { grid-template-columns: 1fr; }
        .azp-side-col { order: -1; }
    }
</style>

@push('scripts')
    <script>
        (function(){
            const wrap = document.getElementById('mediaWrap');
            const addBtn = document.getElementById('addMediaBtn');
            const addVideoBtn = document.getElementById('addVideoBtn');
            const videoPaste = document.getElementById('videoPaste');
            const uploads = document.getElementById('newsUploads');
            const uploadPreview = document.getElementById('uploadPreview');

            // --- Utilitários de Vídeo ---
            function isMp4(url){ return /\.(mp4|webm)(\?|$)/i.test(url); }

            function mediaSrc(url) {
                if (!url || /^(https?:)?\/\//i.test(url) || url.startsWith('/')) return url;
                return `/storage/${url.replace(/^storage\//, '')}`;
            }

            function ytEmbed(url){
                if(!url) return null;
                if(url.indexOf('youtu.be/') !== -1){
                    let id = url.split('youtu.be/')[1].split(/[?&]/)[0];
                    return id ? ('https://www.youtube.com/embed/'+id) : null;
                }
                if(url.indexOf('/shorts/') !== -1){
                    let id2 = url.split('/shorts/')[1].split(/[?&]/)[0];
                    return id2 ? ('https://www.youtube.com/embed/'+id2) : null;
                }
                if(url.indexOf('youtube.com') !== -1){
                    let m = url.match(/[?&]v=([A-Za-z0-9_-]+)/);
                    return (m && m[1]) ? ('https://www.youtube.com/embed/'+m[1]) : null;
                }
                return null;
            }

            function vimeoEmbed(url){
                if(!url || url.indexOf('vimeo.com') === -1) return null;
                let m = url.match(/vimeo\.com\/(?:video\/)?(\d+)/);
                return (m && m[1]) ? ('https://player.vimeo.com/video/'+m[1]) : null;
            }

            // --- Render de Preview ---
            function renderPreview(row){
                const type = row.querySelector('.media-type').value;
                const url = (row.querySelector('.media-url').value || '').trim();
                const box = row.querySelector('.media-preview');
                if(!box) return;

                if(!url){
                    box.innerHTML = '<div style="padding:20px; text-align:center; color:#94a3b8; font-size:0.8rem;">Aguardando URL válida...</div>';
                    return;
                }

                if(type === 'image'){
                    box.innerHTML = `<img src="${mediaSrc(url)}" style="width:100%; height:180px; object-fit:cover; display:block; border-radius:8px;">`;
                } else {
                    let embed = ytEmbed(url) || vimeoEmbed(url);
                    if(isMp4(url)){
                        box.innerHTML = `<video controls style="width:100%; border-radius:8px; background:#000;"><source src="${url}"></video>`;
                    } else if(embed){
                        box.innerHTML = `<div style="position:relative; padding-top:56.25%; background:#000; border-radius:8px; overflow:hidden;">
                        <iframe src="${embed}" style="position:absolute; inset:0; width:100%; height:100%; border:0;" allowfullscreen></iframe>
                    </div>`;
                    } else {
                        box.innerHTML = '<div style="padding:20px; text-align:center; color:#ef4444; font-size:0.8rem;">Link de vídeo não suportado</div>';
                    }
                }
            }

            // --- Gestão de Linhas ---
            function reindex(){
                const rows = wrap.querySelectorAll('[data-media-row]');
                rows.forEach((row, i) => {
                    row.querySelectorAll('select, input').forEach(el => {
                        let name = el.getAttribute('name');
                        if(name) el.setAttribute('name', name.replace(/media\[\d+\]/g, `media[${i}]`));
                    });
                });
            }

            function addRow(type = 'image', url = '') {
                const index = wrap.querySelectorAll('[data-media-row]').length;
                const div = document.createElement('div');
                div.className = 'media-row azp-card';
                div.style.padding = '16px';
                div.style.marginBottom = '12px';
                div.style.position = 'relative';
                div.setAttribute('data-media-row', '1');

                div.innerHTML = `
                <div class="media-grid-inputs" style="display:grid; grid-template-columns: 140px 1fr 1fr 70px; gap:12px;">
                    <div class="field" style="margin:0">
                        <label class="azp-label">Tipo</label>
                        <select name="media[${index}][type]" class="azp-input media-type">
                            <option value="image" ${type === 'image' ? 'selected' : ''}>Imagem</option>
                            <option value="video" ${type === 'video' ? 'selected' : ''}>Vídeo</option>
                        </select>
                    </div>
                    <div class="field" style="margin:0">
                        <label class="azp-label">URL</label>
                        <input name="media[${index}][url]" value="${url}" class="azp-input media-url" placeholder="https://... ou news/...">
                    </div>
                    <div class="field" style="margin:0">
                        <label class="azp-label">Legenda</label>
                        <input name="media[${index}][caption]" class="azp-input" placeholder="Opcional">
                    </div>
                    <div class="field" style="margin:0">
                        <label class="azp-label">Ord.</label>
                        <input name="media[${index}][sort_order]" value="${index}" class="azp-input">
                    </div>
                </div>
                <div class="media-preview-container" style="margin-top:12px; border-radius:8px; overflow:hidden; background:#f8fafc; border:1px solid #e2e8f0;">
                    <div class="media-preview"></div>
                </div>
                <button type="button" data-remove-media style="position:absolute; top:-8px; right:-8px; width:24px; height:24px; border-radius:50%; background:#ef4444; color:white; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 4px rgba(0,0,0,0.1);">×</button>
            `;

                wrap.appendChild(div);
                renderPreview(div);
                reindex();
            }

            // --- Eventos ---
            addBtn.addEventListener('click', () => addRow());

            addVideoBtn.addEventListener('click', () => {
                const lines = (videoPaste.value || '').split('\n').map(s => s.trim()).filter(Boolean);
                lines.forEach(line => addRow('video', line));
                videoPaste.value = '';
            });

            wrap.addEventListener('input', e => {
                const row = e.target.closest('[data-media-row]');
                if(row) renderPreview(row);
            });

            wrap.addEventListener('click', e => {
                if(e.target.hasAttribute('data-remove-media')) {
                    e.target.closest('[data-media-row]').remove();
                    reindex();
                }
            });

            // Inicializar previews existentes
            wrap.querySelectorAll('[data-media-row]').forEach(row => renderPreview(row));

            // Upload Preview
            if(uploads && uploadPreview){
                uploads.addEventListener('change', function(){
                    uploadPreview.innerHTML = '';
                    Array.from(uploads.files).forEach(f => {
                        if(!f.type.startsWith('image/')) return;
                        const reader = new FileReader();
                        reader.onload = (ev) => {
                            const div = document.createElement('div');
                            div.style.cssText = 'height:70px; border-radius:8px; overflow:hidden; border:1px solid #e2e8f0;';
                            div.innerHTML = `<img src="${ev.target.result}" style="width:100%; height:100%; object-fit:cover;">`;
                            uploadPreview.appendChild(div);
                        };
                        reader.readAsDataURL(f);
                    });
                });
            }

            // Switch Logic
            const toggle = document.getElementById('isInternalToggle');
            const clubField = document.getElementById('clubField');
            const clubSelect = document.getElementById('clubSelect');

            function syncUI() {
                if(!toggle) return;
                const isInternal = toggle.checked;
                clubField.style.opacity = isInternal ? '0.4' : '1';
                clubField.style.pointerEvents = isInternal ? 'none' : 'auto';
                if(isInternal && clubSelect) clubSelect.value = '';
            }

            toggle.addEventListener('change', syncUI);
            syncUI();

        })();
    </script>
@endpush