@extends('layouts.app')
@section('title', __('Compare results'))
@section('page-title', __('Compare results'))
@section('page-subtitle', $analysis->typeLabel())

@php
    use App\Services\AnalysisComparisonService;

    // Mode-specific labels for the tabs.
    $modeLabels = [
        AnalysisComparisonService::MODE_PERIOD     => __('Period-over-period'),
        AnalysisComparisonService::MODE_ANNUAL     => __('Year-over-year'),
        AnalysisComparisonService::MODE_MULTI_YEAR => __('Multi-year trend'),
        AnalysisComparisonService::MODE_BUDGET     => __('Budget vs Actual'),
        AnalysisComparisonService::MODE_SECTOR     => __('Sector benchmark'),
    ];
    $modeBlurbs = [
        AnalysisComparisonService::MODE_PERIOD     => __('Compare against month/quarter/semester/year-ago.'),
        AnalysisComparisonService::MODE_ANNUAL     => __('Strict year-over-year against the closest year-ago delivery.'),
        AnalysisComparisonService::MODE_MULTI_YEAR => __('Trend line across multiple year-spaced analyses.'),
        AnalysisComparisonService::MODE_BUDGET     => __('Tag one analysis as the budget, the other as the actual.'),
        AnalysisComparisonService::MODE_SECTOR     => __('Benchmark this analysis against typical industry ranges.'),
    ];

    $periodChips = [
        'month'    => __('1 month ago'),
        'quarter'  => __('3 months ago'),
        'semester' => __('6 months ago'),
        'year'     => __('1 year ago'),
    ];

    // Numeric formatter shared with the pair table.
    $fmtVal = function ($v, $unit = '') {
        if ($v === null || $v === '' || ! is_scalar($v)) return '—';
        if (is_numeric($v)) {
            $n = (float) $v;
            $abs = abs($n);
            $formatted = $abs >= 1000
                ? number_format($n, 0, '.', ' ')
                : (floor($n) == $n ? number_format($n, 0) : number_format($n, 2));
            return trim($formatted.' '.$unit);
        }
        return (string) $v;
    };

    $changePhrase = function ($row) {
        if ($row['direction'] === 'missing') return __('Not comparable');
        if ($row['direction'] === 'flat')    return __('About the same');
        $verb = $row['direction'] === 'improved' ? __('Better') : __('Worse');
        if (isset($row['pct']) && $row['pct'] !== null) {
            $abs = abs((float) $row['pct']);
            return $verb.' '.__('by :n%', ['n' => number_format($abs, $abs >= 10 ? 0 : 1)]);
        }
        return $verb;
    };

    $compareWithId = $right && $left
        ? ($right->id === $analysis->id ? $left->id : $right->id)
        : null;
@endphp

@push('head')
<style>
    .narrative { color: rgb(51 65 85); font-size: 15px; line-height: 1.8; }
    .dark .narrative { color: rgb(203 213 225); }
    .narrative > * + * { margin-top: 0.85rem; }
    .narrative h3 {
        color: rgb(15 23 42); font-weight: 700; font-size: 0.78rem;
        text-transform: uppercase; letter-spacing: 0.12em;
        margin-top: 1.75rem; margin-bottom: 0.6rem;
        display: flex; align-items: center; gap: 0.6rem;
    }
    .dark .narrative h3 { color: rgb(241 245 249); }
    .narrative > h3:first-child { margin-top: 0; }
    .narrative h3::before {
        content: ""; display: inline-block; width: 1.25rem; height: 1px;
        background: currentColor; opacity: 0.4;
    }
    .narrative p { text-align: justify; hyphens: auto; }
    .narrative ul { padding-inline-start: 1.25rem; list-style: disc; margin: 0.4rem 0; }
    .narrative li { margin: 0.3rem 0; }
    .narrative li::marker { color: rgb(148 163 184); }
    .narrative strong { color: rgb(15 23 42); font-weight: 600; }
    .dark .narrative strong { color: rgb(241 245 249); }
    .narrative em { color: rgb(71 85 105); font-style: italic; }
    .dark .narrative em { color: rgb(148 163 184); }
    .share-bar { display: flex; height: 6px; border-radius: 999px; overflow: hidden; background: rgb(241 245 249); }
    .dark .share-bar { background: rgb(30 41 59); }
