<div class="space-y-4">
  <div class="prose prose-sm text-secondary">
    <p class="text-primary font-medium"><%= t("coinstats_items.new.setup_instructions") %></p>
    <ol>
      <li><%= t("coinstats_items.new.step1_html").html_safe %></li>
      <li><%= t("coinstats_items.new.step2") %></li>
      <li><%= t("coinstats_items.new.step3_html", accounts_url: accounts_path).html_safe %></li>
    </ol>
  </div>

  <% error_msg = local_assigns[:error_message] || @error_message %>
  <% if error_msg.present? %>
    <div class="p-2 rounded-md bg-destructive/10 text-destructive text-sm overflow-hidden">
      <p class="line-clamp-3" title="<%= error_msg %>"><%= error_msg %></p>
    </div>
  <% end %>

  <%
    # Get or initialize a coinstats_item for this family
    # - If family has an item WITH credentials, use it (for updates)
    # - If family has an item WITHOUT credentials, use it (to add credentials)
    # - If family has no items at all, create a new one
    coinstats_item = Current.family.coinstats_items.first_or_initialize(name: t("coinstats_items.new.default_name"))
    is_new_record = coinstats_item.new_record?
  %>

  <%= styled_form_with model: coinstats_item,
                       url: is_new_record ? coinstats_items_path : coinstats_item_path(coinstats_item),
                       scope: :coinstats_item,
                       method: is_new_record ? :post : :patch,
                       data: { turbo: true },
                       class: "space-y-3" do |form| %>
    <%= form.text_field :api_key,
                        label: t("coinstats_items.new.api_key_label"),
                        placeholder: t("coinstats_items.new.api_key_placeholder"),
                        type: :password %>

    <div class="flex justify-end">
      <%= form.submit is_new_record ? t("coinstats_items.new.configure") : t("coinstats_items.new.update_configuration"),
                      class: "inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium text-inverse bg-inverse hover:bg-inverse-hover focus:outline-none focus:ring-2 focus:ring-gray-900 focus:ring-offset-2 transition-colors" %>
    </div>
  <% end %>

  <% items = local_assigns[:coinstats_items] || @coinstats_items || Current.family.coinstats_items.where.not(api_key: [nil, ""]) %>
  <div class="flex items-center gap-2">
    <% if items&.any? %>
      <div class="w-2 h-2 bg-success rounded-full"></div>
      <p class="text-sm text-secondary"><%= t("coinstats_items.new.status_configured_html", accounts_url: accounts_path).html_safe %></p>
    <% else %>
      <div class="w-2 h-2 bg-gray-400 rounded-full"></div>
      <p class="text-sm text-secondary"><%= t("coinstats_items.new.status_not_configured") %></p>
    <% end %>
  </div>
</div>
