@extends('layouts.merchant')

@section('title', 'Дашборд — кабинет продавца')

@section('content')
    <h1 class="text-2xl font-extrabold tracking-tight text-[var(--color-ink)]">Дашборд</h1>
    <p class="mt-1 text-sm text-[var(--color-slate)]">Магазин «{{ $seller->public_name }}»</p>

    <div class="mt-6 grid grid-cols-2 gap-4 lg:grid-cols-4">
        @php($tiles = [
            ['Товары', $stats['products'], 'package', route('merchant.products.index')],
            ['Активные', $stats['active'], 'check-circle', route('merchant.products.index')],
            ['Новые заказы', $stats['new_orders'], 'shopping-bag', route('merchant.orders.index', ['status' => 'new'])],
            ['Рейтинг', number_format($seller->rating_avg, 1).' · '.$seller->reviews_count.' отз.', 'star', route('seller.card', $seller)],
        ])
        @foreach ($tiles as [$label, $value, $icon, $href])
            <a href="{{ $href }}" class="rounded-[var(--radius-lg)] bg-white p-5 shadow-[var(--shadow-card)] transition hover:shadow-[var(--shadow-frame)]">
                <div class="flex items-center justify-between">
                    <span class="text-sm font-semibold text-[var(--color-muted)]">{{ $label }}</span>
                    <i data-lucide="{{ $icon }}" class="h-4 w-4 text-[var(--color-primary)]"></i>
                </div>
                <div class="mt-2 text-2xl font-extrabold text-[var(--color-ink)]">{{ $value }}</div>
            </a>
        @endforeach
    </div>

    <div class="mt-8 grid gap-6 lg:grid-cols-[1.6fr_1fr]">
        {{-- Recent orders --}}
        <section class="rounded-[var(--radius-lg)] bg-white p-5 shadow-[var(--shadow-card)]">
            <div class="mb-4 flex items-center justify-between">
                <h2 class="text-lg font-extrabold text-[var(--color-ink)]">Последние заказы</h2>
                <a href="{{ route('merchant.orders.index') }}" class="text-sm font-bold text-[var(--color-primary)]">Все заказы →</a>
            </div>
            @forelse ($recentOrders as $order)
                @php($sc = match (true) {
                    $order->status === \App\Enums\OrderStatus::New => ['#EAF2FF', 'var(--color-primary)'],
                    $order->status === \App\Enums\OrderStatus::Completed => ['#E9F7EF', 'var(--color-success)'],
                    str_starts_with($order->status->value, 'cancelled') => ['#FDECEE', 'var(--color-sale)'],
                    default => ['#F1F2F5', 'var(--color-slate)'],
                })
                <a href="{{ route('merchant.orders.show', $order) }}" class="flex items-center justify-between gap-3 border-t border-[#F1F2F5] py-3 first:border-0">
                    <div class="min-w-0">
                        <div class="truncate"><span class="font-mono text-sm font-bold text-[var(--color-primary)]">{{ $order->number }}</span> <span class="text-sm text-[var(--color-slate)]">· {{ $order->buyer?->displayName() ?? 'Покупатель' }}</span></div>
                        <div class="text-xs text-[var(--color-muted)]">{{ $order->created_at->format('d.m.Y H:i') }}</div>
                    </div>
                    <div class="flex shrink-0 items-center gap-3">
                        <span class="rounded-full px-2.5 py-0.5 text-xs font-bold" style="background:{{ $sc[0] }};color:{{ $sc[1] }}">{{ $order->status->label() }}</span>
                        <span class="whitespace-nowrap font-bold text-[var(--color-ink)]">{{ number_format((float) $order->total, 0, '.', ' ') }} ₽</span>
                    </div>
                </a>
            @empty
                <div class="py-8 text-center text-sm text-[var(--color-muted)]">Заказов пока нет.</div>
            @endforelse
        </section>

        {{-- Выгрузки: YML-фиды и кабинеты маркетплейсов --}}
        <section class="rounded-[var(--radius-lg)] bg-white p-5 shadow-[var(--shadow-card)]">
            <div class="mb-4 flex items-center justify-between">
                <h2 class="text-lg font-extrabold text-[var(--color-ink)]">Выгрузки</h2>
                <a href="{{ route('merchant.feeds.index') }}" class="text-sm font-bold text-[var(--color-primary)]">Все выгрузки →</a>
            </div>
            @forelse ($feeds as $feed)
                @php($fc = match ($feed->status) {
                    \App\Enums\FeedStatus::Active => ['#E9F7EF', 'var(--color-success)'],
                    \App\Enums\FeedStatus::Paused => ['#FFF6E5', '#B7761A'],
                    default => ['#FDECEE', 'var(--color-sale)'],
                })
                <a href="{{ route('merchant.feeds.show', $feed) }}" class="block border-t border-[#F1F2F5] py-3 first:border-0">
                    <div class="flex items-center justify-between gap-2">
                        <span class="min-w-0 truncate font-bold text-[var(--color-ink)]">{{ $feed->name }}</span>
                        <span class="shrink-0 rounded-full px-2.5 py-0.5 text-xs font-bold" style="background:{{ $fc[0] }};color:{{ $fc[1] }}">{{ $feed->status->label() }}</span>
                    </div>
                    <div class="mt-1 text-xs text-[var(--color-muted)]">
                        {{ $feed->products_count }} товаров ·
                        @if ($feed->last_success_at)
                            обновлён {{ $feed->last_success_at->diffForHumans() }}
                        @else
                            ещё не синхронизирован
                        @endif
                    </div>
                </a>
            @empty
                <div class="py-6 text-center text-sm text-[var(--color-muted)]">
                    Нет выгрузок.<br>
                    <a href="{{ route('merchant.feeds.create') }}" class="font-semibold text-[var(--color-primary)]">Добавьте YML-фид</a>
                    или подключите <a href="{{ route('merchant.feeds.create', ['source' => 'ozon']) }}" class="font-semibold text-[var(--color-primary)]">Ozon</a>
                    или <a href="{{ route('merchant.feeds.create', ['source' => 'wildberries']) }}" class="font-semibold text-[var(--color-primary)]">Wildberries</a> — товары загрузятся автоматически.
                </div>
            @endforelse
        </section>
    </div>
@endsection