---
/**
 * Factory Command Center Dashboard
 * 
 * The main control panel for the SEO Content Factory.
 * Uses React islands for interactive components.
 */
import BaseLayout from '../../layouts/BaseLayout.astro';
---

<BaseLayout title="Factory Command Center">
  <div class="factory-dashboard">
    <!-- Header -->
    <header class="dashboard-header">
      <div class="header-content">
        <h1>🏭 Factory Command Center</h1>
        <div class="status-badge" id="factoryStatus">
          <span class="pulse"></span>
          <span>IDLE</span>
        </div>
      </div>
    </header>

    <!-- KPI Cards -->
    <section class="kpi-grid" id="kpiCards">
      <div class="kpi-card">
        <div class="kpi-icon">📝</div>
        <div class="kpi-content">
          <span class="kpi-value" id="totalArticles">0</span>
          <span class="kpi-label">Total Articles</span>
        </div>
      </div>
      <div class="kpi-card ghost">
        <div class="kpi-icon">👻</div>
        <div class="kpi-content">
          <span class="kpi-value" id="ghostCount">0</span>
          <span class="kpi-label">Ghost (Hidden)</span>
        </div>
      </div>
      <div class="kpi-card indexed">
        <div class="kpi-icon">🔍</div>
        <div class="kpi-content">
          <span class="kpi-value" id="indexedCount">0</span>
          <span class="kpi-label">Indexed (Live)</span>
        </div>
      </div>
      <div class="kpi-card queue">
        <div class="kpi-icon">⏳</div>
        <div class="kpi-content">
          <span class="kpi-value" id="queueCount">0</span>
          <span class="kpi-label">In Queue</span>
        </div>
      </div>
    </section>

    <!-- Main Grid -->
    <div class="main-grid">
      <!-- Velocity Chart -->
      <section class="panel velocity-panel">
        <h2>📈 Velocity Distribution</h2>
        <div class="chart-container">
          <canvas id="velocityChart"></canvas>
        </div>
        <div class="chart-legend">
          <span class="legend-item"><span class="dot ramp"></span> Ramp Up</span>
          <span class="legend-item"><span class="dot weekend"></span> Weekend Throttle</span>
        </div>
      </section>

      <!-- Active Campaigns -->
      <section class="panel campaigns-panel">
        <h2>🎯 Active Campaigns</h2>
        <div class="campaign-list" id="campaignList">
          <div class="loading-skeleton">Loading campaigns...</div>
        </div>
      </section>

      <!-- Production Queue -->
      <section class="panel queue-panel full-width">
        <div class="panel-header">
          <h2>⚙️ Production Queue</h2>
          <button class="btn-primary" id="newJobBtn">+ New Job</button>
        </div>
        <div class="queue-table-container">
          <table class="queue-table" id="queueTable">
            <thead>
              <tr>
                <th>Status</th>
                <th>Campaign</th>
                <th>Progress</th>
                <th>Velocity</th>
                <th>Created</th>
                <th>Actions</th>
              </tr>
            </thead>
            <tbody id="queueTableBody">
              <tr><td colspan="6" class="loading">Loading queue...</td></tr>
            </tbody>
          </table>
        </div>
      </section>

      <!-- Work Log Terminal -->
      <section class="panel terminal-panel full-width">
        <div class="panel-header">
          <h2>💻 Work Log</h2>
          <button class="btn-ghost" id="clearLog">Clear</button>
        </div>
        <div class="terminal" id="terminal">
          <div class="terminal-line system">[SYSTEM] Factory initialized. Ready for commands.</div>
        </div>
      </section>
    </div>

    <!-- Spintax Preview Modal -->
    <div class="modal" id="spintaxModal">
      <div class="modal-content">
        <div class="modal-header">
          <h3>✏️ Spintax Preview</h3>
          <button class="close-btn" id="closeSpintax">&times;</button>
        </div>
        <div class="spintax-split">
          <div class="spintax-input">
            <label>Raw Spintax</label>
            <textarea id="spintaxInput" placeholder="{Hello|Hi} {World|Friend}...">{`{The best {solar|renewable energy} {service|solution} in {City}, {State}.|{City} homeowners trust us for {premium|top-quality} {solar|clean energy} {installation|systems}.}`}</textarea>
          </div>
          <div class="spintax-output">
            <label>Live Preview</label>
            <div id="spintaxOutput" class="preview-box">Click "Spin" to preview...</div>
            <button class="btn-primary" id="spinBtn">🎲 Spin</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Deploy Confirmation -->
    <div class="modal" id="deployModal">
      <div class="modal-content deploy-modal">
        <h3>🚀 Deploy Campaign</h3>
        <p>You are about to generate <strong id="deployCount">0</strong> articles.</p>
        <div class="deploy-slider">
          <div class="slider-track">
            <div class="slider-thumb" id="deployThumb">
              <span>→</span>
            </div>
            <span class="slider-label">Slide to Deploy</span>
          </div>
        </div>
        <button class="btn-ghost" id="cancelDeploy">Cancel</button>
      </div>
    </div>
  </div>
