@extends('admin.layouts.app')

@php
    $title = $entry['title'] ?? '';
    $tone  = $entry['badge_tone'] ?? 'muted';
    $tonePalette = match ($tone) {
        'ok'    => ['fg' => '#15803d', 'bg' => '#dcfce7', 'border' => '#86efac', 'dot' => '#22c55e'],
        'warn'  => ['fg' => '#a16207', 'bg' => '#fef9c3', 'border' => '#fde047', 'dot' => '#eab308'],
        'err'   => ['fg' => '#b91c1c', 'bg' => '#fee2e2', 'border' => '#fca5a5', 'dot' => '#ef4444'],
        default => ['fg' => '#475569', 'bg' => '#f1f5f9', 'border' => '#e2e8f0', 'dot' => '#94a3b8'],
    };
    $kindPalette = match ($kind) {
        'notification' => ['fg' => '#0369a1', 'bg' => '#e0f2fe'],
        'audit'        => ['fg' => '#6d28d9', 'bg' => '#ede9fe'],
        default        => ['fg' => '#047857', 'bg' => '#d1fae5'],
    };
    $kindLabel = match ($kind) {
        'notification' => __('admin.investors_admin.activity.tabs.notifications'),
        'audit'        => __('admin.investors_admin.activity.tabs.audits'),
        default        => __('admin.investors_admin.activity.tabs.activity'),
    };
    $iconRef = match ($kind) {
        'notification' => '#icon-mail',
        'audit'        => '#icon-shield',
        default        => '#icon-edit',
    };
@endphp

@section('title', __('admin.investors_admin.activity.detail_title') . ' · ' . $investor->name_en)
@section('page_title', __('admin.investors_admin.activity.detail_title'))

