<?php ?><!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <title>Social Media Manager (Phase 3)</title>

  <link rel="manifest" href="manifest.webmanifest">
  <meta name="theme-color" content="#0b1220">
  <link rel="icon" href="assets/icons/icon-192.png">
  <link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
  <header class="topbar">
    <div class="brand">
      <div class="logo">SMM</div>
      <div>
        <div class="title">Social Media Manager</div>
        <div class="subtitle">Phase 3 — Bulk Import + Queue + Publisher (PWA)</div>
      </div>
    </div>
    <div class="actions">
      <button id="btnInstall" class="btn ghost" style="display:none;">Install App</button>
      <a class="btn ghost" href="../api/crud.php?action=ping" target="_blank" rel="noopener">API Ping</a>
    </div>
  </header>

  <main class="layout">
    <nav class="sidebar">
      <button class="navitem active" data-tab="drafts">Drafts</button>
      <button class="navitem" data-tab="queue">Queue</button>
      <button class="navitem" data-tab="publisher">Publisher</button>
      <button class="navitem" data-tab="sharepacks">Share Packs</button>
      <button class="navitem" data-tab="settings">Settings</button>
      <button class="navitem" data-tab="bulk">Bulk Import</button>
      <button class="navitem" data-tab="sites">Sites</button>
      <button class="navitem" data-tab="tools">Tools</button>
      <button class="navbtn" data-tab="accounts">Accounts</button>
      <button class="navbtn" data-tab="cron">Cron</button>
      <button class="navitem" data-tab="agents">Agents</button>
      <button class="navitem" data-tab="router">Router</button>
      <button class="navitem" data-tab="generator">Draft Generator</button>
      <button class="navitem" data-tab="jacai">JacAI</button>
      <button class="navitem" data-tab="about">About</button>
    </nav>

    <section class="content">

      <!-- Drafts -->
      <div class="tab active" id="tab-drafts">
        <div class="row">
          <h2>Drafts</h2><div class="spacer"></div>
          <button class="btn" id="btnNewDraft">New Draft</button>
        </div>

        <div class="filters">
          <input id="draftSearch" class="input" placeholder="Search title or slug..." />
          <select id="draftStatus" class="input">
            <option value="">All statuses</option>
            <option value="draft">draft</option>
            <option value="queued">queued</option>
            <option value="published">published</option>
            <option value="archived">archived</option>
          </select>
          <button class="btn ghost" id="btnRefreshDrafts">Refresh</button>
        </div>

        <div id="draftList" class="list"></div>
      </div>

      <!-- Queue -->
      <div class="tab" id="tab-queue">
        <div class="row">
          <h2>Queue</h2><div class="spacer"></div>
          <button class="btn ghost" id="btnRefreshQueue">Refresh</button>
        </div>
        <p class="muted">Queued drafts have a <code>publish_at</code> time. Publisher can publish “due” items with one click (or via cron).</p>
        <div id="queueList" class="list"></div>
      </div>

      <!-- Publisher -->
      <div class="tab" id="tab-publisher">
        <div class="row">
          <h2>Publisher</h2><div class="spacer"></div>
          <button class="btn" id="btnPublishDue">Publish Due Now</button>
        </div>
        <div class="card">
          <p class="muted">This will publish up to 50 queued items where <code>publish_at &lt;= now</code>.</p>
          <div id="publishOutput" class="muted"></div>
        </div>

        <div class="card" style="margin-top:12px;">
          <h3 style="margin:0 0 8px 0;">Cron setup (cPanel)</h3>
          <p class="muted">Add a cron job that hits this URL every 5–15 minutes:</p>
          <code id="cronUrl" class="codeblock"></code>
        </div>
      </div>

      <!-- Bulk Import -->
      <div class="tab" id="tab-bulk">
        <div class="row">
          <h2>Bulk Import</h2><div class="spacer"></div>
          <button class="btn" id="btnBulkImport">Import</button>
        </div>
        <p class="muted">Paste multiple posts using this format:</p>
        <pre class="codeblock">### Title 1
