@extends('layouts.vuexy')

@section('title', 'Nueva campaña — Contenido')

@section('content')
    @include('campaigns.partials._wizard-steps', ['step' => 1])

    @if ($errors->any())
        <div class="alert alert-danger">{{ $errors->first() }}</div>
    @endif

    <div class="row g-6">
        <div class="col-lg-6">
            <div class="card mb-6">
                <div class="card-body">
                    <h6 class="card-title">1. Elige un restaurante</h6>
                    <div class="input-group mb-4">
                        <span class="input-group-text"><i class="icon-base ti tabler-search"></i></span>
                        <input type="search" id="q" class="form-control" placeholder="Buscar restaurante por nombre…">
                    </div>
                    <div id="search-results" class="list-group"></div>
                </div>
            </div>
        </div>

        <div class="col-lg-6">
            <div class="card">
                <div class="card-body">
                    <h6 class="card-title">2. Elige la foto y el texto del anuncio</h6>

                    <div id="no-restaurant" class="text-body-secondary py-6 text-center" @if(!empty($draft)) style="display:none;" @endif>
                        Busca y selecciona un restaurante para continuar.
                    </div>

                    <form id="content-form" method="POST" action="{{ route('campaigns.create.content') }}" @if(empty($draft)) style="display:none;" @endif>
                        @csrf
                        <input type="hidden" name="restaurant_id" id="restaurant_id" value="{{ $draft['restaurant_id'] ?? '' }}">
                        <input type="hidden" name="restaurant_name" id="restaurant_name" value="{{ $draft['restaurant_name'] ?? '' }}">
                        <input type="hidden" name="restaurant_city" id="restaurant_city" value="{{ $draft['restaurant_city'] ?? '' }}">
                        <input type="hidden" name="restaurant_lat" id="restaurant_lat" value="{{ $draft['restaurant_lat'] ?? '' }}">
                        <input type="hidden" name="restaurant_lng" id="restaurant_lng" value="{{ $draft['restaurant_lng'] ?? '' }}">
                        <input type="hidden" name="image_source" id="image_source" value="{{ $draft['image_source'] ?? '' }}">
                        <input type="hidden" name="image_url" id="image_url" value="{{ $draft['image_url'] ?? '' }}">

                        <p class="mb-3">Restaurante: <strong id="selected-restaurant-name">{{ $draft['restaurant_name'] ?? '' }}</strong></p>

                        <div id="image-picker" class="d-flex flex-wrap gap-3 mb-4">
                            @if (!empty($draft['image_url']))
                                <img src="{{ $draft['image_url'] }}" class="rounded border border-primary border-3" style="width: 90px; height: 90px; object-fit: cover;">
                            @endif
                        </div>
                        <div id="image-picker-help" class="form-text mb-4">Haz clic en una foto para usarla en el anuncio.</div>

                        <div class="mb-4">
                            <label class="form-label" for="headline">Título del anuncio</label>
                            <input type="text" class="form-control" id="headline" name="headline" maxlength="255"
                                value="{{ $draft['headline'] ?? '' }}" placeholder="Ej: Tierra Latina — Envío gratis hoy">
                        </div>

                        <div class="mb-4">
                            <label class="form-label" for="primary_text">Texto del anuncio</label>
                            <textarea class="form-control" id="primary_text" name="primary_text" rows="2" maxlength="500"
                                placeholder="Ej: Pide ya y recibe en 25-30 min.">{{ $draft['primary_text'] ?? '' }}</textarea>
                        </div>

                        <div class="mb-4">
                            <label class="form-label" for="discount_badge_text">Badge de descuento (opcional)</label>
                            <input type="text" class="form-control" id="discount_badge_text" name="discount_badge_text" maxlength="50"
                                value="{{ $draft['discount_badge_text'] ?? '' }}" placeholder="Ej: 20% OFF">
                        </div>

                        <div class="mb-6">
                            <label class="form-label" for="deep_link_url">Deep link (opcional)</label>
                            <input type="text" class="form-control" id="deep_link_url" name="deep_link_url" maxlength="2048"
                                value="{{ $draft['deep_link_url'] ?? '' }}" placeholder="https://…">
                            <div class="form-text">
                                Formato de deep link de la app todavía no confirmado (ver GIGI/plan-implementacion.md, Fase 3) — se puede dejar vacío por ahora.
                            </div>
                        </div>

                        <div class="d-flex justify-content-between">
                            <form method="POST" action="{{ route('campaigns.create.cancel') }}">
                                @csrf
                                <button type="submit" class="btn btn-label-secondary">Cancelar</button>
                            </form>
                            <button type="submit" class="btn btn-primary" id="submit-content" @if(empty($draft['image_url'])) disabled @endif>
                                Siguiente: Configuración
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
const qEl = document.getElementById('q');
const resultsEl = document.getElementById('search-results');
const noRestaurantEl = document.getElementById('no-restaurant');
const formEl = document.getElementById('content-form');
const imagePicker = document.getElementById('image-picker');
const submitBtn = document.getElementById('submit-content');

