<!doctype html>
<html lang="en">
  {% from "partials/header.html" import header with context %}
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{{ app_name }} - Post Details</title>

    <!-- Favicon -->
    <link rel="icon" href="/static/FenLiu.png" type="image/png" />
    <link rel="apple-touch-icon" href="/static/FenLiu.png" />

    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>

    <!-- Font Awesome -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
    />

    <style>
      .stat-card {
        transition:
          transform 0.2s,
          box-shadow 0.2s;
      }

      .stat-card:hover {
        transform: translateY(-4px);
        box-shadow:
          0 10px 25px -5px rgba(0, 0, 0, 0.1),
          0 10px 10px -5px rgba(0, 0, 0, 0.04);
      }

      .water-wave {
        position: relative;
        overflow: hidden;
      }

      .water-wave::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(59, 130, 246, 0.1),
          transparent
        );
        opacity: 0.3;
      }

      .post-content {
        line-height: 1.6;
        word-wrap: break-word;
      }

      .post-content a {
        color: #3b82f6;
        text-decoration: underline;
      }

      .post-content a:hover {
        color: #1d4ed8;
      }

      .mastodon-post {
        border-left: 3px solid #6366f1;
        transition: all 0.2s ease;
      }

      .mastodon-post:hover {
        border-left-color: #4f46e5;
        background-color: #f8fafc;
      }

      .avatar-placeholder {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: linear-gradient(135deg, #6366f1, #8b5cf6);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: bold;
        font-size: 18px;
      }

      .post-engagement {
        color: #6b7280;
      }

      .post-engagement span {
        transition: color 0.2s ease;
      }

      .post-engagement span:hover {
        color: #4f46e5;
      }

      .boost-count:hover {
        color: #10b981 !important;
      }

      .like-count:hover {
        color: #ef4444 !important;
      }

      .reply-count:hover {
        color: #3b82f6 !important;
      }

      .author-handle {
        color: #6b7280;
      }

      .post-timestamp {
        color: #9ca3af;
      }

      .content-preview {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      .media-attachments {
        margin: 12px 0;
      }

      .media-grid {
        display: grid;
        gap: 8px;
        border-radius: 8px;
        overflow: hidden;
      }

      .media-grid.single {
        grid-template-columns: 1fr;
        max-width: 100%;
      }

      .media-grid.double {
        grid-template-columns: 1fr 1fr;
      }

      .media-grid.triple {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
      }

      .media-grid.multiple {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
      }

      .media-item {
        position: relative;
        background-color: #f3f4f6;
        overflow: hidden;
      }

      .media-grid.single .media-item {
        aspect-ratio: 16/9;
      }

      .media-grid:not(.single) .media-item {
        aspect-ratio: 1;
      }

      .media-grid.triple .media-item:first-child {
        grid-row: span 2;
      }

      .media-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }

      .media-item.video::before {
        content: "▶";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: rgba(0, 0, 0, 0.7);
        color: white;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        z-index: 1;
        pointer-events: none;
      }

      .media-count {
        position: absolute;
        top: 8px;
        right: 8px;
        background: rgba(0, 0, 0, 0.7);
        color: white;
        font-size: 12px;
        padding: 4px 8px;
        border-radius: 12px;
        z-index: 1;
        pointer-events: none;
      }

      .media-description {
        font-size: 13px;
        color: #6b7280;
        margin-top: 6px;
        line-height: 1.4;
        padding: 0 4px;
      }

      .media-item {
        transition: opacity 0.2s ease;
      }

      .media-item:hover {
        opacity: 0.95;
      }

      .spam-score-low {
        background-color: #d1fae5;
        color: #065f46;
      }

      .spam-score-medium {
        background-color: #fef3c7;
        color: #92400e;
      }

      .spam-score-high {
        background-color: #fed7aa;
        color: #c2410c;
      }

      .spam-score-very-high {
        background-color: #fecaca;
        color: #991b1b;
      }
    </style>
  </head>
  <body class="bg-gray-50 min-h-screen">
    <!-- Navigation -->
    {{ header('review') }}

    <!-- Main content -->
    <main class="container mx-auto px-4 py-8">
      <div class="mb-6">
        <a href="/review" class="text-blue-600 hover:text-blue-800">
          <i class="fas fa-arrow-left mr-2"></i>Back to Review
        </a>
      </div>

      <div class="bg-white rounded-lg shadow-lg p-6">
        <h1 class="text-2xl font-bold mb-6">Post Details</h1>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
          <!-- Main content column -->
          <div class="lg:col-span-2">
            <!-- Post content -->
            <div class="bg-gray-50 rounded-lg p-4 mb-6">
              <h2 class="font-bold text-lg mb-2">Content</h2>
              <div class="post-content whitespace-pre-wrap">
                {{ post.content|safe }}
              </div>
            </div>

            <!-- Author and metadata -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
              <div class="bg-blue-50 rounded-lg p-4">
                <h3 class="font-bold text-blue-700 mb-1">Author</h3>
                <p class="font-medium">
                  {{ post.author_display_name if post.author_display_name else
                  post.author_username if post.author_username else 'Unknown' }}
                </p>
                {% if post.author_username %}
                <p class="text-sm text-gray-600">@{{ post.author_username }}</p>
                {% endif %}
              </div>

              <div class="bg-green-50 rounded-lg p-4">
                <h3 class="font-bold text-green-700 mb-1">Instance</h3>
                <p class="font-medium">
                  {{ post.instance if post.instance else 'Unknown' }}
                </p>
              </div>

              <div class="bg-purple-50 rounded-lg p-4">
                <h3 class="font-bold text-purple-700 mb-1">Created</h3>
                <p class="font-medium">
                  {% if post.created_at %} {{ post.created_at.strftime('%B %d,
                  %Y at %H:%M UTC') }} {% else %} Unknown {% endif %}
                </p>
              </div>

              <div class="bg-yellow-50 rounded-lg p-4">
                <h3 class="font-bold text-yellow-700 mb-1">Fetched</h3>
                <p class="font-medium">
                  {% if post.fetched_at %} {{ post.fetched_at.strftime('%B %d,
                  %Y at %H:%M UTC') }} {% else %} Unknown {% endif %}
                </p>
              </div>
            </div>

            <!-- Media attachments -->
            {% if post.media_attachments and post.media_attachments|length > 0
            %}
            <div class="mt-6">
              <h3 class="font-bold text-lg mb-4">
                Media Attachments ({{ post.media_attachments|length }})
              </h3>
              <div class="media-attachments">
                {% set media_count = post.media_attachments|length %} {% set
                display_count = media_count if media_count <= 4 else 4 %} {% if
                display_count == 1 %} {% set grid_class = 'single' %} {% elif
                display_count == 2 %} {% set grid_class = 'double' %} {% elif
                display_count == 3 %} {% set grid_class = 'triple' %} {% else %}
                {% set grid_class = 'multiple' %} {% endif %}

                <div class="media-grid {{ grid_class }}">
                  {% for media in post.media_attachments[:display_count] %}
                  <div
                    class="media-item {{ 'video' if media.type == 'video' else 'image' }}"
                  >
                    {% if media.type == 'image' and media.url %}
                    <img
                      src="{{ media.url }}"
                      alt="{{ media.description if media.description else 'Media attachment' }}"
                      loading="lazy"
                    />
                    {% elif media.type == 'video' %}
                    <div
                      class="w-full h-full flex items-center justify-center bg-gray-800"
                    >
                      <span class="text-white text-sm">Video</span>
                    </div>
                    {% endif %} {% if media.description %}
                    <div class="media-description">{{ media.description }}</div>
                    {% endif %}
                  </div>
                  {% endfor %}
                </div>

                {% if media_count > 4 %}
                <div class="mt-2 text-sm text-gray-500">
                  +{{ media_count - 4 }} more attachment(s)
                </div>
                {% endif %}
              </div>
            </div>
            {% endif %}
          </div>

          <!-- Sidebar column -->
          <div class="space-y-6">
            <!-- Spam analysis -->
            <div class="bg-white border rounded-lg p-4">
              <h3 class="font-bold text-lg mb-3">Spam Analysis</h3>
              <div class="text-center">
                {% if post.spam_score is not none %} {% set spam_score =
                post.spam_score %} {% if spam_score <= 25 %} {% set score_color
                = 'text-green-600' %} {% set score_bg = 'spam-score-low' %} {%
                set level = 'Low' %} {% elif spam_score <= 50 %} {% set
                score_color = 'text-yellow-600' %} {% set score_bg =
                'spam-score-medium' %} {% set level = 'Medium' %} {% elif
                spam_score <= 75 %} {% set score_color = 'text-orange-600' %} {%
                set score_bg = 'spam-score-high' %} {% set level = 'High' %} {%
                else %} {% set score_color = 'text-red-600' %} {% set score_bg =
                'spam-score-very-high' %} {% set level = 'Very High' %} {% endif
                %}

                <div class="{{ score_color }} text-5xl font-bold mb-2">
                  {{ spam_score }}
                </div>
                <div
                  class="{{ score_bg }} inline-block px-3 py-1 rounded-full text-sm font-medium"
                >
                  {{ level }} Risk
                </div>
                <p class="text-gray-600 mt-2">Spam Score (0-100)</p>

                <!-- Score breakdown would go here in a future enhancement -->
                <div class="mt-4 text-sm text-gray-500">
                  <i class="fas fa-info-circle mr-1"></i>
                  Lower scores indicate less spam-like content
                </div>
                {% else %}
                <div class="text-gray-400 text-5xl font-bold mb-2">—</div>
                <div
                  class="bg-gray-100 inline-block px-3 py-1 rounded-full text-sm font-medium text-gray-600"
                >
                  Not Scored
                </div>
                <p class="text-gray-600 mt-2">Spam Score (0-100)</p>
                {% endif %}
              </div>
            </div>

            <!-- Engagement stats -->
            <div class="bg-white border rounded-lg p-4">
              <h3 class="font-bold text-lg mb-3">Engagement</h3>
              <div class="space-y-3">
                <div class="flex justify-between items-center">
                  <span class="text-gray-700">
                    <i class="fas fa-retweet text-green-500 mr-2"></i>
                    Boosts
                  </span>
                  <span class="font-bold text-lg"
                    >{{ post.boosts if post.boosts is not none else 0 }}</span
                  >
                </div>
                <div class="flex justify-between items-center">
                  <span class="text-gray-700">
                    <i class="fas fa-heart text-red-500 mr-2"></i>
                    Likes
                  </span>
                  <span class="font-bold text-lg"
                    >{{ post.likes if post.likes is not none else 0 }}</span
                  >
                </div>
                <div class="flex justify-between items-center">
                  <span class="text-gray-700">
                    <i class="fas fa-reply text-blue-500 mr-2"></i>
                    Replies
                  </span>
                  <span class="font-bold text-lg"
                    >{{ post.replies if post.replies is not none else 0 }}</span
                  >
                </div>
              </div>
            </div>

            <!-- Post status and info -->
            <div class="bg-white border rounded-lg p-4">
              <h3 class="font-bold text-lg mb-3">Post Information</h3>
              <div class="space-y-3">
                <div class="flex justify-between items-center">
                  <span class="text-gray-700">Status</span>
                  <span
                    class="font-medium {% if post.processed %}text-green-600{% else %}text-gray-600{% endif %}"
                  >
                    {% if post.processed %}
                    <i class="fas fa-check-circle mr-1"></i>Processed {% else %}
                    <i class="fas fa-clock mr-1"></i>Unprocessed {% endif %}
                  </span>
                </div>

                <div class="flex justify-between items-center">
                  <span class="text-gray-700">Post ID</span>
                  <span
                    class="font-mono text-sm text-gray-800 truncate max-w-[150px]"
                  >
                    {{ post.post_id if post.post_id else 'N/A' }}
                  </span>
                </div>

                {% if post.stream %}
                <div class="flex justify-between items-center">
                  <span class="text-gray-700">Stream</span>
                  <span class="font-medium text-blue-600">
                    #{{ post.stream.hashtag if post.stream.hashtag else
                    'Unknown' }}
                  </span>
                </div>
                {% endif %} {% if post.url %}
                <div class="mt-4">
                  <a
                    href="{{ post.url }}"
                    target="_blank"
                    rel="noopener noreferrer"
                    class="block w-full bg-blue-600 hover:bg-blue-700 text-white text-center py-3 rounded-lg transition-colors"
                  >
                    <i class="fas fa-external-link-alt mr-2"></i>
                    View Original Post
                  </a>
                </div>
                {% endif %}
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </body>
</html>
