@php
    $mecAiExamples = \App\Support\MecAiReportCatalog::examplePrompts();
@endphp
<div class="mec-ai-shell" id="mecAiShell">
    <div class="mec-ai-hero no-print">
        <div>
            <h2 class="mec-ai-hero-title"><i class="fas fa-file-alt mr-2"></i>{{ __('MEC Insight Reports') }}</h2>
            <p class="mec-ai-hero-sub">{{ __('Ask in natural language — the system interprets your request, queries authorized MEC data, and builds a report.') }}</p>
        </div>
        <span class="mec-ai-hero-badge"><i class="fas fa-shield-alt mr-1"></i>{{ __('MEC Specific') }}</span>
    </div>

    <div class="row">
        <div class="col-lg-4 col-xl-3 mb-3 no-print">
            <div class="mec-ai-card">
                <h3 class="mec-ai-card-title"><i class="fas fa-magic mr-1"></i>{{ __('Ask MEC Insight Reports') }}</h3>
                <p class="mec-ai-card-help">{{ __('Describe the report you want. The AI interprets filters; numbers always come from your authorized MEC data.') }}</p>
                <textarea id="mecAiPrompt" class="mec-ai-prompt" rows="5" maxlength="2000"
                    placeholder="{{ __('Generate a September report showing published M&E reports and visit plans by region…') }}"></textarea>
                <button type="button" class="mec-ai-btn-primary btn-block mt-2" id="mecAiInterpretBtn">
                    <i class="fas fa-magic mr-1"></i>{{ __('Generate Report') }}
                </button>

                <div class="mec-ai-plan d-none mt-3" id="mecAiPlanWrap">
                    <div class="mec-ai-plan-head">
                        <i class="fas fa-check-circle text-success mr-1"></i>{{ __('AI Interpretation') }}
                    </div>
                    <p class="mec-ai-plan-intro mb-2">{{ __("I've understood your request. Here's the plan:") }}</p>
                    <ul class="mec-ai-plan-list" id="mecAiPlanList"></ul>
                    <div class="d-flex flex-wrap" style="gap:.5rem">
                        <button type="button" class="mec-insight-btn-ghost" id="mecAiModifyBtn">{{ __('Modify Request') }}</button>
                        <button type="button" class="mec-ai-btn-primary" id="mecAiGenerateBtn">{{ __('Generate Report') }}</button>
                    </div>
                </div>

                <div class="mec-ai-clarify d-none mt-3" id="mecAiClarifyWrap">
                    <p class="font-weight-bold mb-2" id="mecAiClarifyQuestion"></p>
                    <div id="mecAiClarifyOptions"></div>
                </div>

                <div class="mec-ai-progress d-none mt-3" id="mecAiProgress">
                    <p class="mb-1 font-weight-bold">{{ __('Understanding MEC request…') }}</p>
                    <ul class="mec-ai-progress-list" id="mecAiProgressList"></ul>
                </div>

                <p class="mec-ai-scope-note mt-3 mb-0"><i class="fas fa-check-circle text-success mr-1"></i>{{ __('This report uses real MEC data from your authorized scope and permissions.') }}</p>
            </div>
        </div>

        <div class="col-lg-8 col-xl-9 mb-3">
            <div class="mec-ai-report-wrap" id="mecAiReportWrap">
                <div class="mec-ai-empty" id="mecAiEmpty">
                    <h3 class="mec-ai-empty-title">{{ __('Example prompts') }}</h3>
                    <p class="text-muted small">{{ __('You can ask anything related to MEC visit plans, published reports, assessments, regions, officers, or compliance.') }}</p>
                    <div class="mec-ai-examples" id="mecAiExamples">
                        @foreach ($mecAiExamples as $example)
                            <button type="button" class="mec-ai-example" data-prompt="{{ $example }}">{{ $example }}</button>
                        @endforeach
                    </div>
                </div>
                <div class="d-none" id="mecAiReportCanvas"></div>
            </div>
        </div>
    </div>
</div>