</BaseLayout>

<style>
  .factory-dashboard {
    min-height: 100vh;
    background: linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 100%);
    color: #e0e0e0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    padding: 20px;
  }

  .dashboard-header {
    margin-bottom: 30px;
  }

  .header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .dashboard-header h1 {
    font-size: 2rem;
    font-weight: 700;
    background: linear-gradient(90deg, #fff, #888);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .status-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
  }

  .pulse {
    width: 8px;
    height: 8px;
    background: #00ff88;
    border-radius: 50%;
    animation: pulse 2s infinite;
  }

  @keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
  }

  /* KPI Cards */
  .kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
  }

  .kpi-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.3s ease;
  }

  .kpi-card:hover {
    background: rgba(255,255,255,0.06);
    transform: translateY(-2px);
  }

  .kpi-card.ghost { border-left: 3px solid #8b5cf6; }
  .kpi-card.indexed { border-left: 3px solid #10b981; }
  .kpi-card.queue { border-left: 3px solid #f59e0b; }

  .kpi-icon {
    font-size: 2rem;
  }

  .kpi-content {
    display: flex;
    flex-direction: column;
  }

  .kpi-value {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
  }

  .kpi-label {
    font-size: 0.85rem;
    color: #888;
  }

  /* Main Grid */
  .main-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .full-width {
    grid-column: 1 / -1;
  }

  .panel {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    padding: 24px;
  }

  .panel h2 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 20px;
    color: #fff;
  }

  .panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }

  .panel-header h2 {
    margin-bottom: 0;
  }

  /* Chart */
  .chart-container {
    height: 200px;
    position: relative;
  }

  .chart-legend {
    display: flex;
    gap: 20px;
    margin-top: 15px;
  }

  .legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: #888;
  }

  .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
  }

  .dot.ramp { background: #3b82f6; }
  .dot.weekend { background: #ef4444; }

  /* Campaign List */
  .campaign-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 250px;
    overflow-y: auto;
  }

  .campaign-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: rgba(255,255,255,0.03);
    border-radius: 10px;
    transition: background 0.2s;
  }

  .campaign-item:hover {
    background: rgba(255,255,255,0.06);
  }

  .campaign-name {
    font-weight: 500;
  }

  .campaign-count {
    font-size: 0.85rem;
    color: #888;
  }

  /* Queue Table */
  .queue-table-container {
    overflow-x: auto;
  }

  .queue-table {
    width: 100%;
    border-collapse: collapse;
  }

  .queue-table th,
  .queue-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }

  .queue-table th {
    color: #888;
    font-weight: 500;
    font-size: 0.85rem;
    text-transform: uppercase;
  }

  .queue-table tr:hover td {
    background: rgba(255,255,255,0.02);
  }

  .status-pill {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
  }

  .status-pill.pending { background: #374151; color: #9ca3af; }
  .status-pill.running { background: #1e3a5f; color: #60a5fa; }
  .status-pill.done { background: #064e3b; color: #34d399; }
  .status-pill.failed { background: #7f1d1d; color: #fca5a5; }

  .progress-bar {
    width: 100px;
    height: 6px;
    background: rgba(255,255,255,0.1);
    border-radius: 3px;
    overflow: hidden;
  }

  .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
    border-radius: 3px;
    transition: width 0.3s ease;
  }

  /* Terminal */
  .terminal {
    background: #0d0d0d;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 16px;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.85rem;
    height: 200px;
    overflow-y: auto;
  }

  .terminal-line {
    padding: 4px 0;
    color: #888;
  }

  .terminal-line.system { color: #10b981; }
  .terminal-line.error { color: #ef4444; }
  .terminal-line.warning { color: #f59e0b; }
  .terminal-line.info { color: #3b82f6; }

  /* Buttons */
  .btn-primary {
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
  }

  .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
  }

  .btn-ghost {
    background: transparent;
    color: #888;
    border: 1px solid rgba(255,255,255,0.1);
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
  }

  .btn-ghost:hover {
    background: rgba(255,255,255,0.05);
    color: #fff;
  }

  /* Modal */
  .modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.8);
    backdrop-filter: blur(4px);
    z-index: 1000;
    align-items: center;
    justify-content: center;
  }

  .modal.active {
    display: flex;
  }

  .modal-content {
    background: #1a1a2e;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    padding: 24px;
    max-width: 800px;
    width: 90%;
  }

  .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }

  .close-btn {
    background: none;
    border: none;
    color: #888;
    font-size: 1.5rem;
    cursor: pointer;
  }

  /* Spintax Preview */
  .spintax-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .spintax-input textarea,
  .preview-box {
    width: 100%;
    height: 200px;
    background: #0d0d0d;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 12px;
    color: #e0e0e0;
    font-family: monospace;
    font-size: 0.9rem;
    resize: none;
  }

  .spintax-input label,
  .spintax-output label {
    display: block;
    margin-bottom: 8px;
    color: #888;
    font-size: 0.85rem;
  }

  .spintax-output {
    display: flex;
    flex-direction: column;
  }

  .spintax-output .btn-primary {
    margin-top: 12px;
    align-self: flex-end;
  }

  /* Deploy Slider */
  .deploy-modal {
    text-align: center;
  }

  .deploy-slider {
    margin: 30px 0;
  }

  .slider-track {
    position: relative;
    height: 60px;
    background: linear-gradient(90deg, #1e3a5f, #3b82f6);
    border-radius: 30px;
    overflow: hidden;
  }

  .slider-thumb {
    position: absolute;
    left: 5px;
    top: 5px;
    width: 50px;
    height: 50px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    cursor: grab;
    transition: left 0.1s;
  }

  .slider-label {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255,255,255,0.7);
    font-weight: 600;
  }

  .loading {
    text-align: center;
    color: #888;
    padding: 40px;
  }
</style>

<script>
  // Initialize Dashboard
  document.addEventListener('DOMContentLoaded', async () => {
    await loadDashboardData();
    initializeChart();
    initializeSpintax();
    initializeDeploySlider();
    startPolling();
  });

  let chartInstance = null;

  async function loadDashboardData() {
    try {
      // Load KPIs
      const [articles, queues, campaigns] = await Promise.all([
        fetch('/api/seo/stats').then(r => r.json()).catch(() => ({ total: 0, ghost: 0, indexed: 0 })),
        fetch('/api/admin/queues').then(r => r.json()).catch(() => ({ queues: [] })),
        fetch('/api/admin/campaigns').then(r => r.json()).catch(() => ({ campaigns: [] }))
      ]);

      // Update KPIs
      document.getElementById('totalArticles').textContent = articles.total || '0';
      document.getElementById('ghostCount').textContent = articles.ghost || '0';
      document.getElementById('indexedCount').textContent = articles.indexed || '0';
      document.getElementById('queueCount').textContent = queues.queues?.filter(q => q.status === 'running').length || '0';

      // Update campaigns list
      const campaignList = document.getElementById('campaignList');
      if (campaigns.campaigns?.length > 0) {
        campaignList.innerHTML = campaigns.campaigns.map(c => `
          <div class="campaign-item">
            <span class="campaign-name">${c.name}</span>
            <span class="campaign-count">${c.article_count || 0} articles</span>
          </div>
        `).join('');
      } else {
        campaignList.innerHTML = '<div class="loading">No active campaigns</div>';
      }

      // Update queue table
      const queueBody = document.getElementById('queueTableBody');
      if (queues.queues?.length > 0) {
        queueBody.innerHTML = queues.queues.map(q => {
          const progress = q.total_requested > 0 ? (q.completed_count / q.total_requested * 100).toFixed(0) : 0;
          return `
            <tr>
              <td><span class="status-pill ${q.status}">${q.status}</span></td>
              <td>${q.campaign_name || 'Unknown'}</td>
              <td>
                <div class="progress-bar"><div class="progress-fill" style="width: ${progress}%"></div></div>
                <span style="font-size: 0.8rem; color: #888; margin-left: 8px;">${progress}%</span>
              </td>
              <td>${q.velocity_mode || 'STEADY'}</td>
              <td>${new Date(q.date_created).toLocaleDateString()}</td>
              <td>
                <button class="btn-ghost" onclick="viewQueue('${q.id}')">View</button>
              </td>
            </tr>
          `;
        }).join('');
      } else {
        queueBody.innerHTML = '<tr><td colspan="6" class="loading">No jobs in queue</td></tr>';
      }

    } catch (err) {
      console.error('Failed to load dashboard:', err);
      addTerminalLine('[ERROR] Failed to load dashboard data', 'error');
    }
  }

  function initializeChart() {
    // Simple canvas chart (no external library needed)
    const canvas = document.getElementById('velocityChart');
    const ctx = canvas.getContext('2d');
    canvas.width = canvas.parentElement.offsetWidth;
    canvas.height = 200;

    // Draw Gaussian curve
    ctx.strokeStyle = '#3b82f6';
    ctx.lineWidth = 2;
    ctx.beginPath();
    
    for (let x = 0; x < canvas.width; x++) {
      const progress = x / canvas.width;
      // Ramp up curve: 0.2 to 1.0
      const weight = 0.2 + (0.8 * progress);
      // Add some noise
      const noise = Math.random() * 0.1;
      const y = canvas.height - ((weight + noise) * canvas.height * 0.8);
      
      if (x === 0) ctx.moveTo(x, y);
      else ctx.lineTo(x, y);
    }
    ctx.stroke();

    // Weekend dips
    ctx.strokeStyle = '#ef4444';
    ctx.lineWidth = 1;
    ctx.setLineDash([5, 5]);
    
    for (let i = 0; i < 7; i++) {
      const x = (canvas.width / 7) * i;
      ctx.beginPath();
      ctx.moveTo(x, 0);
      ctx.lineTo(x, canvas.height);
      ctx.stroke();
    }
  }

  function initializeSpintax() {
    const spinBtn = document.getElementById('spinBtn');
    const input = document.getElementById('spintaxInput');
    const output = document.getElementById('spintaxOutput');

    spinBtn.addEventListener('click', () => {
      const text = input.value;
      const spun = processSpintax(text, {
        City: 'Orlando',
        State: 'Florida',
        Current_Year: '2024'
      });
      output.textContent = spun;
    });
  }

  function processSpintax(text, context) {
    let result = text
      .replace(/\{City\}/gi, context.City)
      .replace(/\{State\}/gi, context.State)
      .replace(/\{Current_Year\}/gi, context.Current_Year);

    let iterations = 50;
    while (result.includes('{') && iterations > 0) {
      result = result.replace(/\{([^{}]+)\}/g, (_, opts) => {
        const choices = opts.split('|');
        return choices[Math.floor(Math.random() * choices.length)];
      });
      iterations--;
    }
    return result;
  }

  function initializeDeploySlider() {
    const thumb = document.getElementById('deployThumb');
    const track = thumb.parentElement;
    let isDragging = false;

    thumb.addEventListener('mousedown', () => isDragging = true);
    document.addEventListener('mouseup', () => {
      if (isDragging) {
        const rect = track.getBoundingClientRect();
        const thumbPos = parseInt(thumb.style.left || '5');
        if (thumbPos > rect.width * 0.8) {
          // Deploy!
          addTerminalLine('[SYSTEM] DEPLOYMENT INITIATED! 🚀', 'system');
          document.getElementById('deployModal').classList.remove('active');
        }
        thumb.style.left = '5px';
      }
      isDragging = false;
    });

    document.addEventListener('mousemove', (e) => {
      if (!isDragging) return;
      const rect = track.getBoundingClientRect();
      let x = e.clientX - rect.left - 25;
      x = Math.max(5, Math.min(x, rect.width - 55));
      thumb.style.left = x + 'px';
    });
  }

  function addTerminalLine(text, type = 'info') {
    const terminal = document.getElementById('terminal');
    const line = document.createElement('div');
    line.className = `terminal-line ${type}`;
    line.textContent = `[${new Date().toLocaleTimeString()}] ${text}`;
    terminal.appendChild(line);
    terminal.scrollTop = terminal.scrollHeight;
  }

  function startPolling() {
    setInterval(() => {
      loadDashboardData();
    }, 10000); // Refresh every 10 seconds
  }

  // Modal handlers
  document.getElementById('newJobBtn')?.addEventListener('click', () => {
    document.getElementById('deployModal').classList.add('active');
  });

  document.getElementById('cancelDeploy')?.addEventListener('click', () => {
    document.getElementById('deployModal').classList.remove('active');
  });

  document.getElementById('clearLog')?.addEventListener('click', () => {
    document.getElementById('terminal').innerHTML = '<div class="terminal-line system">[SYSTEM] Log cleared.</div>';
  });

  window.viewQueue = function(id) {
    addTerminalLine(`Viewing queue: ${id}`, 'info');
  };
</script>