<%# locals: (goal:, linkable_accounts:, currently_linked_account_ids:) %>

<% if goal.errors.any? %>
  <%= render "shared/form_errors", model: goal %>
<% end %>

<%= styled_form_with model: goal,
                     url: goal_path(goal),
                     method: :patch,
                     class: "space-y-3" do |f| %>
  <div class="flex justify-center">
    <%= render "color_picker", form: f, colors: Goal::COLORS, icons: Goal::ICONS %>
  </div>

  <%= f.text_field :name,
                   label: t("goals.form_stepper.step1.fields.name"),
                   required: true,
                   autofocus: true %>

  <%= f.money_field :target_amount,
                    label: t("goals.form_stepper.step1.fields.target_amount"),
                    required: true %>

  <%= f.date_field :target_date,
                   label: t("goals.form_stepper.step1.fields.target_date") %>

  <div>
    <div class="mb-2">
      <span class="block text-sm font-medium text-primary"><%= t("goals.form_stepper.step1.fields.funding_accounts") %></span>
      <p class="text-xs text-secondary mt-0.5"><%= t("goals.form_stepper.step1.fields.funding_accounts_hint") %></p>
    </div>
    <div class="bg-container-inset rounded-lg p-1">
      <% grouped = linkable_accounts.group_by { |a| a.subtype.to_s.presence || "other" } %>
      <% grouped.each_with_index do |(subtype, accts), group_idx| %>
        <div class="px-3 py-2 text-[11px] font-medium uppercase tracking-wide text-secondary"><%= t("goals.form_stepper.step1.subtypes.#{subtype}", default: subtype.titleize) %></div>
        <div class="bg-container rounded-md <%= "mb-1" if group_idx < grouped.size - 1 %>">
          <% accts.each_with_index do |account, idx| %>
            <label class="flex items-center gap-3 px-3 py-2.5 cursor-pointer <%= "border-t border-subdued" if idx > 0 %>">
              <%= check_box_tag "goal[account_ids][]",
                                account.id,
                                currently_linked_account_ids.include?(account.id.to_s),
                                id: "goal_account_ids_#{account.id}",
                                class: "checkbox checkbox--light shrink-0" %>
              <%= render Goals::AvatarComponent.new(name: account.name, color: Goals::AvatarComponent.color_for(account.name), size: "md") %>
              <div class="flex-1 min-w-0">
                <p class="text-sm font-medium text-primary truncate"><%= account.name %></p>
                <p class="text-xs text-secondary"><%= (account.subtype || subtype).titleize %></p>
              </div>
              <span class="text-sm text-primary tabular-nums"><%= Money.new(account.balance, account.currency).format %></span>
            </label>
          <% end %>
        </div>
      <% end %>
    </div>
  </div>

  <%= f.text_area :notes,
                  label: t("goals.form_stepper.step1.fields.notes"),
                  rows: 2 %>

  <div class="flex justify-end pt-2">
    <%= f.submit t("goals.edit.save") %>
  </div>
<% end %>
