<%= page_title "#{@remote_feed.name}" %>

<div id="<%= dom_id @remote_feed %>">
  <!-- Remote Feed Details Card -->
  <div class="card mb-6">
    <div class="card-body">
      <div class="border-b border-neutral-200 pb-4 mb-6">
        <div class="flex flex-col sm:flex-row gap-4 justify-between items-start sm:items-center">
          <div>
            <h1 class="text-h2 text-neutral-900"><%= @remote_feed.name %></h1>
          </div>
          <div class="flex gap-3">
            <% if policy(@remote_feed).refresh? %>
              <%= link_to "Refresh Feed", refresh_remote_feed_path(@remote_feed), class: "btn btn-secondary" %>
            <% end %>
            <% if policy(@remote_feed).edit? %>
              <%= link_to "Edit Remote Feed", edit_remote_feed_path(@remote_feed), class: "btn btn-primary" %>
            <% end %>
          </div>
        </div>
      </div>

      <dl class="space-y-6">
        <!-- Description -->
        <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
          <dt class="text-body font-medium text-neutral-700">Description</dt>
          <dd class="text-body text-neutral-900 sm:col-span-2">
            <%= @remote_feed.description.present? ? @remote_feed.description : "No description provided" %>
          </dd>
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
          <dt class="text-body font-medium text-neutral-700">Managers</dt>
          <dd class="text-body text-neutral-900 sm:col-span-2">
            <%= link_to @remote_feed.group.name, @remote_feed.group %>
          </dd>
        </div>

        <!-- Remote URL (only visible to editors, may contain sensitive keys) -->
        <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
          <dt class="text-body font-medium text-neutral-700">Remote Feed URL</dt>
          <dd class="text-body text-neutral-900 sm:col-span-2">
            <% if policy(@remote_feed).permitted_attributes_for_show.include?(:url) %>
              <div class="flex items-center gap-2">
                <code class="px-2 py-1 bg-neutral-100 text-neutral-900 rounded text-caption font-mono flex-1">
                  <%= @remote_feed.url %>
                </code>
              </div>
            <% else %>
              <code class="px-2 py-1 bg-neutral-100 text-neutral-500 rounded text-caption font-mono">
                ••••••••••••••••
              </code>
            <% end %>
          </dd>
        </div>

        <!-- Last Refreshed -->
        <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
          <dt class="text-body font-medium text-neutral-700">Last Refreshed</dt>
          <dd class="text-body text-neutral-900 sm:col-span-2">
            <% if @remote_feed.last_refreshed %>
              <time datetime="<%= @remote_feed.last_refreshed.iso8601 %>" title="<%= @remote_feed.last_refreshed.to_fs(:long) %>">
                <%= time_ago_in_words(@remote_feed.last_refreshed) %> ago
              </time>
            <% else %>
              <span class="text-neutral-500">Never</span>
            <% end %>
          </dd>
        </div>
      </dl>
    </div>
  </div>

  <!-- Generated Content Section -->
  <div class="card mb-6">
    <div class="card-body">
      <div class="border-b border-neutral-200 pb-4 mb-6">
        <div class="flex items-center justify-between">
          <h2 class="text-h3 text-neutral-900">Generated Content</h2>
          <span class="text-caption text-neutral-700">
            <%= pluralize(@remote_feed.content.count, 'item') %>
          </span>
        </div>
      </div>

      <% unless @remote_feed.content.exists? %>
        <div class="text-center py-12">
          <div class="text-neutral-500 mb-4">
            <svg class="mx-auto h-12 w-12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
            </svg>
          </div>
          <h3 class="text-body font-medium text-neutral-900 mb-2">No content available</h3>
          <p class="text-body text-neutral-700 mb-6">This feed has no content yet. Try refreshing the feed to import content from the remote source.</p>
          <% if policy(@remote_feed).refresh? %>
            <%= link_to "Refresh Feed Now", refresh_remote_feed_path(@remote_feed), class: "btn btn-primary" %>
          <% end %>
        </div>
      <% else %>
        <%= render partial: "contents/grid", locals: {contents: @remote_feed.content} %>
      <% end %>
    </div>
  </div>

  <!-- Actions -->
  <div class="card">
    <div class="card-body">
      <div class="flex flex-col sm:flex-row gap-6 justify-between items-start sm:items-center">
        <div class="flex flex-col sm:flex-row gap-4">
          <%= link_to "Back to Feeds", feeds_path, class: "btn btn-secondary" %>
        </div>

        <% if policy(@remote_feed).destroy? %>
          <div class="flex-shrink-0">
            <%= button_to "Delete this Remote Feed", remote_feed_path(@remote_feed),
                method: :delete,
                class: "btn btn-danger",
                form_class: "inline-block",
                form: { data: {
                  turbo_confirm: "Are you sure you want to delete this remote feed? This action cannot be undone."
                } } %>
          </div>
        <% end %>
      </div>
    </div>
  </div>
</div>
