@extends('layouts.merchant')

@section('title', $feed->name)

@section('content')
@php($isActive = $feed->status === \App\Enums\FeedStatus::Active)
@php($marketplace = $feed->isMarketplace())
@php($type = $feed->source_type)
<div class="flex flex-wrap items-center justify-between gap-3">
    <div>
        <h1 class="text-2xl font-extrabold tracking-tight text-[var(--color-ink)]">{{ $feed->name }}</h1>
        <p class="text-sm text-[var(--color-muted)]">{{ $feed->status->label() }} · обновление {{ $feed->update_interval_minutes == 720 ? '2 раза в день' : '1 раз в день' }}</p>
    </div>
    <div class="flex flex-wrap items-center gap-2">
        {{-- Ручной импорт нужен только до первой успешной выгрузки — дальше работает автоматика. --}}
        @unless ($feed->last_success_at)
            <form method="POST" action="{{ route('merchant.feeds.run', $feed) }}">@csrf<button class="rounded-[var(--radius-md)] bg-[var(--color-primary)] px-4 py-2.5 text-sm font-bold text-white shadow-[var(--shadow-primary)]">Импортировать сейчас</button></form>
        @endunless
        @unless ($feed->isBlocked())
            @if ($isActive)
                <x-confirm-form :action="route('merchant.feeds.toggle', $feed)"
                                title="Выключить фид?"
                                message="Ваши товары будут скрыты из каталога, пока фид выключен. Продолжить?"
                                confirm="Выключить"
                                trigger-label="Выключить"
                                trigger-class="rounded-[var(--radius-md)] border-[1.5px] border-[#E1E4EA] px-4 py-2.5 text-sm font-bold text-[var(--color-ink)]" />
            @else
                <form method="POST" action="{{ route('merchant.feeds.toggle', $feed) }}">@csrf
                    <button class="rounded-[var(--radius-md)] border-[1.5px] border-[var(--color-success)] px-4 py-2.5 text-sm font-bold text-[var(--color-success)]">Включить</button>
                </form>
            @endif
        @endunless
        <x-confirm-form :action="route('merchant.feeds.destroy', $feed)" method="DELETE" :danger="true"
                        title="Удалить фид?"
                        message="Фид и его настройки будут удалены. Товары, загруженные из него, перестанут показываться в каталоге. Это действие необратимо."
                        confirm="Удалить фид"
                        trigger-label="Удалить"
                        trigger-class="rounded-[var(--radius-md)] border-[1.5px] border-[#E1E4EA] px-4 py-2.5 text-sm font-bold text-[var(--color-sale)]" />
    </div>
</div>

@unless ($isActive)
    <div class="mt-4 rounded-[var(--radius-md)] bg-[#FFF7E6] px-4 py-3 text-sm font-semibold text-[#9A6700]">
        Фид {{ $feed->status->label() }} — его товары не показываются в каталоге. Нажмите «Включить», чтобы возобновить.
    </div>
@endunless

{{-- Две выгрузки одного каталога — товары задваиваются на витрине. Предупреждаем,
     но ничего не выключаем: второй фид бывает нужен, например на время переезда,
     и решать это продавцу. Метку ставит проверка после импорта. --}}
@if ($feed->duplicateOf)
    <div class="mt-4 rounded-[var(--radius-md)] border border-[#F5C518] bg-[#FFF7E6] px-4 py-3 text-sm text-[#9A6700]">
        <b class="block">Похоже, эта выгрузка повторяет «{{ $feed->duplicateOf->name }}»</b>
        Совпало {{ $feed->duplicate_ratio }}% артикулов, значит одни и те же товары попадают в каталог дважды.
        Если каталог один и тот же, оставьте одну выгрузку — вторую можно
        <a href="{{ route('merchant.feeds.show', $feed->duplicateOf) }}" class="font-bold underline">открыть и сравнить</a>.
    </div>
@endif

{{-- Товар без цены на площадку не загружается. В истории импортов продавец видит
     только «Пропущено», а чинится этот пропуск не в сопоставлении категорий, а в
     самом файле выгрузки — поэтому говорим прямо. --}}
@if ($noPriceCount > 0)
    <div class="mt-4 rounded-[var(--radius-md)] border border-[#F5C518] bg-[#FFF7E6] px-4 py-3 text-sm text-[#9A6700]">
        <b class="block">Товаров без цены в последней выгрузке: {{ number_format($noPriceCount, 0, '', ' ') }}</b>
        На teeu товары без цены не загружаются — купить такой товар нельзя.
        {{ $marketplace ? 'Укажите цену товара в кабинете '.$type->label() : 'Укажите цену в файле выгрузки' }},
        и при следующем обновлении эти позиции появятся в каталоге.
    </div>
@endif

{{-- Цены Wildberries отдаёт по тысяче товаров раз в 15 минут, и у большого
     кабинета они собираются часами. Карточка без собранной цены в каталог не
     попадает — продавец должен видеть, что это «ещё загружается», а не «пропало». --}}
@if ($pricesPending && ($pricesPending['skipped'] > 0 || $pricesPending['waiting'] > 0))
    <div class="mt-4 rounded-[var(--radius-md)] border border-[var(--color-line)] bg-[var(--color-primary-soft)] px-4 py-3 text-sm text-[var(--color-slate)]">
        @if ($pricesPending['waiting'] > 0)
            @php($hours = max(1, (int) ceil($pricesPending['waiting'] / 1000 * \App\Services\Yml\Wildberries\WildberriesPrices::INTERVAL_MINUTES / 60)))
            <b class="block text-[var(--color-ink)]">Цены ещё загружаются: {{ number_format($pricesPending['waiting'], 0, '', ' ') }} {{ \App\Support\Ru::plural($pricesPending['waiting'], ['товар ждёт', 'товара ждут', 'товаров ждут']) }} цену</b>
            Wildberries отдаёт цены по 1000 товаров раз в 15 минут, поэтому большой каталог появляется постепенно —
            примерно {{ $hours }} {{ \App\Support\Ru::plural($hours, ['час', 'часа', 'часов']) }}. Товары добавятся в каталог сами.
            {{-- Окно цен у WB одно на весь кабинет: если его раз за разом занимает
                 другая интеграция продавца, цены не придут никогда — это надо сказать. --}}
            @if ($pricesPending['limited_since']?->lt(now()->subHour()))
                <span class="mt-1 block text-[#9A6700]">Но с {{ $pricesPending['limited_since']->timezone(config('app.timezone'))->format('d.m в H:i') }} Wildberries не отдаёт цены: лимит 4 запроса в час общий на весь кабинет, и его, похоже, расходует другая ваша интеграция. Проверьте, как часто учётная система или сервис аналитики запрашивают цены.</span>
            @endif
        @else
            <b class="block text-[var(--color-ink)]">Цены загружены</b>
            {{ number_format($pricesPending['skipped'], 0, '', ' ') }} {{ \App\Support\Ru::plural($pricesPending['skipped'], ['товар появится', 'товара появятся', 'товаров появятся']) }} в каталоге при ближайшем обновлении выгрузки.
        @endif
    </div>