@push('styles')
<style>
    .il-detail { display: flex; flex-direction: column; gap: 18px; }

    /* ── Header card ──────────────────────────────────────────────── */
    .il-detail__hero {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 14px;
        padding: 22px 24px;
        box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    }
    .il-detail__back {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 13px;
        font-weight: 600;
        color: #64748b;
        text-decoration: none;
        margin-bottom: 14px;
        padding: 4px 8px;
        margin-inline-start: -8px;
        border-radius: 6px;
        transition: background-color .12s, color .12s;
    }
    .il-detail__back:hover { background: #f1f5f9; color: #0f172a; }
    .il-detail__back svg { width: 14px; height: 14px; }
    :where([dir="rtl"]) .il-detail__back svg { transform: rotate(180deg); }

    .il-detail__top {
        display: flex;
        align-items: center;
        gap: 14px;
        margin-bottom: 16px;
    }
    .il-detail__icon {
        width: 48px; height: 48px;
        display: inline-flex; align-items: center; justify-content: center;
        border-radius: 14px;
        flex-shrink: 0;
    }
    .il-detail__icon svg { width: 22px; height: 22px; }
    .il-detail__kind {
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: #94a3b8;
        margin-bottom: 4px;
    }
    .il-detail__title {
        font-size: 19px;
        font-weight: 700;
        color: #0f172a;
        line-height: 1.35;
        word-break: break-word;
        margin: 0;
    }

    .il-detail__pills {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 16px;
    }
    .il-detail__pill {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        font-size: 12px;
        font-weight: 600;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 999px;
        color: #475569;
    }
    .il-detail__pill svg { width: 13px; height: 13px; color: #94a3b8; }
    .il-detail__pill--badge {
        font-weight: 700;
        font-size: 11px;
        letter-spacing: .05em;
        text-transform: uppercase;
    }
    .il-detail__pill--badge .il-detail__pill-dot {
        width: 7px; height: 7px;
        border-radius: 999px;
        flex-shrink: 0;
    }

    /* ── Actor & timestamp strip ──────────────────────────────────── */
    .il-detail__strip {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px 24px;
        padding-top: 16px;
        border-top: 1px dashed #e2e8f0;
    }
    @media (max-width: 540px) { .il-detail__strip { grid-template-columns: 1fr; } }
    .il-detail__strip-item {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    .il-detail__strip-key {
        font-size: 10.5px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: #94a3b8;
    }
    .il-detail__strip-val {
        font-size: 14px;
        font-weight: 600;
        color: #0f172a;
    }
    .il-detail__strip-sub {
        font-size: 12px;
        color: #94a3b8;
        font-variant-numeric: tabular-nums;
    }

    /* ── Section cards (meta, payload, response, etc.) ────────────── */
    .il-detail__section {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        padding: 18px 22px;
        box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    }
    .il-detail__section-title {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: #475569;
        margin: 0 0 14px;
    }
    .il-detail__section-title svg { width: 14px; height: 14px; color: var(--primary-600, #7c3aed); }

    .il-detail__grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 14px 22px;
    }
    .il-detail__grid-row {
        display: flex;
        flex-direction: column;
        gap: 3px;
        min-width: 0;
    }
    .il-detail__grid-key {
        color: #94a3b8;
        font-size: 10.5px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .05em;
    }
    .il-detail__grid-val {
        color: #0f172a;
        font-weight: 500;
        font-size: 13px;
        word-break: break-word;
        line-height: 1.5;
    }
    .il-detail__grid-val--empty {
        color: #94a3b8;
        font-style: italic;
        font-weight: 400;
    }

    /* ── Body / message blocks ───────────────────────────────────── */
    .il-detail__block {
        font-size: 13.5px;
        color: #0f172a;
        line-height: 1.7;
        white-space: pre-wrap;
        word-break: break-word;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        padding: 14px 16px;
    }
    .il-detail__block--err {
        background: #fef2f2;
        border-color: #fecaca;
        color: #991b1b;
    }
    .il-detail__pre {
        font-family: ui-monospace, "Cascadia Code", "Fira Code", Menlo, Consolas, monospace;
        font-size: 12px;
        background: #0f172a;
        color: #e2e8f0;
        padding: 14px 16px;
        border-radius: 10px;
        overflow-x: auto;
        white-space: pre;
        line-height: 1.55;
        max-height: 520px;
    }
</style>
@endpush

@section('content')
<div class="il-detail" style="max-width: 980px;">

    {{-- ─── Header hero ─────────────────────────────────────────────── --}}
    <div class="il-detail__hero">
        <a href="{{ route('admin.investors.show', $investor) . '#sec-activity' }}" class="il-detail__back">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
            {{ __('admin.investors_admin.activity.back_to_investor', ['name' => $investor->name_en ?: $investor->name_ar]) }}
        </a>

        <div class="il-detail__top">
            <span class="il-detail__icon" style="background: {{ $kindPalette['bg'] }}; color: {{ $kindPalette['fg'] }};">
                <svg><use href="{{ $iconRef }}"/></svg>
            </span>
            <div>
                <div class="il-detail__kind">{{ $kindLabel }}</div>
                <h1 class="il-detail__title">{{ $title }}</h1>
            </div>
        </div>

        <div class="il-detail__pills">
            @if (filled($entry['badge']))
                <span class="il-detail__pill il-detail__pill--badge"
                      style="color: {{ $tonePalette['fg'] }}; background: {{ $tonePalette['bg'] }}; border-color: {{ $tonePalette['border'] }};">
                    <span class="il-detail__pill-dot" style="background: {{ $tonePalette['dot'] }};"></span>
                    {{ $entry['badge'] }}
                </span>
            @endif
            @if (filled($entry['subtitle']))
                <span class="il-detail__pill">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="3"/><line x1="9" y1="9" x2="15" y2="9"/><line x1="9" y1="13" x2="15" y2="13"/><line x1="9" y1="17" x2="13" y2="17"/></svg>
                    {{ $entry['subtitle'] }}
                </span>
            @endif
        </div>

        {{-- Actor + timestamp ──────────────── --}}
        <div class="il-detail__strip">
            <div class="il-detail__strip-item">
                <span class="il-detail__strip-key">{{ __('admin.investors_admin.activity.actor_label') }}</span>
                <span class="il-detail__strip-val">{{ $entry['actor'] ?? __('admin.investors_admin.activity.actor_system') }}</span>
                @if ($raw instanceof \App\Models\ActivityLog && $raw->admin?->email)
                    <span class="il-detail__strip-sub">{{ $raw->admin->email }}</span>
                @elseif ($raw instanceof \App\Models\NotificationLog && $raw->admin?->email)
                    <span class="il-detail__strip-sub">{{ $raw->admin->email }}</span>
                @endif
            </div>
            @if ($entry['happened_at'])
                <div class="il-detail__strip-item">
                    <span class="il-detail__strip-key">{{ __('admin.investors_admin.activity.fields.when') }}</span>
                    <span class="il-detail__strip-val">{{ $entry['happened_at']->format('Y-m-d · H:i:s') }}</span>
                    <span class="il-detail__strip-sub">{{ $entry['happened_at']->diffForHumans() }}</span>
                </div>
            @endif
        </div>
    </div>

    {{-- ─── Per-kind detail sections ────────────────────────────────── --}}

    @if ($kind === 'activity')
        {{-- ─── Activity-log details ─────────────────────────────── --}}
        @if (filled($raw->description ?? null))
            <div class="il-detail__section">
                <h2 class="il-detail__section-title">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><line x1="4" y1="6" x2="20" y2="6"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="18" x2="14" y2="18"/></svg>
                    {{ __('admin.investors_admin.activity.section.description') }}
                </h2>
                <div class="il-detail__block">{{ $raw->description }}</div>
            </div>
        @endif

        @if (is_array($raw->meta ?? null) && ! empty($raw->meta))
            <div class="il-detail__section">
                <h2 class="il-detail__section-title">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12" y2="16"/></svg>
                    {{ __('admin.investors_admin.activity.section.payload') }}
                </h2>
                <pre class="il-detail__pre">{{ json_encode($raw->meta, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) }}</pre>
            </div>
        @endif

        <div class="il-detail__section">
            <h2 class="il-detail__section-title">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M12 1v6m0 6v6m4.22-13.22l4.24-4.24M3.54 17.46l4.24-4.24M1 12h6m6 0h6m-4.22 4.22l4.24 4.24M3.54 6.54l4.24 4.24"/></svg>
                {{ __('admin.investors_admin.activity.section.context') }}
            </h2>
            <div class="il-detail__grid">
                <div class="il-detail__grid-row">
                    <span class="il-detail__grid-key">{{ __('admin.investors_admin.activity.fields.ip') }}</span>
                    <span class="il-detail__grid-val {{ blank($raw->ip_address ?? null) ? 'il-detail__grid-val--empty' : '' }}">
                        {{ $raw->ip_address ?: __('admin.investors_admin.activity.empty_value') }}
                    </span>
                </div>
                <div class="il-detail__grid-row">
                    <span class="il-detail__grid-key">{{ __('admin.investors_admin.activity.fields.user_agent') }}</span>
                    <span class="il-detail__grid-val {{ blank($raw->user_agent ?? null) ? 'il-detail__grid-val--empty' : '' }}">
                        {{ $raw->user_agent ?: __('admin.investors_admin.activity.empty_value') }}
                    </span>
                </div>
                <div class="il-detail__grid-row">
                    <span class="il-detail__grid-key">{{ __('admin.investors_admin.activity.fields.log_id') }}</span>
                    <span class="il-detail__grid-val">#{{ $raw->id }}</span>
                </div>
            </div>
        </div>
    @elseif ($kind === 'notification')
        {{-- ─── Notification details ─────────────────────────────── --}}
        <div class="il-detail__section">
            <h2 class="il-detail__section-title">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
                {{ __('admin.investors_admin.activity.section.delivery') }}
            </h2>
            <div class="il-detail__grid">
                <div class="il-detail__grid-row">
                    <span class="il-detail__grid-key">{{ __('admin.investors_admin.activity.fields.channel') }}</span>
                    <span class="il-detail__grid-val">{{ __('admin.investors_admin.activity.channels.' . $raw->channel) }}</span>
                </div>
                <div class="il-detail__grid-row">
                    <span class="il-detail__grid-key">{{ __('admin.investors_admin.activity.fields.status') }}</span>
                    <span class="il-detail__grid-val">{{ __('admin.investors_admin.activity.statuses.' . $raw->status) }}</span>
                </div>
                <div class="il-detail__grid-row">
                    <span class="il-detail__grid-key">{{ __('admin.investors_admin.activity.fields.address') }}</span>
                    <span class="il-detail__grid-val {{ blank($raw->address) ? 'il-detail__grid-val--empty' : '' }}">
                        {{ $raw->address ?: __('admin.investors_admin.activity.empty_value') }}
                    </span>
                </div>
                <div class="il-detail__grid-row">
                    <span class="il-detail__grid-key">{{ __('admin.investors_admin.activity.fields.triggered_event') }}</span>
                    <span class="il-detail__grid-val">{{ $raw->triggered_event ?: __('admin.investors_admin.activity.empty_value') }}</span>
                </div>
                @if (filled($raw->label_key))
                    <div class="il-detail__grid-row">
                        <span class="il-detail__grid-key">{{ __('admin.investors_admin.activity.fields.label') }}</span>
                        <span class="il-detail__grid-val">{{ $raw->label_key }}</span>
                    </div>
                @endif
                @if (filled($raw->provider_message_id))
                    <div class="il-detail__grid-row">
                        <span class="il-detail__grid-key">{{ __('admin.investors_admin.activity.fields.provider_id') }}</span>
                        <span class="il-detail__grid-val">{{ $raw->provider_message_id }}</span>
                    </div>
                @endif
                @if ($raw->sent_at)
                    <div class="il-detail__grid-row">
                        <span class="il-detail__grid-key">{{ __('admin.investors_admin.activity.fields.sent_at') }}</span>
                        <span class="il-detail__grid-val">{{ $raw->sent_at->format('Y-m-d · H:i:s') }}</span>
                    </div>
                @endif
                <div class="il-detail__grid-row">
                    <span class="il-detail__grid-key">{{ __('admin.investors_admin.activity.fields.log_id') }}</span>
                    <span class="il-detail__grid-val">#{{ $raw->id }}</span>
                </div>
            </div>
        </div>

        @if (filled($raw->old_value) || filled($raw->new_value) || $raw->oldOption || $raw->newOption)
            <div class="il-detail__section">
                <h2 class="il-detail__section-title">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
                    {{ __('admin.investors_admin.activity.section.transition') }}
                </h2>
                <div class="il-detail__grid">
                    <div class="il-detail__grid-row">
                        <span class="il-detail__grid-key">{{ __('admin.investors_admin.activity.fields.from') }}</span>
                        <span class="il-detail__grid-val">{{ $raw->oldOption?->name_en ?? $raw->old_value ?? __('admin.investors_admin.activity.empty_value') }}</span>
                    </div>
                    <div class="il-detail__grid-row">
                        <span class="il-detail__grid-key">{{ __('admin.investors_admin.activity.fields.to') }}</span>
                        <span class="il-detail__grid-val">{{ $raw->newOption?->name_en ?? $raw->new_value ?? __('admin.investors_admin.activity.empty_value') }}</span>
                    </div>
                </div>
            </div>
        @endif

        @if (filled($raw->error) || filled($raw->error_code))
            <div class="il-detail__section">
                <h2 class="il-detail__section-title">
                    <svg viewBox="0 0 24 24" fill="none" stroke="#dc2626" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12" y2="16"/></svg>
                    {{ __('admin.investors_admin.activity.section.error') }}
                </h2>
                @if (filled($raw->error_code))
                    <div style="margin-bottom: 10px;">
                        <span class="il-detail__grid-key">{{ __('admin.investors_admin.activity.fields.error_code') }}</span>
                        <span class="il-detail__grid-val" style="margin-inline-start: 8px;">{{ $raw->error_code }}</span>
                    </div>
                @endif
                <div class="il-detail__block il-detail__block--err">{{ $raw->error }}</div>
            </div>
        @endif

        @if (is_array($raw->payload) && ! empty($raw->payload))
            <div class="il-detail__section">
                <h2 class="il-detail__section-title">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
                    {{ __('admin.investors_admin.activity.section.payload') }}
                </h2>
                <pre class="il-detail__pre">{{ json_encode($raw->payload, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) }}</pre>
            </div>
        @endif

        @if (is_array($raw->response) && ! empty($raw->response))
            <div class="il-detail__section">
                <h2 class="il-detail__section-title">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                    {{ __('admin.investors_admin.activity.section.response') }}
                </h2>
                <pre class="il-detail__pre">{{ json_encode($raw->response, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) }}</pre>
            </div>
        @endif
    @else
        {{-- ─── Audit (signup forensic) details ─────────────────── --}}
        <div class="il-detail__section">
            <h2 class="il-detail__section-title">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
                {{ __('admin.investors_admin.activity.section.audit') }}
            </h2>
            <div class="il-detail__grid">
                <div class="il-detail__grid-row">
                    <span class="il-detail__grid-key">{{ __('admin.investors_admin.activity.fields.outcome') }}</span>
                    <span class="il-detail__grid-val">{{ $raw->outcome ?: __('admin.investors_admin.activity.empty_value') }}</span>
                </div>
                <div class="il-detail__grid-row">
                    <span class="il-detail__grid-key">{{ __('admin.investors_admin.activity.fields.flow') }}</span>
                    <span class="il-detail__grid-val">{{ $raw->flow ?: __('admin.investors_admin.activity.empty_value') }}</span>
                </div>
                @if ($raw->duration_ms ?? null)
                    <div class="il-detail__grid-row">
                        <span class="il-detail__grid-key">{{ __('admin.investors_admin.activity.fields.duration') }}</span>
                        <span class="il-detail__grid-val">{{ $raw->duration_ms }} ms</span>
                    </div>
                @endif
                <div class="il-detail__grid-row">
                    <span class="il-detail__grid-key">{{ __('admin.investors_admin.activity.fields.request_id') }}</span>
                    <span class="il-detail__grid-val">{{ $raw->request_id ?: __('admin.investors_admin.activity.empty_value') }}</span>
                </div>
                <div class="il-detail__grid-row">
                    <span class="il-detail__grid-key">{{ __('admin.investors_admin.activity.fields.ip') }}</span>
                    <span class="il-detail__grid-val">{{ $raw->ip_address ?: __('admin.investors_admin.activity.empty_value') }}</span>
                </div>
            </div>
        </div>

        @foreach ([
            'payload_validated' => 'admin.investors_admin.activity.section.payload_validated',
            'payload_normalized' => 'admin.investors_admin.activity.section.payload_normalized',
            'errors'            => 'admin.investors_admin.activity.section.errors',
            'files'             => 'admin.investors_admin.activity.section.files',
        ] as $col => $titleKey)
            @php
                $blob = $raw->{$col} ?? null;
                if (is_string($blob)) $blob = json_decode($blob, true);
            @endphp
            @if (is_array($blob) && ! empty($blob))
                <div class="il-detail__section">
                    <h2 class="il-detail__section-title">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
                        {{ __($titleKey) }}
                    </h2>
                    <pre class="il-detail__pre">{{ json_encode($blob, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) }}</pre>
                </div>
            @endif
        @endforeach
    @endif
</div>
@endsection