@extends('layouts.app')

@section('title', __('Preview'))

@php
    $type   = $types[$analysis->analysis_type] ?? null;
    $charts = app(\App\Services\Charting\AnalysisChartBuilder::class)->build($analysis);
    $isAr   = app()->getLocale() === 'ar';
@endphp

@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: 1.85rem; margin-bottom: 0.6rem;
    }
    .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(79 70 229); text-decoration: underline; text-underline-offset: 2px; }
    .dark .explain-doc a { color: rgb(165 180 252); }

    .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')

{{-- Banner --}}
<div class="mb-4 flex flex-wrap items-center justify-between gap-2 px-4 py-2.5 rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800/60 text-sm">
    <span class="flex items-center gap-2 text-slate-700 dark:text-slate-200">
        <svg class="w-4 h-4 text-slate-400 dark:text-slate-500" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
        {{ __('Preview only — the client cannot see this yet.') }}
    </span>
    <a href="{{ route('tenant.analyses.review', $analysis) }}"
       class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-700 dark:text-slate-200 text-xs font-medium transition">
        ← {{ __('Back to editor') }}
    </a>
</div>

<article class="bg-white dark:bg-slate-900 rounded-2xl border border-slate-200 dark:border-slate-800 shadow-sm overflow-hidden">

    {{-- Header --}}
    <header class="px-6 sm:px-10 lg:px-14 pt-8 sm:pt-10 pb-6 border-b border-slate-200 dark:border-slate-800">
        <div>
            <p class="text-[11px] uppercase tracking-[0.15em] text-slate-500 dark:text-slate-400 font-semibold">
                {{ $type['label'] ?? $analysis->analysis_type }}
            </p>
            <h1 class="text-2xl sm:text-3xl lg:text-4xl font-bold text-slate-900 dark:text-white mt-2 leading-tight">
                {{ $submission->original_name }}
            </h1>
            <p class="text-sm text-slate-500 dark:text-slate-400 mt-3">
                {{ optional($submission->uploader)->name ?? '—' }}
                @if($analysis->finished_at)
                    · {{ $analysis->finished_at->translatedFormat('j F Y') }}
                @endif
            </p>
        </div>
    </header>

    <div class="px-4 sm:px-8 lg:px-14 py-8 sm:py-10 space-y-14 sm:space-y-16">

        {{-- Summary --}}
        @if($analysis->summary)
            <section>
                <h2 class="text-xs uppercase tracking-[0.15em] font-semibold text-slate-500 dark:text-slate-400 pt-2 mb-5">
                    {{ __('Executive summary') }}
                </h2>
                <p class="text-base sm:text-lg leading-relaxed text-slate-700 dark:text-slate-200 whitespace-pre-line text-justify hyphens-auto"
                   dir="{{ $isAr ? 'rtl' : 'ltr' }}">{{ $analysis->summary }}</p>
            </section>
        @endif

        {{-- KPIs --}}
        @if(!empty($analysis->kpis))
            <section>
                <h2 class="text-xs uppercase tracking-[0.15em] font-semibold text-slate-500 dark:text-slate-400 pt-2 mb-5">
                    {{ __('Key indicators') }}
                </h2>
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
                    @foreach($analysis->kpis as $kpi)
                        @php
                            $trend = $kpi['trend'] ?? null;
                            $trendCls = $trend === 'up' ? 'text-emerald-700 dark:text-emerald-300 bg-emerald-50 dark:bg-emerald-900/30'
                                      : ($trend === 'down' ? 'text-rose-700 dark:text-rose-300 bg-rose-50 dark:bg-rose-900/30'
                                      : ($trend === 'flat' ? 'text-slate-600 dark:text-slate-300 bg-slate-100 dark:bg-slate-800' : ''));
                        @endphp
                        <div class="p-4 rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900">
                            <div class="flex items-start justify-between gap-2 mb-2">
                                <div class="text-xs text-slate-500 dark:text-slate-400 font-medium leading-snug">{{ $kpi['label'] ?? '' }}</div>
                                @if($trend)
                                    <span class="inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded-full text-[10px] font-semibold shrink-0 {{ $trendCls }}">
                                        @if($trend === 'up') ↑ @elseif($trend === 'down') ↓ @else → @endif
                                    </span>
                                @endif
                            </div>
                            <div class="text-2xl font-bold text-slate-900 dark:text-white tabular-nums">
                                {{ $kpi['value'] ?? '' }}
                                <span class="text-sm font-normal text-slate-500 dark:text-slate-400">{{ $kpi['unit'] ?? '' }}</span>
                            </div>
                            @if(!empty($kpi['comment']))
                                <p class="text-xs text-slate-600 dark:text-slate-400 mt-2 leading-relaxed">{{ $kpi['comment'] }}</p>
                            @endif
                            @if(!empty($kpi['source_ref']))
                                <p class="text-[11px] text-slate-400 dark:text-slate-500 mt-2 font-mono truncate" title="{{ $kpi['source_ref'] }}">{{ $kpi['source_ref'] }}</p>
                            @endif
                        </div>
                    @endforeach
                </div>
            </section>
        @endif

        {{-- Charts --}}
        @if(!empty($charts))
            <section>
                <h2 class="text-xs uppercase tracking-[0.15em] font-semibold text-slate-500 dark:text-slate-400 pt-2 mb-5">
                    {{ __('Charts') }}
                </h2>
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
                    @foreach($charts as $c)
                        <div class="rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 p-4">
                            <h3 class="text-sm font-semibold text-slate-700 dark:text-slate-200 mb-3 truncate">{{ $c['title'] }}</h3>
                            {!! $c['html'] !!}
                        </div>
                    @endforeach
                </div>
            </section>
        @endif

        {{-- Detailed explanation --}}
        @if($analysis->explanation_html)
            <section>
                <h2 class="text-xs uppercase tracking-[0.15em] font-semibold text-slate-500 dark:text-slate-400 pt-2 mb-5">
                    {{ __('Detailed explanation') }}
                </h2>
                <div class="explain-doc" dir="{{ $isAr ? 'rtl' : 'ltr' }}">
                    {!! $analysis->explanation_html !!}
                </div>
            </section>
        @endif
    </div>
</article>
@endsection