@endif

{{-- У ключа маркетплейса есть срок: три месяца у Ozon, полгода у Wildberries.
     Истёк — выгрузка перестаёт обновляться, а после нескольких неудач подряд
     отключается и прячет товары. Узнать об этом продавец должен здесь и заранее,
     а не по опустевшей витрине. --}}
@if ($marketplace && ($feed->credentialsExpired() || $feed->credentialsExpireSoon()))
    <div class="mt-4 rounded-[var(--radius-md)] border border-[#F5C518] bg-[#FFF7E6] px-4 py-3 text-sm text-[#9A6700]">
        <b class="block">
            @if ($feed->credentialsExpired())
                {{ $type->keyName() }} {{ $type->label() }} истёк {{ $feed->credentials_expires_at->format('d.m.Y') }}
            @else
                {{ $type->keyName() }} {{ $type->label() }} истекает {{ $feed->credentials_expires_at->format('d.m.Y') }}
            @endif
        </b>
        Выпустите новый {{ mb_strtolower($type->keyName()) }} в кабинете {{ $type->label() }} ({{ $type->keyPlace() }}) и вставьте его
        в блоке «Кабинет {{ $type->label() }}» ниже — иначе цены и наличие перестанут обновляться.
    </div>
@endif

{{-- Feed settings the seller controls. --}}
<div class="mt-6 rounded-[var(--radius-lg)] border border-[var(--color-line)] bg-white p-5">
    <h2 class="text-lg font-extrabold text-[var(--color-ink)]">Настройки</h2>

    @if ($marketplace)
    {{-- Кабинет маркетплейса вместо адреса выгрузки. Сменить кабинет нельзя —
         другой кабинет это другой каталог; а ключ заменить можно и нужно: у него
         есть срок. Сам ключ не печатается — им управляют магазином. --}}
    @php($lastRun = $feed->runs->sortByDesc('id')->first())
    @php($keyWord = $type === \App\Enums\YmlSourceType::Wildberries ? 'токен' : 'ключ')
    <div class="mt-3 rounded-[var(--radius-md)] bg-[var(--color-canvas)] p-4">
        <div class="flex flex-wrap items-center justify-between gap-2">
            <span class="text-sm font-semibold text-[var(--color-ink)]">Кабинет {{ $type->label() }}</span>
            {{-- Client ID продавец Ozon узнаёт в лицо; ID продавца WB — UUID из токена, его не показываем. --}}
            @if ($type === \App\Enums\YmlSourceType::Ozon)
                <span class="font-mono text-xs text-[var(--color-slate)]">Client ID {{ $feed->external_account_id }}</span>
            @endif
        </div>

        <div class="mt-1 text-xs text-[var(--color-slate)]">
            @if (filled($feed->settings['company'] ?? null)) {{ $feed->settings['company'] }} · @endif
            {{ $type === \App\Enums\YmlSourceType::Wildberries ? 'Токен' : 'API-ключ' }} {{ $feed->maskedApiKey() }}
            @if ($feed->credentials_expires_at) · действует до {{ $feed->credentials_expires_at->format('d.m.Y') }} @endif
        </div>

        @if ($feed->last_success_at)
            <div class="mt-2 text-xs text-[var(--color-muted)]">
                Последняя удачная синхронизация: {{ $feed->last_success_at->format('d.m.Y в H:i') }}.
            </div>
        @endif
        @if ($lastRun && $lastRun->status === \App\Enums\ImportRunStatus::Failed && $lastRun->error_message)
            <div class="mt-2 text-xs text-[var(--color-sale)]">
                Последняя синхронизация не удалась: {{ $lastRun->error_message }}
            </div>
        @endif

        <form method="POST" action="{{ route('merchant.feeds.credentials', $feed) }}" class="mt-3 flex flex-wrap items-start gap-2">
            @csrf
            <x-secret-input name="api_key" :placeholder="'Новый '.($type === \App\Enums\YmlSourceType::Wildberries ? 'токен' : 'API-ключ')"
                            class="w-full max-w-sm rounded-[var(--radius-md)] border-[1.5px] border-[#E1E4EA] bg-white px-3 py-2 text-sm outline-none focus:border-[var(--color-primary)]" />
            <button class="rounded-[var(--radius-md)] border-[1.5px] border-[#E1E4EA] bg-white px-4 py-2 text-sm font-bold text-[var(--color-ink)] transition hover:border-[var(--color-primary)] hover:text-[var(--color-primary)]">Заменить {{ $keyWord }}</button>
            @error('api_key') <p class="w-full text-xs font-semibold text-[var(--color-sale)]">{{ $message }}</p> @enderror
        </form>
    </div>
    @else
    {{-- Адрес выгрузки: продавец вводит его один раз при подключении и потом
         нигде не видит — а свериться с ним нужно как раз тогда, когда товары
         перестали приходить. Поля для правки нет: смена адреса означает другой
         каталог, и делается она через поддержку. --}}
    <div class="mt-3 rounded-[var(--radius-md)] bg-[var(--color-canvas)] p-4"
         x-data="{ copied: false }">
        <div class="flex flex-wrap items-center justify-between gap-2">
            <span class="text-sm font-semibold text-[var(--color-ink)]">
                {{ $feed->source_type === \App\Enums\YmlSourceType::File ? 'Загруженный файл' : 'Адрес выгрузки' }}
            </span>

            @if ($feed->url)
                <div class="flex items-center gap-3">
                    <button type="button"
                            @click="navigator.clipboard.writeText($refs.feedUrl.textContent.trim()); copied = true; setTimeout(() => copied = false, 2000)"
                            class="text-sm font-bold text-[var(--color-primary)] hover:underline">
                        <span x-show="!copied">Скопировать</span>
                        <span x-show="copied" x-cloak>Скопировано</span>
                    </button>
                    <a href="{{ $feed->url }}" target="_blank" rel="noopener nofollow"
                       class="text-sm font-bold text-[var(--color-primary)] hover:underline">Открыть</a>
                </div>
            @endif
        </div>

        <div x-ref="feedUrl" class="mt-1 break-all font-mono text-xs text-[var(--color-slate)]">{{ $feed->url ?: basename((string) $feed->file_path) }}</div>

        @if ($feed->last_success_at)
            <div class="mt-2 text-xs text-[var(--color-muted)]">
                Последняя удачная загрузка: {{ $feed->last_success_at->format('d.m.Y в H:i') }}.
            </div>
        @elseif ($feed->failed_sync_count > 0)
            <div class="mt-2 text-xs text-[var(--color-sale)]">
                Файл по этому адресу не загружается — неудачных попыток подряд: {{ $feed->failed_sync_count }}.
            </div>
        @endif
    </div>
    @endif
    <form method="POST" action="{{ route('merchant.feeds.settings', $feed) }}" class="mt-4">
        @csrf

        {{-- Два поля в ряд, дальше — переключатели, и только потом кнопка. Раньше
             всё лежало одной строкой с переносом: длинные подписи чекбоксов рвали
             ряд, и «Сохранить» оказывалась посреди текста. --}}
        <div class="grid gap-4 sm:grid-cols-2 lg:max-w-2xl">
            {{-- Тематика решает спорные названия: «Прокладка» бывает автомобильной и
                 гигиенической, «Подшипник» — велосипедным и автомобильным. Мы её
                 определяем сами, но последнее слово за продавцом: он знает свой
                 ассортимент, а ошибка здесь уводит весь каталог целиком. --}}
            <label class="block">
                <span class="mb-1.5 block text-sm font-semibold text-[var(--color-ink)]">Тематика магазина</span>
                <select name="theme" class="w-full rounded-[var(--radius-md)] border-[1.5px] border-[#E1E4EA] bg-white px-4 py-2.5 text-sm outline-none focus:border-[var(--color-primary)]">
                    <option value="">определять автоматически</option>
                    @foreach (\App\Enums\FeedTheme::options() as $value => $title)
                        <option value="{{ $value }}" @selected($feed->theme === $value)>{{ $title }}</option>
                    @endforeach
                </select>
                @if ($feed->theme && $feed->theme_source === 'ai')
                    <span class="mt-1 block text-xs text-[var(--color-muted)]">Определено автоматически — поправьте, если неверно.</span>
                @endif
            </label>

            <label class="block">
                <span class="mb-1.5 block text-sm font-semibold text-[var(--color-ink)]">Как часто обновлять</span>
                <select name="update_interval_minutes" class="w-full rounded-[var(--radius-md)] border-[1.5px] border-[#E1E4EA] bg-white px-4 py-2.5 text-sm outline-none focus:border-[var(--color-primary)]">
                    <option value="1440" @selected($feed->update_interval_minutes == 1440)>1 раз в день</option>
                    <option value="720" @selected($feed->update_interval_minutes == 720)>2 раза в день</option>
                </select>
            </label>
        </div>

        <div class="mt-5 space-y-3 border-t border-[var(--color-line)] pt-4">
            {{-- У кабинета маркетплейса «своей страницы товара» нет: ссылка вела бы
                 покупателя с teeu на сам маркетплейс. --}}
            @unless ($marketplace)
                <label class="flex items-start gap-2.5">
                    <input type="checkbox" name="show_source_url" value="1" @checked($feed->showsSourceUrl()) class="mt-0.5 h-4 w-4 shrink-0 rounded border-[#E1E4EA]">
                    <span class="text-sm text-[var(--color-ink)]">
                        Кнопка «Смотреть на сайте продавца» в карточке товара
                        <span class="mt-0.5 block text-xs text-[var(--color-muted)]">Ведёт на вашу страницу товара, открывается в новой вкладке.</span>
                    </span>
                </label>
            @endunless

            <label class="flex items-start gap-2.5">
                <input type="checkbox" name="publish_out_of_stock" value="1" @checked($feed->publishOutOfStock()) class="mt-0.5 h-4 w-4 shrink-0 rounded border-[#E1E4EA]">
                <span class="text-sm text-[var(--color-ink)]">
                    Показывать товары без остатка как «Под заказ»
                    <span class="mt-0.5 block text-xs text-[var(--color-muted)]">
                        @if ($marketplace)
                            Если на отмеченных складах товара нет, он всё равно появится в каталоге — со статусом «Под заказ». Наличие пересчитается сразу после сохранения.
                        @else
                            Если в выгрузке товар помечен «нет в наличии», он всё равно появится в каталоге — со статусом «Под заказ». Наличие пересчитается сразу после сохранения.
                        @endif
                    </span>
                </span>
            </label>
        </div>

        <button class="mt-5 rounded-[var(--radius-md)] bg-[var(--color-primary)] px-5 py-2.5 text-sm font-bold text-white shadow-[var(--shadow-primary)] hover:bg-[var(--color-primary-dark)]">Сохранить</button>
    </form>