function debounce(fn, ms) {
    let t;
    return (...args) => { clearTimeout(t); t = setTimeout(() => fn(...args), ms); };
}

async function search() {
    const params = new URLSearchParams();
    if (qEl.value.trim()) params.set('q', qEl.value.trim());

    resultsEl.innerHTML = '<p class="text-body-secondary small">Buscando…</p>';

    const res = await fetch(`{{ route('content.restaurants') }}?${params}`, { headers: { 'Accept': 'application/json' } });
    if (!res.ok) {
        resultsEl.innerHTML = '<p class="text-danger small">Error consultando partners.gigiapp.com.</p>';
        return;
    }
    const data = await res.json();
    const stores = data.stores || [];

    if (stores.length === 0) {
        resultsEl.innerHTML = '<p class="text-body-secondary small">Sin resultados.</p>';
        return;
    }

    resultsEl.innerHTML = '';
    for (const store of stores) {
        const item = document.createElement('button');
        item.type = 'button';
        item.className = 'list-group-item list-group-item-action d-flex align-items-center gap-3';
        item.innerHTML = `
            <img src="${store.logo_full_url || ''}" style="width: 40px; height: 40px; object-fit: cover;" class="rounded">
            <span>${store.name}<br><small class="text-body-secondary">${store.address || ''}</small></span>
        `;
        item.addEventListener('click', () => selectRestaurant(store));
        resultsEl.appendChild(item);
    }
}

async function selectRestaurant(store) {
    document.getElementById('restaurant_id').value = store.id;
    document.getElementById('restaurant_name').value = store.name;
    document.getElementById('restaurant_lat').value = store.latitude || '';
    document.getElementById('restaurant_lng').value = store.longitude || '';
    document.getElementById('selected-restaurant-name').textContent = store.name;

    if (store.discount) {
        const d = store.discount;
        const value = typeof d === 'object' ? d.discount : d;
        if (value) document.getElementById('discount_badge_text').value = `${value}% OFF`;
    }

    noRestaurantEl.style.display = 'none';
    formEl.style.display = '';
    imagePicker.innerHTML = '<p class="text-body-secondary small">Cargando fotos…</p>';

    const res = await fetch(`/content/restaurants/${store.id}`, { headers: { 'Accept': 'application/json' } });
    const data = await res.json();
    const detail = data.store || store;
    const items = data.popular_items || [];

    const options = [];
    if (detail.logo_full_url) options.push({ source: 'store_logo', url: detail.logo_full_url, label: 'Logo' });
    if (detail.cover_photo_full_url) options.push({ source: 'store_cover', url: detail.cover_photo_full_url, label: 'Portada' });
    for (const item of items.slice(0, 6)) {
        if (item.image_full_url) options.push({ source: 'item_image', url: item.image_full_url, label: item.name });
    }

    if (options.length === 0) {
        imagePicker.innerHTML = '<p class="text-danger small">Este restaurante no tiene fotos disponibles.</p>';
        return;
    }

    imagePicker.innerHTML = '';
    for (const opt of options) {
        const img = document.createElement('img');
        img.src = opt.url;
        img.title = opt.label;
        img.className = 'rounded border';
        img.style.cssText = 'width: 90px; height: 90px; object-fit: cover; cursor: pointer;';
        img.addEventListener('click', () => {
            document.getElementById('image_source').value = opt.source;
            document.getElementById('image_url').value = opt.url;
            imagePicker.querySelectorAll('img').forEach(i => i.classList.remove('border-primary', 'border-3'));
            img.classList.add('border-primary', 'border-3');
            submitBtn.disabled = false;
        });
        imagePicker.appendChild(img);
    }
}

qEl.addEventListener('input', debounce(search, 400));
search();
</script>
@endpush