
---
import AdminLayout from '../../../layouts/AdminLayout.astro';
import DevStatus from '../../../components/admin/DevStatus.astro';
import PageHeader from '../../../components/admin/PageHeader.astro';
import StatCard from '../../../components/admin/StatCard.astro';

const endpoint = '/api/collections/avatars';
const columns = ['name', 'persona_type', 'tone', 'created_at'];
---

<AdminLayout title="Avatar Intelligence">
  <DevStatus 
    pageStatus="beta" 
    dbStatus="pending"
    apiEndpoints={['GET /api/collections/avatars']}
    missingInfo="Avatars not loading from DB" 
    actionNeeded="Connect to avatars table"
  />
  <div class="grid grid-cols-3 gap-6 mb-8">
    <StatCard icon="🎭" label="Total Avatars" value="0" />
    <StatCard icon="✍️" label="Active" value="0" color="green" />
    <StatCard icon="📊" label="Avg Performance" value="0%" color="blue" />
  </div>

  <!-- Data 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-semibold text-white">All Avatars</h2>
    </div>
    
    <table class="w-full">
      <thead class="bg-graphite border-b border-edge-subtle">
        <tr>
          {columns.map(col => (
            <th class="px-6 py-4 text-left text-sm font-semibold text-gray-300 uppercase tracking-wider">
              {col.replace(/_/g, ' ')}
            </th>
          ))}
          <th class="px-6 py-4 text-right text-sm font-semibold text-gray-300 uppercase">Actions</th>
        </tr>
      </thead>
      <tbody id="table-body" class="divide-y divide-edge-subtle">
        <tr>
          <td colspan={columns.length + 1} class="px-6 py-12 text-center text-gray-400">
            Loading data...
          </td>
        </tr>
      </tbody>
    </table>
  </div>

  <script define:vars={{ endpoint, columns }}>
    async function loadData() {
      try {
        const token = localStorage.getItem('godToken') || 'jmQXoeyxWoBsB7eHzG7FmnH90f22JtaYBxXHoorhfZ-v4tT3VNEr9vvmwHqYHCDoWXHSU4DeZXApCP-Gha-YdA';
        const response = await fetch(endpoint, {
          headers: { 'X-God-Token': token }
        });
        
        if (!response.ok) throw new Error('Failed to fetch');
        
        const result = await response.json();
        const data = result.data || [];
        
        const tbody = document.getElementById('table-body');
        if (data.length === 0) {
          tbody.innerHTML = `
            <tr>
              <td colspan="${columns.length + 1}" class="px-6 py-12 text-center text-gray-400">
                No avatars found. Create your first AI persona!
              </td>
            </tr>
          `;
        } else {
          tbody.innerHTML = data.map(item => `
            <tr class="hover:bg-graphite/50 transition-colors">
              ${columns.map(col => `
                <td class="px-6 py-4 text-sm text-gray-200">
                  ${item[col] || '-'}
                </td>
              `).join('')}
              <td class="px-6 py-4 text-right">
                <button class="text-gold-500 hover:text-gold-400 text-sm font-medium">Edit</button>
              </td>
            </tr>
          `).join('');
        }
      } catch (err) {
        document.getElementById('table-body').innerHTML = `
          <tr>
            <td colspan="${columns.length + 1}" class="px-6 py-12 text-center text-red-400">
              Error loading data: ${err.message}
            </td>
          </tr>
        `;
      }
    }
    
    loadData();
  </script>
</AdminLayout>