</style>
@endpush

@section('content')
<div x-data="{ filter: 'all' }" class="w-full">

{{-- ── Header strip + mode tabs ────────────────────────────────────── --}}
<div class="mb-5 flex items-center justify-between gap-3">
    <a href="{{ route('tenant.submissions.show', $analysis->submission) }}"
       class="inline-flex items-center gap-1.5 text-sm text-slate-500 hover:text-slate-900 dark:text-slate-400 dark:hover:text-white transition">
        <svg class="w-4 h-4 rtl:scale-x-[-1]" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>
        {{ __('Back to submission') }}
    </a>
    <span class="text-[10px] uppercase tracking-[0.18em] font-semibold text-slate-400 dark:text-slate-500 truncate">{{ $analysis->typeLabel() }}</span>
</div>

{{-- Mode tabs --}}
<div class="mb-4 flex flex-wrap items-center gap-1 bg-slate-100 dark:bg-slate-800 rounded-2xl p-1">
    @foreach($modes as $m)
        @php $active = $mode === $m; @endphp
        <a href="{{ route('tenant.analyses.compare', ['analysis' => $analysis->id, 'mode' => $m]) }}"
           class="flex-1 text-center px-3 py-2 rounded-xl text-xs font-semibold transition
                  {{ $active
                        ? 'bg-white text-slate-900 shadow-sm dark:bg-slate-950 dark:text-white'
                        : 'text-slate-600 hover:text-slate-900 dark:text-slate-300 dark:hover:text-white' }}">
            {{ $modeLabels[$m] }}
        </a>
    @endforeach
</div>
<p class="mb-6 text-center text-xs text-slate-500 dark:text-slate-400">{{ $modeBlurbs[$mode] ?? '' }}</p>

{{-- ── Flash banners (success / error / warnings) ───────────────────── --}}
@if(session('status'))
    <div class="mb-4 px-4 py-2 rounded-xl bg-emerald-50 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300 text-sm">{{ session('status') }}</div>
@endif
@if(session('error'))
    <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">{{ session('error') }}</div>
@endif

@if($mode === AnalysisComparisonService::MODE_SECTOR)
    @include('tenant.analyses._compare_sector', [
        'analysis'      => $analysis,
        'sectorPayload' => $sectorPayload ?? null,
    ])
@elseif($mode === AnalysisComparisonService::MODE_MULTI_YEAR)
    @include('tenant.analyses._compare_multiyear', [
        'analysis'   => $analysis,
        'candidates' => $candidates,
        'diff'       => $diff,
        'multiYear'  => $multiYear,
    ])
@else
    {{-- PERIOD / ANNUAL / BUDGET modes ─────────────────────────────── --}}
    @if(($noCandidate ?? false))
        <div class="card p-12 text-center">
            <div class="mx-auto w-12 h-12 rounded-2xl bg-slate-100 dark:bg-slate-800 text-slate-400 flex items-center justify-center mb-3">
                <x-icon name="info" class="w-5 h-5"/>
            </div>
            <div class="text-sm text-slate-700 dark:text-slate-200 font-medium">{{ __('No other analysis of the same type to compare against yet.') }}</div>
            <div class="text-xs text-slate-500 dark:text-slate-400 mt-1">{{ __('Run another analysis of this type first.') }}</div>
        </div>
    @else
        @include('tenant.analyses._compare_pair', [
            'analysis'      => $analysis,
            'left'          => $left,
            'right'         => $right,
            'mode'          => $mode,
            'candidates'    => $candidates,
            'diff'          => $diff,
            'narrative'     => $narrative,
            'period'        => $period,
            'periods'       => $periods,
            'periodChips'   => $periodChips,
            'compareWithId' => $compareWithId,
            'fmtVal'        => $fmtVal,
            'changePhrase'  => $changePhrase,
        ])
    @endif
