<%= content_for :header_nav do %>
  <%= render "imports/nav", import: @import %>
<% end %>

<%= content_for :previous_path, import_upload_path(@import) %>

<div class="space-y-8 mx-auto max-w-2xl mb-6">
  <div class="text-center space-y-2">
    <h1 class="text-3xl text-primary font-medium"><%= t(".title") %></h1>
    <p class="text-secondary text-sm"><%= t(".description", product_name: product_name) %></p>
  </div>

  <%= form_with url: import_qif_category_selection_path(@import), method: :put, class: "space-y-8" do |form| %>

    <%# ── Date format ─────────────────────────────────────────────── %>
    <%= tag.div class: "space-y-3", data: { controller: "qif-date-format", qif_date_format_previews_value: @date_previews.to_json } do %>
      <h2 class="text-lg font-medium text-primary"><%= t("imports.date_format.heading") %></h2>
      <p class="text-sm text-secondary"><%= t("imports.date_format.description") %></p>

      <% if @date_formats.any? %>
        <%= form.label :date_format, t("imports.date_format.heading"), class: "sr-only" %>
        <%= form.select :date_format,
              options_for_select(@date_formats, @import.qif_date_format),
              {},
              { class: "w-full rounded-lg border border-secondary bg-container px-3 py-2 text-sm text-primary",
                data: { action: "change->qif-date-format#change" } } %>

        <div class="text-xs text-secondary">
          <%= t("imports.date_format.preview") %>:
          <span class="font-medium text-primary" data-qif-date-format-target="preview"><%= @date_previews[@import.qif_date_format] %></span>
        </div>
      <% else %>
        <div class="flex gap-3 items-start rounded-xl border border-destructive bg-destructive/5 px-4 py-3">
          <%= icon("circle-alert", size: "md", class: "text-destructive shrink-0 mt-0.5") %>
          <div class="text-sm text-primary space-y-1">
            <p class="font-medium"><%= t("imports.date_format.error_title") %></p>
            <p class="text-secondary"><%= t("imports.date_format.error_description") %></p>
          </div>
        </div>
      <% end %>
    <% end %>

    <%# ── Split transaction warning ────────────────────────────── %>
    <% if @has_split_transactions %>
      <div class="flex gap-3 items-start rounded-xl border border-warning bg-warning/5 px-4 py-3">
        <%= icon("triangle-alert", size: "md", class: "text-warning shrink-0 mt-0.5") %>
        <div class="text-sm text-primary space-y-1">
          <p class="font-medium"><%= t(".split_warning_title") %></p>
          <p class="text-secondary"><%= t(".split_warning_description") %></p>
        </div>
      </div>
    <% end %>

    <%# ── Categories ─────────────────────────────────────────────── %>
    <% if @categories.any? %>
      <div class="space-y-3">
        <div class="flex items-center justify-between">
          <h2 class="text-lg font-medium text-primary"><%= t(".categories_heading") %></h2>
          <span class="text-sm text-secondary"><%= t(".categories_found", count: @categories.count) %></span>
        </div>

        <div class="bg-container-inset rounded-xl p-1">
          <div class="bg-container shadow-border-xs rounded-lg overflow-hidden">
            <div class="grid grid-cols-12 gap-2 px-5 py-3 text-xs font-medium text-secondary uppercase border-b border-primary">
              <div class="col-span-1"></div>
              <div class="col-span-8"><%= t(".category_name_col") %></div>
              <div class="col-span-3 text-right"><%= t(".transactions_col") %></div>
            </div>

            <div class="divide-y divide-alpha-black-100">
              <% @categories.each_with_index do |category, index| %>
                <% is_split = @split_categories.include?(category) %>
                <label for="cat_<%= index %>_<%= category.parameterize(separator: "_") %>" class="grid grid-cols-12 gap-2 items-center px-5 py-3 bg-container cursor-pointer hover:bg-surface-inset transition-colors">
                  <div class="col-span-1">
                    <input
                      type="checkbox"
                      name="categories[]"
                      value="<%= category %>"
                      id="cat_<%= index %>_<%= category.parameterize(separator: "_") %>"
                      <%= "checked" unless is_split %>
                      class="rounded border-primary">
                  </div>
                  <div class="col-span-8 flex items-center gap-2">
                    <span class="text-sm text-primary"><%= category %></span>
                    <% if is_split %>
                      <span class="inline-flex items-center rounded-full bg-warning/10 px-2 py-0.5 text-xs font-medium text-warning"><%= t(".split_badge") %></span>
                    <% end %>
                  </div>
                  <span class="col-span-3 text-sm text-secondary text-right">
                    <%= t(".txn_count", count: @category_counts[category] || 0) %>
                  </span>
                </label>
              <% end %>
            </div>
          </div>
        </div>
      </div>
    <% end %>

    <%# ── Tags ───────────────────────────────────────────────────── %>
    <% if @tags.any? %>
      <div class="space-y-3">
        <div class="flex items-center justify-between">
          <h2 class="text-lg font-medium text-primary"><%= t(".tags_heading") %></h2>
          <span class="text-sm text-secondary"><%= t(".tags_found", count: @tags.count) %></span>
        </div>

        <div class="bg-container-inset rounded-xl p-1">
          <div class="bg-container shadow-border-xs rounded-lg overflow-hidden">
            <div class="grid grid-cols-12 gap-2 px-5 py-3 text-xs font-medium text-secondary uppercase border-b border-primary">
              <div class="col-span-1"></div>
              <div class="col-span-8"><%= t(".tag_name_col") %></div>
              <div class="col-span-3 text-right"><%= t(".transactions_col") %></div>
            </div>

            <div class="divide-y divide-alpha-black-100">
              <% @tags.each_with_index do |tag, index| %>
                <label for="tag_<%= index %>_<%= tag.parameterize(separator: "_") %>" class="grid grid-cols-12 gap-2 items-center px-5 py-3 bg-container cursor-pointer hover:bg-surface-inset transition-colors">
                  <div class="col-span-1">
                    <input
                      type="checkbox"
                      name="tags[]"
                      value="<%= tag %>"
                      id="tag_<%= index %>_<%= tag.parameterize(separator: "_") %>"
                      checked
                      class="rounded border-primary">
                  </div>
                  <span class="col-span-8 text-sm text-primary"><%= tag %></span>
                  <span class="col-span-3 text-sm text-secondary text-right">
                    <%= t(".txn_count", count: @tag_counts[tag] || 0) %>
                  </span>
                </label>
              <% end %>
            </div>
          </div>
        </div>
      </div>
    <% end %>

    <%# ── Empty state ─────────────────────────────────────────────── %>
    <% if @categories.empty? && @tags.empty? %>
      <div class="text-center py-12 text-secondary space-y-2">
        <%= icon("tag", size: "lg", class: "mx-auto mb-2") %>
        <p class="text-sm"><%= t(".empty_state_primary") %></p>
        <p class="text-xs"><%= t(".empty_state_secondary") %></p>
      </div>
    <% end %>

    <%# ── Submit ──────────────────────────────────────────────────── %>
    <div class="flex justify-center">
      <%= form.submit t(".submit"),
            class: "btn btn-primary w-full md:w-auto",
            disabled: @date_formats.empty? %>
    </div>

  <% end %>
</div>
