@extends('layouts.app')
@section('title', $analysis->typeLabel())
@section('page-title', $analysis->typeLabel())
@section('page-subtitle', $analysis->finished_at?->format('Y-m-d H:i').' — '.($analysis->submission?->original_filename ?? ''))

@push('head')
<style>
    .explain-doc { color: rgb(51 65 85); font-size: 15px; line-height: 1.75; }
    .dark .explain-doc { color: rgb(203 213 225); }
    .explain-doc > * + * { margin-top: 0.95rem; }

    .explain-doc h1, .explain-doc h2, .explain-doc h3, .explain-doc h4 {
        color: rgb(15 23 42); font-weight: 600; line-height: 1.3;
        margin-top: 2rem; margin-bottom: 0.65rem;
    }
    .dark .explain-doc h1, .dark .explain-doc h2, .dark .explain-doc h3, .dark .explain-doc h4 { color: rgb(241 245 249); }
    .explain-doc h1 { font-size: 1.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid rgb(226 232 240); }
    .dark .explain-doc h1 { border-color: rgb(51 65 85); }
    .explain-doc h2 { font-size: 1.25rem; }
    .explain-doc h3 { font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; color: rgb(71 85 105); }
    .dark .explain-doc h3 { color: rgb(148 163 184); }
    .explain-doc h4 { font-size: 0.9375rem; color: rgb(71 85 105); }
    .dark .explain-doc h4 { color: rgb(148 163 184); }
    .explain-doc > h1:first-child, .explain-doc > h2:first-child,
    .explain-doc > h3:first-child, .explain-doc > h4:first-child { margin-top: 0; }

    .explain-doc p { text-align: justify; hyphens: auto; }

    .explain-doc strong, .explain-doc b { color: rgb(15 23 42); font-weight: 600; }
    .dark .explain-doc strong, .dark .explain-doc b { color: rgb(241 245 249); }

    .explain-doc a { color: rgb(15 23 42); text-decoration: underline; text-underline-offset: 2px; }
    .dark .explain-doc a { color: rgb(241 245 249); }

    .explain-doc ul, .explain-doc ol { padding-inline-start: 1.5rem; margin: 0.5rem 0; }
    .explain-doc ul { list-style: disc; }
    .explain-doc ol { list-style: decimal; }
    .explain-doc li { margin: 0.25rem 0; }
    .explain-doc li::marker { color: rgb(148 163 184); }

    .explain-doc blockquote {
        border-inline-start: 3px solid rgb(203 213 225);
        padding: 0.25rem 0 0.25rem 1rem; margin: 0.75rem 0;
        color: rgb(71 85 105); font-style: italic;
    }
    .dark .explain-doc blockquote { border-color: rgb(51 65 85); color: rgb(148 163 184); }

    .explain-doc code {
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 0.85em;
        background: rgb(241 245 249); color: rgb(15 23 42);
        padding: 0.1rem 0.35rem; border-radius: 0.25rem;
    }
    .dark .explain-doc code { background: rgb(30 41 59); color: rgb(241 245 249); }
    .explain-doc pre {
        background: rgb(15 23 42); color: rgb(241 245 249);
        padding: 0.75rem 1rem; border-radius: 0.5rem; overflow-x: auto;
        font-size: 0.8125rem; line-height: 1.55;
    }
    .explain-doc pre code { background: transparent; color: inherit; padding: 0; }

    .explain-doc hr { border: 0; border-top: 1px solid rgb(226 232 240); margin: 1.5rem 0; }
    .dark .explain-doc hr { border-color: rgb(51 65 85); }

    .explain-doc table { width: 100%; border-collapse: collapse; font-size: 0.875rem; margin: 0.85rem 0; }
    .explain-doc th, .explain-doc td { border: 1px solid rgb(226 232 240); padding: 0.5rem 0.7rem; text-align: start; vertical-align: top; }
    .dark .explain-doc th, .dark .explain-doc td { border-color: rgb(51 65 85); }
    .explain-doc th { background: rgb(248 250 252); font-weight: 600; color: rgb(15 23 42); }
    .dark .explain-doc th { background: rgb(30 41 59); color: rgb(241 245 249); }
    .explain-doc tbody tr:nth-child(even) { background: rgb(248 250 252 / 0.6); }
    .dark .explain-doc tbody tr:nth-child(even) { background: rgb(30 41 59 / 0.4); }

    .explain-doc img { max-width: 100%; height: auto; border-radius: 0.5rem; }