Body…
### Title 2
Body…</pre>
        <textarea id="bulkText" class="input textarea" rows="12" placeholder="### Title 1&#10;Body…&#10;### Title 2&#10;Body…"></textarea>
        <div id="bulkOutput" class="muted" style="margin-top:10px;"></div>
      </div>

      <!-- Sites -->
      <div class="tab" id="tab-sites">
        <div class="row">
          <h2>Sites</h2><div class="spacer"></div>
          <button class="btn" id="btnNewSite">Add Site</button>
        </div>
        <p class="muted">For publishing, <b>publish_dir</b> and <b>posts_index_path</b> should be absolute server paths (cPanel file paths).</p>
        <div id="siteList" class="list"></div>
      </div>

      <!-- Tools -->
      <div class="tab" id="tab-tools">
        <div class="row">
          <h2>Tools</h2><div class="spacer"></div>
          <button class="btn" id="btnNewTool">Add Tool</button>
        </div>
        <div id="toolList" class="list"></div>
      </div>

      <!-- Agents -->
      <div class="tab" id="tab-agents">
        <div class="row">
          <h2>Agents</h2><div class="spacer"></div>
          <button class="btn" id="btnNewAgent">Add Agent</button>
        </div>
        <div id="agentList" class="list"></div>
      </div>

      <!-- Router -->
      <div class="tab" id="tab-router">
        <div class="row">
          <h2>Router (Demo)</h2><div class="spacer"></div>
          <button class="btn" id="btnRoute">Route</button>
        </div>
        <textarea id="routeText" class="input textarea" rows="6" placeholder="Example: write a blog post about ... OR generate tags/meta for article 12 OR publish queued posts"></textarea>
        <div id="routeOutput" class="muted" style="margin-top:10px;"></div>
      </div>

      <!-- Generator -->
      <div class="tab" id="tab-generator">
        <div class="row">
          <h2>Draft Generator</h2><div class="spacer"></div>
          <span id="genStatus" class="pill">Checking…</span>
        </div>

        <div class="card">
          <label class="label">Topic / prompt</label>
          <textarea id="genPrompt" class="input textarea" rows="5" placeholder="Example: Write a 1200-word blog post about gutter maintenance tips for Florida homeowners."></textarea>

          <div class="grid">
            <div>
              <label class="label">Tone</label>
              <input id="genTone" class="input" value="friendly, confident, helpful"/>
            </div>
            <div>
              <label class="label">Word count</label>
              <input id="genWords" class="input" type="number" min="300" max="4000" value="1200"/>
            </div>
          </div>

          <div class="row">
            <button class="btn" id="btnGenerate">Generate Draft</button>
            <div class="spacer"></div>
            <span class="muted">Requires OpenAI key in <code>app/config.php</code></span>
          </div>

          <div id="genOutput" class="muted" style="margin-top:10px;"></div>
        </div>
      </div>

      
      <div class="tab" id="tab-jacai">
        <div class="row">
          <h2>JacAI Console</h2><div class="spacer"></div>
          <button class="btn ghost" id="btnJacHelp">Help</button>
        </div>
        <p class="muted">Type commands like: <code>write post about track training</code>, <code>publish latest</code>, <code>make share pack for latest</code>.
        Voice: use the Mic button (if supported) and Speak to read replies aloud.</p>
        <div class="card">
          <div id="jacChat" class="chat"></div>
          <div class="row" style="margin-top:10px; align-items:flex-end;">
            <textarea id="jacInput" class="input" rows="3" placeholder="Say: write post about ..."></textarea>
            <div style="display:flex; gap:8px; flex-direction:column;">
              <button class="btn" id="btnJacSend">Send</button>
              <button class="btn ghost" id="btnJacMic">🎙 Mic</button>
              <button class="btn ghost" id="btnJacSpeak">🔊 Speak</button>
            </div>
          </div>
          <div class="row" style="margin-top:10px;">
            <button class="btn ghost" data-jac-quick="write post about daily sports picks">Quick: Write</button>
            <button class="btn ghost" data-jac-quick="publish latest">Quick: Publish</button>
            <button class="btn ghost" data-jac-quick="make share pack for latest">Quick: Share Pack</button>
            <div class="spacer"></div>
            <span class="pill" id="jacVoiceStatus">Voice: idle</span>
          </div>
        </div>
      </div>

      <div class="tab" id="tab-sharepacks">
        <div class="row">
          <h2>Share Packs</h2><div class="spacer"></div>
          <button class="btn ghost" id="btnRefreshShare">Refresh</button>
        </div>
        <p class="muted">Share Packs are auto-created after a blog post is published (or via cron). Copy the ready-to-post text for your social pages.</p>
        <div id="shareList" class="list"></div>
      </div>

      <div class="tab" id="tab-settings">
        <div class="row">
          <h2>Settings</h2><div class="spacer"></div>
          <button class="btn" id="btnSaveSettings">Save</button>
        </div>
        <div class="card">
          <label class="label">Auto-create Share Pack after publish</label>
          <select id="setAutoShare" class="input">
            <option value="1">ON</option>
            <option value="0">OFF</option>
          </select>

          <label class="label" style="margin-top:12px;">Default platforms (comma separated)</label>
          <input id="setPlatforms" class="input" placeholder="facebook, instagram, tiktok, pinterest"/>

          <p class="muted" style="margin-top:10px;">
            Cron endpoint (optional): <code id="cronShareUrl" class="codeblock"></code>
          </p>
        </div>
      </div>


