<% content_for :title do %>
  Mailroom
<% end %>

<div class="min-h-screen bg-darker text-white">
  <div class="max-w-6xl mx-auto px-6 py-8">
    <header class="mb-8">
      <h1 class="text-4xl font-bold text-primary mb-2">📮 The Mailroom</h1>
      <p class="text-secondary text-lg">Track your physical mail and rewards</p>
    </header>

    <% if @has_mailing_address %>
      <section class="bg-green/50 border border-green rounded-lg p-6 mb-8">
        <div class="flex items-center gap-3 mb-3">
          <div class="w-8 h-8 bg-green rounded-full flex items-center justify-center">
            <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" stroke-width="3" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
            </svg>
          </div>
          <h2 class="text-xl font-bold text-green">Address Verified</h2>
        </div>
        <p class="text-lg mb-4">
          Your mailing address is set up and ready to receive mail!
        </p>
        <%= link_to my_mailing_address_path, class: "text-cyan hover:text-blue underline font-semibold" do %>
          View my mailing address
        <% end %>
      </section>
    <% else %>
      <section class="bg-orange bg-opacity-10 border border-orange rounded-lg p-6 mb-8">

        <div class="flex items-center gap-3 mb-3">
          <img src="https://upload.wikimedia.org/wikipedia/commons/8/83/Emergency_Light.gif" alt="Emergency Light" class="w-8 h-8">
          <h2 class="text-xl font-bold text-dark">No Address Added!</h2>
        </div>
        <p class="text-lg text-dark">You need to add your mailing address to receive physical mail and rewards.</p>
        <%= link_to "Add my address", edit_my_mailing_address_path,
            class: "bg-primary hover:bg-red text-white px-6 py-3 rounded-lg font-semibold transition-colors inline-block" %>
      </section>
    <% end %>

    <section class="bg-dark rounded-lg p-6">
      <h2 class="text-2xl font-bold mb-6">📦 My Mail</h2>
      <% if @physical_mails.any? %>
        <div class="space-y-6">
          <% @physical_mails.each do |mail| %>
            <% theseus_link = mail.link_to_theseus %>
            <div class="bg-darkless rounded-lg p-6 border border-darkless hover:border-primary transition-colors relative group">
              <% if theseus_link %>
                <a href="<%= theseus_link %>" target="_blank" class="absolute inset-0 z-10"></a>
              <% end %>
              <div class="relative z-20">
                <div class="flex items-start justify-between mb-3">
                  <h3 class="text-xl font-bold text-white">
                    <%= mail.humanized_mission_type %>
                    <% if theseus_link %>
                      <span class="text-cyan ml-2 group-hover:translate-x-1 transition-transform inline-block">↗</span>
                    <% end %>
                  </h3>
                  <div class="px-3 py-1 bg-primary bg-opacity-20 text-white rounded-full text-sm font-semibold">
                    <%= mail.status.titleize %>
                  </div>
                </div>
                <div class="flex flex-col sm:flex-row sm:items-center gap-2 text-secondary mb-3">
                  <span>📅 Created: <%= mail.created_at.strftime("%B %d, %Y") %></span>
                </div>
                <% if theseus_link %>
                  <div class="pt-3 border-t border-darkless">
                    <a href="<%= theseus_link %>" target="_blank" class="text-cyan hover:text-blue underline font-semibold relative z-30">
                      View on mail.hackclub.com
                    </a>
                  </div>
                <% end %>
              </div>
            </div>
          <% end %>
        </div>
      <% else %>
        <div class="text-center py-12">
          <div class="text-6xl mb-4">📪</div>
          <h3 class="text-xl font-bold text-secondary mb-2">No mail yet</h3>
          <p class="text-secondary">Keep coding to earn rewards and get mail!</p>
        </div>
      <% end %>
    </section>
  </div>
</div>
