@extends('admin.layouts.app')

@section('title', __('admin.notification_center.title') . ' — ' . __('admin.brand.name'))
@section('page_title', __('admin.notification_center.title'))

@php
    use App\Models\AdminNotification;

    $statusMeta = [
        AdminNotification::STATUS_DRAFT   => ['fg' => '#475569', 'bg' => '#f1f5f9'],
        AdminNotification::STATUS_SENDING => ['fg' => '#9a3412', 'bg' => '#ffedd5'],
        AdminNotification::STATUS_SENT    => ['fg' => '#047857', 'bg' => '#ecfdf5'],
        AdminNotification::STATUS_PARTIAL => ['fg' => '#92400e', 'bg' => '#fef3c7'],
        AdminNotification::STATUS_FAILED  => ['fg' => '#b91c1c', 'bg' => '#fef2f2'],
    ];

    $channelMeta = [
        'email'    => ['fg' => '#1d4ed8', 'bg' => '#dbeafe', 'svg' => '<rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-10 5L2 7"/>'],
        'sms'      => ['fg' => '#9a3412', 'bg' => '#fed7aa', 'svg' => '<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>'],
        'whatsapp' => ['fg' => '#15803d', 'bg' => '#bbf7d0', 'svg' => '<path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8z"/>'],
    ];
@endphp

