<%# Renders a breakdown table for income or expense groups %>
<%# Local variables: groups, total, type (:income or :expense), amount_sort_params, current_sort_by, current_sort_direction %>

<%
  color_class = type == :income ? "text-success" : "text-destructive"
  icon_name = type == :income ? "trending-up" : "trending-down"
  title_key = type == :income ? "reports.transactions_breakdown.table.income" : "reports.transactions_breakdown.table.expense"
%>

<div>
  <div class="text-large mb-4 flex items-center gap-2 text-lg">
    <%= icon(icon_name, class: "w-5 h-5") %>
    <span><%= t(title_key) %>:</span>
    <span class="font-medium text-secondary <%= color_class %> privacy-sensitive"> <%= Money.new(total, Current.family.currency).format %></span>
  </div>

  <div class="bg-container-inset rounded-xl p-1 overflow-x-auto">
    <div class="rounded-lg shadow-border-xs bg-container overflow-hidden">
    <table class="w-full">
      <thead class="bg-container-inset">
        <tr class="uppercase text-xs font-medium text-secondary">
          <th class="px-4 py-2 text-left font-medium" colspan="2"><%= t("reports.transactions_breakdown.table.category") %></th>
          <th class="px-4 py-2 text-right font-medium">
            <%= link_to reports_path(amount_sort_params), class: "inline-flex items-center gap-1 hover:text-primary" do %>
              <%= t("reports.transactions_breakdown.table.amount") %>
              <% if current_sort_by == "amount" %>
                <%= icon(current_sort_direction == "desc" ? "chevron-down" : "chevron-up", class: "w-3 h-3") %>
              <% end %>
            <% end %>
          </th>
          <th class="px-4 py-2 text-right font-medium"><%= t("reports.transactions_breakdown.table.percentage") %></th>
        </tr>
      </thead>
      <tbody>
        <% groups.each_with_index do |group, idx| %>
          <%= render "reports/category_row",
            item: group,
            total: total,
            color_class: color_class,
            level: :category,
            show_border: idx < groups.size - 1 || group[:subcategories].present? %>
          <%# Render subcategories if present %>
          <% if group[:subcategories].present? && group[:subcategories].any? %>
            <% group[:subcategories].each_with_index do |subcategory, sub_idx| %>
              <%= render "reports/category_row",
                item: subcategory,
                total: total,
                color_class: color_class,
                level: :subcategory,
                show_border: sub_idx < group[:subcategories].size - 1 %>
            <% end %>
          <% end %>
        <% end %>
      </tbody>
    </table>
    </div>
  </div>
</div>