</div>

@if ($marketplace)
    {{-- Склады для наличия. Товар на своём складе продавец отгрузит покупателю
         teeu сам, со склада маркетплейса — нет, поэтому что считать остатком,
         решает он. Смена отметок пересчитывает наличие сразу, из остатков
         последнего прогона. --}}
    @php($selectedWarehouses = $feed->stockWarehouses())
    <div class="mt-6 rounded-[var(--radius-lg)] border border-[var(--color-line)] bg-white p-5">
        <h2 class="text-lg font-extrabold text-[var(--color-ink)]">Склады для наличия</h2>
        <p class="mt-1 text-sm text-[var(--color-muted)]">
            @if ($type === \App\Enums\YmlSourceType::Wildberries)
                Товар «в наличии», если на отмеченных складах есть остаток. Складов Wildberries (FBW) в списке нет: оттуда заказ с teeu не отправить. Список складов обновляется при каждой синхронизации.
            @else
                Товар «в наличии», если на отмеченных складах есть свободный остаток. Склады Ozon (FBO) отмечайте, только если держите такой же запас у себя: оттуда заказ с teeu не отправить. Список складов обновляется при каждой синхронизации.
            @endif
        </p>

        @if ($feed->marketplaceWarehouses() === [])
            <p class="mt-3 text-sm text-[var(--color-muted)]">Склады появятся после первой синхронизации.</p>
        @else
            <form method="POST" action="{{ route('merchant.feeds.warehouses', $feed) }}" class="mt-4">
                @csrf
                <div class="grid gap-2 sm:grid-cols-2">
                    @foreach ($feed->marketplaceWarehouses() as $warehouse)
                        <label class="flex items-start gap-2.5 rounded-[var(--radius-md)] border border-[var(--color-line)] p-3">
                            <input type="checkbox" name="stock_warehouses[]" value="{{ $warehouse['key'] }}"
                                   @checked(in_array($warehouse['key'], $selectedWarehouses, true))
                                   class="mt-0.5 h-4 w-4 shrink-0 rounded border-[#E1E4EA]">
                            <span class="min-w-0 text-sm text-[var(--color-ink)]">
                                <span class="font-semibold">{{ $warehouse['name'] }}</span>
                                <span class="ml-1 rounded-full bg-[#F2F4F7] px-2 py-0.5 text-[11px] font-bold text-[var(--color-slate)]">{{ $warehouse['kind'] }}</span>
                                @unless ($warehouse['active'] ?? true)
                                    <span class="ml-1 text-xs text-[var(--color-muted)]">не активен</span>
                                @endunless
                                @if (filled($warehouse['address'] ?? null))
                                    <span class="mt-0.5 block text-xs text-[var(--color-muted)]">{{ $warehouse['address'] }}</span>
                                @endif
                            </span>
                        </label>
                    @endforeach
                </div>
                @error('stock_warehouses') <p class="mt-2 text-sm text-[var(--color-sale)]">{{ $message }}</p> @enderror
                <button class="mt-4 rounded-[var(--radius-md)] bg-[var(--color-primary)] px-4 py-2.5 text-sm font-bold text-white shadow-[var(--shadow-primary)]">Сохранить склады</button>
            </form>
        @endif
    </div>
