<details class="group bg-surface rounded-lg border border-surface-inset/50">
  <summary class="flex items-center justify-between gap-2 p-3 cursor-pointer">
    <div class="flex items-center gap-2">
      <%= helpers.icon "chevron-right", class: "group-open:transform group-open:rotate-90" %>
      <span class="text-sm text-primary font-medium"><%= t("provider_sync_summary.title") %></span>
    </div>
    <div class="flex items-center gap-2 text-xs text-secondary">
      <% if last_synced_at %>
        <span><%= t("provider_sync_summary.last_sync", time_ago: last_synced_ago) %></span>
      <% end %>
    </div>
  </summary>

  <div class="p-3 text-sm text-secondary grid grid-cols-1 md:grid-cols-2 gap-3">
    <%# Accounts section - always shown if we have account stats %>
    <% if total_accounts > 0 || stats.key?("total_accounts") %>
      <div>
        <h4 class="text-primary font-medium mb-1"><%= t("provider_sync_summary.accounts.title") %></h4>
        <div class="flex items-center gap-3 flex-wrap">
          <span><%= t("provider_sync_summary.accounts.total", count: total_accounts) %></span>
          <span><%= t("provider_sync_summary.accounts.linked", count: linked_accounts) %></span>
          <span><%= t("provider_sync_summary.accounts.unlinked", count: unlinked_accounts) %></span>
          <% if institutions_count.present? %>
            <span><%= t("provider_sync_summary.accounts.institutions", count: institutions_count) %></span>
          <% end %>
        </div>
      </div>
    <% end %>

    <%# Transactions section - shown if provider collects transaction stats %>
    <% if has_transaction_stats? || activities_pending? %>
      <div>
        <h4 class="text-primary font-medium mb-1"><%= t("provider_sync_summary.transactions.title") %></h4>
        <% if activities_pending? && !has_transaction_stats? %>
          <div class="flex items-center gap-2">
            <%= helpers.icon "loader-circle", size: "sm", class: "animate-spin text-secondary" %>
            <span class="text-secondary"><%= t("provider_sync_summary.transactions.fetching") %></span>
          </div>
        <% else %>
          <div class="flex items-center gap-3 flex-wrap">
            <span><%= t("provider_sync_summary.transactions.seen", count: tx_seen) %></span>
            <span><%= t("provider_sync_summary.transactions.imported", count: tx_imported) %></span>
            <span><%= t("provider_sync_summary.transactions.updated", count: tx_updated) %></span>
            <span><%= t("provider_sync_summary.transactions.skipped", count: tx_skipped) %></span>
          </div>
        <% end %>

        <%# Protected entries detail - shown when entries were skipped due to protection %>
        <% if has_skipped_entries? %>
          <div class="mt-2">
            <div class="flex items-center gap-1">
              <%= helpers.icon "shield-check", size: "sm" %>
              <span class="text-secondary"><%= t("provider_sync_summary.transactions.protected", count: tx_skipped) %></span>
            </div>
            <% if skip_summary.any? %>
              <div class="text-xs text-secondary mt-1">
                <% skip_summary.each do |reason, count| %>
                  <span class="mr-2"><%= t("provider_sync_summary.skip_reasons.#{reason}", default: reason.humanize) %>: <%= count %></span>
                <% end %>
              </div>
            <% end %>
            <% if skip_details.any? %>
              <details class="mt-1">
                <summary class="text-xs cursor-pointer text-secondary hover:text-primary">
                  <%= t("provider_sync_summary.transactions.view_protected") %>
                </summary>
                <div class="mt-1 pl-2 border-l-2 border-surface-inset space-y-1">
                  <% skip_details.each do |detail| %>
                    <p class="text-xs text-secondary">
                      <%= detail["name"] %> (<%= t("provider_sync_summary.skip_reasons.#{detail["reason"]}", default: detail["reason"].humanize) %>)
                    </p>
                  <% end %>
                </div>
              </details>
            <% end %>
          </div>
        <% end %>
      </div>
    <% end %>

    <%# Holdings section - shown if provider collects holdings stats %>
    <% if has_holdings_stats? %>
      <div>
        <h4 class="text-primary font-medium mb-1"><%= t("provider_sync_summary.holdings.title") %></h4>
        <div class="flex items-center gap-3">
          <span><%= t("provider_sync_summary.holdings.#{holdings_label_key}", count: holdings_count) %></span>
        </div>
      </div>
    <% end %>

    <%# Trades section - shown if provider collects trades stats (investment activities) %>
    <% if has_trades_stats? || activities_pending? %>
      <div>
        <h4 class="text-primary font-medium mb-1"><%= t("provider_sync_summary.trades.title") %></h4>
        <% if activities_pending? && !has_trades_stats? %>
          <div class="flex items-center gap-2">
            <%= helpers.icon "loader-circle", size: "sm", class: "animate-spin text-secondary" %>
            <span class="text-secondary"><%= t("provider_sync_summary.trades.fetching") %></span>
          </div>
        <% else %>
          <div class="flex items-center gap-3 flex-wrap">
            <span><%= t("provider_sync_summary.trades.imported", count: trades_imported) %></span>
            <% if trades_skipped > 0 %>
              <span><%= t("provider_sync_summary.trades.skipped", count: trades_skipped) %></span>
            <% end %>
          </div>
        <% end %>
      </div>
    <% end %>

    <%# Health section - always shown %>
    <div>
      <h4 class="text-primary font-medium mb-1"><%= t("provider_sync_summary.health.title") %></h4>
      <div class="flex flex-col gap-1">
        <div class="flex items-center gap-3 flex-wrap">
          <% if rate_limited? %>
            <span class="text-warning">
              <%= t("provider_sync_summary.health.rate_limited", time_ago: rate_limited_ago || t("provider_sync_summary.health.recently")) %>
            </span>
          <% end %>
          <% if has_errors? %>
            <span class="text-destructive"><%= t("provider_sync_summary.health.errors", count: total_errors) %></span>
            <% if error_details.any? %>
              <details class="mt-1">
                <summary class="text-xs cursor-pointer text-secondary hover:text-primary"><%= t("provider_sync_summary.health.view_error_details") %></summary>
                <div class="mt-1 pl-2 border-l-2 border-destructive/30 space-y-1">
                  <% error_details.each do |detail| %>
                    <p class="text-xs text-destructive">
                      <% if detail["name"].present? %><strong><%= detail["name"] %>:</strong> <% end %><%= detail["message"] %>
                    </p>
                  <% end %>
                </div>
              </details>
            <% end %>
          <% elsif import_started? %>
            <span class="text-success"><%= t("provider_sync_summary.health.errors", count: 0) %></span>
          <% else %>
            <span><%= t("provider_sync_summary.health.errors", count: 0) %></span>
          <% end %>
        </div>

        <%# Pending→posted reconciliation %>
        <% if has_pending_reconciled? %>
          <div class="mt-1">
            <div class="flex items-center gap-1">
              <%= helpers.icon "check-circle", size: "sm", color: "success" %>
              <span class="text-success"><%= t("provider_sync_summary.health.pending_reconciled", count: pending_reconciled) %></span>
            </div>
            <% if pending_reconciled_details.any? %>
              <details class="mt-1">
                <summary class="text-xs cursor-pointer text-secondary hover:text-primary">
                  <%= t("provider_sync_summary.health.view_reconciled") %>
                </summary>
                <div class="mt-1 pl-2 border-l-2 border-surface-inset space-y-1">
                  <% pending_reconciled_details.each do |detail| %>
                    <p class="text-xs text-success">
                      <%= detail["account_name"] %>: <%= detail["pending_name"] %>
                    </p>
                  <% end %>
                </div>
              </details>
            <% end %>
          </div>
        <% end %>

        <%# Duplicate suggestions needing review %>
        <% if has_duplicate_suggestions_created? %>
          <div class="mt-1">
            <div class="flex items-center gap-1">
              <%= helpers.icon "alert-triangle", size: "sm", color: "warning" %>
              <span class="text-warning"><%= t("provider_sync_summary.health.duplicate_suggestions", count: duplicate_suggestions_created) %></span>
            </div>
            <% if duplicate_suggestions_details.any? %>
              <details class="mt-1">
                <summary class="text-xs cursor-pointer text-secondary hover:text-primary">
                  <%= t("provider_sync_summary.health.view_duplicate_suggestions") %>
                </summary>
                <div class="mt-1 pl-2 border-l-2 border-surface-inset space-y-1">
                  <% duplicate_suggestions_details.each do |detail| %>
                    <p class="text-xs text-warning">
                      <%= detail["account_name"] %>: <%= detail["pending_name"] %> → <%= detail["posted_name"] %>
                    </p>
                  <% end %>
                </div>
              </details>
            <% end %>
          </div>
        <% end %>

        <%# Stale pending transactions (auto-excluded) %>
        <% if has_stale_pending? %>
          <div class="mt-1">
            <div class="flex items-center gap-1">
              <%= helpers.icon "clock", size: "sm", color: "warning" %>
              <span class="text-warning"><%= t("provider_sync_summary.health.stale_pending", count: stale_pending_excluded) %></span>
            </div>
            <% if stale_pending_details.any? %>
              <details class="mt-1">
                <summary class="text-xs cursor-pointer text-secondary hover:text-primary">
                  <%= t("provider_sync_summary.health.view_stale_pending") %>
                </summary>
                <div class="mt-1 pl-2 border-l-2 border-surface-inset space-y-1">
                  <% stale_pending_details.each do |detail| %>
                    <p class="text-xs text-warning">
                      <%= detail["account_name"] %>: <%= t("provider_sync_summary.health.stale_pending_count", count: detail["count"]) %>
                    </p>
                  <% end %>
                </div>
              </details>
            <% end %>
          </div>
        <% end %>

        <%# Stale unmatched pending (need manual review) %>
        <% if has_stale_unmatched_pending? %>
          <div class="mt-1">
            <div class="flex items-center gap-1">
              <%= helpers.icon "help-circle", size: "sm" %>
              <span class="text-secondary"><%= t("provider_sync_summary.health.stale_unmatched", count: stale_unmatched_pending) %></span>
            </div>
            <% if stale_unmatched_details.any? %>
              <details class="mt-1">
                <summary class="text-xs cursor-pointer text-secondary hover:text-primary">
                  <%= t("provider_sync_summary.health.view_stale_unmatched") %>
                </summary>
                <div class="mt-1 pl-2 border-l-2 border-surface-inset space-y-1">
                  <% stale_unmatched_details.each do |detail| %>
                    <p class="text-xs text-secondary">
                      <%= detail["account_name"] %>: <%= t("provider_sync_summary.health.stale_unmatched_count", count: detail["count"]) %>
                    </p>
                  <% end %>
                </div>
              </details>
            <% end %>
          </div>
        <% end %>

        <%# Data quality warnings %>
        <% if has_data_quality_issues? %>
          <div class="flex items-center gap-3 mt-1">
            <% if data_warnings > 0 %>
              <div class="flex items-center gap-1">
                <%= helpers.icon "alert-triangle", size: "sm", color: "warning" %>
                <span class="text-warning"><%= t("provider_sync_summary.health.data_warnings", count: data_warnings) %></span>
              </div>
            <% end %>
            <% if notices > 0 %>
              <div class="flex items-center gap-1">
                <%= helpers.icon "info", size: "sm" %>
                <span><%= t("provider_sync_summary.health.notices", count: notices) %></span>
              </div>
            <% end %>
          </div>

          <% if data_quality_details.any? %>
            <details class="mt-2">
              <summary class="text-xs cursor-pointer text-secondary hover:text-primary">
                <%= t("provider_sync_summary.health.view_data_quality") %>
              </summary>
              <div class="mt-1 pl-2 border-l-2 border-surface-inset space-y-1">
                <% data_quality_details.each do |detail| %>
                  <p class="text-xs <%= severity_color_class(detail["severity"]) %>"><%= detail["message"] %></p>
                <% end %>
              </div>
            </details>
          <% end %>
        <% end %>
      </div>
    </div>
  </div>
</details>