<div class="tab" id="tab-accounts">
  <div class="card">
    <h2>Accounts (Phase 9)</h2>
    <p class="muted">Add platform accounts now so you can automate later. Phase 9 supports manual token paste + provider settings storage (OAuth framework). Posting adapters come next phase.</p>
    <div class="grid2">
      <div>
        <h3>Accounts</h3>
        <div class="row">
          <button class="btn" id="btnAccountAdd">Add Account</button>
          <button class="btn ghost" id="btnAccountsRefresh">Refresh</button>
        </div>
        <div id="accountsList" class="list"></div>
      </div>
      <div>
        <h3>OAuth Providers</h3>
        <div class="row">
          <button class="btn" id="btnProviderAdd">Add Provider</button>
          <button class="btn ghost" id="btnProvidersRefresh">Refresh</button>
        </div>
        <div id="providersList" class="list"></div>
        <p class="muted" style="margin-top:10px">Connect/refresh flows will be added next phase. For now paste tokens into Accounts.</p>
      </div>
    </div>
  </div>
</div>

<div class="tab" id="tab-cron">
  <div class="card">
    <h2>Cron Queue (Phase 9)</h2>
    <p class="muted">Queue jobs for automation (publish_site, oauth_post). You will run cron.php from cPanel cron.</p>
    <div class="row">
      <button class="btn" id="btnCronAdd">Enqueue Job</button>
      <button class="btn ghost" id="btnCronRefresh">Refresh</button>
    </div>
    <div id="cronList" class="list"></div>
  </div>
</div>

<div class="tab" id="tab-about">

        <div class="card"><div class="muted">Build: <a href="../public/version.txt" target="_blank" rel="noopener">version.txt</a></div></div>
        <h2>About</h2>
        <div class="card">
          <p>Phase 3 adds publishing: bulk import → schedule → publish to cPanel folders + update posts.json.</p>
          <ul>
            <li>✅ Bulk import multiple drafts</li>
            <li>✅ Queue tab + schedule date/time</li>
            <li>✅ Publish Now / Publish Due</li>
            <li>✅ posts.json updater</li>
            <li>✅ PWA installable</li>
          </ul>
        </div>
      </div>
    </section>
  </main>

  <div id="modal" class="modal hidden">
    <div class="modal-card">
      <div class="modal-head">
        <div id="modalTitle" class="modal-title">Edit</div>
        <button class="btn ghost" id="modalClose">Close</button>
      </div>
      <div id="modalBody" class="modal-body"></div>
      <div class="modal-foot">
        <button class="btn danger" id="modalDelete" style="display:none;">Delete</button>
        <div class="spacer"></div>
        <button class="btn ghost" id="modalCancel">Cancel</button>
        <button class="btn" id="modalSave">Save</button>
      </div>
    </div>
  </div>

  <script src="assets/js/app.js?v=agent2"></script>
  <script>
    if ("serviceWorker" in navigator) navigator.serviceWorker.register("service-worker.js").catch(()=>{});
  </script>
</body>
</html>