@endif

{{-- Наценка: ступени «от цены — до цены — процент». Накидывается на цены из выгрузки
     (округление вверх до рубля). Пусто = цены как есть. --}}
<div class="mt-6 rounded-[var(--radius-lg)] border border-[var(--color-line)] bg-white p-5"
     x-data="{
        rules: @js($feed->markupRules() ?: [['from' => 0, 'to' => '', 'percent' => '']]),
        add() { this.rules.push({ from: '', to: '', percent: '' }); },
        remove(i) { this.rules.splice(i, 1); if (!this.rules.length) this.add(); },
     }">
    <h2 class="text-lg font-extrabold text-[var(--color-ink)]">Наценка на цены</h2>
    <p class="mt-1 text-sm text-[var(--color-muted)]">Задайте ступени: цена товара из выгрузки попадает в подходящий диапазон, и к ней прибавляется наценка. Итог округляется вверх до рубля. Оставьте «до» пустым у последней ступени — она сработает «и выше». <strong>Без строк наценка не применяется — цены отдаются как в выгрузке.</strong> Изменения пересчитывают уже загруженные товары сразу.</p>

    <form method="POST" action="{{ route('merchant.feeds.markup', $feed) }}" class="mt-4">
        @csrf
        <div class="space-y-2">
            <template x-for="(rule, i) in rules" :key="i">
                <div class="flex flex-wrap items-center gap-2 text-sm">
                    <span class="text-[var(--color-muted)]">от</span>
                    <input type="number" min="0" step="0.01" x-model="rule.from" :name="`rules[${i}][from]`" placeholder="0"
                           class="w-28 rounded-[var(--radius-md)] border-[1.5px] border-[#E1E4EA] px-3 py-2 outline-none focus:border-[var(--color-primary)]">
                    <span class="text-[var(--color-muted)]">₽ до</span>
                    <input type="number" min="0" step="0.01" x-model="rule.to" :name="`rules[${i}][to]`" placeholder="и выше"
                           class="w-28 rounded-[var(--radius-md)] border-[1.5px] border-[#E1E4EA] px-3 py-2 outline-none focus:border-[var(--color-primary)]">
                    <span class="text-[var(--color-muted)]">₽ &mdash; наценка</span>
                    <input type="number" min="0" step="0.1" x-model="rule.percent" :name="`rules[${i}][percent]`" placeholder="0"
                           class="w-24 rounded-[var(--radius-md)] border-[1.5px] border-[#E1E4EA] px-3 py-2 outline-none focus:border-[var(--color-primary)]">
                    <span class="text-[var(--color-muted)]">%</span>
                    <button type="button" @click="remove(i)" class="ml-1 text-[var(--color-sale)] hover:opacity-70" aria-label="Убрать ступень">✕</button>
                </div>
            </template>
        </div>

        <div class="mt-3 flex items-center gap-4">
            <button type="button" @click="add()" class="text-sm font-bold text-[var(--color-primary)] hover:opacity-70">+ Добавить ступень</button>
            <button class="rounded-[var(--radius-md)] bg-[var(--color-primary)] px-4 py-2.5 text-sm font-bold text-white shadow-[var(--shadow-primary)]">Сохранить наценку</button>
        </div>
        @error('rules') <p class="mt-2 text-sm text-[var(--color-sale)]">{{ $message }}</p> @enderror
    </form>
</div>

{{-- Адрес склада: точка, ОТ которой считается срок доставки до города покупателя.
     Правится в любой момент — оценка доставки пересчитывается автоматически. --}}
<div class="mt-6 rounded-[var(--radius-lg)] border border-[var(--color-line)] bg-white p-5">
    <h2 class="text-lg font-extrabold text-[var(--color-ink)]">Адрес склада (откуда доставка)</h2>
    <p class="mt-1 text-sm text-[var(--color-muted)]">Точка отгрузки товаров этого фида. От неё считается срок доставки до города покупателя. У каждого фида адрес свой — можно менять когда угодно.</p>
    <form method="POST" action="{{ route('merchant.feeds.address', $feed) }}" class="mt-3">
        @csrf
        <x-address-picker prefix="address" label="Адрес склада"
            :formatted="old('address_formatted', $feed->address?->formatted)"
            :lat="old('address_lat', $feed->address?->latitude)"
            :lng="old('address_lng', $feed->address?->longitude)" />
        <button class="mt-3 rounded-[var(--radius-md)] bg-[var(--color-primary)] px-4 py-2.5 text-sm font-bold text-white shadow-[var(--shadow-primary)]">Сохранить адрес</button>
    </form>