</style>
@endpush

@section('content')
@php
    $kpis = (array) ($analysis->kpis ?? []);
    $kpiCount = count($kpis);
    $typeIcons = [
        'cashflow' => 'trending-up',
        'balance'  => 'chart',
        'income'   => 'receipt',
        'ratios'   => 'sparkles',
    ];
    $heroIcon = $typeIcons[$analysis->analysis_type] ?? 'chart';
    // Server-rendered SVG charts based on admin's chart_config (with AI fallback).
    $charts = app(\App\Services\Charting\AnalysisChartBuilder::class)->build($analysis);
@endphp

@if($errors->any())
    <div class="mb-4 px-4 py-2 rounded-xl bg-rose-50 text-rose-700 dark:bg-rose-900/30 dark:text-rose-300 text-sm">
        @foreach($errors->all() as $e) <div>{{ $e }}</div> @endforeach
    </div>
@endif

{{-- ╭─────────────────────────────────────────────────────────────────────╮
     │ HERO                                                                │
     │ Big gradient banner — primary identity of the result. Carries the   │
     │ type, file, language, KPI count and the "back" affordance.          │
     │ The radial overlay + soft blur gives it depth without textures.     │
     ╰─────────────────────────────────────────────────────────────────────╯ --}}
<section class="relative overflow-hidden rounded-3xl mb-6 isolate border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-950">
    <div class="absolute -top-20 -end-16 w-72 h-72 rounded-full bg-slate-100 dark:bg-slate-900 blur-3xl pointer-events-none"></div>

    <div class="relative px-6 sm:px-10 py-8 sm:py-10 text-slate-900 dark:text-slate-100">
        <a href="{{ route('client.results.index') }}"
           class="inline-flex items-center gap-1.5 text-xs text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white mb-5 transition">
            <x-icon name="arrow-left" class="w-3.5 h-3.5"/>
            {{ __('All results') }}
        </a>

        <div class="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-6">
            <div class="min-w-0 flex-1">
                <div class="flex items-center gap-3 mb-3">
                    <div class="w-11 h-11 rounded-2xl bg-slate-100 dark:bg-slate-800 ring-1 ring-slate-200 dark:ring-slate-700 flex items-center justify-center">
                        <x-icon :name="$heroIcon" class="w-5 h-5"/>
                    </div>
                    <span class="inline-flex items-center gap-1.5 rounded-full bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 ring-1 ring-slate-200 dark:ring-slate-700 px-2.5 py-0.5 text-[11px] font-medium uppercase tracking-wider">
                        {{ $analysis->analysis_type }}
                    </span>
                    <span class="inline-flex items-center gap-1.5 rounded-full bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 ring-1 ring-slate-200 dark:ring-slate-700 px-2.5 py-0.5 text-[11px] font-medium uppercase tracking-wider">
                        {{ $analysis->language }}
                    </span>
                </div>

                <h1 class="text-2xl sm:text-3xl lg:text-4xl font-semibold tracking-tight leading-tight">
                    {{ $analysis->typeLabel() }}
                </h1>

                <p class="text-sm text-slate-500 dark:text-slate-400 mt-2 truncate" title="{{ $analysis->submission?->original_filename }}">
                    <x-icon name="archive" class="w-3.5 h-3.5 inline -mt-0.5 me-1"/>
                    {{ $analysis->submission?->original_filename ?? '—' }}
                </p>

                <div class="flex flex-wrap items-center gap-x-5 gap-y-2 text-xs text-slate-500 dark:text-slate-400 mt-4">
                    <span class="inline-flex items-center gap-1.5">
                        <x-icon name="clock" class="w-3.5 h-3.5"/>
                        {{ $analysis->finished_at?->format('Y-m-d H:i') ?? '—' }}
                    </span>
                    <span class="inline-flex items-center gap-1.5">
                        <x-icon name="sparkles" class="w-3.5 h-3.5"/>
                        {{ trans_choice('{0} no KPI|{1} :count KPI|[2,*] :count KPIs', $kpiCount, ['count' => $kpiCount]) }}
                    </span>
                    @if($analysis->summary)
                        <span class="inline-flex items-center gap-1.5">
                            <x-icon name="check" class="w-3.5 h-3.5"/>
                            {{ __('Summary available') }}
                        </span>
                    @endif
                </div>
            </div>

            {{-- Export cluster — pill group --}}
            <div class="flex flex-wrap items-center gap-2">
                <a href="{{ route('client.results.export', [$analysis, 'pdf']) }}"
                   class="inline-flex items-center gap-1.5 rounded-xl bg-slate-900 text-white hover:bg-slate-800 dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-white px-3.5 py-2 text-xs font-semibold shadow-sm transition">
                    <x-icon name="download" class="w-3.5 h-3.5"/> PDF
                </a>
                <a href="{{ route('client.results.export', [$analysis, 'docx']) }}"
                   class="inline-flex items-center gap-1.5 rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-200 hover:bg-slate-200 dark:hover:bg-slate-700 ring-1 ring-slate-200 dark:ring-slate-700 px-3.5 py-2 text-xs font-semibold transition">
                    <x-icon name="download" class="w-3.5 h-3.5"/> DOCX
                </a>
                <a href="{{ route('client.results.export', [$analysis, 'xlsx']) }}"
                   class="inline-flex items-center gap-1.5 rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-200 hover:bg-slate-200 dark:hover:bg-slate-700 ring-1 ring-slate-200 dark:ring-slate-700 px-3.5 py-2 text-xs font-semibold transition">
                    <x-icon name="download" class="w-3.5 h-3.5"/> XLSX
                </a>
            </div>
        </div>
    </div>
