<div class="space-y-4">
  <%= render DS::Alert.new(message: t("providers.snaptrade.free_tier_warning"), variant: :warning) %>

  <%= render "settings/providers/setup_steps",
             steps: [
               t("providers.snaptrade.step_1_html").html_safe,
               t("providers.snaptrade.step_2"),
               t("providers.snaptrade.step_3"),
               t("providers.snaptrade.step_4")
             ] %>

  <% error_msg = local_assigns[:error_message] || @error_message %>
  <% if error_msg.present? %>
    <%= render DS::Alert.new(message: error_msg, variant: :error) %>
  <% end %>

  <%
    snaptrade_item = Current.family.snaptrade_items.first_or_initialize(name: "SnapTrade Connection")
    is_new_record = snaptrade_item.new_record?
    is_configured = snaptrade_item.persisted? && snaptrade_item.credentials_configured?
    is_registered = snaptrade_item.persisted? && snaptrade_item.user_registered?
  %>

  <%= styled_form_with model: snaptrade_item,
                       url: is_new_record ? snaptrade_items_path : snaptrade_item_path(snaptrade_item),
                       scope: :snaptrade_item,
                       method: is_new_record ? :post : :patch,
                       data: { turbo: true },
                       class: "space-y-3" do |form| %>
    <%= form.text_field :client_id,
                        label: t("providers.snaptrade.client_id_label"),
                        placeholder: is_new_record ? t("providers.snaptrade.client_id_placeholder") : t("providers.snaptrade.client_id_update_placeholder"),
                        type: :password %>

    <%= form.text_field :consumer_key,
                        label: t("providers.snaptrade.consumer_key_label"),
                        placeholder: is_new_record ? t("providers.snaptrade.consumer_key_placeholder") : t("providers.snaptrade.consumer_key_update_placeholder"),
                        type: :password %>

    <div class="flex justify-end">
      <%= form.submit is_new_record ? t("providers.snaptrade.save_button") : t("providers.snaptrade.update_button"),
                      class: "btn btn--primary" %>
    </div>
  <% end %>

  <% items = local_assigns[:snaptrade_items] || @snaptrade_items || Current.family.snaptrade_items.where.not(client_id: [nil, ""]) %>

  <% if items&.any? %>
    <% item = items.first %>
    <% unless item.user_registered? %>
      <div class="flex items-center gap-2 border-t border-primary pt-4 mt-4">
        <span class="w-2 h-2 bg-warning rounded-full"></span>
        <p class="text-sm text-secondary"><%= t("providers.snaptrade.status_needs_registration") %></p>
      </div>
    <% end %>
  <% end %>

  <% if items&.any? && items.first.user_registered? %>
    <% item = items.first %>
    <div class="border-t border-primary pt-4 mt-4">
      <details class="group"
               data-controller="lazy-load"
               data-action="toggle->lazy-load#toggled"
               data-lazy-load-url-value="<%= connections_snaptrade_item_path(item) %>"
               data-lazy-load-auto-open-param-value="manage">
        <summary class="flex items-center justify-between cursor-pointer list-none [&::-webkit-details-marker]:hidden">
          <div class="flex items-center gap-2">
            <p class="text-sm text-secondary">
              <%= t("providers.snaptrade.status_connected", count: item.snaptrade_accounts.count) %>
              <% if item.unlinked_accounts_count > 0 %>
                <span class="text-warning">(<%= t("providers.snaptrade.needs_setup", count: item.unlinked_accounts_count) %>)</span>
              <% end %>
            </p>
          </div>
          <span class="flex items-center gap-1 text-sm text-secondary hover:text-primary">
            <%= t("providers.snaptrade.manage_connections") %>
            <%= icon "chevron-right", class: "w-3 h-3 transition-transform group-open:rotate-90" %>
          </span>
        </summary>

        <div class="mt-3 space-y-3" data-lazy-load-target="content">
          <div data-lazy-load-target="loading" class="flex items-center gap-2 text-sm text-secondary py-2">
            <%= icon "loader-2", class: "w-4 h-4 animate-spin" %>
            <%= t("providers.snaptrade.loading_connections") %>
          </div>

          <div data-lazy-load-target="frame">
          </div>
        </div>
      </details>
    </div>
  <% end %>
</div>