</div>

{{-- Delivery zone: seller outlines where they deliver; buyers outside the zone see a badge. --}}
<div class="mt-6 rounded-[var(--radius-lg)] border border-[var(--color-line)] bg-white p-5"
     x-data="deliveryArea({
        area: @js($feed->deliveryArea()),
        cities: @js($feed->deliveryCities()->orderBy('name')->get()->map(fn ($c) => ['id' => $c->id, 'name' => $c->name, 'region' => $c->region])->values()),
        resolveUrl: '{{ route('merchant.feeds.delivery.resolve', $feed) }}',
        citySearchUrl: '{{ route('cities.search') }}',
     })" x-init="init()">
    <h2 class="text-lg font-extrabold text-[var(--color-ink)]">Зона доставки</h2>
    <p class="mt-1 text-sm text-[var(--color-muted)]">Обведите на карте область, куда доставляете — города внутри добавятся автоматически (кликайте по карте, чтобы поставить углы; перетаскивайте угол, чтобы подвинуть; клик по углу — удалить его). Список ниже можно поправить вручную. <strong>Пусто = показываем и доставляем во все города.</strong> Покупатель из города вне зоны увидит товар с пометкой «доставка в ваш город недоступна».</p>

    <div class="relative mt-3">
        <div x-ref="map" :class="expanded ? 'h-[600px]' : 'h-72'"
             class="w-full overflow-hidden rounded-[var(--radius-md)] border border-[var(--color-line)] transition-[height] duration-200"></div>
        <button type="button" @click="toggleSize()"
                class="absolute right-3 top-3 z-[400] inline-flex items-center gap-1.5 rounded-[var(--radius-sm)] border border-[var(--color-line)] bg-white/95 px-2.5 py-1.5 text-xs font-bold text-[var(--color-ink)] shadow-sm hover:text-[var(--color-primary)]">
            <i data-lucide="maximize-2" class="h-3.5 w-3.5" x-show="!expanded"></i>
            <i data-lucide="minimize-2" class="h-3.5 w-3.5" x-cloak x-show="expanded"></i>
            <span x-text="expanded ? 'Свернуть' : 'Развернуть'"></span>
        </button>
        <span class="pointer-events-none absolute bottom-3 left-3 z-[400] rounded-[var(--radius-sm)] bg-white/90 px-2 py-1 text-[11px] font-semibold text-[var(--color-muted)]">Ctrl + колесо — масштаб</span>
    </div>
    <div class="mt-2 flex flex-wrap items-center gap-x-4 gap-y-1 text-sm">
        <button type="button" @click="clear()" class="font-semibold text-[var(--color-sale)]">Очистить область</button>
        <span x-show="resolving" x-cloak class="text-[var(--color-muted)]">Определяю города…</span>
        <span class="font-semibold text-[var(--color-slate)]" x-text="cities.length ? ('Городов в зоне: ' + cities.length) : 'Зона не задана — доставка во все города'"></span>
    </div>

    {{-- Manual city add --}}
    <div class="relative mt-3 max-w-sm">
        <input type="text" x-model="query" @input.debounce.300ms="searchCity()" @focus="searchCity()"
               placeholder="Добавить город вручную…"
               class="w-full rounded-[var(--radius-md)] border-[1.5px] border-[#E1E4EA] px-3 py-2 text-sm outline-none focus:border-[var(--color-primary)]">
        <div x-show="results.length" x-cloak @click.outside="results = []"
             class="absolute z-20 mt-1 max-h-52 w-full overflow-y-auto rounded-[var(--radius-md)] border border-[var(--color-line)] bg-white py-1 shadow-[var(--shadow-card)]">
            <template x-for="r in results" :key="r.id">
                <button type="button" @click="addCity(r)" class="block w-full px-3 py-2 text-left text-sm hover:bg-[var(--color-primary-soft)]">
                    <span class="font-semibold text-[var(--color-ink)]" x-text="r.name"></span>
                    <span class="text-xs text-[var(--color-muted)]" x-text="r.region"></span>
                </button>
            </template>
        </div>
    </div>

    {{-- Selected cities: first 10, then «показать все» --}}
    <div class="mt-3 flex flex-wrap items-center gap-2" x-show="cities.length" x-cloak>
        <template x-for="c in visibleCities" :key="c.id">
            <span class="inline-flex items-center gap-1.5 rounded-full bg-[var(--color-primary-soft)] px-3 py-1 text-xs font-semibold text-[var(--color-primary-dark)]">
                <span x-text="c.name"></span>
                <button type="button" @click="removeCity(c.id)" class="text-[var(--color-primary)] hover:text-[var(--color-sale)]" aria-label="Убрать">✕</button>
            </span>
        </template>
        <button type="button" x-show="!showAll && cities.length > 10" @click="showAll = true"
                class="rounded-full border border-[var(--color-line)] px-3 py-1 text-xs font-bold text-[var(--color-primary)] hover:bg-[var(--color-primary-soft)]"
                x-text="'Показать все ' + cities.length + ' городов'"></button>
        <button type="button" x-show="showAll && cities.length > 10" @click="showAll = false"
                class="rounded-full border border-[var(--color-line)] px-3 py-1 text-xs font-bold text-[var(--color-muted)] hover:bg-[var(--color-canvas)]">Свернуть</button>
    </div>

    <form method="POST" action="{{ route('merchant.feeds.delivery', $feed) }}" class="mt-4">
        @csrf
        <template x-for="c in cities" :key="'i' + c.id"><input type="hidden" name="city_ids[]" :value="c.id"></template>
        <input type="hidden" name="polygon" :value="polygonJson">
        <button class="rounded-[var(--radius-md)] bg-[var(--color-primary)] px-4 py-2.5 text-sm font-bold text-white shadow-[var(--shadow-primary)]">Сохранить зону доставки</button>
    </form>
</div>