</section>

{{-- ╭─────────────────────────────────────────────────────────────────────╮
     │ KPI STRIP                                                           │
     │ Fluid responsive grid: 2 / 3 / 4 / 5 cols depending on viewport.    │
     │ Each tile is a soft-shadow card with a colored accent dot keyed off │
     │ the KPI index, hover lift, monospaced numerals.                     │
     ╰─────────────────────────────────────────────────────────────────────╯ --}}
@if($kpiCount > 0)
    <section class="mb-6">
        <div class="flex items-center justify-between mb-3">
            <h2 class="text-xs font-semibold uppercase tracking-wider text-slate-500">
                {{ __('Key indicators') }}
            </h2>
            <span class="text-[11px] text-slate-400">{{ $kpiCount }}</span>
        </div>
        @php
            // Neutral monochrome accents — no blue/indigo. Light mode uses slate
            // tones, dark mode mirrors them with lighter slates.
            $accentMap = [
                ['stripe' => 'bg-slate-400/70', 'dot' => 'bg-slate-500'],
                ['stripe' => 'bg-slate-500/70', 'dot' => 'bg-slate-600'],
                ['stripe' => 'bg-slate-300/70', 'dot' => 'bg-slate-400'],
                ['stripe' => 'bg-slate-600/70', 'dot' => 'bg-slate-700'],
            ];
        @endphp
        <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3">
            @foreach($kpis as $key => $kpi)
                @php
                    $label   = is_array($kpi) && isset($kpi['label']) ? $kpi['label'] : $key;
                    $value   = is_array($kpi) ? ($kpi['value']   ?? null) : $kpi;
                    $unit    = is_array($kpi) ? ($kpi['unit']    ?? '')   : '';
                    $comment = is_array($kpi) ? ($kpi['comment'] ?? '')   : '';
                    $kpiChart= is_array($kpi) && !empty($kpi['chart']) && is_array($kpi['chart']) ? $kpi['chart'] : null;
                    $accent  = $accentMap[$loop->index % count($accentMap)];
                @endphp
                <div class="group relative card p-4 hover:-translate-y-0.5 hover:shadow-lg transition-all overflow-hidden">
                    <span class="absolute inset-x-0 top-0 h-0.5 {{ $accent['stripe'] }}"></span>
                    <div class="flex items-start justify-between gap-2 mb-2">
                        <div class="text-[11px] uppercase tracking-wider text-slate-500 line-clamp-2 leading-tight" title="{{ $label }}">
                            {{ $label }}
                        </div>
                        <span class="w-2 h-2 rounded-full {{ $accent['dot'] }} mt-1 shrink-0"></span>
                    </div>
                    <div class="text-xl sm:text-2xl font-semibold font-mono tabular-nums leading-none">
                        {{ is_scalar($value) ? $value : '—' }}
                        @if($unit)<span class="text-xs text-slate-400 font-sans ms-1">{{ $unit }}</span>@endif
                    </div>
                    @if($comment)
                        <p class="mt-2 text-[11px] leading-snug text-slate-500 dark:text-slate-400 line-clamp-3">{{ $comment }}</p>
                    @endif
                    @if($kpiChart)
                        <div class="mt-2.5 -mx-1 overflow-x-auto">
                            {!! \App\Services\Charting\ChartRenderer::render(
                                (string) ($kpiChart['type'] ?? ''),
                                (array)  ($kpiChart['series'] ?? []),
                                [
                                    'categories' => array_values((array) ($kpiChart['categories'] ?? [])),
                                    'width'      => 240,
                                    'height'     => 96,
                                ],
                            ) !!}
                        </div>
                    @endif
                </div>
            @endforeach
        </div>
    </section>
