{{-- Render an AGS Tutor solution in human-readable form for the reviewer's modal.
     The $solution variable is the decoded JSON array (or null for legacy text). --}}

@if (! $solution)
    <div class="text-sm text-gray-500">
        Solution body is not parseable JSON. Raw text:
        <pre class="bg-gray-50 p-3 mt-2 text-xs whitespace-pre-wrap">{{ $solution }}</pre>
    </div>
@else
    <div class="space-y-4">
        <div>
            <div class="text-xs uppercase tracking-wide text-gray-500">Question</div>
            <div class="text-sm">{{ strip_tags($questionText ?? '') }}</div>
        </div>

        <div>
            <div class="text-xs uppercase tracking-wide text-gray-500">Method</div>
            <div class="inline-block px-2 py-1 rounded text-xs font-mono"
                 style="background: var(--ag-light, #F7F0EE); color: var(--ag-dark, #1A0505);">
                {{ $solution['method'] ?? '?' }}
            </div>
        </div>

        @if (! empty($solution['summary']))
            <div>
                <div class="text-xs uppercase tracking-wide text-gray-500">Summary</div>
                <div class="text-sm">{{ $solution['summary'] }}</div>
            </div>
        @endif

        @if (! empty($solution['bar_model']))
            <div>
                <div class="text-xs uppercase tracking-wide text-gray-500">Bar model</div>
                <pre class="bg-gray-50 p-3 mt-1 text-xs whitespace-pre overflow-x-auto rounded">{{ $solution['bar_model'] }}</pre>
            </div>
        @endif

        @if (! empty($solution['steps']))
            <div>
                <div class="text-xs uppercase tracking-wide text-gray-500 mb-2">Steps</div>
                <ol class="space-y-2 list-decimal list-inside text-sm">
                    @foreach ($solution['steps'] as $step)
                        <li>
                            <span>{{ $step['explanation'] ?? '' }}</span>
                            @if (! empty($step['working']))
                                <div class="ml-5 mt-1 font-mono text-xs text-gray-600">
                                    {{ $step['working'] }}
                                </div>
                            @endif
                        </li>
                    @endforeach
                </ol>
            </div>
        @endif

        @if (! empty($solution['simultaneous_equations']))
            <div>
                <div class="text-xs uppercase tracking-wide text-gray-500">Simultaneous equations</div>
                <div class="text-sm bg-gray-50 p-3 mt-1 rounded whitespace-pre-wrap">{{ $solution['simultaneous_equations'] }}</div>
            </div>
        @endif

        <div class="border-t pt-3">
            <div class="text-xs uppercase tracking-wide text-gray-500">Final answer</div>
            <div class="text-lg font-semibold" style="color: var(--ag-crimson, #960000);">
                {{ $solution['final_answer'] ?? '(none)' }}
            </div>
        </div>

        @if (! empty($solution['concept']))
            <div>
                <div class="text-xs uppercase tracking-wide text-gray-500">Concept</div>
                <div class="text-sm italic">{{ $solution['concept'] }}</div>
            </div>
        @endif
    </div>
@endif