{{-- Category mapping: seller confirms/fixes how feed categories map to teeu (ТЗ §11). --}}
<div class="mt-8 flex flex-wrap items-center justify-between gap-2">
    <h2 class="text-lg font-extrabold text-[var(--color-ink)]">{{ $marketplace ? 'Категории '.$type->label().' → категории teeu' : 'Категории фида → категории teeu' }}</h2>
    @if ($unmappedCount > 0)
        <span class="rounded-full bg-[#FDECEE] px-3 py-1 text-xs font-bold text-[var(--color-sale)]">Не сопоставлено: {{ $unmappedCount }} — их товары не показываются</span>
    @endif
</div>
{{-- Категорию маркетплейса часть строк находит у нас по именам, без угадывания,
     — это видно в колонке «Кто». --}}
@if ($type === \App\Enums\YmlSourceType::Ozon)
    <p class="mt-1 text-sm text-[var(--color-muted)]">Каталог teeu вырос из категорий Ozon, поэтому многие типы товаров находятся у нас по названию — такие строки отмечены «Ozon». Остальные подобраны автоматически по смыслу, их стоит проверить.</p>
@elseif ($type === \App\Enums\YmlSourceType::Wildberries)
    <p class="mt-1 text-sm text-[var(--color-muted)]">Предметы Wildberries, которые нашлись в каталоге teeu по названию, отмечены «Wildberries». Остальные подобраны автоматически по смыслу, их стоит проверить.</p>
@endif
<p class="mt-1 text-sm text-[var(--color-muted)]">Товары без категории teeu не публикуются. Проверьте сопоставление: «— не показывать —» скрывает товары этой папки, а «сборная категория» подбирает категорию каждому товару по его названию — для папок вроде «Товары» или «Разное», где лежит всё подряд. Строки «подобрать не удалось» ждут вашего выбора: по ним ответ был слишком неуверенным, и мы предпочли не гадать.</p>
<p class="mt-1 text-sm text-[var(--color-muted)]">Когда несколько папок идут в одну категорию, выберите её один раз и нажмите значок копирования — в остальных строках появится значок вставки.</p>

@php($savedRows = array_map('intval', (array) session('changed_maps', [])))

@if ($totalMaps === 0)
    <div class="mt-3 rounded-[var(--radius-lg)] border border-dashed border-[var(--color-line)] bg-white p-6 text-center text-sm text-[var(--color-muted)]">
        Категории появятся после первого импорта фида.
    </div>
