@extends('layouts.account')

@section('title', 'Уведомления — teeu')

@section('content')
<div class="mb-4 flex flex-wrap items-baseline justify-between gap-2">
    <h1 class="text-[22px] font-extrabold tracking-[-0.5px] text-[var(--color-ink)] sm:text-[24px]">Уведомления</h1>
    @if ($notifications->total() > 0)
        <form method="POST" action="{{ route('account.notifications.read-all') }}">
            @csrf
            <button type="submit" class="text-[13px] text-[var(--color-primary)] hover:text-[var(--color-primary-dark)]">Отметить все прочитанными</button>
        </form>
    @endif
</div>

{{-- Одним списком в общей рамке (макет «Уведомления»): непрочитанные — жирнее
     и с синей точкой справа. Клик отмечает прочитанным и ведёт к источнику.

     У каждого типа — своя иконка, цвет и подпись. Раньше имя иконки собиралось
     через switch прямо в атрибуте, и в него попадал пробел («package ») — Lucide
     такого имени не знает, и все кружки были пустыми. Неизвестный тип получает
     колокольчик, а не падение. --}}
@php($kinds = [
    'new_order' => ['package', 'Новый заказ', 'bg-[var(--color-primary-soft)] text-[var(--color-primary)]'],
    'order_status' => ['truck', 'Статус заказа', 'bg-[var(--color-primary-soft)] text-[var(--color-primary)]'],
    'stale_order' => ['clock', 'Ждёт обработки', 'bg-[var(--color-warning-soft)] text-[var(--color-warning)]'],
    'unread_chat' => ['message-circle', 'Сообщение', 'bg-[#EEF0FB] text-[#5B57D6]'],
    'price_drop' => ['tag', 'Снижение цены', 'bg-[var(--color-success-soft)] text-[var(--color-success)]'],
    'review_approved' => ['star', 'Отзыв', 'bg-[#FFF6E5] text-[var(--color-rating)]'],
])
@php($fallbackKind = ['bell', 'Уведомление', 'bg-[var(--color-canvas)] text-[var(--color-secondary)]'])
@if ($notifications->isEmpty())
    <div class="rounded-[var(--radius-lg)] border border-[var(--color-line)] p-10 text-center text-[13.5px] text-[var(--color-muted)]">
        У вас пока нет уведомлений.
    </div>
@else
    <div class="overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-line)] bg-white">
        @foreach ($notifications as $notification)
            @php($d = $notification->data)
            @php([$kindIcon, $kindLabel, $kindTone] = $kinds[$d['type'] ?? ''] ?? $fallbackKind)
            <form method="POST" action="{{ route('account.notifications.read', $notification->id) }}" class="border-b border-[var(--color-canvas)] last:border-0">
                @csrf
                <button type="submit" class="flex w-full items-center gap-3 px-4 py-[13px] text-left transition hover:bg-[#F8F9FB] sm:px-[18px]">
                    <span class="grid h-9 w-9 shrink-0 place-items-center rounded-full {{ $kindTone }} {{ $notification->read_at ? 'opacity-60' : '' }}">
                        <i data-lucide="{{ $kindIcon }}" class="h-[18px] w-[18px]"></i>
                    </span>
                    <span class="min-w-0 flex-1">
                        <span class="block text-[13.5px] {{ $notification->read_at ? 'text-[var(--color-secondary)]' : 'font-semibold text-[var(--color-ink)]' }}">{{ $d['message'] ?? 'Уведомление' }}</span>
                        <span class="mt-px block text-xs text-[var(--color-disabled)]">{{ $kindLabel }} · {{ $notification->created_at->diffForHumans() }}</span>
                    </span>
                    @unless ($notification->read_at)
                        <span class="h-2 w-2 shrink-0 rounded-full bg-[var(--color-primary)]" aria-label="Не прочитано"></span>
                    @endunless
                </button>
            </form>
        @endforeach
    </div>
@endif

<div class="mt-4">{{ $notifications->links() }}</div>
@endsection