@extends('layouts.cabinet')

@section('title', 'Настройка мини-приложения — Placeo')

@php
    $exists = $app->exists;
    $action = $exists ? route('cabinet.miniapps.update', $app) : route('cabinet.miniapps.store');
    $cfg = array_merge(\App\Models\MiniApp::defaultConfig(), $app->config ?? []);
    $initialCats = $selectedCategories->map(fn ($name, $id) => ['id' => $id, 'name' => $name])->values();
    $tgLink = $exists ? $app->telegramLink() : null;
    $previewUrl = $exists ? url('/tg/' . $app->public_key) : null;
@endphp

@section('cabinet')
<div>
    <div class="mb-6 flex items-center justify-between">
        <h1 class="text-2xl font-bold">{{ $exists ? 'Настройка мини-приложения' : 'Новое мини-приложение' }}</h1>
        <a href="{{ route('cabinet.miniapps.index') }}" class="text-sm text-muted hover:text-brand-600">‹ К списку</a>
    </div>

    @if (session('status'))<div class="mb-4 rounded-lg bg-brand-50 px-4 py-3 text-sm text-brand-800">{{ session('status') }}</div>@endif
    @if ($errors->any())<div class="mb-4 rounded-lg bg-red-50 px-4 py-3 text-sm text-red-700"><ul class="list-inside list-disc">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul></div>@endif

    <div class="grid gap-6 lg:grid-cols-2">
        {{-- Настройки --}}
        <form method="POST" action="{{ $action }}" class="card space-y-5 p-5" x-data="catPicker({{ Illuminate\Support\Js::from($initialCats) }})">
            @csrf
            @if ($exists) @method('PUT') @endif

            <div>
                <label class="mb-1 block text-sm font-medium text-gray-700">Название</label>
                <input type="text" name="name" value="{{ old('name', $app->name) }}" class="input" required>
                <p class="mt-1 text-xs text-muted">Видно только вам — чтобы различать мини-приложения для разных групп.</p>
            </div>

            {{-- Цвета --}}
            <style>
                .wcolor-input { -webkit-appearance: none; appearance: none; width: 100%; height: 2.5rem; padding: 0; border: 1px solid #e5e7eb; border-radius: .65rem; cursor: pointer; background: none; }
                .wcolor-input::-webkit-color-swatch-wrapper { padding: 0; }
                .wcolor-input::-webkit-color-swatch { border: none; border-radius: .6rem; }
                .wcolor-input::-moz-color-swatch { border: none; border-radius: .6rem; }
                .wcolor-hex { margin-top: 4px; text-align: center; font-size: .7rem; letter-spacing: .03em; text-transform: uppercase; color: #9aa0ad; }
                .wrange { width: 100%; accent-color: var(--brand-500, #7c3aed); }
            </style>
            <div class="grid grid-cols-2 gap-3 sm:grid-cols-3">
                @foreach (['bg_color' => 'Фон', 'card_bg' => 'Карточки', 'button_color' => 'Кнопки', 'button_text_color' => 'Текст кнопок', 'text_color' => 'Текст'] as $key => $label)
                    <div>
                        <label class="mb-1 block text-xs text-muted">{{ $label }}</label>
                        <input type="color" name="{{ $key }}" value="{{ old($key, $cfg[$key]) }}" class="wcolor-input"
                               oninput="this.nextElementSibling.textContent = this.value">
                        <div class="wcolor-hex">{{ old($key, $cfg[$key]) }}</div>
                    </div>
                @endforeach
                <div>
                    <label class="mb-1 block text-xs text-muted">Размер шрифта</label>
                    <input type="number" name="font_size" min="12" max="22" value="{{ old('font_size', $cfg['font_size']) }}" class="input px-2 py-1.5">
                </div>
            </div>

            {{-- Сетка и отображение --}}
            <div class="grid grid-cols-2 gap-3">
                <div>
                    <label class="mb-1 block text-xs text-muted">Размер плиток</label>
                    @php $cs = old('card_size', $cfg['card_size'] ?? 'medium'); @endphp
                    <select name="card_size" class="input px-2 py-1.5">
                        <option value="small" @selected($cs==='small')>Маленькие</option>
                        <option value="medium" @selected($cs==='medium')>Средние</option>
                        <option value="large" @selected($cs==='large')>Большие</option>
                    </select>
                </div>
                <div>
                    <label class="mb-1 block text-xs text-muted">Отображение</label>
                    @php $lay = old('layout', $cfg['layout'] ?? 'grid'); @endphp
                    <select name="layout" class="input px-2 py-1.5">
                        <option value="grid" @selected($lay==='grid')>Плитками</option>
                        <option value="list" @selected($lay==='list')>По одному в строке</option>
                    </select>
                </div>
            </div>
            {{-- Радиус скругления --}}
            @php $rc = (int) old('radius_card', $cfg['radius_card'] ?? 16); $rb = (int) old('radius_button', $cfg['radius_button'] ?? 12); @endphp
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="mb-1 flex items-center justify-between text-xs text-muted">
                        <span>Скругление объявлений</span><span id="rc-val" class="font-medium text-gray-600">{{ $rc }} px</span>
                    </label>
                    <input type="range" name="radius_card" min="0" max="30" value="{{ $rc }}" class="wrange"
                           oninput="document.getElementById('rc-val').textContent = this.value + ' px'">
                </div>
                <div>
                    <label class="mb-1 flex items-center justify-between text-xs text-muted">
                        <span>Скругление кнопок</span><span id="rb-val" class="font-medium text-gray-600">{{ $rb }} px</span>
                    </label>
                    <input type="range" name="radius_button" min="0" max="30" value="{{ $rb }}" class="wrange"
                           oninput="document.getElementById('rb-val').textContent = this.value + ' px'">
                </div>
            </div>

            {{-- Категории --}}
            <div>
                <label class="mb-1 block text-sm font-medium text-gray-700">Группы объявлений (категории)</label>
                <div class="mb-2 flex flex-wrap gap-1">
                    <template x-for="c in selected" :key="c.id">
                        <span class="inline-flex items-center gap-1 rounded-full bg-brand-100 px-2.5 py-1 text-xs text-brand-800">
                            <span x-text="c.name"></span>
                            <button type="button" @click="remove(c.id)" class="text-brand-600">×</button>
                            <input type="hidden" name="category_ids[]" :value="c.id">
                        </span>
                    </template>
                    <span x-show="!selected.length" class="text-xs text-muted">Не выбрано — будут доступны все категории.</span>
                </div>
                <div class="flex flex-wrap items-end gap-2">
                    <template x-for="(level, i) in levels" :key="i">
                        <select x-model="level.selected" @change="onSelect(i)" class="input w-auto px-2 py-1.5 text-sm">
                            <option value="">—</option>
                            <template x-for="o in level.options" :key="o.id">
                                <option :value="o.id" x-text="o.name + (o.is_leaf ? '' : ' ›')"></option>
                            </template>
                        </select>
                    </template>
                    <button type="button" @click="add()" class="btn-tonal px-3 py-1.5 text-sm">+ Добавить</button>
                </div>
            </div>

            {{-- Опции --}}
            <div class="space-y-2">
                <label class="flex items-center gap-2 text-sm text-gray-700">
                    <input type="checkbox" name="only_own" value="1" @checked(old('only_own', $cfg['only_own'])) class="rounded border-gray-300 text-brand-500">
                    Показывать только объявления, поданные из этой группы
                </label>
            </div>

            {{-- Фильтры для посетителей --}}
            <div class="space-y-2" x-data="{ showCat: {{ old('show_category_filter', $cfg['show_category_filter']) ? 'true' : 'false' }} }">
                <div class="text-sm font-medium text-gray-700">Фильтры для посетителей</div>
                <label class="flex items-center gap-2 text-sm text-gray-700">
                    <input type="checkbox" name="show_category_filter" value="1" x-model="showCat" class="rounded border-gray-300 text-brand-500">
                    Фильтр по категориям
                </label>
                <div class="ml-6" x-show="showCat" x-cloak>
                    <label class="mb-1 block text-xs text-muted">Вид фильтра категорий</label>
                    @php $cfs = old('category_filter_style', $cfg['category_filter_style'] ?? 'tabs_top'); @endphp
                    <select name="category_filter_style" class="input w-auto px-2 py-1.5 text-sm">
                        <option value="tabs_top" @selected($cfs==='tabs_top')>Вкладки сверху</option>
                        <option value="tabs_left" @selected($cfs==='tabs_left')>Вкладки слева</option>
                        <option value="select" @selected($cfs==='select')>Выпадающий список</option>
                    </select>
                </div>
                <label class="flex items-center gap-2 text-sm text-gray-700">
                    <input type="checkbox" name="show_price_filter" value="1" @checked(old('show_price_filter', $cfg['show_price_filter'])) class="rounded border-gray-300 text-brand-500">
                    Фильтр по цене
                </label>
                <label class="flex items-center gap-2 text-sm text-gray-700">
                    <input type="checkbox" name="show_search" value="1" @checked(old('show_search', $cfg['show_search'])) class="rounded border-gray-300 text-brand-500">
                    Строка поиска
                </label>
                <label class="flex items-center gap-2 text-sm text-gray-700">
                    <input type="checkbox" name="show_sort" value="1" @checked(old('show_sort', $cfg['show_sort'])) class="rounded border-gray-300 text-brand-500">
                    Сортировка
                </label>
            </div>

            <div class="flex items-center justify-between border-t border-gray-100 pt-4">
                @if ($exists)
                    <button form="del-app" class="text-sm text-red-600 hover:underline">Удалить</button>
                @else <span></span> @endif
                <button type="submit" class="btn-brand">{{ $exists ? 'Сохранить' : 'Создать' }}</button>
            </div>
        </form>

        @if ($exists)
            <form id="del-app" method="POST" action="{{ route('cabinet.miniapps.destroy', $app) }}" class="hidden">@csrf @method('DELETE')</form>

            {{-- Ссылка для Telegram + проверка --}}
            <div class="space-y-4" x-data="{ copied: false, copy(t) { navigator.clipboard.writeText(t).then(() => { this.copied = true; setTimeout(() => this.copied = false, 1500); }); } }">
                <div class="card p-5">
                    <h2 class="mb-2 text-sm font-semibold text-gray-800">Ссылка для Telegram</h2>
                    @if ($tgLink)
                        <div class="flex items-center gap-2">
                            <input type="text" readonly value="{{ $tgLink }}" class="input flex-1 text-xs" onclick="this.select()">
                            <button type="button" @click="copy(@js($tgLink))" class="btn-tonal shrink-0 px-3 py-2 text-sm">
                                <span x-show="!copied">Копировать</span><span x-show="copied" x-cloak>✓</span>
                            </button>
                        </div>
                        <p class="mt-2 text-xs text-muted">Закрепите эту ссылку (или сделайте из неё кнопку) в своей Telegram-группе. Участники откроют мини-приложение прямо в Telegram.</p>
                    @else
                        <div class="rounded-lg bg-amber-50 px-3 py-2.5 text-xs text-amber-800">
                            Бот мини-приложения ещё не настроен (этап подключения Telegram). Ключ группы: <code class="font-mono">{{ $app->public_key }}</code> — ссылка появится здесь после настройки бота.
                        </div>
                    @endif
                </div>

                <div class="card p-5">
                    <h2 class="mb-2 text-sm font-semibold text-gray-800">Проверить в браузере</h2>
                    <a href="{{ $previewUrl }}" target="_blank" class="btn-ghost inline-flex px-4 py-2 text-sm">Открыть мини-приложение ↗</a>
                    <p class="mt-2 text-xs text-muted">Так выглядит лента мини-приложения для участников группы. Публикация объявлений и авторизация по телефону подключаются на следующем этапе.</p>
                </div>
            </div>
        @else
            <div class="card grid place-items-center p-8 text-center text-sm text-muted">
                Сохраните мини-приложение, чтобы получить ссылку для Telegram и проверить его.
            </div>
        @endif
    </div>
</div>
@endsection