@extends('layouts.app')

@section('content')
<div class="modern-page-container">

    {{-- Header --}}
    <div class="page-header">
        <div class="page-header-content">
            <div class="page-title-section">
                <h1 class="page-title">
                    <i class="bi bi-ticket-perforated me-2"></i>Cadastrar Cupom
                </h1>
                <p class="page-subtitle">Publique um cupom manual com imagem e texto diretamente nos seus canais</p>
            </div>
            <a href="{{ route('admin.monitoring.offers.index') }}" class="btn btn-outline-secondary">
                <i class="bi bi-list-ul me-1"></i>Ver Ofertas
            </a>
        </div>
    </div>

    @if(isset($webmasterUsers) && $webmasterUsers->isNotEmpty())
        @include('admin.partials.webmaster-user-filter', [
            'webmasterUsers' => $webmasterUsers,
            'filteredUser'   => $filteredUser ?? null,
        ])
    @endif

    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show mb-4">
            <i class="bi bi-check-circle me-2"></i>{{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif
    @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show mb-4">
            <i class="bi bi-exclamation-circle me-2"></i>{{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif
    @if(session('info'))
        <div class="alert alert-info alert-dismissible fade show mb-4">
            <i class="bi bi-info-circle me-2"></i>{{ session('info') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    @if(!$hasDestinations)
        <div class="alert alert-warning mb-4">
            <i class="bi bi-exclamation-triangle me-2"></i>
            Nenhum canal de destino ativo. Configure em
            <a href="{{ route('admin.monitoring.targets.index') }}">Monitoramento → Canais Destino</a>
            antes de publicar.
        </div>
    @endif

    @php
        $couponLinks = [
            'amazon'       => $user->coupon_link_amazon,
            'mercadolivre' => $user->coupon_link_mercadolivre,
            'shopee'       => $user->coupon_link_shopee,
        ];
    @endphp

    <div class="row g-4">

        {{-- Formulário --}}
        <div class="col-lg-6">
            <div class="form-card">
                <div class="form-section">

                    <form action="{{ route('admin.coupons.store') }}" method="POST"
                          enctype="multipart/form-data" id="couponForm">
                        @csrf
                        @if(auth()->user()->isWebmasterOrAdmin() && ($filteredUser ?? null))
                            <input type="hidden" name="user_id" value="{{ $filteredUser->id }}">
                        @endif

                        {{-- Marketplace --}}
                        <div class="mb-4">
                            <label class="field-label">
                                Marketplace <span class="text-danger">*</span>
                            </label>
                            <div class="d-flex gap-2 flex-wrap" id="marketplaceSelector">
                                @foreach([
                                    'amazon'       => ['label' => 'Amazon',       'icon' => 'bi-cart4',    'color' => '#FF9900'],
                                    'mercadolivre' => ['label' => 'Mercado Livre', 'icon' => 'bi-shop',    'color' => '#FFE600', 'stroke' => '1px #999'],
                                    'shopee'       => ['label' => 'Shopee',        'icon' => 'bi-bag',     'color' => '#EE4D2D'],
                                ] as $key => $mp)
                                    <label class="marketplace-btn {{ old('marketplace') === $key ? 'active' : '' }}"
                                           data-marketplace="{{ $key }}"
                                           data-link="{{ $couponLinks[$key] ?? '' }}">
                                        <input type="radio" name="marketplace" value="{{ $key }}"
                                               class="d-none" {{ old('marketplace') === $key ? 'checked' : '' }}>
                                        <i class="bi {{ $mp['icon'] }} me-1"
                                           style="color:{{ $mp['color'] }};{{ isset($mp['stroke']) ? '-webkit-text-stroke:'.$mp['stroke'] : '' }}"></i>
                                        {{ $mp['label'] }}
                                    </label>
                                @endforeach
                            </div>
                            @error('marketplace')
                                <div class="text-danger small mt-1">{{ $message }}</div>
                            @enderror

                            {{-- Aviso: link não configurado --}}
                            <div id="linkWarning" class="alert alert-warning py-2 mt-2 d-none small">
                                <i class="bi bi-exclamation-triangle me-1"></i>
                                Link de cupom não configurado para este marketplace.
                                Configure em <a href="{{ route('admin.setup.index') }}">Configuração da Conta → Links de Cupom</a>.
                                O texto será publicado sem o bloco "Resgate aqui:".
                            </div>
                        </div>

                        {{-- Imagem --}}
                        <div class="mb-4">
                            <label class="field-label">
                                Imagem <span class="text-danger">*</span>
                            </label>
                            <div id="imageDropZone"
                                 class="border rounded-3 d-flex flex-column align-items-center justify-content-center p-4 text-center"
                                 style="cursor:pointer;min-height:120px;background:var(--background-secondary);border-style:dashed!important">
                                <i class="bi bi-image fs-2 text-muted mb-1"></i>
                                <span class="text-muted small">Clique ou arraste a imagem aqui</span>
                                <span class="text-muted" style="font-size:.75rem">JPG, PNG, GIF, WEBP — máx. 5 MB</span>
                            </div>
                            <input type="file" name="image" id="imageInput"
                                   accept="image/*" class="d-none" required>
                            @error('image')
                                <div class="text-danger small mt-1">{{ $message }}</div>
                            @enderror
                        </div>

                        {{-- Texto do cupom --}}
                        <div class="mb-4">
                            <label class="field-label" for="bodyInput">
                                Texto do cupom <span class="text-danger">*</span>
                            </label>
                            <textarea name="body" id="bodyInput" rows="8"
                                      class="form-control font-monospace @error('body') is-invalid @enderror"
                                      placeholder="TOME CUPOM AMAZON&#10;&#10;R$250 OFF em R$1500:&#10;🎟 Cupom: TORCIDA12"
                                      required>{{ old('body') }}</textarea>
                            @error('body')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <small class="text-muted">
                                Digite título, benefício, código e qualquer informação do cupom.
                                O link "Resgate aqui:" será adicionado automaticamente se configurado.
                            </small>
                        </div>

                        <div class="mt-4 d-flex gap-2 flex-wrap">
                            <button type="submit" class="btn-modern btn-primary" id="submitBtn"
                                    {{ !$hasDestinations ? 'disabled' : '' }}>
                                <i class="bi bi-send"></i>
                                <span id="submitBtnLabel">Enviar e Publicar</span>
                            </button>
                            <button type="button" class="btn btn-outline-secondary" id="previewToggleBtn">
                                <i class="bi bi-eye me-1"></i>Preview
                            </button>
                        </div>
                    </form>

                </div>
            </div>
        </div>

        {{-- Preview --}}
        <div class="col-lg-6" id="previewPanel">
            <div class="form-card h-100">
                <div class="form-section">
                    <h3 class="section-title mb-3">
                        <i class="bi bi-eye me-2 text-primary"></i>Preview
                    </h3>

                    {{-- Imagem preview --}}
                    <div id="imagePreviewContainer" class="mb-3 d-none">
                        <img id="imagePreview"
                             src="" alt="Preview da imagem"
                             class="img-fluid rounded-3 w-100"
                             style="max-height:300px;object-fit:contain;background:#f8fafc">
                    </div>
                    <div id="noImagePlaceholder"
                         class="mb-3 rounded-3 d-flex align-items-center justify-content-center text-muted"
                         style="height:120px;background:var(--background-secondary);border:1px dashed var(--border-color)">
                        <span><i class="bi bi-image me-1"></i>Imagem aparecerá aqui</span>
                    </div>

                    {{-- Texto preview --}}
                    <div class="rounded-3 p-3"
                         style="background:var(--background-secondary);font-family:monospace;font-size:.85rem;white-space:pre-wrap;word-break:break-word;min-height:120px"
                         id="textPreview">
                        <span class="text-muted">O texto do cupom aparecerá aqui...</span>
                    </div>

                    <div class="mt-3">
                        <small class="text-muted">
                            <i class="bi bi-info-circle me-1"></i>
                            O bloco <strong>"Resgate aqui:"</strong> aparece somente se houver link configurado
                            para o marketplace selecionado.
                        </small>
                    </div>
                </div>
            </div>
        </div>

    </div>

</div>
<div id="publishOverlay" class="d-none position-fixed top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center"
     style="z-index:9999;background:rgba(15,23,42,.55)">
    <div class="text-center text-white p-4 rounded-4" style="background:rgba(0,0,0,.25)">
        <div class="spinner-border text-light mb-3" role="status" style="width:3rem;height:3rem"></div>
        <p class="mb-0 fs-5 fw-semibold">Salvando e publicando cupom…</p>
        <p class="mb-0 small opacity-75 mt-1">Aguarde, isso leva só alguns segundos</p>
    </div>
</div>
@endsection

@push('styles')
<style>
.marketplace-btn {
    display: inline-flex;
    align-items: center;
    padding: .45rem 1rem;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    font-size: .875rem;
    font-weight: 500;
    background: var(--card-bg);
    transition: border-color .15s, background .15s;
    user-select: none;
}
.marketplace-btn:hover {
    border-color: var(--primary-color);
    background: var(--background-secondary);
}
.marketplace-btn.active {
    border-color: var(--primary-color);
    background: var(--primary-color)15;
    color: var(--primary-color);
}
#imageDropZone.dragging {
    border-color: var(--primary-color) !important;
    background: var(--primary-color)10 !important;
}
</style>
@endpush

@push('scripts')
<script>
(function () {
    const couponLinks = @json($couponLinks);

    // -- Marketplace --
    const btns = document.querySelectorAll('.marketplace-btn');
    const linkWarning = document.getElementById('linkWarning');

    function selectMarketplace(btn) {
        btns.forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
        btn.querySelector('input[type=radio]').checked = true;
        updatePreviewText();
        const link = btn.dataset.link || '';
        linkWarning.classList.toggle('d-none', !!link);
    }

    btns.forEach(btn => {
        btn.addEventListener('click', () => selectMarketplace(btn));
    });

    // -- Imagem --
    const dropZone   = document.getElementById('imageDropZone');
    const imageInput = document.getElementById('imageInput');
    const imgPreview = document.getElementById('imagePreview');
    const imgCont    = document.getElementById('imagePreviewContainer');
    const noImgPh    = document.getElementById('noImagePlaceholder');

    dropZone.addEventListener('click', () => imageInput.click());

    dropZone.addEventListener('dragover', e => {
        e.preventDefault();
        dropZone.classList.add('dragging');
    });
    dropZone.addEventListener('dragleave', () => dropZone.classList.remove('dragging'));
    dropZone.addEventListener('drop', e => {
        e.preventDefault();
        dropZone.classList.remove('dragging');
        const file = e.dataTransfer.files[0];
        if (file && file.type.startsWith('image/')) {
            const dt = new DataTransfer();
            dt.items.add(file);
            imageInput.files = dt.files;
            showImagePreview(file);
        }
    });

    imageInput.addEventListener('change', () => {
        const file = imageInput.files[0];
        if (file) showImagePreview(file);
    });

    function showImagePreview(file) {
        const reader = new FileReader();
        reader.onload = e => {
            imgPreview.src = e.target.result;
            imgCont.classList.remove('d-none');
            noImgPh.classList.add('d-none');
            dropZone.innerHTML =
                '<i class="bi bi-check-circle text-success fs-4 mb-1"></i>' +
                '<span class="small text-success fw-semibold">' + escHtml(file.name) + '</span>' +
                '<span class="text-muted" style="font-size:.7rem">Clique para trocar</span>';
        };
        reader.readAsDataURL(file);
    }

    // -- Texto preview --
    const bodyInput  = document.getElementById('bodyInput');
    const textPreview = document.getElementById('textPreview');

    function activeMarketplaceLink() {
        const active = document.querySelector('.marketplace-btn.active');
        return active ? (active.dataset.link || '') : '';
    }

    function updatePreviewText() {
        let body = bodyInput.value.trim();
        if (!body) {
            textPreview.innerHTML = '<span class="text-muted">O texto do cupom aparecerá aqui...</span>';
            return;
        }
        const link = activeMarketplaceLink();
        if (link) {
            body += '\n\nResgate aqui:\n' + link;
        }
        textPreview.textContent = body;
    }

    bodyInput.addEventListener('input', updatePreviewText);

    // -- Preview toggle mobile --
    const previewPanel = document.getElementById('previewPanel');
    const previewToggleBtn = document.getElementById('previewToggleBtn');

    function isSmallScreen() {
        return window.innerWidth < 992;
    }

    function initPreviewVisibility() {
        if (isSmallScreen()) {
            previewPanel.classList.add('d-none');
        }
    }

    previewToggleBtn.addEventListener('click', () => {
        if (isSmallScreen()) {
            const hidden = previewPanel.classList.toggle('d-none');
            previewToggleBtn.innerHTML = hidden
                ? '<i class="bi bi-eye me-1"></i>Preview'
                : '<i class="bi bi-eye-slash me-1"></i>Ocultar Preview';
        }
    });

    initPreviewVisibility();

    const checkedBtn = document.querySelector('.marketplace-btn.active') ||
                       document.querySelector('.marketplace-btn');
    if (checkedBtn) selectMarketplace(checkedBtn);

    updatePreviewText();

    const couponForm = document.getElementById('couponForm');
    const publishOverlay = document.getElementById('publishOverlay');
    const submitBtn = document.getElementById('submitBtn');

    couponForm?.addEventListener('submit', function () {
        if (publishOverlay) {
            publishOverlay.classList.remove('d-none');
        }
        if (submitBtn) {
            submitBtn.disabled = true;
            const label = submitBtn.querySelector('span');
            if (label) {
                label.textContent = 'Publicando…';
            }
        }
    });

    function escHtml(str) {
        return str.replace(/[&<>"']/g, m => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#039;'}[m]));
    }
})();
</script>
@endpush