@extends('layouts.merchant')

@section('title', 'Интеграции')

@section('content')
<div class="max-w-3xl">
    <div class="flex flex-wrap items-center justify-between gap-3">
        <h1 class="text-2xl font-extrabold tracking-tight text-[var(--color-ink)]">Интеграции</h1>
        @if ($canAddMore)
            <a href="{{ route('merchant.integration.create') }}"
               class="inline-flex items-center gap-2 rounded-[var(--radius-md)] bg-[var(--color-primary)] px-4 py-2.5 text-sm font-bold text-white shadow-[var(--shadow-primary)] hover:bg-[var(--color-primary-dark)]">
                <i data-lucide="plus" class="h-4 w-4"></i> Добавить
            </a>
        @endif
    </div>

    {{-- Раздел про связь с внешними сервисами вообще, а не только про заказы:
         передача заказов — первое, что здесь появилось, но не единственное, ради
         чего он существует. --}}
    <p class="mt-2 text-sm text-[var(--color-slate)]">
        Связь teeu с сервисами, которыми вы уже пользуетесь: CRM, мессенджеры и другие системы.
        Сейчас отсюда передаются заказы, дальше список будет пополняться. Можно настроить несколько сразу.
    </p>


    @foreach ($groups as $block)
        <section class="mt-8">
            <div class="flex items-center gap-2">
                <i data-lucide="{{ $block['group']->icon() }}" class="h-4 w-4 text-[var(--color-muted)]"></i>
                <h2 class="text-sm font-extrabold uppercase tracking-wide text-[var(--color-muted)]">{{ $block['group']->label() }}</h2>
            </div>

            <div class="mt-3 space-y-2">
                @forelse ($block['items'] as $integration)
                    <a href="{{ route('merchant.integration.edit', $integration) }}"
                       class="block rounded-[var(--radius-lg)] border border-[var(--color-line)] bg-white p-4 transition hover:border-[var(--color-primary)]">
                        <div class="flex flex-wrap items-center justify-between gap-2">
                            <div class="min-w-0">
                                <div class="font-bold text-[var(--color-ink)]">{{ $integration->displayName() }}</div>
                                <div class="mt-0.5 text-xs text-[var(--color-muted)]">
                                    {{ $integration->type->label() }} · {{ $integration->maskedTarget() }}
                                </div>
                            </div>
                            @if ($integration->paused_at)
                                <span class="rounded-full bg-[#FDECEE] px-2.5 py-1 text-xs font-bold text-[var(--color-sale)]">остановлена</span>
                            @elseif (! $integration->isConfigured())
                                <span class="rounded-full bg-[#FFF4E5] px-2.5 py-1 text-xs font-bold text-[#B26A00]">не настроена</span>
                            @elseif (! $integration->is_active)
                                <span class="rounded-full bg-[var(--color-canvas)] px-2.5 py-1 text-xs font-bold text-[var(--color-muted)]">выключена</span>
                            @else
                                <span class="rounded-full bg-[#E8F7EE] px-2.5 py-1 text-xs font-bold text-[#1F9254]">работает</span>
                            @endif
                        </div>
                        <div class="mt-2 text-xs text-[var(--color-muted)]">
                            @if ($integration->last_delivered_at)
                                Последняя доставка {{ $integration->last_delivered_at->format('d.m.Y в H:i') }}
                            @else
                                Доставок ещё не было
                            @endif
                            · попыток в журнале: {{ $integration->deliveries_count }}
                        </div>
                    </a>
                @empty
                    <p class="rounded-[var(--radius-lg)] border border-dashed border-[var(--color-line)] bg-white px-4 py-5 text-sm text-[var(--color-muted)]">
                        {{ $block['group']->hint() }}
                    </p>
                @endforelse
            </div>
        </section>
    @endforeach

    @unless ($canAddMore)
        <p class="mt-4 text-xs text-[var(--color-muted)]">
            Достигнут предел в {{ $limit }} интеграций. Удалите ненужную, чтобы добавить новую.
        </p>
    @endunless
</div>
@endsection