@endif

{{-- ── Free-form Q&A panel (available in every mode) ─────────────────── --}}
<section class="mt-10 card overflow-hidden">
    <div class="px-6 sm:px-8 py-7">
        <div class="flex items-start gap-3 mb-4">
            <div class="w-11 h-11 rounded-2xl bg-indigo-600 text-white dark:bg-indigo-500 flex items-center justify-center shadow-sm shrink-0">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"/></svg>
            </div>
            <div class="min-w-0 flex-1">
                <div class="text-[10px] uppercase tracking-[0.18em] font-semibold text-slate-500 dark:text-slate-400">{{ __('Ask a question') }}</div>
                <h2 class="mt-1 text-xl font-semibold tracking-tight text-slate-900 dark:text-white leading-tight">
                    {{ __('Have a question about these numbers?') }}
                </h2>
                <p class="text-xs text-slate-500 dark:text-slate-400 mt-1.5">
                    {{ __('Examples: “Why did profitability drop in Q3?”  ·  “Explain the working capital evolution.”  ·  “What are the major financial risks?”') }}
                </p>
            </div>
        </div>

        <form method="POST" action="{{ route('tenant.analyses.compare.ask', $analysis) }}" class="space-y-3">
            @csrf
            <input type="hidden" name="mode" value="{{ $mode }}">
            @if($compareWithId)<input type="hidden" name="with" value="{{ $compareWithId }}">@endif
            <textarea name="question"
                      rows="3"
                      maxlength="500"
                      required
                      class="form-input w-full text-sm"
                      placeholder="{{ __('Type your question…') }}">{{ old('question') }}</textarea>
            <div class="flex items-center justify-between gap-3">
                <span class="text-[11px] text-slate-400">{{ __('Answers are generated automatically.') }}</span>
                <button type="submit"
                        class="inline-flex items-center gap-1.5 px-4 py-2 rounded-xl text-sm font-semibold transition shadow-sm bg-slate-900 text-white hover:bg-slate-800 dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-white">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                    {{ __('Ask') }}
                </button>
            </div>
        </form>

        @if($qaAnswer ?? null)
            <div class="mt-6 rounded-2xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-900/50 p-5">
                <div class="text-[11px] uppercase tracking-wider font-semibold text-slate-500 dark:text-slate-400">{{ __('Your question') }}</div>
                <p class="mt-1 text-sm text-slate-900 dark:text-slate-100 italic">“{{ $qaAnswer['question'] }}”</p>
                <hr class="my-4 border-slate-200 dark:border-slate-700">
                <div class="text-[11px] uppercase tracking-wider font-semibold text-slate-500 dark:text-slate-400">{{ __('Answer') }}</div>
                <div class="narrative mt-2" dir="{{ app()->getLocale() === 'ar' ? 'rtl' : 'ltr' }}">
                    {!! $qaAnswer['answer']['html'] !!}
                </div>
                <div class="mt-4 pt-3 border-t border-slate-200 dark:border-slate-700 text-[10px] uppercase tracking-wider text-slate-400 dark:text-slate-500 flex flex-wrap items-center gap-3">
                    @if(!empty($qaAnswer['answer']['model']))
                        <span>{{ __('Model') }}: {{ $qaAnswer['answer']['model'] }}</span>
                    @endif
                    @if(!empty($qaAnswer['answer']['tokens']))
                        <span>· {{ number_format($qaAnswer['answer']['tokens']) }} {{ __('tokens') }}</span>
                    @endif
                    @if(!empty($qaAnswer['answer']['provider']))
                        <span>· {{ strtoupper($qaAnswer['answer']['provider']) }}</span>
                    @endif
                </div>
            </div>
        @endif
    </div>
</section>

</div>
@endsection