@extends('layouts.merchant')

@section('title', $integration->displayName())

@php($input = '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)]')
@php($lbl = 'mb-1.5 block text-sm font-semibold text-[var(--color-ink)]')
@php($isChat = $integration->type->isChatLinked())
@php($isAcquiring = $integration->type->isAcquiring())
@php($linkCode = $integration->credential('link_code'))

@section('content')
<div class="max-w-2xl">
    <a href="{{ route('merchant.integration.index') }}"
       class="inline-flex items-center gap-1 text-sm font-semibold text-[var(--color-muted)] hover:text-[var(--color-primary)]">
        <i data-lucide="chevron-left" class="h-4 w-4"></i> Все интеграции
    </a>

    <h1 class="mt-2 text-2xl font-extrabold tracking-tight text-[var(--color-ink)]">{{ $integration->displayName() }}</h1>
    <p class="mt-1 text-sm text-[var(--color-slate)]">{{ $integration->type->hint() }}</p>


    @if ($errors->any())
        <div class="mt-4 rounded-[var(--radius-md)] bg-[#FDECEE] px-4 py-3 text-sm font-semibold text-[var(--color-sale)]">
            @foreach ($errors->all() as $e) <div>{{ $e }}</div> @endforeach
        </div>
    @endif

    @if ($integration->paused_at)
        {{-- Автопауза: молча долбиться в мёртвый адрес неделями хуже, чем остановиться
             и сказать об этом. Сохранение формы снимает паузу. --}}
        <div class="mt-4 rounded-[var(--radius-md)] bg-[#FDECEE] px-4 py-3 text-sm text-[var(--color-sale)]">
            <div class="font-bold">Передача остановлена автоматически</div>
            <div class="mt-1">Последняя ошибка: {{ $integration->last_error ?: 'без описания' }}</div>
            <div class="mt-1 text-[var(--color-slate)]">Исправьте настройки и сохраните — передача включится снова.</div>
        </div>
    @endif

    @if ($isChat)
        {{-- Мессенджер настраивается не формой: id чата мы узнаём из подтверждения
             в самом Telegram, иначе продавцу пришлось бы искать его вручную. --}}
        <div class="mt-6 rounded-[var(--radius-lg)] bg-white p-6 shadow-[var(--shadow-card)]">
            <h2 class="text-sm font-extrabold text-[var(--color-ink)]">Чат для уведомлений</h2>

            @if ($integration->credential('chat_id'))
                <p class="mt-2 text-sm text-[var(--color-slate)]">
                    Привязан: <b>{{ $integration->credential('chat_title') ?: 'чат' }}</b>.
                </p>
            @else
                <p class="mt-2 text-sm text-[var(--color-slate)]">Чат ещё не привязан — заказы отправлять некуда.</p>
            @endif

            @if ($linkCode && $botUsername)
                @php($botLink = $integration->type->botLink($botUsername, $linkCode))
                <div class="mt-3 rounded-[var(--radius-md)] bg-[var(--color-canvas)] p-4 text-sm text-[var(--color-slate)]">
                    <div class="font-bold text-[var(--color-ink)]">Как подключить</div>

                    @if ($integration->type->linkCarriesCode())
                        {{-- В Telegram код едет прямо в ссылке и подставляется в /start сам. --}}
                        <div class="mt-2">
                            <b>Личные уведомления:</b>
                            <a href="{{ $botLink }}" target="_blank" rel="noopener"
                               class="font-semibold text-[var(--color-primary)] hover:underline">откройте бота</a>
                            и нажмите «Запустить».
                        </div>
                    @else
                        {{-- В MAX ссылка ведёт просто на бота, код нужно отправить сообщением. --}}
                        <div class="mt-2">
                            <b>Личные уведомления:</b>
                            <a href="{{ $botLink }}" target="_blank" rel="noopener"
                               class="font-semibold text-[var(--color-primary)] hover:underline">откройте бота</a>
                            и отправьте ему сообщение:
                            <span class="mt-1 block font-mono text-xs text-[var(--color-ink)]">/start {{ $linkCode }}</span>
                        </div>
                    @endif

                    <div class="mt-2">
                        <b>В группу:</b> добавьте бота <span class="font-mono">{{ $botUsername }}</span> в чат
                        и отправьте там сообщение:
                        <span class="mt-1 block font-mono text-xs text-[var(--color-ink)]">/start {{ $linkCode }}</span>
                    </div>
                    <div class="mt-2 text-xs text-[var(--color-muted)]">Код одноразовый и действует несколько минут.</div>
                </div>
            @endif

            <form method="POST" action="{{ route('merchant.integration.link', $integration) }}" class="mt-3">
                @csrf
                <button type="submit"
                        class="rounded-[var(--radius-md)] border border-[var(--color-line)] px-4 py-2 text-sm font-bold text-[var(--color-ink)] hover:border-[var(--color-primary)] hover:text-[var(--color-primary)]">
                    {{ $linkCode ? 'Получить новый код' : ($integration->credential('chat_id') ? 'Привязать другой чат' : 'Подключить') }}
                </button>
            </form>

            @unless ($botUsername)
                <p class="mt-3 text-xs text-[var(--color-sale)]">Бот teeu пока не настроен администратором — привязка недоступна.</p>
            @endunless
        </div>
    @endif

    <form method="POST" action="{{ route('merchant.integration.update', $integration) }}"
          class="mt-6 space-y-5 rounded-[var(--radius-lg)] bg-white p-6 shadow-[var(--shadow-card)]">
        @csrf

        <label class="block"><span class="{{ $lbl }}">Название</span>
            <input name="name" value="{{ old('name', $integration->name) }}" class="{{ $input }}" autocomplete="off"
                   placeholder="Например: Битрикс отдела продаж">
            <span class="mt-1 block text-xs text-[var(--color-muted)]">Чтобы отличать интеграции в списке. Необязательно.</span>
        </label>

        @if ($isAcquiring)
            {{-- Ключи выдаёт сама ЮKassa в личном кабинете продавца: деньги идут
                 на его счёт, у нас они не хранятся нигде, кроме этих полей. --}}
            <div>
                <label for="yk-shop" class="{{ $lbl }}">Идентификатор магазина (shopId)</label>
                <input id="yk-shop" name="url" value="{{ old('url', $integration->credential('shop_id')) }}"
                       placeholder="123456" inputmode="numeric" class="{{ $input }}" autocomplete="off">
                <span class="mt-1 block text-xs text-[var(--color-muted)]">
                    В личном кабинете ЮKassa: <b>Интеграция → Ключи API</b>. Это число, а не адрес.
                </span>
            </div>

            <div>
                <label for="yk-secret" class="{{ $lbl }}">Секретный ключ</label>
                <x-secret-input id="yk-secret" name="token" value="" :class="$input"
                                :placeholder="$integration->credential('secret_key') ? '•••••••• (сохранён)' : 'live_... или test_...'" />
                <span class="mt-1 block text-xs text-[var(--color-muted)]">
                    Там же, кнопкой <b>«Выпустить ключ»</b>. Показывается один раз — оставьте поле пустым,
                    чтобы сохранить прежний.
                </span>
            </div>

            <div class="rounded-[var(--radius-md)] bg-[var(--color-canvas)] p-4 text-xs leading-relaxed text-[var(--color-slate)]">
                <div class="font-bold text-[var(--color-ink)]">Что указать в ЮKassa</div>
                <div class="mt-1">
                    В разделе <b>«HTTP-уведомления»</b> впишите адрес:
                    <span class="mt-1 block break-all font-mono text-[var(--color-ink)]">{{ route('payments.yookassa.callback', $integration) }}</span>
                    и отметьте событие <b>payment.succeeded</b>. Без него заказ не отметится оплаченным сам.
                </div>
                <div class="mt-2">
                    Чек по 54-ФЗ формируем мы — проверьте, что в профиле магазина указаны
                    <a href="{{ route('merchant.profile.edit') }}" class="font-semibold text-[var(--color-primary)] hover:underline">система налогообложения и ставка НДС</a>.
                </div>
            </div>
        @elseif ($integration->type === \App\Enums\IntegrationType::AmoCrm)
            {{-- У amoCRM два поля: аккаунт задаётся поддоменом, доступ — токеном. --}}
            <div>
                <label for="amo-sub" class="{{ $lbl }}">Аккаунт amoCRM</label>
                <input id="amo-sub" name="url" value="{{ old('url', $integration->credential('subdomain')) }}"
                       placeholder="mycompany" class="{{ $input }}" autocomplete="off">
                <span class="mt-1 block text-xs text-[var(--color-muted)]">
                    Поддомен вашего аккаунта — часть адреса до <span class="font-mono">.amocrm.ru</span>.
                    Можно вставить и полный адрес.
                </span>
            </div>

            <div>
                <label for="amo-token" class="{{ $lbl }}">Долгосрочный токен</label>
                <x-secret-input id="amo-token" name="token" value="" :class="$input"
                                :placeholder="$integration->credential('token') ? '•••••••• (сохранён)' : 'вставьте токен'" />
                <span class="mt-1 block text-xs text-[var(--color-muted)]">
                    В amoCRM: <b>Настройки → Интеграции → создать интеграцию</b>, затем вкладка
                    <b>«Ключи и доступы» → «Сгенерировать токен»</b> (срок до 5 лет).
                    Токен показывается один раз. Оставьте поле пустым, чтобы сохранить прежний.
                </span>
            </div>
        @elseif (! $isChat)
            <div>
                <label for="wh-url" class="{{ $lbl }}">Адрес</label>
                <input id="wh-url" name="url" value="{{ old('url', $integration->credential('url')) }}"
                       placeholder="https://..." class="{{ $input }}" autocomplete="off">
                @if ($integration->type === \App\Enums\IntegrationType::Json)
                    <span class="mt-1 block text-xs text-[var(--color-muted)]">
                        Адрес вашего обработчика. Каждое сообщение подписывается заголовком
                        <span class="font-mono">X-Teeu-Signature</span>; ключ подписи создаётся при сохранении.
                    </span>
                @else
                    <span class="mt-1 block text-xs text-[var(--color-muted)]">
                        Входящий вебхук вашего портала: <b>Разработчикам → Другое → Входящий вебхук</b>,
                        право доступа <b>CRM</b>. Адрес выглядит как
                        <span class="font-mono">https://ваш-портал.bitrix24.ru/rest/1/токен/</span>
                    </span>
                @endif
            </div>
        @endif

        @unless ($isAcquiring)
        <div>
            <span class="{{ $lbl }}">Когда сообщать</span>
            <label class="flex items-center gap-2">
                <input type="checkbox" name="notify_created" value="1" @checked(old('notify_created', $integration->notify_created))
                       class="h-4 w-4 accent-[var(--color-primary)]">
                <span class="text-sm text-[var(--color-ink)]">Новый заказ</span>
            </label>
            <label class="mt-2 flex items-center gap-2">
                <input type="checkbox" name="notify_status" value="1" @checked(old('notify_status', $integration->notify_status))
                       class="h-4 w-4 accent-[var(--color-primary)]">
                <span class="text-sm text-[var(--color-ink)]">Смена статуса заказа</span>
            </label>
            {{-- Переписка — только для мессенджеров: сообщение это текст человеку,
                 а не структура для учётной системы. --}}
            @if ($integration->type->supportsChatMessages())
                <label class="mt-2 flex items-center gap-2">
                    <input type="checkbox" name="notify_message" value="1" @checked(old('notify_message', $integration->notify_message))
                           class="h-4 w-4 accent-[var(--color-primary)]">
                    <span class="text-sm text-[var(--color-ink)]">Сообщение от покупателя в чате</span>
                </label>
                <p class="mt-1 text-xs text-[var(--color-muted)]">Придёт текст сообщения и ссылка на диалог. Отвечать нужно в кабинете.</p>
            @endif
        </div>
        @endunless

        <label class="flex items-center gap-2">
            <input type="checkbox" name="is_active" value="1" @checked(old('is_active', $integration->is_active))
                   class="h-4 w-4 accent-[var(--color-primary)]">
            <span class="text-sm font-semibold text-[var(--color-ink)]">Интеграция включена</span>
        </label>

        <div class="flex flex-wrap gap-3">
            <button type="submit"
                    class="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>
            @if ($integration->isConfigured() && ! $isAcquiring)
                <button type="submit" form="wh-test"
                        class="rounded-[var(--radius-md)] border border-[var(--color-line)] px-5 py-2.5 text-sm font-bold text-[var(--color-ink)] hover:border-[var(--color-primary)] hover:text-[var(--color-primary)]">
                    Отправить проверочное
                </button>
            @endif
        </div>
    </form>

    <form method="POST" action="{{ route('merchant.integration.test', $integration) }}" id="wh-test" class="hidden">@csrf</form>

    <div class="mt-8 flex items-center justify-between gap-3">
        <h2 class="text-lg font-extrabold text-[var(--color-ink)]">{{ $isAcquiring ? 'Удаление' : 'Журнал доставок' }}</h2>
        <x-confirm-form :action="route('merchant.integration.destroy', $integration)" method="DELETE"
                        title="Удалить интеграцию?"
                        message="Настройки будут удалены. Заказы перестанут уходить."
                        confirm="Удалить">
            <button type="button" class="text-sm font-semibold text-[var(--color-sale)] hover:underline">Удалить</button>
        </x-confirm-form>
    </div>

    <div class="mt-3 space-y-2">
        @if ($isAcquiring)
            <p class="text-sm text-[var(--color-muted)]">Оплаты видны в заказах и в личном кабинете ЮKassa.</p>
        @else
        @forelse ($deliveries as $delivery)
            <div class="rounded-[var(--radius-lg)] border border-[var(--color-line)] bg-white p-4">
                <div class="flex flex-wrap items-center justify-between gap-2">
                    <div class="text-sm font-bold text-[var(--color-ink)]">
                        {{ $delivery->event }}
                        @if ($delivery->order)
                            · <a href="{{ route('merchant.orders.show', $delivery->order) }}"
                                 class="font-mono text-[var(--color-primary)]">{{ $delivery->order->number }}</a>
                        @endif
                    </div>
                    <span class="rounded-full px-2.5 py-1 text-xs font-bold {{ $delivery->ok ? 'bg-[#E8F7EE] text-[#1F9254]' : 'bg-[#FDECEE] text-[var(--color-sale)]' }}">
                        {{ $delivery->ok ? 'доставлено' : 'ошибка' }}
                    </span>
                </div>
                <div class="mt-1 text-xs text-[var(--color-muted)]">
                    {{ $delivery->created_at->format('d.m.Y в H:i') }}
                    @if ($delivery->attempt > 1) · попытка {{ $delivery->attempt }} @endif
                    @if ($delivery->remote_entity_id) · запись №{{ $delivery->remote_entity_id }} @endif
                </div>
                @if ($delivery->error)
                    <div class="mt-2 rounded-[var(--radius-md)] bg-[var(--color-canvas)] p-2 text-xs text-[var(--color-slate)]">{{ $delivery->error }}</div>
                @endif
            </div>
        @empty
            <p class="text-sm text-[var(--color-muted)]">Доставок пока не было.</p>
        @endforelse
        @endif
    </div>
</div>
@endsection