---
import AdminLayout from '../../layouts/AdminLayout.astro';
---

<AdminLayout title="Generated Articles">
  <div class="space-y-8">
    <!-- Header -->
    <div>
      <h1 class="text-4xl font-bold text-gold-500 mb-2">📰 Generated Articles</h1>
      <p class="text-gray-400">View all AI-generated content from campaigns</p>
    </div>

    <!-- Stats -->
    <div class="grid grid-cols-4 gap-4">
      <div class="bg-titanium border border-edge-normal rounded-xl p-6">
        <div class="text-sm text-gray-400 mb-1">Total Generated</div>
        <div id="statTotal" class="text-3xl font-bold text-gold-500">0</div>
      </div>
      <div class="bg-titanium border border-edge-normal rounded-xl p-6">
        <div class="text-sm text-gray-400 mb-1">Published</div>
        <div id="statPublished" class="text-3xl font-bold text-green-400">0</div>
      </div>
      <div class="bg-titanium border border-edge-normal rounded-xl p-6">
        <div class="text-sm text-gray-400 mb-1">Drafts</div>
        <div id="statDrafts" class="text-3xl font-bold text-blue-400">0</div>
      </div>
      <div class="bg-titanium border border-edge-normal rounded-xl p-6">
        <div class="text-sm text-gray-400 mb-1">Campaigns</div>
        <div id="statCampaigns" class="text-3xl font-bold text-purple-400">0</div>
      </div>
    </div>

    <!-- Articles Table -->
    <div class="bg-titanium border border-edge-normal rounded-xl overflow-hidden">
      <div class="p-6 border-b border-edge-subtle">
        <h2 class="text-xl font-bold text-gold-500">Generated Content</h2>
      </div>
      
      <div class="overflow-x-auto">
        <table class="w-full">
          <thead class="bg-obsidian border-b border-edge-subtle">
            <tr>
              <th class="px-6 py-4 text-left text-sm font-semibold text-gray-300">Title</th>
              <th class="px-6 py-4 text-left text-sm font-semibold text-gray-300">Campaign</th>
              <th class="px-6 py-4 text-left text-sm font-semibold text-gray-300">Location</th>
              <th class="px-6 py-4 text-left text-sm font-semibold text-gray-300">Status</th>
              <th class="px-6 py-4 text-left text-sm font-semibold text-gray-300">Created</th>
              <th class="px-6 py-4 text-left text-sm font-semibold text-gray-300">Actions</th>
            </tr>
          </thead>
          <tbody id="articlesTable" class="divide-y divide-edge-subtle">
            <tr>
              <td colspan="6" class="px-6 py-12 text-center text-gray-500">
                <div class="text-4xl mb-2">📝</div>
                <p>No generated articles yet. Create a campaign to get started.</p>
                <a href="/admin/content-generator" class="inline-block mt-4 px-6 py-2 bg-gold-500 hover:bg-gold-600 text-obsidian font-semibold rounded-lg transition-all">
                  Create Campaign
                </a>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <!-- Implementation Note -->
    <div class="bg-blue-500/10 border border-blue-500/30 rounded-xl p-6">
      <div class="flex items-start gap-4">
        <div class="text-2xl">ℹ️</div>
        <div>
          <h3 class="font-semibold text-blue-400 mb-2">Database Connection Required</h3>
          <p class="text-sm text-gray-400 mb-3">
            This page will display posts from the <code class="px-2 py-1 bg-obsidian rounded text-gold-500">posts</code> table 
            filtered by generated content (linked via <code class="px-2 py-1 bg-obsidian rounded text-gold-500">variation_registry</code>).
          </p>
          <p class="text-sm text-gray-400">
            <strong>API Endpoint:</strong> <code class="px-2 py-1 bg-obsidian rounded text-gold-500">GET /api/posts?type=generated</code>
          </p>
        </div>
      </div>
    </div>
  </div>
</AdminLayout>

<script>
  // Placeholder for future DB connection
  async function loadGeneratedArticles() {
    try {
      const response = await fetch('/api/posts?type=generated');
      if (response.ok) {
        const data = await response.json();
        // Update UI with real data
      }
    } catch (err) {
      console.log('API not yet implemented');
    }
  }
  
  loadGeneratedArticles();
</script>
