<%# app/views/admin/ysws_reviews/show.html.erb %>
<% content_for :title, "YSWS Review: #{@submission.airtable_fields['name']&.truncate(30) || 'Untitled Submission'}" %>

<div class="ysws-review-container" style="padding: 1rem; background-color: #1F2937; color: #E5E7EB; min-height: calc(100vh - 4rem);">
  <div class="ysws-review-header">
    <h1 style="color: #FFF; border-bottom: 1px solid #4A5568; padding-bottom: 0.5rem; margin-bottom: 1rem; font-size: 1.5rem;">
      YSWS Submission Review
      <% if @user %>
        <span style="font-size: 0.7em; color: #9CA3AF;">for <%= @user.display_name %></span>
      <% end %>
    </h1>
  </div>

  <% if flash[:alert] %>
    <div style="background-color: #4B0000; color: #FFCDD2; border: 1px solid #EF9A9A; padding: 1rem; border-radius: 0.25rem; margin-bottom: 1rem;">
      <%= flash[:alert] %>
    </div>
  <% end %>

  <section style="margin-bottom: 1.5rem; padding: 1rem; background-color: #2D3748; border: 1px solid #4A5568; border-radius: 0.5rem; font-size: 0.9rem;">
    <h2 style="margin-top: 0; color: #CBD5E0; font-size: 1.2rem;">Submission Details</h2>
    <% if @user %>
      <p style="margin-bottom: 0.5rem; color: #A0AEC0; line-height: 1.5;">
        <strong>User:</strong> <%= render "shared/user_mention", user: @user %>
      </p>
    <% end %>
    <% if @app.airtable_fields["Icon"] %>
      <img src="<%= @app.airtable_fields["Icon"]&.first %>" alt="App Logo" style="width: 100px; height: 100px; border-radius: 50%; margin-bottom: 1rem;">
    <% end %>
    <p style="margin-bottom: 0.5rem; color: #A0AEC0; line-height: 1.5;">
      <strong>App:</strong> <%= @app.airtable_fields["Name"] %>
    </p>
    <p style="margin-bottom: 0.5rem; color: #A0AEC0; line-height: 1.5;">
      <strong>Airtable Link:</strong>
      <%= link_to "View on Airtable", @submission.airtable_url, target: "_blank", style: "color: #60A5FA; text-decoration: none;" %>
    </p>
  </section>

  <section style="margin-bottom: 1.5rem; padding: 1rem; background-color: #2D3748; border: 1px solid #4A5568; border-radius: 0.5rem; font-size: 0.9rem;">
    <h2 style="margin-top: 0; color: #CBD5E0; font-size: 1.2rem;">Related Posts</h2>
    <% if @posts.any? %>
      <% total_duration = @posts.sum { |post| post.airtable_fields["hackatimeTime"]&.to_i || 0 } %>
      <p style="color: #A0AEC0; margin-bottom: 1rem;">
        <strong>Total Duration:</strong> <%= short_time_detailed(total_duration) %>
      </p>
      <ul style="list-style: none; padding: 0; margin: 0;">
        <% @posts.each do |post| %>
          <li style="margin-bottom: 1rem; padding: 1rem; background-color: #1F2937; border: 1px solid #4A5568; border-radius: 0.375rem;">
            <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.5rem;">
              <h3 style="margin: 0; color: #E5E7EB; font-size: 1rem;">
                <%= post.airtable_fields["description"]&.truncate(100) || "Untitled Post" %>
              </h3>
              <div style="display: flex; gap: 0.5rem; align-items: center;">
                <span style="color: #A0AEC0; font-size: 0.75rem;">
                  <%= short_time_simple(post.airtable_fields["hackatimeTime"]&.to_i || 0) %>
                </span>
                <span style="background-color: #374151; color: #E5E7EB; padding: 0.25rem 0.5rem; border-radius: 0.25rem; font-size: 0.75rem;">
                  <%= post.airtable_fields["review_status"] || "No Status" %>
                </span>
              </div>
            </div>
            <div style="display: flex; gap: 0.5rem; margin-top: 0.5rem;">
              <%= link_to "View Post Review", admin_post_review_path(post.airtable_id),
                  style: "display: inline-block; padding: 0.4rem 0.8rem; background-color: #3B82F6; color: white; text-decoration: none; border-radius: 0.25rem; font-size: 0.85rem;" %>
              <%= link_to "View on Airtable", post.airtable_url, target: "_blank",
                  style: "display: inline-block; padding: 0.4rem 0.8rem; background-color: #374151; color: #E5E7EB; text-decoration: none; border-radius: 0.25rem; font-size: 0.85rem;" %>
            </div>
          </li>
        <% end %>
      </ul>
    <% else %>
      <p style="color: #A0AEC0;">No posts found for this submission.</p>
    <% end %>
  </section>
</div>
