<% content_for :title do %>
  Account Deletion Pending
<% end %>

<% content_for :hide_nav, true %>

<div class="flex items-center justify-center p-6">
  <div class="max-w-2xl w-full space-y-6">
    <header class="text-center mb-8">
      <h1 class="text-4xl font-bold text-surface-content mb-2">Account Scheduled for Deletion</h1>
      <p class="text-muted text-lg">Your account is scheduled to self-destruct soon.</p>
    </header>

    <div class="border border-primary rounded-xl p-6 bg-dark">
      <div class="space-y-4">
        <div class="flex items-center justify-between">
          <span class="text-muted">Status</span>
          <span
            class="px-3 py-1 rounded-full text-sm font-medium
            <%= @deletion_request.approved? ? 'bg-green/20 text-green' : 'bg-yellow/20 text-yellow' %>">
            <%= @deletion_request.status.humanize %>
          </span>
        </div>

        <div class="flex items-center justify-between ">
          <span class="text-muted">Requested</span>
          <span class="text-surface-content"><%= @deletion_request.requested_at.strftime('%B %d, %Y at %I:%M %p') %></span>
        </div>

        <% if @deletion_request.pending? %>
          <div class="p-4 bg-yellow/30 border border-yellow rounded">
            <p class="text-yellow">Your deletion request is pending approval. During this time, we will review your request and get back to you as soon as possible.</p>
          </div>
        <% elsif @deletion_request.approved? %>
          <div class="flex items-center justify-between">
            <span class="text-muted">Deletion Date</span>
            <span class="text-red font-semibold">
              <%= @deletion_request.scheduled_deletion_at.strftime('%B %d, %Y') %>
              (<%= @deletion_request.days_until_deletion %> days remaining)
            </span>
          </div>

          <div class="p-4 bg-red/30 border border-red rounded">
            <p class="text-red">Your account will be permanently deleted on <%= @deletion_request.scheduled_deletion_at.strftime('%B %d, %Y') %>. After deletion, your email address will be retained on file, but all other personal information will be removed or anonymized.</p>
          </div>
        <% end %>

        <h3 class="text-surface-content font-medium mb-2">Important Information</h3>
        <ul class="text-muted text-sm space-y-2">
          <li>• During the 30-day waiting period, you cannot upload data, download data, or use your account for Hack Club programs.</li>
          <li>• You can cancel this request at any time before the deletion date.</li>
          <li>• After deletion, your email address will be retained to prevent ban evasion.</li>
        </ul>
      </div>

      <div class="mt-6 grid grid-cols-2 gap-3 items-center">
        <%= link_to signout_path, method: :delete, class: "w-full inline-flex justify-center px-4 py-3 border border-surface-200 text-muted hover:bg-darkless font-medium rounded text-center transition-colors duration-200" do %>
          Return to Login
        <% end %>

        <% if @deletion_request.can_be_cancelled? %>
          <%= button_to "I changed my mind", cancel_deletion_path, method: :delete, form: { class: "w-full" }, class: "w-full px-4 py-3 bg-primary hover:bg-red text-on-primary font-medium rounded text-center transition-colors duration-200 cursor-pointer" %>
        <% else %>
          <div class="w-full"></div>
        <% end %>
      </div>
    </div>
  </div>
</div>
