<%= turbo_frame_tag "modal" do %>
  <%= render DS::Dialog.new do |dialog| %>
    <% dialog.with_header(title: t(".title", default: "Select Your Bank")) %>

    <% dialog.with_body do %>
      <div class="space-y-4" data-controller="bank-search">
        <p class="text-sm text-secondary">
          <%= t(".description", default: "Choose the bank you want to connect to your account.") %>
        </p>

        <% if @error_message.present? %>
          <div class="p-3 rounded-lg bg-destructive/10 text-destructive text-sm">
            <%= @error_message %>
          </div>
        <% end %>

        <% if @aspsps.present? %>
          <%# Search input — filters list client-side via Stimulus %>
          <input
            type="text"
            placeholder="<%= t(".search_placeholder", default: "Search for your bank...") %>"
            data-bank-search-target="input"
            data-action="input->bank-search#filter"
            class="w-full px-3 py-2 text-sm rounded-md border border-primary bg-container-inset text-primary placeholder:text-secondary focus:outline-none focus:ring-1 focus:ring-primary"
            autocomplete="off"
            aria-label="<%= t(".search_label", default: "Search for your bank") %>"
            autofocus>

          <div class="space-y-2 max-h-80 overflow-y-auto">
            <% @aspsps.each do |aspsp| %>
              <div data-bank-search-target="item" data-bank-name="<%= aspsp[:name].to_s.downcase(:fold) %>">
                <%= button_to authorize_enable_banking_item_path(@enable_banking_item),
                              method: :post,
                              params: { aspsp_name: aspsp[:name], new_connection: @new_connection },
                              class: "w-full flex items-center gap-4 p-3 rounded-lg border border-primary bg-container hover:bg-subtle transition-colors text-left",
                              data: { turbo: false } do %>
                  <% if aspsp[:logo].present? %>
                    <img src="<%= aspsp[:logo] %>" alt="<%= aspsp[:name] %>" class="w-10 h-10 rounded object-contain">
                  <% else %>
                    <div class="w-10 h-10 rounded bg-container-inset flex items-center justify-center">
                      <%= icon "building-bank", class: "w-5 h-5 text-tertiary" %>
                    </div>
                  <% end %>
                  <div class="flex-1 min-w-0">
                    <div class="flex items-center gap-2 flex-wrap">
                      <p class="font-medium text-sm text-primary"><%= aspsp[:name] %></p>
                      <% if aspsp[:beta] %>
                        <span class="text-xs font-medium text-warning bg-warning/10 px-2 py-0.5 rounded-full flex-shrink-0">
                          <%= t(".beta_label", default: "Beta") %>
                        </span>
                      <% end %>
                    </div>
                    <% if aspsp[:bic].present? %>
                      <p class="text-xs text-secondary truncate">BIC: <%= aspsp[:bic] %></p>
                    <% end %>
                  </div>
                  <%= icon "chevron-right", class: "w-5 h-5 text-secondary flex-shrink-0" %>
                <% end %>
              </div>
            <% end %>
            <div data-bank-search-target="emptyState" class="hidden py-4 text-center text-sm text-secondary">
              <%= t(".no_search_results", default: "No banks match your search.") %>
            </div>
          </div>
        <% else %>
          <div class="text-center py-8">
            <p class="text-secondary"><%= t(".no_banks", default: "No banks available for this country.") %></p>
            <p class="text-sm text-secondary mt-2"><%= t(".check_country", default: "Please check your country code setting.") %></p>
          </div>
        <% end %>

        <div class="flex justify-end pt-4">
          <%= link_to t(".cancel", default: "Cancel"), settings_providers_path,
              class: "inline-flex items-center gap-1 px-3 py-2 text-sm font-medium rounded-lg text-primary button-bg-secondary hover:button-bg-secondary-hover",
              data: { turbo_frame: "_top", action: "DS--dialog#close" } %>
        </div>
      </div>
    <% end %>
  <% end %>
<% end %>
