<% content_for :title, "Editing Family" %>

<div class="container mx-auto px-4 py-8">
  <div class="max-w-2xl mx-auto">
    <div class="bg-base-200 rounded-lg p-6">
      <div class="flex items-center justify-between mb-6">
        <h1 class="text-2xl font-bold text-base-content">
          <%= t('families.edit.title', default: 'Edit Family') %>
        </h1>
        <%= link_to family_path,
              class: "btn btn-ghost" do %>
          <%= t('families.edit.back', default: '← Back to Family') %>
        <% end %>
      </div>

      <%= form_with model: @family, local: true, class: "space-y-6" do |form| %>
        <% if @family.errors.any? %>
          <div class="alert alert-error">
            <div>
              <h3 class="text-sm font-medium">
                <%= t('families.edit.error_title', default: 'There were problems with your submission:') %>
              </h3>
              <div class="mt-2 text-sm">
                <ul class="list-disc pl-5 space-y-1">
                  <% @family.errors.full_messages.each do |message| %>
                    <li><%= message %></li>
                  <% end %>
                </ul>
              </div>
            </div>
          </div>
        <% end %>

        <div>
          <%= form.label :name, t('families.form.name', default: 'Family Name'), class: "label label-text font-medium mb-2" %>
          <%= form.text_field :name,
                class: "input input-bordered w-full",
                placeholder: t('families.form.name_placeholder', default: 'Enter your family name') %>
          <p class="mt-1 text-sm text-base-content opacity-50">
            <%= t('families.edit.name_help', default: 'Choose a name that all family members will recognize.') %>
          </p>
        </div>

        <div class="bg-base-300 p-4 rounded-md">
          <h3 class="text-sm font-medium text-base-content mb-2">
            <%= t('families.edit.family_info', default: 'Family Information') %>
          </h3>
          <dl class="grid grid-cols-1 gap-x-4 gap-y-2 sm:grid-cols-2">
            <div>
              <dt class="text-sm font-medium text-base-content opacity-60">
                <%= t('families.edit.creator', default: 'Created by') %>
              </dt>
              <dd class="text-sm text-base-content"><%= @family.creator.email %></dd>
            </div>
            <div>
              <dt class="text-sm font-medium text-base-content opacity-60">
                <%= t('families.edit.created_on', default: 'Created on') %>
              </dt>
              <dd class="text-sm text-base-content"><%= @family.created_at.strftime('%B %d, %Y') %></dd>
            </div>
            <div>
              <dt class="text-sm font-medium text-base-content opacity-60">
                <%= t('families.edit.members_count', default: 'Members') %>
              </dt>
              <dd class="text-sm text-base-content">
                <%= pluralize(@family.members.count, 'member') %>
              </dd>
            </div>
            <div>
              <dt class="text-sm font-medium text-base-content opacity-60">
                <%= t('families.edit.last_updated', default: 'Last updated') %>
              </dt>
              <dd class="text-sm text-base-content"><%= @family.updated_at.strftime('%B %d, %Y') %></dd>
            </div>
          </dl>
        </div>

        <div class="flex items-center justify-between pt-4">
          <div class="flex space-x-3">
            <%= form.submit t('families.edit.save_changes', default: 'Save Changes'),
                  class: "btn btn-primary" %>
            <%= link_to family_path,
                  class: "btn btn-neutral" do %>
              <%= t('families.edit.cancel', default: 'Cancel') %>
            <% end %>
          </div>

          <% if policy(@family).destroy? %>
            <%= link_to family_path,
                  method: :delete,
                  data: { turbo_confirm: 'Are you sure you want to delete this family? This action cannot be undone.', turbo_method: :delete },
                  class: "btn btn-outline btn-error" do %>
              <%= icon 'trash-2', class: "inline-block w-4" %>
              Delete Family
            <% end %>
          <% end %>
        </div>
      <% end %>
    </div>
  </div>
</div>
