F-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Arion Scraper</title>
<style>
  * { margin:0; padding:0; box-sizing:border-box; }
  body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background:#f8fafc; color:#1e293b; }
  .container { max-width:1400px; margin:0 auto; padding:24px 32px; }
  .header { display:flex; justify-content:space-between; align-items:center; margin-bottom:28px; padding-bottom:20px; border-bottom:1px solid #e2e8f0; }
  h1 { font-size:22px; color:#0f172a; font-weight:700; letter-spacing:-0.3px; }
  h1 span { color:#0284c7; }
  .header-actions { display:flex; gap:10px; align-items:center; }
  .header-brand { display:flex; align-items:center; gap:14px; }
  .header-brand .logo-icon { font-size:26px; line-height:1; background:linear-gradient(135deg,#0284c7,#38bdf8); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
  .header-brand .brand-sub { font-size:9px; color:#94a3b8; letter-spacing:1.5px; text-transform:uppercase; margin-top:2px; font-weight:500; }
  .header-brand .brand-sub span { color:#0284c7; font-weight:600; }
  .stats { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-bottom:28px; }
  .stat-card { background:#fff; border:1px solid #e2e8f0; border-radius:12px; padding:18px 20px; box-shadow:0 1px 3px rgba(0,0,0,0.04); }
  .stat-card .label { font-size:10px; color:#94a3b8; text-transform:uppercase; letter-spacing:1.2px; font-weight:600; }
  .stat-card .value { font-size:26px; font-weight:800; color:#0f172a; margin-top:6px; letter-spacing:-0.5px; }
  .stat-card .sub { font-size:11px; color:#94a3b8; margin-top:3px; }
  .tabs { display:flex; gap:2px; margin-bottom:20px; border-bottom:2px solid #e2e8f0; padding-bottom:0; flex-wrap:wrap; }
  .tab { padding:10px 20px; cursor:pointer; font-size:13px; color:#64748b; background:transparent; border:none; transition:all .2s; font-weight:500; border-bottom:2px solid transparent; margin-bottom:-2px; }
  .tab:hover { color:#0284c7; }
  .tab.active { color:#0284c7; border-bottom-color:#0284c7; font-weight:600; }
  .panel { display:none; }
  .panel.active { display:block; }
  .card { background:#fff; border:1px solid #e2e8f0; border-radius:12px; padding:24px; margin-bottom:16px; box-shadow:0 1px 3px rgba(0,0,0,0.04); }
  .card h2 { font-size:15px; margin-bottom:18px; color:#0f172a; font-weight:600; }
  .form-row { display:flex; gap:14px; margin-bottom:14px; align-items:end; }
  .form-group { flex:1; }
  .form-group label { display:block; font-size:11px; color:#64748b; margin-bottom:5px; text-transform:uppercase; letter-spacing:0.5px; font-weight:600; }
  input, textarea, select { width:100%; padding:10px 14px; background:#fff; border:1px solid #cbd5e1; border-radius:8px; color:#1e293b; font-size:13px; font-family:inherit; transition:border-color .2s,box-shadow .2s; }
  input:focus, textarea:focus, select:focus { outline:none; border-color:#0284c7; box-shadow:0 0 0 3px rgba(2,132,199,0.1); }
  input::placeholder, textarea::placeholder { color:#94a3b8; }
  textarea { resize:vertical; min-height:120px; font-family:'Fira Code',monospace,inherit; font-size:12px; }
  .btn { padding:8px 18px; border:none; border-radius:8px; cursor:pointer; font-size:13px; font-weight:600; transition:all .15s; }
  .btn-primary { background:#0284c7; color:#fff; }
  .btn-primary:hover { background:#0369a1; box-shadow:0 2px 8px rgba(2,132,199,0.25); }
  .btn-danger { background:#ef4444; color:#fff; }
  .btn-danger:hover { background:#dc2626; }
  .btn-secondary { background:#f1f5f9; color:#475569; border:1px solid #e2e8f0; }
  .btn-secondary:hover { background:#e2e8f0; }
  .btn-success { background:#059669; color:#fff; }
  .btn-success:hover { background:#047857; }
  .btn-sm { padding:5px 12px; font-size:11px; }
  table { width:100%; border-collapse:separate; border-spacing:0; }
  th { text-align:left; padding:10px 12px; font-size:10px; color:#64748b; text-transform:uppercase; letter-spacing:0.8px; font-weight:700; border-bottom:2px solid #e2e8f0; background:#f8fafc; }
  th:first-child { border-radius:8px 0 0 0; }
  th:last-child { border-radius:0 8px 0 0; }
  td { padding:12px; font-size:13px; border-bottom:1px solid #f1f5f9; }
  tr:hover { background:#f8fafc; }
  .badge { padding:3px 10px; border-radius:20px; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; }
  .badge-active { background:#d1fae5; color:#065f46; }
  .badge-partial { background:#fef3c7; color:#b45309; }
  .badge-queued { background:#f1f5f9; color:#64748b; }
  .badge-completed { background:#d1fae5; color:#065f46; }
  .badge-inactive,.badge-error,.badge-disabled { background:#fee2e2; color:#dc2626; }
  .badge-suspended { background:#fee2e2; color:#dc2626; }
  .badge-cookie_expired { background:#fff7ed; color:#c2410c; }
  .badge-verifying { background:#dbeafe; color:#1d4ed8; }
  .badge-running,.badge-pending,.badge-planning { background:#dbeafe; color:#1d4ed8; }
  .badge-paused { background:#fef3c7; color:#b45309; }
  .badge-cancelled { background:#f1f5f9; color:#64748b; }
  .badge-invited { background:#ede9fe; color:#7c3aed; }
  .badge-admin { background:#fee2e2; color:#dc2626; }
  .badge-manager { background:#dbeafe; color:#1d4ed8; }
  .badge-viewer { background:#f1f5f9; color:#64748b; }
  .empty { text-align:center; padding:48px; color:#94a3b8; font-size:14px; }
  .pagination { display:flex; justify-content:center; gap:6px; margin-top:16px; }
  .toast { position:fixed; bottom:20px; right:20px; padding:12px 24px; border-radius:10px; background:#0f172a; color:#fff; font-size:13px; z-index:999; display:none; box-shadow:0 8px 24px rgba(0,0,0,0.15); }
  .grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .modal-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(15,23,42,0.5); backdrop-filter:blur(4px); z-index:1000; display:flex; align-items:center; justify-content:center; }
  .modal-box { background:#fff; border:1px solid #e2e8f0; border-radius:16px; padding:32px; min-width:400px; max-width:500px; box-shadow:0 20px 60px rgba(0,0,0,0.15); }
  .modal-box h2 { color:#0f172a; font-size:18px; margin-bottom:16px; }
  .modal-box .modal-email { color:#0284c7; font-size:14px; margin-bottom:16px; font-weight:500; }
  .cookie-badge { display:inline-block; padding:3px 8px; border-radius:20px; font-size:10px; font-weight:600; }
  .cookie-badge-yes { background:#d1fae5; color:#065f46; }
  .cookie-badge-no { background:#f1f5f9; color:#94a3b8; }
  .login-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:linear-gradient(135deg,#f0f9ff 0%,#e0f2fe 50%,#f8fafc 100%); z-index:9999; display:flex; align-items:center; justify-content:center; }
  .login-box { background:#fff; border:1px solid #e2e8f0; border-radius:20px; padding:48px 40px; width:420px; text-align:center; box-shadow:0 20px 60px rgba(0,0,0,0.08); }
  .login-box .logo-icon { font-size:44px; margin-bottom:12px; background:linear-gradient(135deg,#0284c7,#38bdf8); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
  .login-box h1 { margin-bottom:8px; font-size:24px; }
  .login-box p { color:#64748b; font-size:13px; margin-bottom:28px; }
  .login-box .form-group { text-align:left; margin-bottom:16px; }
  .login-box .btn { width:100%; padding:14px; font-size:15px; margin-top:8px; border-radius:10px; }
  .login-error { color:#ef4444; font-size:12px; margin-top:10px; display:none; font-weight:500; }
  .brandmark { text-align:center; margin-top:28px; font-size:9px; color:#94a3b8; letter-spacing:2px; text-transform:uppercase; font-weight:500; }
  .brandmark span { color:#0284c7; font-weight:700; }
  .invite-link-box { background:#f0f9ff; border:1px solid #bae6fd; border-radius:8px; padding:14px; margin-top:12px; word-break:break-all; font-family:monospace; font-size:12px; color:#0284c7; cursor:pointer; transition:background .15s; }
  .invite-link-box:hover { background:#e0f2fe; }
  .user-greeting { font-size:13px; color:#64748b; }
  .user-greeting b { color:#0f172a; }
  .role-badge-inline { font-size:10px; padding:2px 8px; border-radius:20px; font-weight:600; text-transform:uppercase; margin-left:6px; letter-spacing:0.3px; }
  @keyframes spin { to { transform:rotate(360deg) } }
</style>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
</head>
<body>

<!-- LOGIN / SETUP / INVITE OVERLAY -->
<div class="login-overlay" id="login-overlay">
  <div class="login-box">
    <div class="logo-icon">&#9889;</div>
    <h1>Arion <span>Scraper</span></h1>

    <!-- SETUP FORM (first admin) -->
    <div id="setup-form" style="display:none">
      <p>Create your admin account to get started</p>
      <div class="form-group"><label>Full Name</label><input id="setup-name" placeholder="Your Name"></div>
      <div class="form-group"><label>Email</label><input id="setup-email" type="email" placeholder="admin@company.com"></div>
      <div class="form-group"><label>Password</label><input id="setup-pass" type="password" placeholder="Min 6 characters"></div>
      <button class="btn btn-primary" onclick="doSetup()">Create Admin Account</button>
      <div class="login-error" id="setup-error"></div>
    </div>

    <!-- LOGIN FORM -->
    <div id="login-form" style="display:none">
      <p>Sign in to continue</p>
      <div class="form-group"><label>Email</label><input id="login-email" type="email" placeholder="you@company.com" onkeydown="if(event.key==='Enter')document.getElementById('login-pass').focus()"></div>
      <div class="form-group"><label>Password</label><input id="login-pass" type="password" placeholder="Password" onkeydown="if(event.key==='Enter')doLogin()"></div>
      <button class="btn btn-primary" onclick="doLogin()">Sign In</button>
      <div class="login-error" id="login-error"></div>
    </div>

    <!-- INVITE FORM -->
    <div id="invite-form" style="display:none">
      <p>You've been invited! Set your password to join.</p>
      <div class="form-group"><label>Email</label><input id="invite-email" disabled style="color:#0284c7;font-weight:500"></div>
      <div class="form-group"><label>Your Name</label><input id="invite-name" placeholder="Your Name"></div>
      <div class="form-group"><label>Set Password</label><input id="invite-pass" type="password" placeholder="Min 6 characters" onkeydown="if(event.key==='Enter')doAcceptInvite()"></div>
      <button class="btn btn-primary" onclick="doAcceptInvite()">Join Team</button>
      <div class="login-error" id="invite-error"></div>
    </div>

    <div class="brandmark">A Product of <span>Trusted Leads</span></div>
  </div>
</div>

<!-- MAIN APP -->
<div class="container" id="main-app" style="display:none">
  <div class="header">
    <div class="header-brand">
      <div class="logo-icon">&#9889;</div>
      <div>
        <h1>Arion <span>Scraper</span></h1>
        <div class="brand-sub">A Product of <span>Trusted Leads</span></div>
      </div>
    </div>
    <div class="header-actions">
      <span class="user-greeting" id="user-greeting"></span>
      <span id="worker-status-pill" style="padding:4px 14px;border-radius:20px;font-size:11px;display:flex;align-items:center;gap:6px;font-weight:600"></span>
      <button class="btn btn-sm btn-success" id="worker-start-btn" onclick="workerControl('start')" style="display:none">Start Worker</button>
      <button class="btn btn-sm btn-danger" id="worker-stop-btn" onclick="workerControl('stop')" style="display:none">Stop Worker</button>
      <button class="btn btn-sm btn-secondary" onclick="doLogout()">Logout</button>
    </div>
  </div>

  <div class="stats">
    <div class="stat-card"><div class="label">Accounts</div><div class="value" id="s-accounts">-</div><div class="sub" id="s-accounts-sub">-</div></div>
    <div class="stat-card"><div class="label">Queued Tasks</div><div class="value" id="s-queued">-</div><div class="sub">waiting</div></div>
    <div class="stat-card"><div class="label">Running Tasks</div><div class="value" id="s-running">-</div><div class="sub">active</div></div>
    <div class="stat-card"><div class="label">Total Leads</div><div class="value" id="s-leads">-</div><div class="sub">scraped</div></div>
    <div class="stat-card"><div class="label">Proxy</div><div class="value" id="s-proxy">-</div><div class="sub" id="s-proxy-sub">-</div></div>
  </div>

  <div class="tabs" id="tabs-bar"></div>

  <!-- NEW ORDER -->
  <div class="panel" id="panel-scrape"><div class="card">
    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:18px">
      <h2 style="margin:0">Create New Order</h2>
      <button class="btn btn-sm btn-secondary" onclick="document.getElementById('guide-modal').style.display='flex'" style="display:flex;align-items:center;gap:6px"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg> How It Works</button>
    </div>
    <div class="form-group"><label>Order Name / File Name</label><input id="order-name" placeholder="e.g. US CEOs SaaS Companies"></div>
    <div class="form-group" style="margin-top:14px"><label>Total Leads Target</label><input id="order-target" type="number" placeholder="e.g. 10000"></div>
    <div class="form-group" style="margin-top:14px"><label>Apollo Search URLs</label>
      <div id="url-list"><div class="url-row" style="display:flex;gap:8px;margin-bottom:8px"><input class="order-url" style="flex:1" placeholder="https://app.apollo.io/#/people?personTitles[]=CEO&..."><button class="btn btn-sm btn-secondary" disabled style="opacity:0.4">x</button></div></div>
      <button class="btn btn-sm btn-secondary" onclick="addUrlRow()" style="margin-top:4px">+ Add URL</button>
    </div>
    
    
    <div class="form-group" style="margin-top:14px"><label>Email Handling</label>
      <select id="order-reveal" style="width:100%;padding:10px 12px;border:1px solid #334155;border-radius:8px;background:#0f172a;color:#e2e8f0;font-size:14px">
        <option value="1">Reveal Email (uses account credits)</option>
        <option value="0">No Reveal (scrape only)</option>
      </select>
    </div>
    <div style="margin-top:20px"><button id="submit-order-btn" class="btn btn-primary" onclick="submitOrder()" style="width:100%;padding:14px;font-size:15px;border-radius:10px">Submit Order</button></div>
  </div></div>

  <!-- ORDERS -->
  <div class="panel" id="panel-jobs"><div class="card">
    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:18px">
      <h2 style="margin:0">Orders</h2>
      <button class="btn btn-sm btn-secondary" onclick="document.getElementById('guide-modal').style.display='flex'" style="display:flex;align-items:center;gap:6px"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg> How It Works</button>
    </div>
    <table><thead><tr><th>ID</th><th>Name</th><th>Status</th><th>Tasks</th><th>Leads</th><th>Target</th><th>ETA</th><th>By</th><th>Created</th><th>Actions</th></tr></thead><tbody id="orders-table"></tbody></table>
  </div></div>

  <!-- HOW IT WORKS MODAL -->
  <div id="guide-modal" class="modal-overlay" style="display:none">
    <div style="background:#fff;border:1px solid #e2e8f0;border-radius:20px;padding:0;width:640px;max-width:92vw;max-height:85vh;overflow:hidden;box-shadow:0 25px 60px rgba(0,0,0,0.15)">
      <div style="background:linear-gradient(135deg,#0284c7,#0ea5e9);padding:28px 32px;position:relative">
        <button onclick="document.getElementById('guide-modal').style.display='none'" style="position:absolute;top:16px;right:20px;background:rgba(255,255,255,0.2);border:none;color:#fff;width:28px;height:28px;border-radius:8px;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center">&times;</button>
        <div style="font-size:28px;margin-bottom:8px">&#9889;</div>
        <h2 style="color:#fff;font-size:20px;font-weight:700;margin:0 0 4px 0">How Arion Scraper Works</h2>
        <p style="color:rgba(255,255,255,0.8);font-size:13px;margin:0">Your step-by-step guide to scraping leads from Apollo</p>
      </div>
      <div style="padding:28px 32px;overflow-y:auto;max-height:calc(85vh - 120px)">

        <div style="display:flex;gap:16px;margin-bottom:28px">
          <div style="flex:0 0 40px;height:40px;background:#f0f9ff;border:2px solid #bae6fd;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:800;color:#0284c7;font-size:15px">1</div>
          <div style="flex:1">
            <div style="font-weight:600;color:#0f172a;font-size:14px;margin-bottom:6px">Create Your Search on Apollo</div>
            <p style="font-size:12.5px;color:#64748b;line-height:1.7;margin:0">Go to <a href="https://app.apollo.io/#/people" target="_blank" style="color:#0284c7;text-decoration:none;font-weight:600">app.apollo.io</a> and build your people search using filters — job titles, locations, industries, company size, seniority, etc. Once your search results look right, <b>copy the full URL</b> from your browser address bar.</p>
          </div>
        </div>

        <div style="display:flex;gap:16px;margin-bottom:28px">
          <div style="flex:0 0 40px;height:40px;background:#f0f9ff;border:2px solid #bae6fd;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:800;color:#0284c7;font-size:15px">2</div>
          <div style="flex:1">
            <div style="font-weight:600;color:#0f172a;font-size:14px;margin-bottom:6px">Split Large Searches Into Multiple URLs</div>
            <p style="font-size:12.5px;color:#64748b;line-height:1.7;margin:0">Each URL can pull up to <b>2,500 leads</b> (Apollo's page limit). Need more? Split your search into multiple URLs using different filters. For example, split by region, job title, or company size. Each URL becomes a separate task — they all run in parallel and combine into one order.</p>
            <div style="margin-top:10px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:12px">
              <div style="font-size:11px;color:#94a3b8;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:6px">Example: 10,000 leads order</div>
              <div style="font-size:12px;color:#475569;line-height:1.6">
                URL 1 — CEOs in <b>United States</b> (up to 2,500)<br>
                URL 2 — CEOs in <b>United Kingdom</b> (up to 2,500)<br>
                URL 3 — CEOs in <b>Canada</b> (up to 2,500)<br>
                URL 4 — CEOs in <b>Australia</b> (up to 2,500)
              </div>
            </div>
          </div>
        </div>

        <div style="display:flex;gap:16px;margin-bottom:28px">
          <div style="flex:0 0 40px;height:40px;background:#f0f9ff;border:2px solid #bae6fd;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:800;color:#0284c7;font-size:15px">3</div>
          <div style="flex:1">
            <div style="font-weight:600;color:#0f172a;font-size:14px;margin-bottom:6px">Submit Your Order</div>
            <p style="font-size:12.5px;color:#64748b;line-height:1.7;margin:0">Give your order a <b>name</b> (this becomes the CSV filename), set a total leads target, paste your Apollo URLs using the <b>+ Add URL</b> button, and hit <b>Submit Order</b>. The system queues all tasks and begins processing automatically.</p>
          </div>
        </div>

        <div style="display:flex;gap:16px;margin-bottom:28px">
          <div style="flex:0 0 40px;height:40px;background:#f0f9ff;border:2px solid #bae6fd;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:800;color:#0284c7;font-size:15px">4</div>
          <div style="flex:1">
            <div style="font-weight:600;color:#0f172a;font-size:14px;margin-bottom:6px">Wait &amp; Watch Progress</div>
            <p style="font-size:12.5px;color:#64748b;line-height:1.7;margin:0">After submitting, the <b>live progress view</b> opens automatically. Track each task's status, pages scraped, and leads collected in real-time. Multiple accounts scrape different tasks in parallel — no manual intervention needed.</p>
          </div>
        </div>

        <div style="display:flex;gap:16px;margin-bottom:24px">
          <div style="flex:0 0 40px;height:40px;background:#d1fae5;border:2px solid #6ee7b7;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:800;color:#059669;font-size:15px">5</div>
          <div style="flex:1">
            <div style="font-weight:600;color:#0f172a;font-size:14px;margin-bottom:6px">Download Your CSV</div>
            <p style="font-size:12.5px;color:#64748b;line-height:1.7;margin:0">Once all tasks complete, click the <b>CSV</b> button on your order or use the export in the <b>Leads</b> tab. You get one CSV per order with 48 columns of lead and company data — ready for import into any CRM.</p>
          </div>
        </div>

        <div style="height:1px;background:#e2e8f0;margin:20px 0"></div>

        <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px">
          <div style="background:#f0f9ff;border-radius:8px;padding:12px;display:flex;align-items:start;gap:8px">
            <span style="color:#0284c7;font-size:15px;line-height:1;margin-top:1px">&#10003;</span>
            <span style="font-size:11.5px;color:#475569;line-height:1.5">No credits consumed — emails are only included if publicly available</span>
          </div>
          <div style="background:#f0f9ff;border-radius:8px;padding:12px;display:flex;align-items:start;gap:8px">
            <span style="color:#0284c7;font-size:15px;line-height:1;margin-top:1px">&#10003;</span>
            <span style="font-size:11.5px;color:#475569;line-height:1.5">Auto-retries on rate limits, re-queues on expired cookies</span>
          </div>
          <div style="background:#f0f9ff;border-radius:8px;padding:12px;display:flex;align-items:start;gap:8px">
            <span style="color:#0284c7;font-size:15px;line-height:1;margin-top:1px">&#10003;</span>
            <span style="font-size:11.5px;color:#475569;line-height:1.5">All requests routed through proxy — your server IP stays hidden</span>
          </div>
          <div style="background:#f0f9ff;border-radius:8px;padding:12px;display:flex;align-items:start;gap:8px">
            <span style="color:#0284c7;font-size:15px;line-height:1;margin-top:1px">&#10003;</span>
            <span style="font-size:11.5px;color:#475569;line-height:1.5">Parallel execution — more accounts = faster scraping</span>
          </div>
        </div>

      </div>
    </div>
  </div>

  <!-- PROGRESS MODAL -->
  <div id="progress-modal" style="display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(15,23,42,0.5);backdrop-filter:blur(4px);z-index:1000;align-items:center;justify-content:center">
    <div style="background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:28px;width:700px;max-width:90vw;max-height:80vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,0.15)">
      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px"><h2 id="progress-title" style="margin:0;font-size:18px;color:#0f172a">Progress</h2><button onclick="closeProgressModal()" style="background:none;border:none;color:#94a3b8;font-size:22px;cursor:pointer;padding:4px">&times;</button></div>
      <div id="progress-summary" style="display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px"></div>
      <div style="background:#e2e8f0;border-radius:8px;height:6px;margin-bottom:16px;overflow:hidden"><div id="progress-bar" style="height:100%;background:linear-gradient(90deg,#0284c7,#38bdf8);border-radius:8px;transition:width 0.5s;width:0%"></div></div>
      <table><thead><tr><th>#</th><th>Status</th><th>Account</th><th>Progress</th><th>Leads</th></tr></thead><tbody id="progress-tasks"></tbody></table>
    </div>
  </div>

  <!-- LEADS -->
  <div class="panel" id="panel-leads"><div class="card"><h2>Scraped Leads</h2>
    <div class="form-row" style="margin-bottom:14px;align-items:end"><div class="form-group"><label>Filter by Order</label><select id="lead-order" onchange="currentLeadPage=1;loadLeads();updateLeadExport()"><option value="">All Orders</option></select></div><div class="form-group" style="flex:0 0 auto"><button class="btn btn-primary btn-sm" id="lead-export-btn" onclick="exportFilteredLeads()" style="padding:10px 18px">Export CSV</button></div></div>
    <div style="overflow-x:auto"><table><thead><tr><th>Name</th><th>Email</th><th>Title</th><th>Company</th><th>Domain</th><th>Location</th><th>Seniority</th><th>LinkedIn</th></tr></thead><tbody id="leads-table"></tbody></table></div>
    <div class="pagination" id="leads-pagination"></div>
  </div></div>

  <!-- DOWNLOADS -->
  <div class="panel" id="panel-downloads"><div class="card"><h2>Download Files</h2>
    <p style="font-size:12px;color:#64748b;margin-bottom:18px">Download enriched lead data in Apollo CSV format. Each file includes contact info, emails, company data (employees, industry, keywords, technologies, location, funding).</p>
    <div id="downloads-list"><div class="empty">Loading...</div></div>
  </div></div>

  <!-- ACCOUNTS -->
  <div class="panel" id="panel-accounts"><div class="card"><h2>Apollo Accounts</h2>
    <div class="form-row"><div class="form-group"><label>Bulk Add (email:password per line)</label><textarea id="acc-bulk" placeholder="user1@gmail.com:password123&#10;user2@gmail.com:password456"></textarea></div></div>
    <div class="form-row"><div class="form-group"><label>Account Type</label><select id="acc-type"><option value="normal">Normal</option><option value="premium">Premium</option></select></div><div class="form-group"><label>&nbsp;</label><button class="btn btn-primary" onclick="addAccounts()">Add Accounts</button></div></div>
  </div><div class="card"><h2>Account List</h2>
    <div class="form-row" style="margin-bottom:14px;align-items:end"><div class="form-group"><label>Filter by Status</label><select id="acc-status-filter" onchange="loadAccounts()" style="min-width:140px"><option value="">All</option><option value="active">Active</option><option value="suspended">Suspended</option><option value="cookie_expired">Cookie Expired</option><option value="inactive">Inactive</option></select></div><div class="form-group" style="flex:0 0 auto"><button class="btn btn-secondary btn-sm" onclick="checkAllProxyIPs()" style="padding:10px 18px">Check All IPs</button></div><div class="form-group" style="flex:0 0 auto"><button class="btn btn-primary btn-sm" onclick="verifyAllAccounts()" style="padding:10px 18px">Verify All Status</button></div></div>
    <table><thead><tr><th>Email</th><th>Type</th><th>Status</th><th>Proxy IP</th><th>Cookies</th><th>Last Used</th><th>Actions</th></tr></thead><tbody id="acc-table"></tbody></table>
  </div></div>

  <!-- APOLLO LOGIN -->
  <div class="panel" id="panel-login">

  <!-- STEP 1: Add New Account -->
  <div class="card">
    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px">
      <h2 style="margin:0">Onboard Apollo Account</h2>
      <span style="font-size:11px;color:#94a3b8">Manual cookie import &mdash; safest method, no bot detection</span>
    </div>
    <div style="background:#fffbeb;border:1px solid #fde68a;border-radius:8px;padding:14px;margin-bottom:16px">
      <p style="font-size:12px;color:#92400e;font-weight:600;margin-bottom:8px">How to onboard an account:</p>
      <ol style="font-size:12px;color:#78350f;line-height:1.8;padding-left:18px;margin:0">
        <li>Open <a href="https://app.apollo.io/#/login" target="_blank" style="color:#0284c7;font-weight:600">app.apollo.io</a> in your browser and log in normally</li>
        <li>Install the <b>Cookie Editor</b> extension (<a href="https://chromewebstore.google.com/detail/cookie-editor/hlkenndednhfkekhgcdicdfddnkalmdm" target="_blank" style="color:#0284c7">Chrome</a>)</li>
        <li>Click the Cookie Editor icon &rarr; <b>Export</b> (copies JSON to clipboard)</li>
        <li>Paste the JSON below and click <b>Import &amp; Activate</b></li>
      </ol>
    </div>
    <div class="form-row" style="margin-bottom:14px;align-items:end">
      <div class="form-group"><label>Apollo Email</label><input id="onboard-email" placeholder="user@company.com" type="email"></div>
      <div class="form-group"><label>Account Type</label><select id="onboard-type"><option value="normal">Normal</option><option value="premium">Premium</option></select></div>
    </div>
    <div class="form-group" style="margin-bottom:14px">
      <label>Cookies JSON</label>
      <textarea id="onboard-cookies" placeholder='Paste cookie JSON from Cookie Editor extension...' style="min-height:140px;font-family:monospace;font-size:11px"></textarea>
    </div>
    <button class="btn btn-primary" onclick="onboardAccount()" style="padding:10px 24px">Import &amp; Activate</button>
  </div>

  <!-- Refresh Cookies for Existing Account -->
  <div class="card" style="margin-top:16px">
    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px">
      <h2 style="margin:0">Refresh Expired Cookies</h2>
      <span style="font-size:11px;color:#94a3b8">Re-login in your browser, export new cookies, paste below</span>
    </div>
    <div class="form-row" style="margin-bottom:14px;align-items:end">
      <div class="form-group"><label>Select Account</label>
        <select id="browser-account-select" style="min-width:220px"></select>
      </div>
      <div class="form-group" style="flex:0 0 auto">
        <button class="btn btn-primary" onclick="openCookieModal(document.getElementById('browser-account-select').value, document.getElementById('browser-account-select').options[document.getElementById('browser-account-select').selectedIndex].text.split(' (')[0])" style="padding:10px 18px">Import New Cookies</button>
      </div>
    </div>
  </div></div>

  <!-- PROXY -->
  <div class="panel" id="panel-proxy"><div class="card"><h2>Proxy Configuration</h2>
    <div class="form-row"><div class="form-group"><label>Host</label><input id="px-host" placeholder="geo.iproyal.com"></div><div class="form-group"><label>Port</label><input id="px-port" type="number" placeholder="12321"></div></div>
    <div class="form-row"><div class="form-group"><label>Username</label><input id="px-user"></div><div class="form-group"><label>Password</label><input id="px-pass" type="password"></div></div>
    <div class="form-row"><div class="form-group"><label>Type</label><select id="px-type"><option value="residential">Residential</option><option value="datacenter">Datacenter</option></select></div><div class="form-group"><label>&nbsp;</label><button class="btn btn-primary" onclick="saveProxy()">Save Proxy</button></div></div>
    <div style="margin-top:16px;border-top:1px solid #e2e8f0;padding-top:16px"><button class="btn btn-secondary" onclick="testProxy()">Test cURL</button><div id="proxy-test-result" style="margin-top:12px;padding:14px;border-radius:8px;display:none;font-size:13px"></div></div>
  </div></div>

  <!-- TEAM -->
  <div class="panel" id="panel-team"><div class="card"><h2>Team Management</h2>
    <div class="form-row"><div class="form-group"><label>Email</label><input id="invite-email-input" type="email" placeholder="teammate@company.com"></div><div class="form-group"><label>Name</label><input id="invite-name-input" placeholder="John Doe"></div><div class="form-group"><label>Role</label><select id="invite-role"><option value="viewer">Viewer</option><option value="manager">Manager</option><option value="admin">Admin</option></select></div><div class="form-group"><label>&nbsp;</label><button class="btn btn-primary" onclick="sendInvite()">Send Invite</button></div></div>
    <div id="invite-result" style="display:none"></div>
    <div style="margin-top:10px;padding:14px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px">
      <p style="font-size:11px;color:#64748b;margin-bottom:6px;font-weight:600">Roles:</p>
      <p style="font-size:11px;color:#64748b"><b style="color:#dc2626">Admin</b> — Full access: team, worker, proxy, accounts, orders, leads</p>
      <p style="font-size:11px;color:#64748b"><b style="color:#1d4ed8">Manager</b> — Create orders, manage accounts, view leads, export CSV</p>
      <p style="font-size:11px;color:#64748b"><b style="color:#64748b">Viewer</b> — View orders & leads, export CSV only</p>
    </div>
  </div><div class="card"><h2>Team Members</h2>
    <table><thead><tr><th>Name</th><th>Email</th><th>Role</th><th>Status</th><th>Last Login</th><th>Actions</th></tr></thead><tbody id="team-table"></tbody></table>
  </div></div>
</div>

<!-- OTP MODAL -->
<div id="otp-modal" class="modal-overlay" style="display:none"><div class="modal-box"><h2>Verification Code Required</h2><div class="modal-email" id="otp-modal-email"></div><p style="font-size:13px;color:#475569;margin-bottom:12px">Enter the OTP code sent to this email.</p><div class="form-group"><label>OTP Code</label><input id="otp-code-input" placeholder="123456" maxlength="10" style="font-size:18px;text-align:center;letter-spacing:4px" onkeydown="if(event.key==='Enter')submitOTP()"></div><div style="margin-top:14px;display:flex;gap:8px"><button class="btn btn-primary" onclick="submitOTP()">Submit</button><button class="btn btn-secondary" onclick="document.getElementById('otp-modal').style.display='none'">Dismiss</button></div></div></div>

<!-- COOKIE IMPORT MODAL -->
<div id="cookie-modal" class="modal-overlay" style="display:none"><div class="modal-box"><h2>Import Cookies</h2><div class="modal-email" id="cookie-modal-email"></div><div class="form-group"><label>Cookies JSON</label><textarea id="cookie-import-input" placeholder='[{"name":"_session","value":"..."}]' style="min-height:200px;font-family:monospace;font-size:11px"></textarea></div><div style="margin-top:14px;display:flex;gap:8px"><button class="btn btn-primary" onclick="submitCookies()">Import</button><button class="btn btn-secondary" onclick="document.getElementById('cookie-modal').style.display='none'">Cancel</button></div></div></div>

<div class="toast" id="toast"></div>

<script>
var TOKEN = sessionStorage.getItem('arion_token') || '';
var USER = JSON.parse(sessionStorage.getItem('arion_user') || 'null');
var currentLeadPage = 1;
var inviteToken = null;

function af(url, opts) {
  opts = opts || {};
  opts.headers = Object.assign({}, opts.headers || {}, { 'Authorization': 'Bearer ' + TOKEN });
  return fetch(url, opts);
}
function toast(msg) { var t=document.getElementById('toast'); t.textContent=msg; t.style.display='block'; setTimeout(function(){t.style.display='none';},3000); }
function showErr(id, msg) { var e=document.getElementById(id); e.textContent=msg; e.style.display='block'; }

// --- INIT ---
async function init() {
  var path = window.location.pathname;
  if (path.match(/^\/invite\//)) {
    inviteToken = path.replace('/invite/', '');
    showInviteForm();
    return;
  }
  var status = await fetch('/api/auth/setup-status').then(function(r){return r.json();});
  if (status.needs_setup) { showSetupForm(); return; }
  if (TOKEN) {
    try {
      var r = await af('/api/auth/me');
      if (r.ok) { USER = await r.json(); sessionStorage.setItem('arion_user', JSON.stringify(USER)); enterApp(); return; }
    } catch {}
  }
  showLoginForm();
}

function showSetupForm() { document.getElementById('setup-form').style.display='block'; document.getElementById('login-form').style.display='none'; document.getElementById('invite-form').style.display='none'; }
function showLoginForm() { document.getElementById('setup-form').style.display='none'; document.getElementById('login-form').style.display='block'; document.getElementById('invite-form').style.display='none'; }
async function showInviteForm() {
  document.getElementById('setup-form').style.display='none'; document.getElementById('login-form').style.display='none'; document.getElementById('invite-form').style.display='block';
  try {
    var r = await fetch('/api/auth/invite/' + inviteToken).then(function(r){return r.json();});
    if (r.error) { showErr('invite-error', r.error); return; }
    document.getElementById('invite-email').value = r.email;
    document.getElementById('invite-name').value = r.name || '';
  } catch (e) { showErr('invite-error', 'Invalid invite link'); }
}

async function doSetup() {
  var email=document.getElementById('setup-email').value.trim(), name=document.getElementById('setup-name').value.trim(), pw=document.getElementById('setup-pass').value;
  if (!email||!name||!pw) return showErr('setup-error','All fields required');
  try {
    var r = await fetch('/api/auth/setup',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({email:email,name:name,password:pw})}).then(function(r){return r.json();});
    if (r.error) return showErr('setup-error', r.error);
    TOKEN=r.token; USER=r.user; sessionStorage.setItem('arion_token',TOKEN); sessionStorage.setItem('arion_user',JSON.stringify(USER)); enterApp();
  } catch(e) { showErr('setup-error', e.message); }
}

async function doLogin() {
  var email=document.getElementById('login-email').value.trim(), pw=document.getElementById('login-pass').value;
  if (!email||!pw) return showErr('login-error','Enter email and password');
  try {
    var r = await fetch('/api/auth/login',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({email:email,password:pw})}).then(function(r){return r.json();});
    if (r.error) return showErr('login-error', r.error);
    TOKEN=r.token; USER=r.user; sessionStorage.setItem('arion_token',TOKEN); sessionStorage.setItem('arion_user',JSON.stringify(USER)); enterApp();
  } catch(e) { showErr('login-error', e.message); }
}

async function doAcceptInvite() {
  var name=document.getElementById('invite-name').value.trim(), pw=document.getElementById('invite-pass').value;
  if (!pw) return showErr('invite-error','Set a password');
  try {
    var r = await fetch('/api/auth/accept-invite',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({invite_token:inviteToken,name:name,password:pw})}).then(function(r){return r.json();});
    if (r.error) return showErr('invite-error', r.error);
    TOKEN=r.token; USER=r.user; sessionStorage.setItem('arion_token',TOKEN); sessionStorage.setItem('arion_user',JSON.stringify(USER));
    window.history.replaceState(null,'','/'); enterApp();
  } catch(e) { showErr('invite-error', e.message); }
}

function doLogout() { sessionStorage.removeItem('arion_token'); sessionStorage.removeItem('arion_user'); TOKEN=''; USER=null; location.reload(); }

function enterApp() {
  document.getElementById('login-overlay').style.display='none';
  document.getElementById('main-app').style.display='block';
  var role = USER.role;
  document.getElementById('user-greeting').innerHTML = 'Hi, <b>'+USER.name+'</b> <span class="role-badge-inline badge-'+role+'">'+role+'</span>';
  if (role === 'admin') { document.getElementById('worker-start-btn').style.display=''; document.getElementById('worker-stop-btn').style.display=''; }
  var tabs = [];
  if (role === 'admin' || role === 'manager') tabs.push(['scrape','New Order']);
  tabs.push(['jobs','Orders']); tabs.push(['leads','Leads']); tabs.push(['downloads','Downloads']);
  if (role === 'admin' || role === 'manager') { tabs.push(['accounts','Accounts']); tabs.push(['login','Login']); }
  if (role === 'admin') { tabs.push(['proxy','Proxy']); tabs.push(['team','Team']); }
  var bar = document.getElementById('tabs-bar');
  bar.innerHTML = tabs.map(function(t,i) { return '<button class="tab'+(i===0?' active':'')+'" onclick="showTab(\''+t[0]+'\')">'+t[1]+'</button>'; }).join('');
  document.getElementById('panel-'+tabs[0][0]).classList.add('active');
  loadAllStats(); loadProxy(); startOTPPolling(); connectSSE();
  setInterval(function(){ var p=document.getElementById("panel-accounts"); if(p && p.classList.contains("active")) loadAccounts(); }, 120000);
}

function showTab(name) {
  document.querySelectorAll('.tab').forEach(function(t){t.classList.remove('active');});
  document.querySelectorAll('.panel').forEach(function(p){p.classList.remove('active');});
  event.target.classList.add('active');
  var panel = document.getElementById('panel-'+name);
  if (panel) panel.classList.add('active');
  if (name==='accounts') loadAccounts();
  if (name==='login') { loadBrowserAccounts(); loadBrowserSessions(); }
  if (name==='jobs') loadOrders();
  if (name==='leads') { populateOrderFilter(); loadLeads(); }
  if (name==='login') loadAuthSessions();
  if (name==='team') loadTeam();
  if (name==='downloads') loadDownloads();
}

// --- STATS ---
async function loadAllStats() {
  try {
    var s = await af('/api/stats').then(function(r){return r.json();});
    document.getElementById('s-accounts').textContent=s.accounts.total||0;
    document.getElementById('s-accounts-sub').textContent=(s.accounts.active||0)+' active';
    document.getElementById('s-queued').textContent=s.queued_tasks||0;
    document.getElementById('s-running').textContent=s.running_tasks||0;
    document.getElementById('s-leads').textContent=s.leads||0;
    document.getElementById('s-proxy').textContent=s.proxy_configured?'ON':'OFF';
    document.getElementById('s-proxy').style.color=s.proxy_configured?'#059669':'#ef4444';
    document.getElementById('s-proxy-sub').textContent=s.proxy_configured?'configured':'not set';
    var wp=document.getElementById('worker-status-pill');
    if(s.running_tasks>0){wp.innerHTML='<span style="width:6px;height:6px;border-radius:50%;background:#059669;display:inline-block"></span> Active';wp.style.background='#d1fae5';wp.style.color='#065f46';}
    else if(s.queued_tasks>0){wp.innerHTML='<span style="width:6px;height:6px;border-radius:50%;background:#d97706;display:inline-block"></span> Queued';wp.style.background='#fef3c7';wp.style.color='#92400e';}
    else{wp.innerHTML='<span style="width:6px;height:6px;border-radius:50%;background:#94a3b8;display:inline-block"></span> Idle';wp.style.background='#f1f5f9';wp.style.color='#64748b';}
  } catch{}
}

async function workerControl(a) { await af('/api/worker/'+a,{method:'POST'}); toast('Worker '+a+'ed'); loadAllStats(); }

// --- TEAM ---
async function loadTeam() {
  var users = await af('/api/team').then(function(r){return r.json();});
  document.getElementById('team-table').innerHTML = users.map(function(u) {
    var actions = '';
    if (u.id !== USER.id) {
      if (u.status === 'invited') actions += '<button class="btn btn-sm btn-secondary" onclick="resendInvite('+u.id+')">Link</button> ';
      actions += '<select onchange="changeRole('+u.id+',this.value)" style="padding:4px 8px;background:#fff;border:1px solid #cbd5e1;border-radius:6px;color:#1e293b;font-size:11px"><option value="viewer"'+(u.role==='viewer'?' selected':'')+'>Viewer</option><option value="manager"'+(u.role==='manager'?' selected':'')+'>Manager</option><option value="admin"'+(u.role==='admin'?' selected':'')+'>Admin</option></select> ';
      actions += '<button class="btn btn-sm '+(u.status==='active'?'btn-danger':'btn-success')+'" onclick="toggleUser('+u.id+')">'+(u.status==='active'?'Disable':'Enable')+'</button> ';
      actions += '<button class="btn btn-sm btn-danger" onclick="deleteUser('+u.id+')">Del</button>';
    } else { actions = '<span style="color:#94a3b8;font-size:12px">You</span>'; }
    return '<tr><td>'+u.name+'</td><td>'+u.email+'</td><td><span class="badge badge-'+u.role+'">'+u.role+'</span></td><td><span class="badge badge-'+u.status+'">'+u.status+'</span></td><td>'+(u.last_login_at||'Never')+'</td><td>'+actions+'</td></tr>';
  }).join('');
}

async function sendInvite() {
  var email=document.getElementById('invite-email-input').value.trim(), name=document.getElementById('invite-name-input').value.trim(), role=document.getElementById('invite-role').value;
  if (!email) return toast('Enter email');
  var r = await af('/api/team/invite',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({email:email,name:name,role:role})}).then(function(r){return r.json();});
  if (r.error) return toast(r.error);
  var link = location.origin + r.invite_url;
  document.getElementById('invite-result').style.display='block';
  document.getElementById('invite-result').innerHTML='<div style="background:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px;padding:14px;margin-top:10px"><p style="font-size:12px;color:#065f46;margin-bottom:8px;font-weight:500">Invite created! Share this link:</p><div class="invite-link-box" onclick="navigator.clipboard.writeText(\''+link+'\');toast(\'Copied!\')">'+link+'</div><p style="font-size:10px;color:#94a3b8;margin-top:6px">Click the link to copy</p></div>';
  document.getElementById('invite-email-input').value=''; document.getElementById('invite-name-input').value='';
  loadTeam();
}

async function resendInvite(id) {
  var r = await af('/api/team/'+id+'/resend',{method:'POST'}).then(function(r){return r.json();});
  if (r.error) return toast(r.error);
  var link = location.origin + r.invite_url;
  navigator.clipboard.writeText(link); toast('Invite link copied!');
}

async function changeRole(id, role) { await af('/api/team/'+id,{method:'PUT',headers:{'Content-Type':'application/json'},body:JSON.stringify({role:role})}); toast('Role updated'); loadTeam(); }
async function toggleUser(id) { await af('/api/team/'+id+'/toggle',{method:'POST'}); loadTeam(); }
async function deleteUser(id) { if (!confirm('Remove this team member?')) return; await af('/api/team/'+id,{method:'DELETE'}); toast('Removed'); loadTeam(); }

// --- PROXY ---
async function loadProxy() { try { var r=await af('/api/proxy').then(function(r){return r.json();}); if(r){document.getElementById('px-host').value=r.host;document.getElementById('px-port').value=r.port;document.getElementById('px-user').value=r.username;document.getElementById('px-pass').value=r.password;document.getElementById('px-type').value=r.type;} } catch{} }
async function saveProxy() { await af('/api/proxy',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({host:document.getElementById('px-host').value,port:parseInt(document.getElementById('px-port').value),username:document.getElementById('px-user').value,password:document.getElementById('px-pass').value,type:document.getElementById('px-type').value})}); toast('Proxy saved'); loadAllStats(); }
async function testProxy() { var el=document.getElementById('proxy-test-result'); el.style.display='block'; el.style.background='#f0f9ff'; el.style.color='#0284c7'; el.textContent='Testing...'; try { var r=await af('/api/proxy/test-curl',{method:'POST'}).then(function(r){return r.json();}); if(r.ok){el.style.background='#f0fdf4';el.style.color='#065f46';el.textContent='Connected \u2014 IP: '+r.ip;}else{el.style.background='#fef2f2';el.style.color='#dc2626';el.textContent='Failed: '+r.error;} } catch(e){el.style.background='#fef2f2';el.style.color='#dc2626';el.textContent='Error: '+e.message;} }

// --- ACCOUNTS ---
var cookieCache={};
var ipCache={};
async function loadAccounts() {
  var allAccs = await af('/api/accounts').then(function(r){return r.json();});
  var sf = document.getElementById('acc-status-filter');
  var filterVal = sf ? sf.value : '';
  var accs = filterVal ? allAccs.filter(function(a){ return a.status === filterVal; }) : allAccs;
  var ps = accs.map(function(a){return af('/api/accounts/'+a.id+'/cookies/status').then(function(r){return r.json();}).then(function(s){cookieCache[a.id]=s;}).catch(function(){});});
  await Promise.all(ps);
  document.getElementById('acc-table').innerHTML = accs.length ? accs.map(function(a) {
    var cs=cookieCache[a.id]||{}; var type=a.account_type||'normal';
    var cb=cs.has_cookies?'<span class="cookie-badge cookie-badge-yes">'+cs.cookie_count+'</span>':'<span class="cookie-badge cookie-badge-no">none</span>';
    var tb=type==='premium'?'<span style="background:#ede9fe;color:#7c3aed;padding:3px 8px;border-radius:20px;font-size:10px;font-weight:600">PREM</span>':'<span style="background:#dbeafe;color:#1d4ed8;padding:3px 8px;border-radius:20px;font-size:10px;font-weight:600">NORM</span>';
    var ipCell = ipCache[a.id] ? '<span style="font-size:11px;color:#059669;font-weight:500">'+ipCache[a.id]+'</span>' : '<button class="btn btn-sm btn-secondary" onclick="checkProxyIP('+a.id+',this)" style="font-size:10px;padding:3px 8px">Check IP</button>';
    return '<tr><td>'+a.email+'</td><td>'+tb+'</td><td><span class="badge badge-'+a.status+'">'+a.status+'</span></td><td>'+ipCell+'</td><td>'+cb+'</td><td>'+(a.last_used_at||'Never')+'</td><td>'+
    '<button class="btn btn-sm btn-secondary" onclick="verifyAccount('+a.id+',this)" style="font-size:10px;padding:3px 8px">Verify</button> '+
    '<button class="btn btn-sm btn-primary" onclick="openCookieModal('+a.id+',\''+a.email.replace(/'/g,"\\'")+'\')">​Cookies</button> '+
    '<button class="btn btn-sm '+(a.status==='suspended'?'btn-warning':a.status==='active'?'btn-secondary':'btn-success')+'" onclick="toggleAccount('+a.id+',\'active\')">'+( a.status==='suspended'?'Reactivate':a.status==='active'?'Off':'On')+'</button> '+
    '<button class="btn btn-sm btn-danger" onclick="deleteAccount('+a.id+')">Del</button></td></tr>';
  }).join('') : '<tr><td colspan="7" class="empty">No accounts</td></tr>';
}
async function checkProxyIP(id, btn) {
  btn.disabled = true; btn.textContent = '...';
  try {
    var r = await af('/api/accounts/'+id+'/proxy-ip').then(function(r){return r.json();});
    if (r.ok) { ipCache[id] = r.ip; loadAccounts(); }
    else { btn.textContent = 'Error'; btn.style.color = '#ef4444'; setTimeout(function(){ btn.textContent = 'Check IP'; btn.disabled = false; btn.style.color = ''; }, 2000); }
  } catch(e) { btn.textContent = 'Err'; btn.disabled = false; }
}
async function checkAllProxyIPs() {
  try {
    var r = await af('/api/proxy/all-ips').then(function(r){return r.json();});
    if (r.ok) { for (var id in r.ips) { if (r.ips[id] !== 'error') ipCache[id] = r.ips[id]; } loadAccounts(); toast('IPs refreshed'); }
    else { toast('Error: ' + (r.error||'failed')); }
  } catch(e) { toast('Error checking IPs'); }
}
async function verifyAccount(id, btn) {
  btn.disabled=true; btn.textContent='...';
  try {
    var r = await af('/api/accounts/'+id+'/verify', {method:'POST'}).then(function(r){return r.json();});
    if (r.ok) { toast(r.email+': '+r.status+(r.changed?' (updated)':' (confirmed)')); loadAccounts(); }
    else { toast('Verify failed: '+(r.error||'unknown')); btn.textContent='Verify'; btn.disabled=false; }
  } catch(e) { btn.textContent='Err'; btn.disabled=false; }
}
async function verifyAllAccounts() {
  try {
    var r = await af('/api/accounts/verify-all', {method:'POST'}).then(function(r){return r.json();});
    if (r.ok) { toast('Verified '+r.results.length+' accounts'); loadAccounts(); }
    else { toast('Error: '+(r.error||'failed')); }
  } catch(e) { toast('Error verifying'); }
}
async function loadBrowserAccounts() {
  try {
    var accs = await af('/api/accounts').then(function(r){return r.json();});
    var sel = document.getElementById('browser-account-select');
    if (!sel) return;
    sel.innerHTML = accs.map(function(a) {
      return '<option value="'+a.id+'">'+a.email+' ('+a.status+')</option>';
    }).join('');
  } catch {}
}

async function reloginExistingAccount() {
  var sel = document.getElementById('browser-account-select');
  if (!sel || !sel.value) { toast('Select an account first'); return; }
  var btn = document.getElementById('relogin-btn');
  btn.disabled = true; btn.textContent = 'Signing in...';
  document.getElementById('auth-status').style.display='block';
  document.getElementById('auth-spinner').style.display='block';
  document.getElementById('auth-status-text').textContent='Re-authenticating...';
  document.getElementById('auth-status-text').style.color='#0284c7';
  try {
    var r = await af('/api/accounts/auth/relogin', {method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({account_id:parseInt(sel.value)})}).then(function(r){return r.json();});
    if (r.error) { toast(r.error); btn.disabled=false; btn.textContent='Re-Login'; document.getElementById('auth-status').style.display='none'; return; }
    authSess = r.session_id;
    pollAuth();
  } catch(e) { toast(e.message); }
  btn.disabled = false; btn.textContent = 'Re-Login';
}

async function addAccounts() { var lines=document.getElementById('acc-bulk').value.trim().split('\n').filter(function(l){return l.includes(':');}); var accounts=lines.map(function(l){var p=l.split(':');return{email:p[0].trim(),password:p.slice(1).join(':').trim()};}); var r=await af('/api/accounts/bulk',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({accounts:accounts,account_type:document.getElementById('acc-type').value})}).then(function(r){return r.json();}); toast('Added '+r.added); document.getElementById('acc-bulk').value=''; loadAccounts(); }
async function deleteAccount(id) { await af('/api/accounts/'+id,{method:'DELETE'}); loadAccounts(); }
async function toggleAccount(id,s) { await af('/api/accounts/'+id,{method:'PUT',headers:{'Content-Type':'application/json'},body:JSON.stringify({status:s})}); loadAccounts(); }

// --- ORDERS ---
function addUrlRow() { var d=document.createElement('div'); d.className='url-row'; d.style='display:flex;gap:8px;margin-bottom:8px'; d.innerHTML='<input class="order-url" style="flex:1" placeholder="https://app.apollo.io/#/people?..."><button class="btn btn-sm btn-danger" onclick="this.parentElement.remove()">x</button>'; document.getElementById('url-list').appendChild(d); }
async function submitOrder() {
  var name = document.getElementById('order-name').value.trim();
  var target = parseInt(document.getElementById('order-target').value) || 0;
  var reveal = parseInt(document.getElementById('order-reveal').value);
  var urls = [];
  document.querySelectorAll('.order-url').forEach(function(i) { if (i.value.trim()) urls.push(i.value.trim()); });
  if (!name) return toast('Enter order name');
  if (!urls.length) return toast('Add at least one URL');
  await createOrder(name, target, urls, reveal);
}
async function createOrder(name, target, urls, reveal) {
  try {
    var r = await af('/api/orders', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ name: name, total_leads_target: target, urls: urls, reveal_emails: reveal })
    }).then(function(r) { return r.json(); });
    if (r.error) return toast(r.error);
    toast('Order #' + r.id + ' created with ' + r.task_count + ' tasks');
    document.getElementById('order-name').value = '';
    document.getElementById('order-target').value = '';
    document.getElementById('url-list').innerHTML = '<div class="url-row" style="display:flex;gap:8px;margin-bottom:8px"><input class="order-url" style="flex:1" placeholder="https://app.apollo.io/#/people?..."><button class="btn btn-sm btn-secondary" disabled style="opacity:0.4">x</button></div>';
    viewProgress(r.id);
  } catch (e) { toast('Error: ' + e.message); }
}
function calcETA(createdAt, scraped, target) {
  if (!target || target <= 0 || !scraped || scraped <= 0) return '-';
  var elapsed = (Date.now() - new Date(createdAt + ' UTC').getTime()) / 1000;
  if (elapsed < 10) return 'calculating...';
  var rate = scraped / elapsed;
  var remaining = target - scraped;
  if (remaining <= 0) return 'done';
  var secs = Math.round(remaining / rate);
  if (secs < 60) return secs + 's';
  if (secs < 3600) return Math.round(secs / 60) + 'm';
  var h = Math.floor(secs / 3600), m = Math.round((secs % 3600) / 60);
  return h + 'h ' + m + 'm';
}
async function loadOrders() {
  var orders = await af('/api/orders').then(function(r){return r.json();});
  document.getElementById('orders-table').innerHTML = orders.length ? orders.map(function(o) {
    var t=o.tasks||{}; var ts=(t.completed||0)+'/'+(t.total||0); if(t.running>0)ts+=' <span style="color:#d97706">('+t.running+' run)</span>'; if(t.queued>0)ts+=' <span style="color:#94a3b8">('+t.queued+' q)</span>';
    var pct=o.total_leads_target>0?Math.round(o.scraped_results/o.total_leads_target*100):'';
    var eta = (o.status==='running'||o.status==='pending') ? calcETA(o.created_at, o.scraped_results, o.total_leads_target) : '';
    var acts='<button class="btn btn-sm btn-secondary" onclick="viewProgress('+o.id+')">Progress</button> ';
    if(o.status==='completed'||o.status==='partial') acts+='<a href="/api/orders/'+o.id+'/export?token='+TOKEN+'" class="btn btn-sm btn-primary" style="text-decoration:none;display:inline-block">CSV</a> ';
    if(USER.role==='admin'||USER.role==='manager') acts+='<button class="btn btn-sm btn-danger" onclick="deleteOrder('+o.id+')">x</button>';
    return '<tr><td style="color:#94a3b8">#'+o.id+'</td><td style="font-weight:500">'+o.name+'</td><td><span class="badge badge-'+o.status+'">'+o.status+'</span></td><td>'+ts+'</td><td style="font-weight:600">'+o.scraped_results+'</td><td>'+(o.total_leads_target||'-')+(pct?' <span style="color:#0284c7;font-weight:500">('+pct+'%)</span>':'')+'</td><td style="color:#64748b">'+(eta?'<span style="color:#0284c7;font-weight:600">'+eta+'</span>':'-')+'</td><td style="color:#64748b">'+(o.created_by_name||'-')+'</td><td style="color:#94a3b8;font-size:11px">'+new Date(o.created_at).toLocaleString()+'</td><td>'+acts+'</td></tr>';
  }).join('') : '<tr><td colspan="10" class="empty">No orders</td></tr>';
}
async function deleteOrder(id) { if(!confirm('Delete this order?'))return; await af('/api/orders/'+id,{method:'DELETE'}); toast('Deleted'); loadOrders(); loadAllStats(); }

async function populateOrderFilter() {
  var orders = await af('/api/orders').then(function(r){return r.json();});
  var sel = document.getElementById('lead-order');
  if (!sel) return;
  var cv = sel.value;
  sel.innerHTML = '<option value="">All Orders</option>' + orders.map(function(o) {
    return '<option value="' + o.id + '">' + o.name + ' (' + (o.scraped_results||0) + ' leads)</option>';
  }).join('');
  sel.value = cv;
  updateLeadExport();
}

function updateLeadExport() {
  var sel = document.getElementById('lead-order');
  var btn = document.getElementById('lead-export-btn');
  if (!sel || !btn) return;
  var oid = sel.value;
  if (oid) {
    btn.textContent = 'Export CSV';
    btn.disabled = false;
    btn.style.opacity = '1';
  } else {
    btn.textContent = 'Select Order to Export';
    btn.disabled = true;
    btn.style.opacity = '0.5';
  }
}

function exportFilteredLeads() {
  var sel = document.getElementById('lead-order');
  if (!sel || !sel.value) return toast('Select an order first');
  window.location.href = '/api/orders/' + sel.value + '/export?token=' + TOKEN;
}

// --- PROGRESS ---
async function viewProgress(id) {
  activeProgressOrderId = id;
  document.getElementById('progress-modal').style.display='flex';
  // Initial load via API, then SSE takes over
  try {
    var d = await af('/api/orders/'+id).then(function(r){return r.json();});
    renderProgress(d);
  } catch {}
}
function closeProgressModal() { document.getElementById('progress-modal').style.display='none'; activeProgressOrderId=null; }

// --- LEADS ---
async function loadLeads() { var jid=document.getElementById('lead-order')?document.getElementById('lead-order').value:''; var r=await af('/api/leads?order_id='+jid+'&page='+currentLeadPage+'&limit=50').then(function(r){return r.json();}); document.getElementById('leads-table').innerHTML=r.leads.length?r.leads.map(function(l){var n=[l.first_name,l.last_name].filter(Boolean).join(' ');var loc=[l.city,l.state,l.country].filter(Boolean).join(', ');return '<tr><td style="font-weight:500">'+(n||'')+'</td><td style="color:'+(l.email?'#059669':'#94a3b8')+'">'+(l.email||'\u2014')+'</td><td>'+(l.title||'')+'</td><td>'+(l.org_name||'')+'</td><td>'+(l.org_primary_domain?'<a href="https://'+l.org_primary_domain+'" target="_blank" style="color:#0284c7;text-decoration:none">'+l.org_primary_domain+'</a>':'\u2014')+'</td><td>'+(loc||'')+'</td><td>'+(l.seniority||'')+'</td><td>'+(l.linkedin_url?'<a href="'+l.linkedin_url+'" target="_blank" style="color:#0284c7;text-decoration:none">Link</a>':'\u2014')+'</td></tr>';}).join(''):'<tr><td colspan="8" class="empty">No leads</td></tr>'; var pg='';for(var i=1;i<=r.pages;i++)pg+='<button class="btn btn-sm '+(i===r.page?'btn-primary':'btn-secondary')+'" onclick="currentLeadPage='+i+';loadLeads()">'+i+'</button>';document.getElementById('leads-pagination').innerHTML=pg; }

// --- OTP ---
var otpPoll=null;
function startOTPPolling(){if(otpPoll)return;otpPoll=setInterval(async function(){try{var d=await af('/api/otp/pending').then(function(r){return r.json();});if(d&&d.status==='pending'){var m=document.getElementById('otp-modal');if(m.style.display!=='flex'){document.getElementById('otp-modal-email').textContent=d.account_email;document.getElementById('otp-code-input').value='';m.style.display='flex';}}else{document.getElementById('otp-modal').style.display='none';}}catch{}},2000);}
async function submitOTP(){var c=document.getElementById('otp-code-input').value.trim();if(!c)return toast('Enter code');var r=await af('/api/otp/submit',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({code:c})}).then(function(r){return r.json();});if(r.ok){toast('OTP submitted');document.getElementById('otp-modal').style.display='none';}else toast(r.error||'Error');}

// --- COOKIES ---
var cookieAccId=null;
function openCookieModal(id,email){cookieAccId=id;document.getElementById('cookie-modal-email').textContent=email;document.getElementById('cookie-import-input').value='';document.getElementById('cookie-modal').style.display='flex';}
async function submitCookies(){if(!cookieAccId)return toast('No account selected');var raw=document.getElementById('cookie-import-input').value.trim();if(!raw)return toast('Paste cookies');var parsed;try{parsed=JSON.parse(raw);}catch{return toast('Invalid JSON — paste the array from Cookie Editor');}if(!Array.isArray(parsed)||parsed.length===0)return toast('Must be a JSON array of cookies');var email=document.getElementById('cookie-modal-email').textContent;var r=await af('/api/accounts/'+cookieAccId+'/cookies',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({cookies:raw})}).then(function(r){return r.json();});if(r.ok){toast(parsed.length+' cookies imported for '+email);document.getElementById('cookie-modal').style.display='none';loadAccounts();}else toast(r.error||'Import failed');}

// --- APOLLO AUTH ---
var selAuthType='normal',authSess=null,authPollInt=null;
function selectAuthType(t){selAuthType=t;['normal','premium'].forEach(function(id){var el=document.getElementById('auth-type-'+id);el.style.borderColor=id===t?'#0284c7':'#e2e8f0';el.style.background=id===t?'#f0f9ff':'#fff';el.style.color=id===t?'#0f172a':'#94a3b8';});}

async function startAuthLogin(){var email=document.getElementById('auth-email').value.trim(),pw=document.getElementById('auth-password').value.trim();if(!email||!pw)return toast('Enter credentials');var btn=document.getElementById('auth-login-btn');btn.disabled=true;btn.textContent='Signing in...';document.getElementById('auth-status').style.display='block';document.getElementById('auth-spinner').style.display='block';try{var r=await af('/api/accounts/auth/login',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({email:email,password:pw,account_type:selAuthType})}).then(function(r){return r.json();});if(r.error){toast(r.error);btn.disabled=false;btn.textContent='Sign In to Apollo';return;}authSess=r.session_id;pollAuth();}catch(e){toast(e.message);btn.disabled=false;btn.textContent='Sign In to Apollo';}}
function pollAuth(){if(authPollInt)clearInterval(authPollInt);authPollInt=setInterval(async function(){if(!authSess){clearInterval(authPollInt);return;}try{var r=await af('/api/accounts/auth/status/'+authSess).then(function(r){return r.json();});document.getElementById('auth-step').textContent=r.step||'';document.getElementById('auth-status-text').textContent=r.step||'Working...';if(r.status==='completed'){clearInterval(authPollInt);document.getElementById('auth-status-text').textContent='Success!';document.getElementById('auth-status-text').style.color='#059669';document.getElementById('auth-spinner').style.display='none';toast(r.cookieCount+' cookies captured');resetAuthBtn();loadAuthSessions();}else if(r.status==='error'){clearInterval(authPollInt);document.getElementById('auth-status-text').textContent='Failed';document.getElementById('auth-status-text').style.color='#ef4444';document.getElementById('auth-spinner').style.display='none';toast(r.error||'Failed');resetAuthBtn();loadAuthSessions();}}catch{}},1500);}
function resetAuthBtn(){var b=document.getElementById('auth-login-btn');b.disabled=false;b.textContent='Sign In to Apollo';}
async function loadAuthSessions(){try{var sessions=await af('/api/accounts/auth/sessions').then(function(r){return r.json();});var el=document.getElementById('auth-sessions-list');if(!sessions.length){el.innerHTML='<div class="empty">No sessions</div>';return;}el.innerHTML=sessions.map(function(s){var sc=s.status==='completed'?'badge-completed':s.status==='error'?'badge-error':'badge-running';return '<div style="display:flex;align-items:center;gap:10px;padding:12px;border-bottom:1px solid #f1f5f9"><div style="flex:1"><div style="font-size:12px;color:#0f172a;font-weight:500">'+s.email+'</div><div style="font-size:10px;color:#94a3b8">'+new Date(s.startedAt).toLocaleTimeString()+' \u2014 '+(s.step||'')+(s.startedBy?' \u2014 by '+s.startedBy:'')+'</div></div><span class="badge '+sc+'">'+s.status+'</span></div>';}).join('');}catch{}}

// --- ONBOARD ACCOUNT (cookie import) ---
async function onboardAccount() {
  var email = document.getElementById('onboard-email').value.trim();
  var type = document.getElementById('onboard-type').value;
  var raw = document.getElementById('onboard-cookies').value.trim();
  if (!email) return toast('Enter Apollo email');
  if (!raw) return toast('Paste cookie JSON');
  var parsed;
  try { parsed = JSON.parse(raw); } catch { return toast('Invalid JSON — use Cookie Editor export'); }
  if (!Array.isArray(parsed) || parsed.length === 0) return toast('Must be a JSON array of cookies');
  try {
    var r = await af('/api/accounts/onboard', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email: email, account_type: type, cookies: raw }) }).then(function(r) { return r.json(); });
    if (r.ok) { toast('Account ' + email + ' activated with ' + parsed.length + ' cookies'); document.getElementById('onboard-email').value = ''; document.getElementById('onboard-cookies').value = ''; loadAccounts(); loadBrowserAccounts(); }
    else toast(r.error || 'Failed');
  } catch (e) { toast('Error: ' + e.message); }
}

// --- SSE REAL-TIME ---
var evtSource = null;
var activeProgressOrderId = null;

function connectSSE() {
  if (evtSource) { try { evtSource.close(); } catch {} }
  evtSource = new EventSource('/api/events?token=' + TOKEN);

  evtSource.addEventListener('stats', function(e) {
    try {
      var s = JSON.parse(e.data);
      document.getElementById('s-accounts').textContent = s.accounts.total || 0;
      document.getElementById('s-accounts-sub').textContent = (s.accounts.active || 0) + ' active';
      document.getElementById('s-queued').textContent = s.queued_tasks || 0;
      document.getElementById('s-running').textContent = s.running_tasks || 0;
      document.getElementById('s-leads').textContent = s.leads || 0;
      document.getElementById('s-proxy').textContent = s.proxy_configured ? 'ON' : 'OFF';
      document.getElementById('s-proxy').style.color = s.proxy_configured ? '#059669' : '#ef4444';
      document.getElementById('s-proxy-sub').textContent = s.proxy_configured ? 'configured' : 'not set';
      var wp = document.getElementById('worker-status-pill');
      if (s.running_tasks > 0) { wp.innerHTML = '<span style="width:6px;height:6px;border-radius:50%;background:#059669;display:inline-block"></span> Active'; wp.style.background = '#d1fae5'; wp.style.color = '#065f46'; }
      else if (s.queued_tasks > 0) { wp.innerHTML = '<span style="width:6px;height:6px;border-radius:50%;background:#d97706;display:inline-block"></span> Queued'; wp.style.background = '#fef3c7'; wp.style.color = '#92400e'; }
      else { wp.innerHTML = '<span style="width:6px;height:6px;border-radius:50%;background:#94a3b8;display:inline-block"></span> Idle'; wp.style.background = '#f1f5f9'; wp.style.color = '#64748b'; }
    } catch {}
  });

  evtSource.addEventListener('order', function(e) {
    try {
      var d = JSON.parse(e.data);
      // Update progress modal if it's open for this order
      if (activeProgressOrderId === d.id && document.getElementById('progress-modal').style.display === 'flex') {
        renderProgress(d);
      }
      // Refresh orders list if visible
      var jobsPanel = document.getElementById('panel-jobs');
      if (jobsPanel && jobsPanel.classList.contains('active')) { loadOrders(); }
    } catch {}
  });
      evtSource.addEventListener('account_status', function(e) {
        try { var d = JSON.parse(e.data); if (document.getElementById('panel-accounts') && document.getElementById('panel-accounts').classList.contains('active')) loadAccounts(); } catch {}
      });
      evtSource.onerror = function() {
    // Auto-reconnect after 5s
    setTimeout(function() { if (TOKEN) connectSSE(); }, 5000);
  };
}

// Extract progress rendering into reusable function
function renderProgress(d) {
  document.getElementById('progress-title').textContent = d.name + ' \u2014 #' + d.id;
  var c = 0, r = 0, q = 0, tl = 0;
  d.tasks.forEach(function(t) { if (t.status === 'completed') c++; else if (t.status === 'running') r++; else if (t.status === 'queued') q++; tl += t.scraped_results || 0; });
  var pct = d.total_leads_target > 0 ? Math.round(tl / d.total_leads_target * 100) : 0;
  document.getElementById('progress-bar').style.width = Math.min(pct, 100) + '%';
  var eta = (d.status==='running'||d.status==='pending') ? calcETA(d.created_at, tl, d.total_leads_target) : (d.status==='completed'?'done':'-');
  var elapsed = (Date.now() - new Date(d.created_at + ' UTC').getTime()) / 1000;
  var rateMin = elapsed > 10 && tl > 0 ? (tl / elapsed * 60).toFixed(1) : '0';
  document.getElementById('progress-summary').innerHTML = '<div style="background:#f0fdf4;border-radius:10px;padding:14px;text-align:center"><div style="font-size:22px;font-weight:800;color:#059669">' + c + '</div><div style="font-size:10px;color:#64748b;font-weight:600;text-transform:uppercase;letter-spacing:0.5px">Done</div></div><div style="background:#fef3c7;border-radius:10px;padding:14px;text-align:center"><div style="font-size:22px;font-weight:800;color:#d97706">' + r + '</div><div style="font-size:10px;color:#64748b;font-weight:600;text-transform:uppercase;letter-spacing:0.5px">Running</div></div><div style="background:#f0f9ff;border-radius:10px;padding:14px;text-align:center"><div style="font-size:22px;font-weight:800;color:#0284c7">' + tl + '</div><div style="font-size:10px;color:#64748b;font-weight:600;text-transform:uppercase;letter-spacing:0.5px">Leads' + (d.total_leads_target ? ' / ' + d.total_leads_target : '') + '</div></div><div style="background:#ede9fe;border-radius:10px;padding:14px;text-align:center"><div style="font-size:22px;font-weight:800;color:#7c3aed">' + eta + '</div><div style="font-size:10px;color:#64748b;font-weight:600;text-transform:uppercase;letter-spacing:0.5px">ETA &middot; ' + rateMin + '/min</div></div>';
  document.getElementById('progress-tasks').innerHTML = d.tasks.map(function(t, i) { var sc = t.status === 'completed' ? '#059669' : t.status === 'running' ? '#d97706' : t.status === 'error' ? '#ef4444' : '#94a3b8'; var ps = t.status === 'running' ? (t.scraped_pages || 0) + '/' + (t.total_pages || '?') + ' pg' : t.status === 'completed' ? (t.scraped_pages || 0) + ' pg' : t.status === 'queued' ? 'Waiting' : t.error || 'Error'; return '<tr><td>' + (i + 1) + '</td><td><span style="color:' + sc + ';font-weight:600">' + t.status + '</span></td><td>' + (t.account_email || '<span style="color:#94a3b8">-</span>') + '</td><td>' + ps + '</td><td>' + (t.scraped_results || 0) + '</td></tr>'; }).join('');
}

// --- DOWNLOADS ---
async function loadDownloads() {
  try {
    var files = await af('/api/downloads').then(function(r){return r.json();});
    var el = document.getElementById('downloads-list');
    if (!files.length) { el.innerHTML = '<div class="empty">No orders yet</div>'; return; }
    el.innerHTML = '<table><thead><tr><th>Order</th><th>Status</th><th>Leads</th><th>With Email</th><th>Enriched</th><th>Created</th><th>Action</th></tr></thead><tbody>' +
      files.map(function(f) {
        var statusClass = f.status === 'completed' ? 'badge-completed' : f.status === 'running' ? 'badge-running' : 'badge-queued';
        var dt = new Date(f.created_at + ' UTC');
        var dateStr = dt.toLocaleDateString() + ' ' + dt.toLocaleTimeString([], {hour:'2-digit',minute:'2-digit'});
        return '<tr>' +
          '<td style="font-weight:600">' + f.name + ' <span style="color:#94a3b8;font-weight:400">#' + f.id + '</span></td>' +
          '<td><span class="badge ' + statusClass + '">' + f.status + '</span></td>' +
          '<td style="font-weight:600">' + (f.lead_count || 0).toLocaleString() + '</td>' +
          '<td>' + (f.with_email || 0).toLocaleString() + '</td>' +
          '<td>' + (f.enriched || 0).toLocaleString() + '</td>' +
          '<td style="color:#64748b;font-size:12px">' + dateStr + '</td>' +
          '<td>' +
            (f.lead_count > 0 ? '<button class="btn btn-primary btn-sm" onclick="downloadOrder(' + f.id + ')">Download CSV</button>' : '<span style="color:#94a3b8;font-size:12px">No leads</span>') +
          '</td>' +
        '</tr>';
      }).join('') +
    '</tbody></table>';
  } catch(e) { document.getElementById('downloads-list').innerHTML = '<div class="empty">Error loading downloads</div>'; }
}

function downloadOrder(orderId) {
  window.location.href = '/api/leads/download?order_id=' + orderId;
}

init();

</script>

<!-- SHARE ACCESS MODAL -->
<div id="share-modal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:9999;align-items:center;justify-content:center">
  <div style="background:white;border-radius:12px;padding:28px;max-width:600px;width:90%;max-height:85vh;overflow-y:auto">
    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px">
      <h2 style="margin:0">Share Access — <span id="share-user-name"></span></h2>
      <button onclick="closeShareModal()" style="background:none;border:none;font-size:24px;cursor:pointer">&times;</button>
    </div>
    <div style="background:#f1f5f9;padding:12px;border-radius:8px;margin-bottom:16px;font-size:12px;color:#475569">
      Grant this user access to specific orders or give them full access to everything.
    </div>
    
    <div style="display:flex;gap:8px;margin-bottom:20px">
      <button class="btn btn-primary" onclick="grantFullAccess()">Grant Full Access</button>
      <button class="btn" onclick="revokeAllAccess()" style="background:#dc2626;color:white">Revoke All</button>
    </div>
    
    <h3 style="font-size:14px;margin:16px 0 8px">Add Specific Share</h3>
    <div style="display:flex;gap:8px;margin-bottom:16px">
      <select id="share-type" style="padding:8px;border:1px solid #cbd5e1;border-radius:6px;flex:1">
        <option value="orders">All Orders</option>
        <option value="accounts">All Accounts</option>
        <option value="leads">All Leads</option>
        <option value="order">Specific Order</option>
        <option value="account">Specific Account</option>
      </select>
      <input id="share-resource-id" type="number" placeholder="ID (optional)" style="padding:8px;border:1px solid #cbd5e1;border-radius:6px;width:120px">
      <select id="share-permission" style="padding:8px;border:1px solid #cbd5e1;border-radius:6px">
        <option value="read">Read</option>
        <option value="write">Write</option>
        <option value="full">Full</option>
      </select>
      <button class="btn btn-primary" onclick="addShare()">Add</button>
    </div>
    
    <h3 style="font-size:14px;margin:16px 0 8px">Current Shares</h3>
    <table style="width:100%;font-size:13px">
      <thead><tr style="background:#f8fafc"><th style="padding:8px;text-align:left">Resource</th><th style="padding:8px;text-align:left">Permission</th><th style="padding:8px;text-align:left">Granted By</th><th></th></tr></thead>
      <tbody id="share-list"></tbody>
    </table>
  </div>
</div>

<script>
var currentShareUserId = null;

async function openShareModal(userId, userName) {
  currentShareUserId = userId;
  document.getElementById('share-user-name').textContent = userName;
  document.getElementById('share-modal').style.display = 'flex';
  await loadShares();
}

function closeShareModal() {
  document.getElementById('share-modal').style.display = 'none';
  currentShareUserId = null;
}

async function loadShares() {
  if (!currentShareUserId) return;
  var shares = await af('/api/shares/user/' + currentShareUserId).then(function(r){return r.json();});
  var rows = shares.map(function(s) {
    var resLabel = s.resource_type;
    if (s.resource_id) resLabel += ' #' + s.resource_id;
    if (s.resource_type === 'all') resLabel = '<b>ALL RESOURCES</b>';
    return '<tr><td style="padding:8px">' + resLabel + '</td><td style="padding:8px"><span style="padding:2px 8px;background:#dbeafe;color:#1e40af;border-radius:4px;font-size:11px">' + s.permission + '</span></td><td style="padding:8px;color:#64748b">' + s.granted_by_email + '</td><td style="padding:8px"><button onclick="removeShare(' + s.id + ')" style="background:none;border:none;color:#dc2626;cursor:pointer">Remove</button></td></tr>';
  }).join('');
  document.getElementById('share-list').innerHTML = rows || '<tr><td colspan="4" style="padding:16px;text-align:center;color:#94a3b8">No shares yet</td></tr>';
}

async function grantFullAccess() {
  if (!confirm('Grant FULL access to everything?')) return;
  var r = await af('/api/shares/grant-full', {method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({user_id: currentShareUserId})}).then(function(r){return r.json();});
  if (r.ok) { toast('Full access granted'); loadShares(); }
  else toast(r.error || 'Failed');
}

async function revokeAllAccess() {
  if (!confirm('Revoke ALL shared access for this user?')) return;
  var r = await af('/api/shares/user/' + currentShareUserId + '/all', {method:'DELETE'}).then(function(r){return r.json();});
  if (r.ok) { toast('All shares revoked'); loadShares(); }
  else toast(r.error || 'Failed');
}

async function addShare() {
  var type = document.getElementById('share-type').value;
  var id = document.getElementById('share-resource-id').value;
  var perm = document.getElementById('share-permission').value;
  
  if ((type === 'order' || type === 'account') && !id) {
    toast('Specific resource requires an ID');
    return;
  }
  
  var body = {user_id: currentShareUserId, resource_type: type, permission: perm};
  if (id) body.resource_id = parseInt(id);
  
  var r = await af('/api/shares', {method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(body)}).then(function(r){return r.json();});
  if (r.ok) { toast('Share added'); loadShares(); document.getElementById('share-resource-id').value = ''; }
  else toast(r.error || 'Failed');
}

async function removeShare(id) {
  var r = await af('/api/shares/' + id, {method:'DELETE'}).then(function(r){return r.json();});
  if (r.ok) { toast('Removed'); loadShares(); }
}
</script>

</body>
</html>