<%= content_for :page_title, t(".page_title") %>

<% if Current.user.ai_enabled? %>
  <div class="mb-4 flex justify-end">
    <%= render DS::Button.new(
      text: t(".disable_ai"),
      href: user_path(Current.user),
      method: :patch,
      params: { user: { ai_enabled: false, redirect_to: "ai_prompts" } },
      data: { turbo: false },
      variant: :destructive
    ) %>
  </div>
<% end %>

<div class="bg-container rounded-xl shadow-border-xs p-4">
  <div class="rounded-xl bg-container-inset space-y-1 p-1">
    <div class="flex items-center gap-1.5 px-4 py-2 text-xs font-medium text-secondary">
      <p><%= t(".openai_label") %></p>
    </div>

    <div class="bg-container rounded-lg shadow-border-xs">
      <div class="space-y-4 p-4">
        <!-- Main System Prompt Section -->
        <div class="space-y-3">
          <div class="flex items-center gap-3">
            <div class="w-9 h-9 rounded-full bg-surface-inset flex justify-center items-center">
              <%= icon "message-circle" %>
            </div>
            <div>
              <p class="text-sm font-medium text-primary"><%= t(".main_system_prompt.title") %></p>
              <p class="text-xs text-secondary"><%= t(".main_system_prompt.subtitle") %></p>
            </div>
          </div>

          <div class="pl-12 space-y-2">
            <details class="group">
              <summary class="flex items-center gap-2 cursor-pointer">
                <span class="text-xs font-medium text-primary uppercase"><%= t(".prompt_instructions") %></span>
                <%= icon "chevron-right", class: "group-open:transform group-open:rotate-90" %>
              </summary>
              <pre class="whitespace-pre-wrap text-xs font-mono text-primary">[<%= Provider::Openai::DEFAULT_MODEL %>]</pre>
              <div class="mt-2 px-3 py-2 bg-surface-default border border-primary rounded-lg">
                <pre class="whitespace-pre-wrap text-xs font-mono text-primary"><%= @assistant_config[:instructions] %></pre>
              </div>
            </details>
          </div>
        </div>

        <div class="border-t border-primary"></div>

        <!-- Auto-Categorization Section -->
        <div class="space-y-3">
          <div class="flex items-center gap-3">
            <div class="w-9 h-9 rounded-full bg-surface-inset flex justify-center items-center">
              <%= icon "brain" %>
            </div>
            <div>
              <p class="text-sm font-medium text-primary"><%= t(".transaction_categorizer.title") %></p>
              <p class="text-xs text-secondary"><%= t(".transaction_categorizer.subtitle") %></p>
            </div>
          </div>

          <div class="pl-12 space-y-2">
            <details class="group">
              <summary class="flex items-center gap-2 cursor-pointer">
                <span class="text-xs font-medium text-primary uppercase"><%= t(".prompt_instructions") %></span>
                <%= icon "chevron-right", class: "group-open:transform group-open:rotate-90" %>
              </summary>
              <pre class="whitespace-pre-wrap text-xs font-mono text-primary">[<%= Provider::Openai::DEFAULT_MODEL %>]</pre>
              <div class="mt-2 px-3 py-2 bg-surface-default border border-primary rounded-lg">
                <pre class="whitespace-pre-wrap text-xs font-mono text-primary"><%= @assistant_config[:auto_categorizer]&.instructions || Provider::Openai::AutoCategorizer.new(nil).instructions %></pre>
              </div>
            </details>
          </div>
        </div>

        <div class="border-t border-primary"></div>

        <!-- Merchant Detection Section -->
        <div class="space-y-3">
          <div class="flex items-center gap-3">
            <div class="w-9 h-9 rounded-full bg-surface-inset flex justify-center items-center">
              <%= icon "store" %>
            </div>
            <div>
              <p class="text-sm font-medium text-primary"><%= t(".merchant_detector.title") %></p>
              <p class="text-xs text-secondary"><%= t(".merchant_detector.subtitle") %></p>
            </div>
          </div>

          <div class="pl-12 space-y-2">
            <details class="group">
              <summary class="flex items-center gap-2 cursor-pointer">
                <span class="text-xs font-medium text-primary uppercase"><%= t(".prompt_instructions") %></span>
                <%= icon "chevron-right", class: "group-open:transform group-open:rotate-90" %>
              </summary>
              <pre class="whitespace-pre-wrap text-xs font-mono text-primary">[<%= Provider::Openai::DEFAULT_MODEL %>]</pre>
              <div class="mt-2 px-3 py-2 bg-surface-default border border-primary rounded-lg">
                <pre class="whitespace-pre-wrap text-xs font-mono text-primary"><%= @assistant_config[:auto_merchant]&.instructions || Provider::Openai::AutoMerchantDetector.new(nil, model: "", transactions: [], user_merchants: []).instructions %></pre>
              </div>
            </details>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