@push('styles')
<style>
    .nc-toolbar { display: flex; align-items: center; gap: 10px; margin: 4px 0 16px; flex-wrap: wrap; }
    .nc-filters { display: inline-flex; background: #f1f5f9; padding: 4px; border-radius: 999px; gap: 4px; }
    .nc-filter { padding: 6px 14px; border-radius: 999px; background: transparent; color: #64748b; border: 0; cursor: pointer; font-weight: 600; font-size: 12.5px; text-decoration: none; }
    .nc-filter[aria-selected="true"] { background: #4f46e5; color: #fff; }
    .nc-table { background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; overflow-x: auto; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
    .nc-head, .nc-row { display: grid; grid-template-columns: minmax(160px,1.3fr) 118px 90px 150px 70px 62px 54px 62px 104px 172px; gap: 12px; align-items: center; padding: 12px 16px; min-width: 1120px; }
    .nc-mode { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; }
    .nc-mode--now { background: #f1f5f9; color: #475569; }
    .nc-mode--scheduled { background: #eef2ff; color: #4338ca; }
    .nc-sched-time { display: block; font-size: 11px; color: #64748b; margin-top: 3px; }
    .nc-head { background: #f8fafc; border-bottom: 1px solid #e2e8f0; font-size: 11.5px; font-weight: 600; color: #475569; text-transform: uppercase; letter-spacing: .03em; }
    .nc-row { border-bottom: 1px solid #f1f5f9; color: inherit; transition: background-color .12s; }
    .nc-row:last-child { border-bottom: 0; }
    .nc-row:hover { background: #fafbff; }
    .nc-title { font-weight: 700; font-size: 14px; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .nc-title a { color: inherit; text-decoration: none; }
    .nc-title a:hover { color: #4338ca; }
    .nc-cell { font-size: 12.5px; color: #475569; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .nc-num { font-weight: 700; font-size: 14px; text-align: center; }
    .nc-num--ok { color: #047857; } .nc-num--bad { color: #b91c1c; } .nc-num--muted { color: #94a3b8; }
    .nc-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; white-space: nowrap; }
    .nc-badge__dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
    .nc-actions { display: inline-flex; gap: 6px; align-items: center; }
    .nc-act { font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 7px; border: 1px solid #e2e8f0; background: #fff; color: #334155; text-decoration: none; cursor: pointer; }
    .nc-act:hover { background: #eef2ff; border-color: #c7d2fe; color: #4338ca; }
    .nc-empty { padding: 46px 16px; text-align: center; color: #64748b; font-size: 13.5px; }
    .inline-form { display: inline; }
    .btn-primary { background: #4f46e5; color: #fff; border: 0; border-radius: 10px; padding: 10px 20px; font-weight: 700; font-size: 13.5px; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
    .btn-primary:hover { background: #4338ca; }
</style>
@endpush

@section('content')
    <x-admin.page-header
        :title="__('admin.notification_center.title')"
        :subtitle="__('admin.notification_center.subtitle')">
        <x-slot:actions>
            <a href="{{ route('admin.notification-center.create') }}" class="btn-primary">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>
                {{ __('admin.notification_center.new') }}
            </a>
        </x-slot:actions>
    </x-admin.page-header>

    @include('admin.partials.flash')

    <div class="nc-toolbar">
        <div class="nc-filters" role="tablist">
            <a class="nc-filter" role="tab" aria-selected="{{ $statusFilter === '' ? 'true' : 'false' }}"
               href="{{ route('admin.notification-center.index') }}">{{ __('admin.notification_center.filters.all') }}</a>
            @foreach ($statuses as $s)
                <a class="nc-filter" role="tab" aria-selected="{{ $statusFilter === $s ? 'true' : 'false' }}"
                   href="{{ route('admin.notification-center.index', ['status' => $s]) }}">{{ __('admin.notification_center.status.' . $s) }}</a>
            @endforeach
        </div>
    </div>

    @if ($notifications->isEmpty())
        <div class="nc-table"><div class="nc-empty">{{ __('admin.notification_center.empty') }}</div></div>
    @else
        <div class="nc-table">
            <div class="nc-head">
                <span>{{ __('admin.notification_center.col.title') }}</span>
                <span>{{ __('admin.notification_center.col.created_by') }}</span>
                <span>{{ __('admin.notification_center.col.created') }}</span>
                <span>{{ __('admin.notification_center.col.delivery') }}</span>
                <span>{{ __('admin.notification_center.col.audience') }}</span>
                <span style="text-align:center;">{{ __('admin.notification_center.stats.delivered') }}</span>
                <span style="text-align:center;">{{ __('admin.notification_center.stats.failed') }}</span>
                <span style="text-align:center;">{{ __('admin.notification_center.col.not_sent') }}</span>
                <span>{{ __('admin.fields.status') }}</span>
                <span>{{ __('admin.notification_center.col.actions') }}</span>
            </div>
            @foreach ($notifications as $n)
                @php
                    $sm = $statusMeta[$n->status] ?? $statusMeta['draft'];
                    $st = is_array($n->stats) ? $n->stats : [];
                    $hasStats = ! $n->isDraft() && $st !== [];
                @endphp
                <div class="nc-row">
                    <div class="nc-title">
                        <a href="{{ route('admin.notification-center.show', $n) }}">{{ $n->title }}</a>
                    </div>
                    <span class="nc-cell">{{ optional($n->creator)->name ?? __('admin.notification_center.system') }}</span>
                    <span class="nc-cell">{{ $n->created_at?->format('Y-m-d') }}</span>
                    <span class="nc-cell">
                        @if ($n->delivery_mode === AdminNotification::DELIVERY_MODE_SCHEDULED)
                            <span class="nc-mode nc-mode--scheduled">{{ __('admin.notification_center.mode.scheduled') }}</span>
                            @if ($n->scheduled_at)
                                <span class="nc-sched-time">{{ $n->scheduled_at->copy()->setTimezone($n->timezone ?: 'UTC')->format('Y-m-d H:i') }}</span>
                            @endif
                        @else
                            <span class="nc-mode nc-mode--now">{{ __('admin.notification_center.mode.now') }}</span>
                        @endif
                    </span>
                    <span class="nc-cell">{{ $n->audience_count !== null ? $n->audience_count : ($n->groups_count . ' ' . __('admin.notification_center.groups_short')) }}</span>
                    <span class="nc-num {{ $hasStats ? 'nc-num--ok' : 'nc-num--muted' }}">{{ $hasStats ? ($st['delivered'] ?? 0) : '—' }}</span>
                    <span class="nc-num {{ $hasStats && ($st['failed'] ?? 0) > 0 ? 'nc-num--bad' : 'nc-num--muted' }}">{{ $hasStats ? ($st['failed'] ?? 0) : '—' }}</span>
                    <span class="nc-num nc-num--muted">{{ $hasStats ? ($st['pending'] ?? 0) : '—' }}</span>
                    <span class="nc-badge" style="color: {{ $sm['fg'] }}; background: {{ $sm['bg'] }};">
                        <span class="nc-badge__dot" aria-hidden="true"></span>
                        {{ __('admin.notification_center.status.' . $n->status) }}
                    </span>
                    <span class="nc-actions">
                        <a class="nc-act" href="{{ route('admin.notification-center.show', $n) }}">{{ __('admin.actions.view') }}</a>
                        <form class="inline-form" method="POST" action="{{ route('admin.notification-center.duplicate', $n) }}">
                            @csrf
                            <button type="submit" class="nc-act">{{ __('admin.notification_center.duplicate') }}</button>
                        </form>
                        @if ($n->isScheduled())
                            <form class="inline-form" method="POST" action="{{ route('admin.notification-center.cancel', $n) }}"
                                  onsubmit="return confirm('{{ __('admin.notification_center.confirm.cancel') }}');">
                                @csrf
                                <button type="submit" class="nc-act">{{ __('admin.notification_center.cancel_action') }}</button>
                            </form>
                        @elseif (! $n->isDraft() && ! $n->isCancelled())
                            <a class="nc-act" href="{{ route('admin.notification-center.show', $n) }}#retry">{{ __('admin.notification_center.retry') }}</a>
                        @endif
                    </span>
                </div>
            @endforeach
        </div>

        <div style="margin-top:16px;">{{ $notifications->links() }}</div>
    @endif
@endsection