{# Shared solution presentation used by opportunity detail and admin solutions pages.
   Expects:
     sol (solution view model)
     create_pr_route_prefix (optional, defaults to /app)
#}
{% set create_pr_prefix = create_pr_route_prefix | default('/app') %}

<div class="space-y-3">
  <p class="ui-card-label">Solution v{{ sol.version_number }}</p>
  {% if sol.file_path %}
  <div>
    <p class="ui-card-label">Target File</p>
    <p class="mt-1 text-[13px] font-mono text-slate-600 dark:text-slate-400">{{ sol.file_path }}</p>
  </div>
  {% endif %}

  <div class="flex flex-wrap items-center gap-2">
    {% with trust_tier=sol.trust_tier, template_name=sol.template_name, summary=None %}
      {% include "components/trust_badge.html" %}
    {% endwith %}
    {% if sol.local_build_execution_mode %}
    <span class="ui-pill {% if sol.local_build_execution_mode.safe_to_apply_locally %}ui-pill-success{% else %}ui-pill-neutral{% endif %}">
      {{ sol.local_build_execution_mode.title }}
    </span>
    {% endif %}
  </div>

  {% if sol.resolution_category == 'dbt_project_change' and sol.diff_lines %}
    {% with solution_id=sol.id, diff_lines=sol.diff_lines, compiled_original=sol.compiled_original, compiled_original_label=sol.compiled_original_label, compiled_modified=sol.compiled_modified, dry_run_original=sol.dry_run_original, dry_run_modified=sol.dry_run_modified, verification_sql=sol.verification_sql, verification_profile=sol.verification_profile, verification_output_mode=sol.verification_output_mode, verification_source_label=sol.verification_source_label, verification_warnings=sol.verification_warnings, verification_unavailable_reason=sol.verification_unavailable_reason, file_path=None %}
      {% include "components/code_viewer.html" %}
    {% endwith %}
    {% if sol.explanation or sol.repository %}
    <details class="ui-disclosure p-3">
      <summary>
        <p class="ui-card-label">Notes</p>
        <span class="ui-disclosure-toggle" aria-hidden="true"><svg class="h-3.5 w-3.5 transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" /></svg></span>
      </summary>
      <div class="mt-3 space-y-3">
        {% if sol.explanation %}
        <p class="text-sm text-slate-700 dark:text-slate-300 leading-relaxed">{{ sol.explanation }}</p>
        {% endif %}
        {% if sol.repository %}
        <p class="text-[13px] text-slate-500 dark:text-slate-400">
          {{ sol.repository }}
          {% if sol.commit_sha %} · <code class="font-mono">{{ sol.commit_sha[:8] }}</code>{% endif %}
        </p>
        {% endif %}
      </div>
    </details>
    {% endif %}

    {% if (sol.opp_status == 'active' or (sol.local_execution_mode and sol.opp_status == 'pr_pending')) and sol.file_path and sol.config_id and sol.opp_id %}
    {% if sol.local_apply_enabled %}
    <form method="post" action="{{ create_pr_prefix }}/project/{{ sol.config_id }}/opportunity/{{ sol.opp_id }}/apply-local"
          class="space-y-2">
      <input type="hidden" name="solution_id" value="{{ sol.id }}">
      <div class="flex flex-wrap items-center gap-2">
        <button type="submit"
                name="action"
                value="apply_and_commit"
                onclick="return confirm('Apply this solution to your local working tree and create a git commit?');"
                class="ui-btn-primary inline-flex items-center gap-1.5 transition-colors">
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125"/>
          </svg>
          Apply &amp; Commit Locally
        </button>
        <button type="submit"
                name="action"
                value="apply"
                onclick="return confirm('Apply this solution to your local working tree without creating a git commit?');"
                class="ui-btn-secondary inline-flex items-center gap-1.5 transition-colors">
          Apply Only
        </button>
      </div>
      <p class="text-[13px] text-slate-500 dark:text-slate-400">
        Writes the generated change to <code class="font-mono">{{ sol.file_path }}</code> inside <code class="font-mono">{{ sol.local_project_path }}</code>.
        {% if sol.local_build_execution_mode %}
        {{ sol.local_build_execution_mode.description }}
        {% endif %}
      </p>
    </form>
    {% elif sol.local_execution_mode %}
    <div class="space-y-2 rounded border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-800 dark:border-amber-800 dark:bg-amber-950 dark:text-amber-200">
      <p class="font-medium">Local working tree not connected yet</p>
      <p class="text-[13px]">
        Set the dbt project folder on this project configuration to enable
        <span class="font-medium">Apply to Working Tree</span> for
        <code class="font-mono">{{ sol.file_path }}</code>.
      </p>
    </div>
    {% elif sol.repository %}
    <form method="post" action="{{ create_pr_prefix }}/project/{{ sol.config_id }}/opportunity/{{ sol.opp_id }}/create-pr"
          onsubmit="return confirm('Create a pull request for this solution?');">
      <input type="hidden" name="solution_id" value="{{ sol.id }}">
      <button type="submit"
              class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm rounded
                     bg-emerald-600 text-white hover:bg-emerald-700
                     dark:bg-emerald-500 dark:hover:bg-emerald-600
                     transition-colors">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"/>
        </svg>
        Create Pull Request
      </button>
    </form>
    {% endif %}
    {% endif %}
  {% endif %}

  {% if sol.explanation and not (sol.resolution_category == 'dbt_project_change' and sol.diff_lines) %}
  <details class="ui-disclosure p-3">
    <summary>
      <p class="ui-card-label">Notes</p>
      <span class="ui-disclosure-toggle" aria-hidden="true"><svg class="h-3.5 w-3.5 transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" /></svg></span>
    </summary>
    <p class="mt-3 text-sm text-slate-700 dark:text-slate-300 leading-relaxed">{{ sol.explanation }}</p>
  </details>
  {% endif %}

  {% if sol.resolution_category == 'bigquery_infrastructure' %}
    {% if sol.current_setting and sol.recommended_setting %}
      {% with current_setting=sol.current_setting, recommended_setting=sol.recommended_setting, affected_resource=sol.affected_resource %}
        {% include "components/setting_comparison.html" %}
      {% endwith %}
    {% endif %}
  {% endif %}

  {% if sol.risk_justification or sol.validation_report %}
  <details class="mt-1">
    <summary class="text-[13px] text-slate-500 dark:text-slate-400 cursor-pointer hover:text-brand-500 dark:hover:text-brand-300">
      Risk &amp; Validation Details
    </summary>
    <div class="mt-2 bg-slate-50 dark:bg-slate-950 rounded-sm px-3 py-2 space-y-3">
      {% if sol.risk_justification %}
      <p class="text-sm text-slate-700 dark:text-slate-300">{{ sol.risk_justification }}</p>
      {% endif %}

      {% if sol.validation_report %}
        {% set report_tier = sol.validation_report.tier or sol.validation_report.overall_tier %}
        {% if report_tier %}
        <p class="text-[13px] text-slate-600 dark:text-slate-300">
          Tier: {{ report_tier | replace('_', ' ') | title }}
        </p>
        {% endif %}
        {% if sol.validation_report.error %}
        <p class="text-[13px] text-red-600 dark:text-red-400">{{ sol.validation_report.error }}</p>
        {% endif %}
        {% if sol.validation_report.steps %}
        <div class="divide-y divide-slate-200 dark:divide-slate-800">
          {% for step in sol.validation_report.steps %}
          <div class="py-1.5">
            <div class="flex items-center gap-2">
              {% if step.result in ('pass', 'success', 'matched') or step.status == 'matched' %}
                <span class="w-4 h-4 text-brand-500 dark:text-brand-300">&#10003;</span>
              {% elif step.result in ('fail', 'failure') %}
                <span class="w-4 h-4 text-red-500 dark:text-red-400">&#10007;</span>
              {% else %}
                <span class="w-4 h-4 text-slate-400 dark:text-slate-500">&#8212;</span>
              {% endif %}
              <span class="text-[13px] text-slate-700 dark:text-slate-300">{{ step.name | default(step.type, true) | replace('_', ' ') | title }}</span>
              <span class="text-[13px] text-slate-500 dark:text-slate-400">{{ step.result | default(step.status, true) }}</span>
            </div>
            {% if step.details and step.details is string %}
            <p class="text-[13px] text-slate-500 dark:text-slate-400 ml-6 mt-0.5">{{ step.details }}</p>
            {% endif %}
            {% if step.classification %}
            <p class="text-[13px] text-slate-500 dark:text-slate-400 ml-6 mt-0.5">Classification: {{ step.classification }}</p>
            {% endif %}
          </div>
          {% endfor %}
        </div>
        {% endif %}
        {% if sol.validation_report.dbt_compile %}
        <div class="rounded-sm border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 px-3 py-2">
          <p class="text-[13px] font-medium text-slate-600 dark:text-slate-300">dbt Compile</p>
          <p class="text-[13px] text-slate-500 dark:text-slate-400 mt-1">
            {% if sol.validation_report.dbt_compile.success %}Success{% else %}Not successful{% endif %}
            {% if sol.validation_report.dbt_compile.reason %} · {{ sol.validation_report.dbt_compile.reason | replace('_', ' ') }}{% endif %}
            {% if sol.validation_report.dbt_compile.exit_code is not none %} · Exit {{ sol.validation_report.dbt_compile.exit_code }}{% endif %}
            {% if sol.validation_report.dbt_compile.duration_ms is not none %} · {{ sol.validation_report.dbt_compile.duration_ms }}ms{% endif %}
          </p>
          {% if sol.validation_report.dbt_compile.stderr %}
          <pre class="mt-2 overflow-x-auto rounded-sm bg-slate-50 dark:bg-slate-950 px-2 py-1 text-[13px] text-slate-600 dark:text-slate-300 whitespace-pre-wrap">{{ sol.validation_report.dbt_compile.stderr }}</pre>
          {% endif %}
        </div>
        {% endif %}
        {% if sol.validation_report.dbt_parse %}
        <div class="rounded-sm border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 px-3 py-2">
          <p class="text-[13px] font-medium text-slate-600 dark:text-slate-300">dbt Parse</p>
          <p class="text-[13px] text-slate-500 dark:text-slate-400 mt-1">
            {% if sol.validation_report.dbt_parse.success %}Success{% else %}Not successful{% endif %}
            {% if sol.validation_report.dbt_parse.exit_code is not none %} · Exit {{ sol.validation_report.dbt_parse.exit_code }}{% endif %}
            {% if sol.validation_report.dbt_parse.duration_ms is not none %} · {{ sol.validation_report.dbt_parse.duration_ms }}ms{% endif %}
            {% if sol.validation_report.dbt_parse.manifest_available %} · Manifest available{% endif %}
            {% if sol.validation_report.dbt_parse.optimized_sql_source == 'manifest_diff' %} · Optimized SQL via synced manifest diff{% endif %}
          </p>
          {% if sol.validation_report.dbt_parse.stderr %}
          <pre class="mt-2 overflow-x-auto rounded-sm bg-slate-50 dark:bg-slate-950 px-2 py-1 text-[13px] text-slate-600 dark:text-slate-300 whitespace-pre-wrap">{{ sol.validation_report.dbt_parse.stderr }}</pre>
          {% endif %}
        </div>
        {% endif %}
        {% if sol.validation_report.warnings %}
        <div class="mt-1">
          {% for warning in sol.validation_report.warnings %}
          <p class="text-[13px] text-amber-600 dark:text-amber-400">&#9888; {{ warning }}</p>
          {% endfor %}
        </div>
        {% endif %}
        {% if sol.validation_report.timestamp %}
        <p class="text-[13px] text-slate-400 dark:text-slate-500 mt-1">Validated: {{ sol.validation_report.timestamp }}</p>
        {% endif %}
      {% endif %}
    </div>
  </details>
  {% endif %}
</div>