<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Supraflux - Elite - Dashboard</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style>html{scroll-behavior:smooth} :root{
    --surface:#ffffff; --border:#e5e7eb; --text:#111827;
  }
  .topbar{
    position:sticky; top:0; z-index:50;
    background:var(--surface); border-bottom:1px solid var(--border);
    padding:10px 16px; display:flex; align-items:center; justify-content:space-between;
  }
  .topbar-left,.topbar-right{ flex:1; display:flex; align-items:center; }
  .topbar-left{ justify-content:flex-start; }
  .topbar-right{ justify-content:flex-end; }
  .topbar-center{
    position:absolute; left:50%; transform:translateX(-50%);
    display:flex; align-items:center; gap:10px; pointer-events:none;
  }
  .brand-logo{ height:28px; width:auto; pointer-events:none; }
  .brand-title{ font-weight:600; color:var(--text); white-space:nowrap; pointer-events:none; }

  .btn-alert{
    display:inline-flex; align-items:center; gap:8px;
    padding:6px 10px; border:1px solid var(--border); border-radius:12px; background:#f9fafb;
  }
  .dot{ width:8px; height:8px; border-radius:9999px; display:inline-block; }
  .dot-open{ background:#22c55e; } /* grün = offen */
  .dot-closed{ background:#ef4444; } /* rot = geschlossen */

  .searchbox{ display:flex; gap:6px; align-items:center; }
  .searchbox input{
    height:34px; padding:0 10px; border:1px solid var(--border); border-radius:10px; min-width:260px;
  }
  .searchbox button{
    height:34px; padding:0 12px; border-radius:10px; background:#111827; color:#fff; border:0;
  }
</style>

</head>
<body class="bg-gray-50 text-gray-900">
  <header class="topbar">
  <div class="topbar-left">
    <button class="btn-alert">
      <span class="dot dot-open"></span>
      Alerts
    </button>
  </div>

  <div class="topbar-center">
    <img src="{{ url_for('static', filename='supraflux-logo.png') }}" alt="Supraflux" class="brand-logo">
    <div class="brand-title">Supraflux – Elite – Dashboard</div>
  </div>

  <div class="topbar-right">
    <div class="searchbox">
      <input type="text" placeholder="Ticker suchen…" id="ticker-search">
      <button id="ticker-search-ok">OK</button>
    </div>
  </div>
</header>

  <main class="max-w-7xl mx-auto px-4 py-6 space-y-6">
    <!-- Tickerliste + Scan-Historie -->
    <section class="grid grid-cols-1 lg:grid-cols-3 gap-6">
      <div class="lg:col-span-2 rounded-2xl shadow-sm bg-white border border-gray-100">
        <div class="p-4 flex items-center justify-between">
          <div class="font-semibold">Tickerliste</div>
          <div class="flex items-center gap-2 text-xs">
            <button class="px-2 py-1 rounded-lg bg-black text-white">Export CSV</button>
            <button class="px-2 py-1 rounded-lg bg-black text-white">+ Ticker</button>
          </div>
        </div>
        <div class="overflow-auto">
          <table class="w-full text-sm">
            <thead class="bg-gray-50 border-t border-b border-gray-200">
              <tr>
                <th class="px-3 py-2 text-left">Ticker</th>
                <th class="px-3 py-2 text-left">Datum</th>
                <th class="px-3 py-2 text-left">Kurs</th>
                <th class="px-3 py-2 text-left">Trend</th>
                <th class="px-3 py-2 text-left">Score</th>
                <th class="px-3 py-2 text-left">RVOL</th>
                <th class="px-3 py-2 text-left">ATR%</th>
                <th class="px-3 py-2 text-left">Letzter Scan</th>
                <th class="px-3 py-2 text-left">Ergebnis</th>
              </tr>
            </thead>
            <tbody id="ticker-rows"></tbody>
          </table>
        </div>
      </div>

      <aside class="rounded-2xl shadow-sm bg-white border border-gray-100 p-4">
        <div class="font-semibold mb-3">Scan-Historie</div>
        <ul id="scan-list" class="list-disc list-inside space-y-2 text-sm"></ul>
      </aside>
    </section>

    <!-- Einstellungen -->
    <section class="rounded-2xl shadow-sm bg-white border border-gray-100 p-4">
      <div class="font-semibold mb-3">Einstellungen</div>

      <!-- Schwellen & Filter -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div>
          <div class="text-sm font-medium mb-2">Schwellen & Filter</div>
          <div class="grid grid-cols-2 gap-2 text-sm">
            <label class="flex items-center justify-between bg-gray-50 border rounded-xl px-3 py-2">
              <span>Score ≥</span>
              <input value="88" class="w-20 text-right bg-transparent outline-none" />
            </label>
            <label class="flex items-center justify-between bg-gray-50 border rounded-xl px-3 py-2">
              <span>RVOL ≥</span>
              <input value="1.3" class="w-20 text-right bg-transparent outline-none" />
            </label>
            <label class="flex items-center justify-between bg-gray-50 border rounded-xl px-3 py-2">
              <span>ATR% 2–8</span>
              <input value="2–8" class="w-20 text-right bg-transparent outline-none" />
            </label>
            <label class="flex items-center justify-between bg-gray-50 border rounded-xl px-3 py-2">
              <span>CRV ≥</span>
              <input value="1.5" class="w-20 text-right bg-transparent outline-none" />
            </label>
          </div>

          <!-- Live-Scan Filter (dynamisch) -->
          <div class="mt-4">
            <div class="flex items-center justify-between mb-2">
              <div class="text-sm font-medium">Live-Scan Filter</div>
              <button id="btn-add-filter" class="text-xs px-2 py-1 rounded-lg bg-gray-100">+ Filter</button>
            </div>
            <div id="filters" class="space-y-2"></div>
            <div class="text-xs text-gray-400 mt-1">Hinweis: UI-Mockup – Logikbindung folgt in der Implementierung.</div>
          </div>
        </div>

        <!-- Telegram/Watchlist (Nur Anzeige) -->
        <div>
          <div class="text-sm font-medium mb-2">Telegram</div>
          <div class="grid grid-cols-1 gap-2 text-sm mb-4">
            <div class="flex items-center justify-between bg-gray-50 border rounded-xl px-3 py-2">
              <span>Bot Status</span><span class="px-2 py-0.5 rounded-full bg-green-100 text-green-700 text-xs">Verbunden</span>
            </div>
            <div class="flex items-center justify-between bg-gray-50 border rounded-xl px-3 py-2">
              <span>Chat ID</span><span class="font-mono text-xs">•••2557</span>
            </div>
          </div>
          <div class="text-sm font-medium mb-2">Watchlist verwalten</div>
          <div class="flex items-center gap-2">
            <input placeholder="Ticker hinzufügen…" class="flex-1 bg-gray-50 border rounded-xl px-3 py-2 text-sm" />
            <button class="px-3 py-2 rounded-xl bg-black text-white text-sm">Hinzufügen</button>
          </div>
        </div>
      </div>
    </section>
  </main>

  <footer class="border-t border-gray-200 py-6 text-center text-xs text-gray-500">
    Mockup-UI • Alle Daten sind Platzhalter – dient nur der visuellen Abstimmung.
  </footer>

  <script>
    // Dummy-Daten für die Tickerliste
    const tickers = ["NVDA","TSLA","AMD","AAPL","AMZN","META","MSFT","GOOGL","NFLX","AVGO","SMCI","ARM","COIN","MRNA","PLTR","RIVN","SHOP","BA","SQ","ROKU"];
    const tbody = document.getElementById("ticker-rows");
    tickers.forEach((t, i) => {
      const tr = document.createElement("tr");
      tr.className = "border-b border-gray-100 hover:bg-gray-50";
      const date = "2025-10-29";
      const price = (Math.random()*900+20).toFixed(2);
      const trend = ["Aufwärts","Seitwärts","Abwärts"][i%3];
      const score = (80 + Math.random()*15).toFixed(0) + "%";
      const rvol  = (1 + Math.random()*1.1).toFixed(2);
      const atrp  = (2 + Math.random()*5).toFixed(2);
      const last  = "2025-10-29 12:51:23";
      const res   = "Erfolg";
      tr.innerHTML = `
        <td class="px-3 py-2 font-semibold">${t}</td>
        <td class="px-3 py-2">${date}</td>
        <td class="px-3 py-2 font-mono">${price}</td>
        <td class="px-3 py-2">${trend}</td>
        <td class="px-3 py-2">${score}</td>
        <td class="px-3 py-2">${rvol}</td>
        <td class="px-3 py-2">${atrp}</td>
        <td class="px-3 py-2">${last}</td>
        <td class="px-3 py-2"><span class="px-2 py-0.5 rounded-full bg-green-100 text-green-700 text-xs">${res}</span></td>
      `;
      tbody.appendChild(tr);
    });

    // Scan-Historie aus /api/scans (falls vorhanden), sonst Platzhalter
    fetch("/api/scans").then(r=>r.json()).then(list=>{
      const ul = document.getElementById("scan-list");
      if (!Array.isArray(list) || list.length === 0) {
        ["2025-10-29 12:51:23","2025-10-29 12:49:33","2025-10-29 12:30:46","2025-10-29 12:29:44"]
          .forEach(ts=>{
            const li=document.createElement("li");
            li.textContent = `${ts} · live · Erfolg`;
            ul.appendChild(li);
          });
        return;
      }
      list.slice(-12).reverse().forEach(s=>{
        const li=document.createElement("li");
        li.textContent = `${s.at} · ${s.kind} · ${s.status}`;
        ul.appendChild(li);
      });
    }).catch(()=>{});

    // Live-Scan Filter – Add/Remove Rows
    const filtersWrap = document.getElementById("filters");
    const addBtn = document.getElementById("btn-add-filter");

    function addFilterRow(field="Preis ≥", op=">=", value="5") {
      const row = document.createElement("div");
      row.className = "grid grid-cols-3 gap-2 text-sm bg-gray-50 border rounded-xl px-3 py-2";
      row.innerHTML = `
        <input value="${field}" class="bg-transparent outline-none" />
        <input value="${op}" class="bg-transparent outline-none text-center" />
        <div class="flex items-center gap-2">
          <input value="${value}" class="flex-1 bg-transparent outline-none text-right" />
          <button class="text-xs px-2 py-1 rounded bg-white border" title="Filter entfernen">×</button>
        </div>
      `;
      row.querySelector("button").addEventListener("click", ()=> row.remove());
      filtersWrap.appendChild(row);
    }

    // Startwerte wie besprochen (inkl. 1,000,000 am richtigen Ort = AvgVol20)
    addFilterRow("AvgVol20 ≥", ">=", "1,000,000");
    addFilterRow("Preis ≥", ">=", "5");

    addBtn.addEventListener("click", ()=> addFilterRow());
  </script>
</body>
</html>