@else
    {{-- Отбор строк. Тысяча папок в одной таблице — это не «длинно», это
         неработающая страница: браузер вешался на выгрузке с 3 316 строками.
         По умолчанию открываем то, что ждёт решения, остальное — по запросу. --}}
    <div class="mt-3 flex flex-wrap items-center gap-2">
        @foreach ([['todo', 'Ждут решения', $unmappedCount], ['all', 'Все папки', $totalMaps]] as [$key, $title, $count])
            <a href="{{ route('merchant.feeds.show', array_filter(['feed' => $feed, 'show' => $key, 'q' => $search ?: null])) }}"
               class="rounded-[var(--radius-md)] border px-3 py-1.5 text-sm font-semibold transition
                      {{ $show === $key
                          ? 'border-[var(--color-primary)] bg-[var(--color-primary-soft)] text-[var(--color-primary)]'
                          : 'border-[var(--color-line)] bg-white text-[var(--color-slate)] hover:border-[var(--color-primary)]' }}">
                {{ $title }} — {{ $count }}
            </a>
        @endforeach

        <form method="GET" action="{{ route('merchant.feeds.show', $feed) }}" class="ml-auto flex items-center gap-2">
            <input type="hidden" name="show" value="{{ $show }}">
            <input type="text" name="q" value="{{ $search }}" placeholder="Поиск по папке фида…"
                   class="w-56 rounded-[var(--radius-sm)] border-[1.5px] border-[#E1E4EA] px-3 py-1.5 text-sm outline-none focus:border-[var(--color-primary)]">
            <button class="rounded-[var(--radius-md)] border border-[var(--color-line)] bg-white px-3 py-1.5 text-sm font-semibold text-[var(--color-slate)] hover:border-[var(--color-primary)]">Найти</button>
            @if ($search !== '')
                <a href="{{ route('merchant.feeds.show', ['feed' => $feed, 'show' => $show]) }}" class="text-sm text-[var(--color-muted)] hover:underline">сбросить</a>
            @endif
        </form>
    </div>

    {{-- Shared category list (id + breadcrumb name) for the searchable pickers. --}}
    @php($catsJs = collect($teeuCategories)->map(fn ($label, $id) => ['id' => (string) $id, 'label' => $label])->values())
    <script>window.__teeuCats = @json($catsJs, JSON_UNESCAPED_UNICODE);</script>

    <div x-data x-show="$store.catClipboard.filled" x-cloak
         class="mt-3 flex flex-wrap items-center justify-between gap-2 rounded-[var(--radius-md)] bg-[var(--color-primary-soft)] px-4 py-2.5 text-sm">
        <span class="text-[var(--color-ink)]">Скопировано: <b x-text="$store.catClipboard.title"></b></span>
        <button type="button" @click="$store.catClipboard.reset()" class="text-xs font-semibold text-[var(--color-slate)] hover:underline">Убрать из буфера</button>
    </div>

    <form method="POST" action="{{ route('merchant.feeds.categories', $feed) }}" class="mt-3 rounded-[var(--radius-lg)] border border-[var(--color-line)] bg-white">
        @csrf
        <div class="overflow-x-auto">
        <table class="w-full min-w-[560px] text-sm">
            <thead class="border-b border-[var(--color-line)] text-left font-mono text-xs uppercase tracking-wide text-[var(--color-muted)]">
                <tr><th class="p-3">{{ $marketplace ? 'Категория на '.$type->label() : 'Категория в фиде' }}</th><th class="p-3">Категория teeu</th><th class="p-3">Кто</th></tr>
            </thead>
            <tbody class="divide-y divide-[#F1F2F5]">
                @foreach ($categoryMaps as $m)
                    @php($curLabel = $m->category_id ? ($teeuCategories[$m->category_id] ?? '') : '')
                    @php($justSaved = in_array($m->id, $savedRows, true))
                    {{-- x-data на строке, а не в ячейке: подсветить надо всю строку,
                         а выбор живёт внутри — вложенное видит родительский scope,
                         обратное неверно. --}}
                    {{-- Пустая строка бывает двух совершенно разных видов, и до сих
                         пор они выглядели одинаково — «— не показывать —». Первый:
                         человек решил папку скрыть. Второй: подобрать не удалось —
                         модель ответила слишком неуверенно (порог 0.75) или сказала,
                         что подходящей категории нет. Второе — не решение, а
                         незаконченная работа, и звать его «не показывать» значит
                         врать: продавец видит «скрыто» там, где на самом деле ждут
                         его выбора. --}}
                    @php($unresolved = ! $m->category_id && ! $m->classify_per_item && $m->source === 'ai')
                    <tr x-data="catPicker('{{ $m->category_id }}', @js($curLabel), @js((bool) $m->classify_per_item), @js($unresolved))"
                        @click.outside="open = false" @keydown.escape="open = false"
                        @if ($justSaved) id="saved-{{ $m->id }}" data-just-saved @endif
                        {{-- Весь фон строки — через :class, одним выражением. Два
                             bg-класса в одном атрибуте разрешает не порядок записи,
                             а порядок правил в CSS — то есть как повезёт. --}}
                        :class="touched
                            ? 'bg-[var(--color-primary-soft)]'
                            : '{{ $justSaved ? 'bg-[var(--color-primary-soft)]' : ($m->category_id ? '' : 'bg-[#FFF7F8]') }}'">
                        <td class="p-3 align-middle font-semibold text-[var(--color-ink)]">{{ $m->category_path ?? $m->external_category_id }}</td>
                        <td class="p-3 align-middle">
                            <div class="relative w-full max-w-md">
                                <input type="hidden" name="map[{{ $m->external_category_id }}]" :value="selectedId">
                                {{-- Копировать/вставить: у фида бывают десятки папок, и половина
                                     уезжает в одну и ту же категорию. Буфер общий на страницу.
                                     Только иконки: путь категории в подписи кнопки занимал две
                                     строки и спорил за внимание с самим списком. Куда именно
                                     вставится — во всплывающей подсказке. --}}
                                <div class="mt-1 flex items-center gap-1">
                                    <button type="button" @click="copyToBuffer()"
                                            x-show="selectedId !== '' || perItem" x-cloak
                                            :title="justCopied ? 'Скопировано' : 'Копировать: ' + (selectedLabel || 'сборная категория')"
                                            aria-label="Копировать категорию"
                                            class="rounded-[var(--radius-sm)] p-1.5 transition-colors"
                                            :class="justCopied ? 'text-[var(--color-success)]' : 'text-[var(--color-muted)] hover:bg-[var(--color-primary-soft)] hover:text-[var(--color-primary)]'">
                                        <i data-lucide="copy" x-show="! justCopied" class="h-4 w-4"></i>
                                        <i data-lucide="check" x-show="justCopied" x-cloak class="h-4 w-4"></i>
                                    </button>

                                    <button type="button" @click="pasteFromBuffer()"
                                            x-show="$store.catClipboard.filled && ! sameAsBuffer" x-cloak
                                            :title="'Вставить: ' + $store.catClipboard.title"
                                            aria-label="Вставить категорию из буфера"
                                            class="rounded-[var(--radius-sm)] p-1.5 text-[var(--color-primary)] transition-colors hover:bg-[var(--color-primary-soft)]">
                                        <i data-lucide="clipboard-paste" class="h-4 w-4"></i>
                                    </button>
                                </div>

                                <p x-show="perItem" x-cloak class="mt-1 text-xs text-[var(--color-muted)]">
                                    Категорию подберём каждому товару по его названию. Это дольше и не всегда точно —
                                    если можно проставить категории в самой выгрузке, лучше так.
                                </p>
                                <button type="button" @click="toggle()" :title="selectedLabel"
                                        class="flex w-full items-start justify-between gap-2 rounded-[var(--radius-sm)] border-[1.5px] bg-white px-3 py-1.5 text-left text-sm outline-none"
                                        :class="open ? 'border-[var(--color-primary)]' : 'border-[#E1E4EA]'">
                                    {{-- Путь категории длинный по своей природе, и обрезался он ровно
                                         на последнем звене — том, которое и отличает одну строку от
                                         другой. Показываем до трёх строк, остальное — в подсказке. --}}
                                    <span class="line-clamp-3 leading-snug" :class="selectedLabel ? 'text-[var(--color-ink)]' : (perItem ? 'text-[var(--color-primary)]' : 'text-[var(--color-muted)]')"
                                          x-text="selectedLabel || (perItem ? '— сборная категория, разобрать каждый товар —' : (unresolved ? '— подобрать не удалось, выберите сами —' : '— не показывать —'))"></span>
                                    <i data-lucide="chevron-down" class="mt-0.5 h-4 w-4 shrink-0 text-[var(--color-muted)] transition-transform" :class="{ 'rotate-180': open }"></i>
                                </button>
                                {{-- x-if, а не x-show: скрытый x-show всё равно
                                     держит в DOM все шестьдесят строк списка, и на
                                     тысяче папок браузер умирал ещё до первого
                                     клика. --}}
                                <template x-if="open">
                                <div x-transition
                                     class="absolute left-0 right-0 top-full z-30 mt-1 overflow-hidden rounded-[var(--radius-md)] border border-[var(--color-line)] bg-white shadow-[var(--shadow-frame)]">
                                    <div class="border-b border-[var(--color-line)] p-2">
                                        <input x-ref="search" x-model="q" type="text" placeholder="Поиск категории…" @click.stop
                                               class="w-full rounded-[var(--radius-sm)] border-[1.5px] border-[#E1E4EA] px-2.5 py-1.5 text-sm outline-none focus:border-[var(--color-primary)]">
                                    </div>
                                    <div class="max-h-60 overflow-y-auto py-1">
                                        <button type="button" @click="clear()" class="block w-full px-3 py-1.5 text-left text-sm text-[var(--color-muted)] hover:bg-[var(--color-primary-soft)]">— не показывать —</button>
                                        {{-- Для папок вроде «Товары» или «Разное»: по имени такой
                                             папки разложить нельзя, а по названию товара — можно. --}}
                                        <button type="button" @click="pickPerItem()"
                                                class="block w-full border-b border-[var(--color-line)] px-3 py-1.5 text-left text-sm font-semibold text-[var(--color-primary)] hover:bg-[var(--color-primary-soft)]">
                                            — сборная категория, разобрать каждый товар —
                                        </button>
                                        <template x-for="c in items" :key="c.id">
                                            <button type="button" @click="pick(c)" x-text="c.label" :title="c.label"
                                                    class="block w-full px-3 py-1.5 text-left text-sm leading-snug text-[var(--color-ink)] hover:bg-[var(--color-primary-soft)]"></button>
                                        </template>
                                        <template x-if="items.length === 0">
                                            <div class="px-3 py-2 text-sm text-[var(--color-muted)]">Ничего не найдено</div>
                                        </template>
                                    </div>
                                </div>
                                </template>
                            </div>
                        </td>
                        <td class="p-3 align-middle text-xs text-[var(--color-muted)]">
                            @switch($m->source)
                                @case('seller') <span class="font-bold text-[var(--color-primary)]">вы</span> @break
                                @case('admin') админ @break
                                @case('ozon') Ozon @break
                                @case('wildberries') Wildberries @break
                                @default ИИ
                            @endswitch
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
        </div>

        @if ($categoryMaps->isEmpty())
            <div class="p-6 text-center text-sm text-[var(--color-muted)]">
                @if ($search !== '')
                    По запросу «{{ $search }}» ничего не найдено.
                @else
                    Все папки этой выгрузки разобраны.
                @endif
            </div>
        @endif

        @if ($categoryMaps->hasPages())
            <div class="border-t border-[var(--color-line)] px-4 py-3">{{ $categoryMaps->links() }}</div>
        @endif
        <div class="flex items-center justify-between gap-3 border-t border-[var(--color-line)] bg-[#FAFBFC] px-4 py-3">
            <span class="text-xs text-[var(--color-muted)]">Сохраняются строки этой страницы — остальные остаются как были. Товары переедут в выбранные категории за несколько минут. Если из-за категории какие-то позиции не создались — запустится и повторная выгрузка, они появятся после неё.</span>
            <button class="rounded-[var(--radius-md)] bg-[var(--color-primary)] px-4 py-2.5 text-sm font-bold text-white shadow-[var(--shadow-primary)]">Сохранить сопоставление</button>
        </div>
    </form>

    {{-- Ответ по имени папки запоминается навсегда — в том числе ответ «не знаю».
         Значит строка, не поддавшаяся однажды, сама уже не разберётся, даже когда
         подбор стал точнее или в каталоге появилась нужная категория. Кнопка —
         единственный способ сказать «попробуй ещё раз», и нажимает её человек:
         подбор платный. --}}
    @if ($unresolvedCount > 0)
        <form method="POST" action="{{ route('merchant.feeds.categories.retry', $feed) }}" class="mt-3 flex flex-wrap items-center justify-between gap-3 rounded-[var(--radius-lg)] border border-[var(--color-line)] bg-white px-4 py-3">
            @csrf
            <span class="text-sm text-[var(--color-slate)]">
                Не удалось подобрать: <b>{{ $unresolvedCount }}</b>. По этим папкам ответ был слишком неуверенным — выберите категории сами
                или попробуйте подобрать заново.
            </span>
            <button class="rounded-[var(--radius-md)] border-[1.5px] border-[#E1E4EA] bg-white px-4 py-2.5 text-sm font-bold text-[var(--color-ink)] transition hover:border-[var(--color-primary)] hover:text-[var(--color-primary)]">
                Подобрать заново
            </button>
        </form>
    @endif

    @if ($savedRows !== [])
        {{-- Сохранение возвращает страницу к началу, а правят её сверху вниз и
             подолгу: без этого после каждого сохранения приходится заново искать
             глазами, где остановился. Ведём к последней сохранённой строке. --}}
        <script>
            document.addEventListener('DOMContentLoaded', () => {
                const saved = document.querySelectorAll('[data-just-saved]');
                saved[saved.length - 1]?.scrollIntoView({ block: 'center', behavior: 'smooth' });
            });
        </script>
    @endif
@endif

<h2 class="mt-8 text-lg font-extrabold text-[var(--color-ink)]">История импортов</h2>
<div class="mt-3 overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-line)] bg-white">
    <div class="overflow-x-auto">
        <table class="w-full text-sm">
            <thead class="border-b border-[var(--color-line)] text-left font-mono text-xs uppercase tracking-wide text-[var(--color-muted)]">
                <tr><th class="p-3">Статус</th><th class="p-3">Найдено</th><th class="p-3">Создано</th><th class="p-3">Обновлено</th><th class="p-3">Без изм.</th><th class="p-3">Пропущено</th><th class="p-3">Деактив.</th><th class="p-3">Ошибки</th><th class="p-3">Начало</th></tr>
            </thead>
            <tbody class="divide-y divide-[#F1F2F5]">
                @forelse ($feed->runs as $run)
                    <tr>
                        <td class="p-3">
                            @php($st = $run->status)
                            <span class="inline-flex rounded-full px-2.5 py-0.5 text-xs font-bold {{ $st === \App\Enums\ImportRunStatus::Completed ? 'bg-[#E9F7EF] text-[var(--color-success)]' : ($st === \App\Enums\ImportRunStatus::Partial ? 'bg-[#FFF3E0] text-[#9A6700]' : ($st === \App\Enums\ImportRunStatus::Failed ? 'bg-[#FDECEE] text-[var(--color-sale)]' : 'bg-[#EEF1F5] text-[var(--color-slate)]')) }}">{{ $st->label() }}</span>
                        </td>
                        <td class="p-3">{{ $run->offers_found }}</td>
                        <td class="p-3">{{ $run->created_count }}</td>
                        <td class="p-3">{{ $run->updated_count }}</td>
                        <td class="p-3">{{ $run->unchanged_count }}</td>
                        <td class="p-3">{{ $run->skipped_count }}</td>
                        <td class="p-3">{{ $run->deactivated_count }}</td>
                        <td class="p-3">{{ $run->failed_count }}</td>
                        <td class="p-3 text-[var(--color-muted)]">{{ $run->started_at?->format('d.m H:i') }}</td>
                    </tr>
                @empty
                    <tr><td colspan="9" class="p-6 text-center text-[var(--color-muted)]">Импортов ещё не было.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection