@extends('admin.layouts.app')

@section('title', $group->displayName() . ' — ' . __('admin.brand.name'))
@section('page_title', __('admin.campaign_groups.title'))

@push('styles')
<style>
    .cgs-wrap { display:grid; gap:16px; margin-top:16px; max-width:1180px; }
    .cgs-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; align-items:stretch; }

    /* The audience panel is boxed to the height of the Details + Filter
       summary stack beside it instead of running the page long. It is taken
       out of flow so the grid row is sized by the left column ALONE — an
       in-flow card with 300+ rows would win the max-content race and stretch
       the row instead of being clipped by it. `min-height` keeps the box
       usable when the left column happens to be short. */
    .cgs-audience { position:relative; min-height:460px; }
    .cgs-audience > .card { position:absolute; inset:0; display:flex; flex-direction:column; }
    .cgs-audience > .card > .card-body { flex:1 1 auto; min-height:0; }
    /* Only the table scrolls: the count, the live-data note and the pager
       stay pinned so the reader never loses the total while scrolling. */
    .cgs-audience .cgs-scroll { flex:1 1 auto; min-height:0; overflow:auto; }
    .cgs-audience .cgs-table thead th { position:sticky; top:0; z-index:1; background:#fff; box-shadow:inset 0 -1px 0 #f1f5f9; }
    .cgs-audience .cgs-empty { flex:1 1 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; }

    @media (max-width: 1024px) {
        .cgs-grid { grid-template-columns:minmax(0,1fr); }
        /* Single column: nothing to match heights with, so the card returns
           to its natural flow and the page scrolls as usual. */
        .cgs-audience { position:static; min-height:0; }
        .cgs-audience > .card { position:static; }
        .cgs-audience .cgs-scroll { overflow:visible; max-height:70vh; overflow-y:auto; }
    }
    .card { background:#fff; border:1px solid #eef2f7; border-radius:16px;
            box-shadow:0 1px 2px rgba(15,23,42,.03), 0 4px 12px -8px rgba(15,23,42,.06); overflow:hidden; }
    .card-head { padding:16px 20px; border-bottom:1px solid #f1f5f9; display:flex; align-items:center;
                 justify-content:space-between; gap:10px; flex-wrap:wrap; }
    .card-head h3 { margin:0; font-size:14.5px; font-weight:700; color:#0f172a; }
    .card-body { padding:20px; display:flex; flex-direction:column; gap:14px; }

    /* Kept deliberately small: the panel's job is the name list, and the
       total is a caption for it rather than the headline. */
    .cgs-count__n { font-size:20px; font-weight:800; color:#0f172a; line-height:1; }
    .cgs-count__l { font-size:12.5px; color:#64748b; }
    .cgs-note { font-size:11.5px; color:#94a3b8; }
    .cgs-badge { display:inline-block; border-radius:999px; padding:3px 11px; font-size:11.5px; font-weight:700; }
    .cgs-badge--inv { background:#eef2ff; color:#3730a3; }
    .cgs-badge--sta { background:#ecfdf5; color:#065f46; }
    .cgs-badge--on  { background:#d1fae5; color:#065f46; }
    .cgs-badge--off { background:#f1f5f9; color:#64748b; }

    .cgs-meta { display:grid; grid-template-columns:auto 1fr; gap:8px 16px; font-size:13px; }
    .cgs-meta dt { color:#64748b; font-weight:600; white-space:nowrap; }
    .cgs-meta dd { margin:0; color:#0f172a; overflow-wrap:anywhere; }

    /* Nested rule rendering — mirrors the builder's visual language so the
       saved group reads the same way it was authored. */
    .cgs-node { border:1px solid #e2e8f0; border-radius:12px; padding:10px 12px; background:#fbfcff; }
    .cgs-node--or { border-color:#fbcfe8; background:#fffbfe; }
    .cgs-node__label { font-size:10.5px; font-weight:800; letter-spacing:.04em; color:#6366f1;
                       background:#eef2ff; border-radius:999px; padding:2px 10px; display:inline-block; margin-bottom:8px; }
    .cgs-node--or > .cgs-node__label { color:#9d174d; background:#fce7f3; }
    .cgs-cond { font-size:13px; color:#334155; padding:6px 10px; background:#fff;
                border:1px solid #eef2f7; border-radius:9px; margin-bottom:6px; overflow-wrap:anywhere; }
    .cgs-children { display:flex; flex-direction:column; gap:2px; }
    .cgs-nested { padding-inline-start:12px; border-inline-start:2px solid #e0e7ff; margin:4px 0; }

    .cgs-scroll { overflow-x:auto; }
    .cgs-table { width:100%; border-collapse:collapse; font-size:12.5px; }
    .cgs-table th, .cgs-table td { padding:9px 11px; border-bottom:1px solid #f1f5f9; text-align:start; overflow-wrap:anywhere; }
    .cgs-table th { font-size:11px; font-weight:700; color:#64748b; text-transform:uppercase; letter-spacing:.03em; }
    .cgs-btn { border:1px solid #e2e8f0; background:#fff; color:#334155; border-radius:9px; padding:7px 13px;
               font-size:12.5px; font-weight:700; cursor:pointer; text-decoration:none; display:inline-block; font-family:inherit; }
    .cgs-btn:hover { border-color:#c7d2fe; background:#fafbff; }
    .cgs-btn--danger:hover { border-color:#fecaca; background:#fef2f2; color:#b91c1c; }
    .cgs-btn--primary { background:#4f46e5; border-color:#4f46e5; color:#fff; }
    .cgs-alert { border:1px solid #fecaca; background:#fef2f2; color:#991b1b; border-radius:10px; padding:11px 13px; font-size:12.5px; }
    .cgs-empty { text-align:center; padding:26px 14px; color:#64748b; font-size:13px; }
    .cgs-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
    .cgs-metric { padding:15px; background:#fff; border:1px solid #e2e8f0; border-radius:14px; }
    .cgs-metric strong { display:block; font-size:24px; color:#0f172a; }
    .cgs-metric span { font-size:11.5px; color:#64748b; }
    .cgs-filterbar { display:flex; gap:9px; flex-wrap:wrap; align-items:end; }
    .cgs-filterbar label { display:grid; gap:4px; font-size:11px; font-weight:700; color:#64748b; }
    .cgs-filterbar select,.cgs-filterbar input { border:1px solid #e2e8f0; border-radius:9px; padding:7px 10px; font:inherit; }
    @media (max-width:760px) { .cgs-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } }
</style>
@endpush

@php
    // `admin` guard — @can resolves the default guard and would always be
    // false. Visibility only; the routes hold the real gate.
    $me        = auth('admin')->user();
    $canEdit   = $me?->can('campaign-groups.edit')   ?? false;
    $canDelete = $me?->can('campaign-groups.delete') ?? false;
@endphp

@section('content')
<x-admin.page-header :title="$group->displayName()" :subtitle="$group->description">
    {{-- Named `actions` slot — the default slot is discarded by the component. --}}
    <x-slot:actions>
    <div style="display:flex; gap:8px; flex-wrap:wrap;">
        @if ($canEdit)
            <a class="cgs-btn cgs-btn--primary" href="{{ route('admin.campaign-groups.edit', $group) }}">
                {{ __('admin.campaign_groups.show.edit') }}
            </a>
        @endif
        @if ($canDelete)
            <form method="POST" action="{{ route('admin.campaign-groups.destroy', $group) }}"
                  onsubmit="return confirm(@js(__('admin.campaign_groups.confirm.archive')));">
                @csrf @method('DELETE')
                <button type="submit" class="cgs-btn cgs-btn--danger">{{ __('admin.campaign_groups.show.archive') }}</button>
            </form>
        @endif
        <a class="cgs-btn" href="{{ route('admin.campaign-groups.index') }}">{{ __('admin.campaign_groups.title') }}</a>
    </div>
    </x-slot:actions>
</x-admin.page-header>

@include('admin.partials.flash')

<div class="cgs-wrap">
    @if ($filterError)
        <div class="cgs-alert">
            <strong>{{ __('admin.campaign_groups.preview.error') }}</strong>
            <ul style="margin:6px 0 0; padding-inline-start:18px;">
                @foreach ($filterError as $message)<li>{{ $message }}</li>@endforeach
            </ul>
        </div>
    @endif

    <div class="cgs-grid">
        {{-- ── Details + rules ─────────────────────────────────────── --}}
        <div style="display:grid; gap:16px;">
            <div class="card">
                <div class="card-head"><h3>{{ __('admin.campaign_groups.sections.meta') }}</h3></div>
                <div class="card-body">
                    <dl class="cgs-meta">
                        <dt>{{ __('admin.campaign_groups.source.label') }}</dt>
                        <dd><span class="cgs-badge cgs-badge--inv">{{ __('admin.campaign_groups.source.'.$group->source()) }}</span></dd>
                        <dt>{{ __('admin.campaign_groups.audience.label') }}</dt>
                        <dd>
                            <span class="cgs-badge {{ $group->isInvestorAudience() ? 'cgs-badge--inv' : 'cgs-badge--sta' }}">
                                {{ __('admin.campaign_groups.audience.' . $group->audience_type) }}
                            </span>
                        </dd>

                        <dt>{{ __('admin.campaign_groups.index.col_state') }}</dt>
                        <dd>
                            <span class="cgs-badge {{ $group->is_active ? 'cgs-badge--on' : 'cgs-badge--off' }}">
                                {{ $group->is_active
                                    ? __('admin.campaign_groups.index.state_active')
                                    : __('admin.campaign_groups.index.state_inactive') }}
                            </span>
                        </dd>

                        @if ($group->creator)
                            <dt>{{ __('admin.campaign_groups.show.created_by') }}</dt>
                            <dd>{{ $group->creator->name ?? '—' }}</dd>
                        @endif
                        @if ($group->updater)
                            <dt>{{ __('admin.campaign_groups.show.updated_by') }}</dt>
                            <dd>{{ $group->updater->name ?? '—' }}</dd>
                        @endif

                        <dt>{{ __('admin.campaign_groups.show.created_at') }}</dt>
                        <dd>{{ $group->created_at?->format('Y-m-d H:i') ?? '—' }}</dd>
                        <dt>{{ __('admin.campaign_groups.show.updated_at') }}</dt>
                        <dd>{{ $group->updated_at?->format('Y-m-d H:i') ?? '—' }}</dd>
                    </dl>
                </div>
            </div>

            <div class="card">
                <div class="card-head"><h3>{{ __('admin.campaign_groups.summary.title') }}</h3></div>
                <div class="card-body">
                    @include('admin.campaign-groups.partials.summary-node', ['node' => $summaryTree])
                </div>
            </div>
        </div>

        {{-- ── Live audience ───────────────────────────────────────── --}}
        {{-- The wrapper is the grid item; the card inside it is absolutely
             positioned so this column can never out-grow the Details +
             Filter summary stack. See `.cgs-audience` in the styles above. --}}
        <div class="cgs-audience">
        <div class="card">
            <div class="card-head">
                <h3>{{ __('admin.campaign_groups.show.authoritative_count') }}</h3>
            </div>
            <div class="card-body">
                <div style="display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;">
                    <span class="cgs-count__n">{{ $count === null ? '—' : number_format($count) }}</span>
                    <span class="cgs-count__l">{{ __('admin.campaign_groups.preview.count') }}</span>
                    {{-- The list below is capped, so when it cannot show the
                         whole audience say so — without a pager, a silently
                         truncated table reads as the complete set. --}}
                    @if ($rows !== null && $count !== null && $rows->count() < $count)
                        <span class="cgs-note">{{ __('admin.campaign_groups.show.list_truncated', ['shown' => number_format($rows->count())]) }}</span>
                    @endif
                </div>

                @if ($group->isCrmAudience())
                    @if (count($remoteRows) === 0)
                        <div class="cgs-empty">{{ $filterError ? __('admin.campaign_groups.preview.error_hint') : __('admin.campaign_groups.preview.empty') }}</div>
                    @else
                        <div class="cgs-scroll"><table class="cgs-table">
                            <thead><tr><th>{{ __('admin.campaign_groups.preview.col_name') }}</th><th>{{ __('admin.campaign_groups.preview.col_email') }}</th><th>{{ __('admin.campaign_groups.preview.col_phone') }}</th><th>Source</th></tr></thead>
                            <tbody>@foreach($remoteRows as $row)<tr>
                                <td>{{ $row['name'] ?? '—' }}</td><td dir="ltr">{{ $row['email'] ?? '—' }}</td>
                                <td dir="ltr">{{ $row['phone'] ?? '—' }}</td><td><span class="cgs-badge cgs-badge--inv">CRM</span></td>
                            </tr>@endforeach</tbody>
                        </table></div>
                    @endif
                @elseif ($rows === null)
                    <div class="cgs-empty">{{ __('admin.campaign_groups.preview.error_hint') }}</div>
                @elseif ($rows->isEmpty())
                    <div class="cgs-empty">
                        <div>{{ __('admin.campaign_groups.preview.empty') }}</div>
                        <p class="cgs-note">{{ __('admin.campaign_groups.preview.empty_hint') }}</p>
                    </div>
                @else
                    <div class="cgs-scroll">
                        <table class="cgs-table">
                            <thead><tr>
                                <th>{{ __('admin.campaign_groups.preview.col_name') }}</th>
                                <th>{{ __('admin.campaign_groups.preview.col_email') }}</th>
                                <th>{{ __('admin.campaign_groups.preview.col_phone') }}</th>
                                <th>{{ __('admin.campaign_groups.preview.col_group') }}</th>
                                <th>{{ __('admin.campaign_groups.preview.col_status') }}</th>
                            </tr></thead>
                            <tbody>
                                @foreach ($rows as $row)
                                    @php
                                        $isInvestor = $group->isInvestorAudience();
                                        $name = $isInvestor
                                            ? (app()->getLocale() === 'ar'
                                                ? ($row->full_name_ar ?: $row->full_name_en)
                                                : ($row->full_name_en ?: $row->full_name_ar))
                                            : (app()->getLocale() === 'ar'
                                                ? ($row->name ?: $row->name_en)
                                                : ($row->name_en ?: $row->name));
                                        $url = $isInvestor
                                            ? route('admin.investors.show', $row->id)
                                            : route('admin.startups.show', $row->id);
                                    @endphp
                                    <tr>
                                        <td><a href="{{ $url }}">{{ $name ?: '—' }}</a></td>
                                        <td dir="ltr">{{ $row->email ?: '—' }}</td>
                                        <td dir="ltr">{{ $row->phone_number ?: '—' }}</td>
                                        <td>{{ $row->group?->name ?: '—' }}</td>
                                        <td>{{ app()->getLocale() === 'ar'
                                                ? ($row->statusOption?->name_ar ?: $row->statusOption?->name_en ?: '—')
                                                : ($row->statusOption?->name_en ?: $row->statusOption?->name_ar ?: '—') }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @endif
            </div>
        </div>
        </div>
    </div>

    <div class="card">
        <div class="card-head"><h3>{{ __('admin.campaign_groups.exclusions.title') }}</h3><span class="cgs-badge cgs-badge--off">{{ number_format($exclusions->total()) }}</span></div>
        <div class="card-body">
            @if($exclusions->isEmpty())
                <div class="cgs-empty">{{ __('admin.campaign_groups.exclusions.empty') }}</div>
            @else
                <div class="cgs-scroll"><table class="cgs-table"><thead><tr><th>ID</th><th>Source</th><th>Entity</th><th>Excluded at</th><th>By</th><th></th></tr></thead><tbody>
                @foreach($exclusions as $exclusion)<tr>
                    <td>{{ $exclusion->external_id }}</td><td>{{ strtoupper($exclusion->source) }}</td><td>{{ $exclusion->entity_type }}</td>
                    <td>{{ $exclusion->excluded_at?->format('Y-m-d H:i') }}</td><td>{{ $exclusion->excludedBy?->name ?? '—' }}</td>
                    <td>@if($canEdit)<form method="POST" action="{{ route('admin.campaign-groups.exclusions.destroy', [$group, $exclusion]) }}">@csrf @method('DELETE')<button class="cgs-btn cgs-btn--danger">{{ __('admin.campaign_groups.exclusions.remove') }}</button></form>@endif</td>
                </tr>@endforeach</tbody></table></div>
                {{ $exclusions->links() }}
            @endif
        </div>
    </div>

    <div class="cgs-metrics">
        <div class="cgs-metric"><strong>{{ number_format($analytics['campaigns']) }}</strong><span>{{ __('admin.campaign_groups.analytics.total_campaigns') }}</span></div>
        <div class="cgs-metric"><strong>{{ number_format($analytics['resolved']) }}</strong><span>{{ __('admin.campaign_groups.analytics.resolved') }}</span></div>
        <div class="cgs-metric"><strong>{{ number_format($analytics['successful']) }}</strong><span>{{ __('admin.campaign_groups.analytics.successful') }}</span></div>
        <div class="cgs-metric"><strong>{{ $analytics['success_rate'] === null ? '—' : $analytics['success_rate'].'%' }}</strong><span>{{ __('admin.campaign_groups.analytics.success_rate') }}</span></div>
        <div class="cgs-metric"><strong>{{ number_format($analytics['partial']) }}</strong><span>{{ __('admin.campaign_groups.analytics.partial') }}</span></div>
        <div class="cgs-metric"><strong>{{ number_format($analytics['failed']) }}</strong><span>{{ __('admin.campaign_groups.analytics.failed') }}</span></div>
        <div class="cgs-metric"><strong>{{ number_format($analytics['pending']) }}</strong><span>{{ __('admin.campaign_groups.analytics.pending') }}</span></div>
        <div class="cgs-metric"><strong>{{ number_format($analytics['skipped']) }}</strong><span>{{ __('admin.campaign_groups.analytics.skipped') }}</span></div>
    </div>

    <div class="card">
        <div class="card-head"><h3>{{ __('admin.campaign_groups.analytics.channel_breakdown') }}</h3></div>
        <div class="card-body"><div class="cgs-scroll"><table class="cgs-table"><thead><tr>
            <th>{{ __('admin.campaign_groups.analytics.channels') }}</th>
            <th>{{ __('admin.campaign_groups.analytics.successful') }}</th>
            <th>{{ __('admin.campaign_groups.analytics.failed') }}</th>
            <th>{{ __('admin.campaign_groups.analytics.pending') }}</th>
            <th>{{ __('admin.campaign_groups.analytics.skipped') }}</th>
        </tr></thead><tbody>
        @foreach($analytics['channels'] as $channel => $counts)<tr>
            <td>{{ ucfirst($channel) }}</td><td>{{ $counts['successful'] }}</td><td>{{ $counts['failed'] }}</td><td>{{ $counts['pending'] }}</td><td>{{ $counts['skipped'] }}</td>
        </tr>@endforeach
        </tbody></table></div></div>
    </div>

    <div class="card">
        <div class="card-head"><h3>{{ __('admin.campaign_groups.analytics.history') }}</h3></div>
        <div class="card-body">
            <form method="GET" class="cgs-filterbar">
                <label>{{ __('admin.campaign_groups.analytics.status') }}<select name="status"><option value="">{{ __('admin.campaign_groups.analytics.all') }}</option>@foreach(\App\Models\AdminNotification::statuses() as $status)<option value="{{ $status }}" @selected(($historyFilters['status'] ?? '') === $status)>{{ ucfirst($status) }}</option>@endforeach</select></label>
                <label>{{ __('admin.campaign_groups.analytics.channels') }}<select name="channel"><option value="">{{ __('admin.campaign_groups.analytics.all') }}</option>@foreach(\App\Models\AdminNotification::SUPPORTED_CHANNELS as $channel)<option value="{{ $channel }}" @selected(($historyFilters['channel'] ?? '') === $channel)>{{ ucfirst($channel) }}</option>@endforeach</select></label>
                <label>{{ __('admin.campaign_groups.analytics.from') }}<input type="date" name="from" value="{{ $historyFilters['from'] ?? '' }}"></label>
                <label>{{ __('admin.campaign_groups.analytics.to') }}<input type="date" name="to" value="{{ $historyFilters['to'] ?? '' }}"></label>
                <button class="cgs-btn cgs-btn--primary">{{ __('admin.campaign_groups.analytics.apply') }}</button>
            </form>
            @if($campaignHistory->isEmpty())
                <div class="cgs-empty">{{ __('admin.campaign_groups.analytics.empty') }}</div>
            @else
                <div class="cgs-scroll"><table class="cgs-table"><thead><tr><th>{{ __('admin.campaign_groups.analytics.campaign') }}</th><th>{{ __('admin.campaign_groups.analytics.channels') }}</th><th>{{ __('admin.campaign_groups.analytics.status') }}</th><th>{{ __('admin.campaign_groups.analytics.resolved') }}</th><th>{{ __('admin.campaign_groups.analytics.successful') }}</th><th>{{ __('admin.campaign_groups.analytics.partial') }}</th><th>{{ __('admin.campaign_groups.analytics.failed') }}</th><th>{{ __('admin.campaign_groups.analytics.pending') }}</th><th>{{ __('admin.campaign_groups.analytics.skipped') }}</th><th>{{ __('admin.campaign_groups.analytics.executed') }}</th></tr></thead><tbody>
                @foreach($campaignHistory as $campaign) @php($r=$campaign->group_delivery_rollup)<tr>
                    <td><a href="{{ route('admin.notification-center.show', $campaign) }}">{{ $campaign->title }}</a><div class="cgs-note">{{ $campaign->creator?->name }}</div></td>
                    <td>{{ implode(', ', (array)$campaign->channels) }}</td><td><span class="cgs-badge cgs-badge--off">{{ $campaign->status }}</span></td>
                    <td>{{ $r['resolved'] }}</td><td>{{ $r['successful'] }}</td><td>{{ $r['partial'] }}</td><td>{{ $r['failed'] }}</td><td>{{ $r['pending'] }}</td><td>{{ $r['skipped'] }}</td>
                    <td>{{ ($campaign->sent_at ?? $campaign->created_at)?->format('Y-m-d H:i') }}</td>
                </tr>@endforeach</tbody></table></div>
                {{ $campaignHistory->links() }}
            @endif
            <p class="cgs-note">{{ __('admin.campaign_groups.analytics.attribution') }}</p>
        </div>
    </div>
</div>
@endsection