@endif

{{-- ╭─────────────────────────────────────────────────────────────────────╮
     │ BODY GRID                                                           │
     │ Asymmetric 12-col fluid grid: long-form content on the left,        │
     │ compact "context" rail on the right (compare + metadata).           │
     ╰─────────────────────────────────────────────────────────────────────╯ --}}
<div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
    <div class="lg:col-span-8 space-y-6 min-w-0">
        @if($analysis->summary)
            <section class="card overflow-hidden relative">
                <div class="p-6 sm:p-8">
                    <div class="flex items-start gap-3 mb-5 pb-5 border-b border-slate-100 dark:border-slate-700/60">
                        <div class="w-11 h-11 rounded-2xl bg-slate-900 text-white dark:bg-slate-100 dark:text-slate-900 flex items-center justify-center shadow-sm flex-shrink-0">
                            <x-icon name="sparkles" class="w-5 h-5"/>
                        </div>
                        <div class="flex-1 min-w-0">
                            <h2 class="text-lg sm:text-xl font-bold tracking-tight text-slate-900 dark:text-white leading-tight">{{ __('Executive summary') }}</h2>
                            <p class="text-xs text-slate-500 dark:text-slate-400 mt-1">{{ __('Headline takeaways from your analyst.') }}</p>
                        </div>
                    </div>
                    <div class="relative ps-5 border-s-4 border-slate-300 dark:border-slate-600">
                        <p class="text-base sm:text-[17px] leading-[1.75] whitespace-pre-line text-slate-700 dark:text-slate-200 first-letter:text-3xl first-letter:font-bold first-letter:text-slate-900 dark:first-letter:text-slate-100 first-letter:me-1 first-letter:float-start">
                            {{ $analysis->summary }}
                        </p>
                    </div>
                </div>
            </section>
        @endif

        @if(! empty($charts))
            <section class="card overflow-hidden">
                <div class="p-5 sm:p-6">
                    <div class="flex items-center gap-2.5 mb-4">
                        <div class="w-9 h-9 rounded-xl bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300 flex items-center justify-center">
                            <x-icon name="chart" class="w-4 h-4"/>
                        </div>
                        <div>
                            <h2 class="text-base font-semibold leading-none">{{ __('Charts') }}</h2>
                            <div class="text-[11px] text-slate-500 mt-1">{{ __('Visual snapshot of the headline KPIs') }}</div>
                        </div>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        @foreach($charts as $c)
                            <div class="rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50/40 dark:bg-slate-800/30 p-3">
                                <h3 class="text-xs font-semibold text-slate-700 dark:text-slate-300 mb-2">{{ $c['title'] }}</h3>
                                {!! $c['html'] !!}
                            </div>
                        @endforeach
                    </div>
                </div>
            </section>
        @endif

        @if($analysis->explanation_html)
            <section class="card overflow-hidden">
                <div class="p-6 sm:p-8">
                    <div class="flex items-start gap-3 mb-6 pb-5 border-b border-slate-100 dark:border-slate-700/60">
                        <div class="w-11 h-11 rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 flex items-center justify-center flex-shrink-0">
                            <x-icon name="edit" class="w-5 h-5"/>
                        </div>
                        <div class="flex-1 min-w-0">
                            <h2 class="text-lg sm:text-xl font-bold tracking-tight text-slate-900 dark:text-white leading-tight">{{ __('Detailed analysis') }}</h2>
                            <p class="text-xs text-slate-500 dark:text-slate-400 mt-1">{{ __('Full breakdown of findings') }}</p>
                        </div>
                    </div>
                    <div class="explain-doc" dir="{{ app()->getLocale() === 'ar' ? 'rtl' : 'ltr' }}">
                        {!! $analysis->explanation_html !!}
                    </div>
                </div>
            </section>
        @endif

        @if(! $analysis->summary && ! $analysis->explanation_html)
            <section class="card p-10 text-center text-sm text-slate-500">
                <x-icon name="info" class="w-8 h-8 mx-auto mb-3 opacity-40"/>
                {{ __('No narrative content was attached to this analysis.') }}
            </section>
        @endif
    </div>

    {{-- ── Right rail ──────────────────────────────────────────────── --}}
    <aside class="lg:col-span-4 space-y-4 lg:sticky lg:top-20 lg:self-start">
        {{-- Metadata card --}}
        <section class="card overflow-hidden">
            <div class="p-5">
                <h2 class="text-xs font-semibold uppercase tracking-wider text-slate-500 mb-4">{{ __('Metadata') }}</h2>
                <dl class="space-y-3.5 text-sm">
                    <div class="flex items-center justify-between gap-3">
                        <dt class="text-slate-500 inline-flex items-center gap-1.5">
                            <x-icon name="info" class="w-3.5 h-3.5"/> {{ __('Type') }}
                        </dt>
                        <dd class="font-mono text-xs px-2 py-0.5 rounded-md bg-slate-100 dark:bg-slate-800">{{ $analysis->analysis_type }}</dd>
                    </div>
                    <div class="flex items-center justify-between gap-3">
                        <dt class="text-slate-500 inline-flex items-center gap-1.5">
                            <x-icon name="globe" class="w-3.5 h-3.5"/> {{ __('Language') }}
                        </dt>
                        <dd class="uppercase font-medium">{{ $analysis->language }}</dd>
                    </div>
                    <div class="flex items-center justify-between gap-3">
                        <dt class="text-slate-500 inline-flex items-center gap-1.5">
                            <x-icon name="clock" class="w-3.5 h-3.5"/> {{ __('Finished') }}
                        </dt>
                        <dd>{{ $analysis->finished_at?->format('Y-m-d H:i') }}</dd>
                    </div>
                    <div class="pt-3 border-t border-slate-100 dark:border-slate-800">
                        <dt class="text-slate-500 inline-flex items-center gap-1.5 mb-1.5">
                            <x-icon name="archive" class="w-3.5 h-3.5"/> {{ __('Source file') }}
                        </dt>
                        <dd class="text-xs break-all text-slate-700 dark:text-slate-300" title="{{ $analysis->submission?->original_filename }}">
                            {{ $analysis->submission?->original_filename }}
                        </dd>
                    </div>
                </dl>
            </div>
        </section>

        {{-- Read-only chip — gentle reminder this is a deliverables portal --}}
        <div class="text-center">
            <span class="inline-flex items-center gap-1.5 text-[11px] text-slate-400">
                <x-icon name="shield" class="w-3 h-3"/>
                {{ __('Read-only delivery — for review only') }}
            </span>
        </div>
    </aside>
</div>
@endsection