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

<div class="space-y-4">
  <% if @encryption_error %>
    <%= render DS::Alert.new(
          variant: :error,
          message: safe_join([
            content_tag(:h2, t("settings.providers.encryption_error.title"), class: "font-medium"),
            content_tag(:p, t("settings.providers.encryption_error.message"), class: "text-sm mt-1")
          ])
        ) %>
  <% else %>
    <div class="flex items-center justify-between gap-4">
      <p class="text-secondary"><%= t("settings.providers.bank_sync.lede") %></p>
      <% if @connected.any? || @needs_attention.any? %>
        <% sync_all_disabled = Current.family.last_sync_all_attempted_at.present? && Current.family.last_sync_all_attempted_at > 30.seconds.ago %>
        <%= render DS::Link.new(
              text: t("settings.providers.sync_all"),
              icon: "refresh-cw",
              variant: "outline",
              href: sync_all_settings_providers_path,
              method: :post,
              title: sync_all_disabled ? t("settings.providers.sync_all_recently") : nil,
              aria: { disabled: sync_all_disabled.to_s },
              class: sync_all_disabled ? "opacity-50 pointer-events-none" : nil
            ) %>
      <% end %>
    </div>

    <% all_connections = @needs_attention + @connected %>

    <% if all_connections.any? %>
      <% if @health %>
        <%= render "settings/providers/health_strip",
                   connected:        @health[:connected],
                   needs_attention:  @health[:needs_attention],
                   accounts_syncing: @health[:accounts_syncing],
                   last_synced_at:   @health[:last_synced_at] %>
      <% end %>

      <%= render "settings/providers/group_heading",
                 title: t("settings.providers.groups.your_connections"),
                 count: all_connections.size %>

      <div class="space-y-2">
        <% all_connections.each do |entry| %>
          <% auto_open = all_connections.size == 1 %>
          <%= render "settings/providers/connection_row", entry: entry, open: auto_open %>
        <% end %>
      </div>
    <% end %>

    <% if @available.any? %>
      <div data-controller="providers-filter">
        <%= render "settings/providers/search_filters" %>

        <div id="available" class="flex items-baseline justify-between gap-3 mt-6 mb-1.5 px-1">
          <h2 class="text-xs font-medium text-secondary uppercase flex items-baseline gap-2">
            <%= t("settings.providers.groups.available") %>
            <span class="text-subdued font-normal normal-case tabular-nums">
              · <span data-providers-filter-target="count"><%= @available.size %></span>
            </span>
          </h2>
        </div>

        <div data-providers-filter-target="empty" class="hidden text-sm text-secondary px-1 py-2 flex items-center gap-2">
          <span><%= t("settings.providers.empty_filter") %></span>
          <button type="button" data-action="click->providers-filter#clear" class="text-primary underline">
            <%= t("settings.providers.clear_filter") %>
          </button>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
          <% @available.each do |entry| %>
            <% meta = Provider::Metadata.for(entry[:provider_key]) %>
            <%= render Settings::ProviderCard.new(
                  provider_key: entry[:provider_key],
                  name:         entry[:title],
                  tagline:      t("settings.providers.taglines.#{entry[:provider_key]}", default: nil),
                  region:       meta[:region],
                  kind:         meta[:kind],
                  tier:         meta[:tier],
                  maturity:     meta[:maturity] || :stable,
                  logo_bg:      meta[:logo_bg],
                  logo_text:    meta[:logo_text]
                ) %>
          <% end %>
        </div>
      </div>
    <% else %>
      <%= render "settings/providers/group_heading",
                 title: t("settings.providers.groups.available"),
                 count: 0,
                 anchor: "available" %>
      <p class="text-sm text-secondary px-1 py-2"><%= t("settings.providers.groups.empty_available") %></p>
    <% end %>
  <% end %>
</div>
