<!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>

  <!-- Tailwind via CDN (nur für UI) -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- Lucide Icons -->
  <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
  <!-- Chart.js für Follow-Mode-Chart -->
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

  <style>
    :root{
      --card: #ffffff;
      --muted: #6b7280;
      --ring:  #e5e7eb;
      --ink:  #111827;
    }
    body{ background:#f6f7f9; color:var(--ink); }
    .card{ background:var(--card); border:1px solid var(--ring); border-radius:16px; }
    .pill{ font-size:12px; padding:.25rem .5rem; border-radius:999px; }
    .pill-ok{ background:#dcfce7; color:#166534; }
    .pill-warn{ background:#fef9c3; color:#92400e; }
    .pill-bad{ background:#fee2e2; color:#991b1b; }
    .pill-info{ background:#dbeafe; color:#1e40af; }
    .mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace; }
    .btn{ padding:.5rem .75rem; border-radius:12px; }
    .btn-dark{ background:#0b1220; color:#fff; }
    .btn-ghost{ background:#eef2f7; }
    .tab-active{ background:#0b1220; color:#fff; border-color:#0b1220; }
    .tab{ display:flex; align-items:center; gap:.5rem; width:100%; text-align:left; border:1px solid var(--ring); border-radius:12px; padding:.5rem .75rem; background:#fff; }
    .grid-gap{ gap:1.25rem; }
    .scroll-area{ max-height: 14rem; overflow:auto; padding-right:.25rem;}
  </style>
</head>
<body>
  <!-- HEADER (ohne Logo, „Alarm“ links, Titel mittig, Suche rechts mit OK) -->
  <header class="sticky top-0 z-40 border-b border-[var(--ring)] bg-white/80 backdrop-blur">
    <div class="max-w-7xl mx-auto px-4 py-3 flex items-center justify-between">
      <!-- Alarm links -->
      <button id="alarmBtn" class="btn btn-ghost flex items-center gap-2">
        <i data-lucide="bell" class="w-4 h-4"></i><span>Alarm</span>
      </button>

      <!-- Titel mittig -->
      <h1 class="text-lg md:text-xl font-semibold text-center">
        Supraflux – Elite – Dashboard
      </h1>

      <!-- Suche rechts mit OK -->
      <div class="flex items-center gap-2">
        <div class="hidden md:flex items-center gap-2 bg-[#eef2f7] border border-[var(--ring)] rounded-xl px-3 py-1.5">
          <i data-lucide="search" class="w-4 h-4 text-[var(--muted)]"></i>
          <input id="searchInput" placeholder="Ticker suchen…" class="bg-transparent outline-none text-sm" />
        </div>
        <button id="okBtn" class="btn btn-dark text-sm">OK</button>
      </div>
    </div>
  </header>

  <!-- LAYOUT -->
  <div class="max-w-7xl mx-auto px-4 py-6 grid grid-cols-12 grid-gap">
    <!-- Sidebar -->
    <aside class="col-span-12 md:col-span-3 lg:col-span-2">
      <nav class="space-y-2">
        <button data-tab="overview"  class="tab tab-active"><i data-lucide="layout-dashboard" class="w-4 h-4"></i> Übersicht</button>
        <button data-tab="signals"   class="tab"><i data-lucide="signal-high" class="w-4 h-4"></i> Live-Signale</button>
        <button data-tab="tickers"   class="tab"><i data-lucide="list-checks" class="w-4 h-4"></i> Tickerliste</button>
        <button data-tab="scans"     class="tab"><i data-lucide="line-chart" class="w-4 h-4"></i> Scans</button>
        <button data-tab="quality"   class="tab"><i data-lucide="logs" class="w-4 h-4"></i> Datenqualität</button>
        <button data-tab="follow"    class="tab"><i data-lucide="eye" class="w-4 h-4"></i> Follow-Mode</button>
        <button data-tab="settings"  class="tab"><i data-lucide="settings" class="w-4 h-4"></i> Einstellungen</button>
      </nav>

      <!-- Schnellaktionen -->
      <div class="mt-6 card p-3">
        <div class="text-xs text-[var(--muted)] mb-2">Schnellaktionen</div>
        <div class="flex flex-wrap gap-2">
          <button class="btn btn-dark text-xs flex items-center gap-1"><i data-lucide="play" class="w-3 h-3"></i> Ad-hoc Scan</button>
          <button class="btn btn-ghost text-xs flex items-center gap-1"><i data-lucide="pause" class="w-3 h-3"></i> Cooldown</button>
          <button class="btn btn-ghost text-xs flex items-center gap-1"><i data-lucide="filter" class="w-3 h-3"></i> Filter</button>
        </div>
      </div>
    </aside>

    <!-- Main -->
    <main class="col-span-12 md:col-span-9 lg:col-span-10 space-y-6">
      <!-- ÜBERSICHT (nur Rahmen – Inhalte wie gehabt) -->
      <section id="tab-overview" class="space-y-6"></section>

      <!-- LIVE-SIGNALE -->
      <section id="tab-signals" class="hidden">
        <div class="card p-4">
          <div class="flex items-center justify-between mb-3">
            <div class="font-semibold">Live-Signale Feed</div>
            <div class="flex items-center gap-2 text-xs">
              <span class="pill pill-ok">Telegram OK</span>
              <span class="pill pill-info">Cooldown: 60m</span>
            </div>
          </div>
          <div id="signalsList" class="divide-y"></div>
        </div>
      </section>

      <!-- TICKERLISTE  -->
      <section id="tab-tickers" class="hidden">
        <div class="card">
          <div class="p-4 flex items-center justify-between">
            <div class="font-semibold">
              Tickerliste (deine 20 Titel) • <span id="tickerDate">30.10.2025</span>
            </div>
            <div class="flex items-center gap-2 text-xs">
              <button id="compactBtn" class="btn btn-ghost">Kompakt</button>
              <button class="btn btn-dark flex items-center gap-1"><i data-lucide="plus" class="w-3 h-3"></i> Ticker</button>
              <button class="btn btn-dark">Export CSV</button>
            </div>
          </div>

          <div class="overflow-auto">
            <table class="w-full text-sm" id="tickerTable">
              <thead class="bg-[#f3f4f6] border-t border-b border-[var(--ring)]">
              <tr>
                <th class="text-left font-medium px-3 py-2">Ticker</th>
                <th class="text-left font-medium px-3 py-2">Signalstatus</th>
                <th class="text-left font-medium px-3 py-2">Kurs</th>
                <th class="text-left font-medium px-3 py-2">± %</th>
                <th class="text-left font-medium px-3 py-2">Trend</th>
                <th class="text-left font-medium px-3 py-2">Score</th>
                <th class="text-left font-medium px-3 py-2">RVOL</th>
                <th class="text-left font-medium px-3 py-2">ATR%</th>
                <th class="text-left font-medium px-3 py-2">Letzter Scan</th>
                <th class="text-left font-medium px-3 py-2">Ergebnis</th>
                <th class="text-left font-medium px-3 py-2">Gap</th>
                <th class="text-left font-medium px-3 py-2">Datenqualität</th>
              </tr>
              </thead>
              <tbody id="tickerBody"></tbody>
            </table>
          </div>
        </div>
      </section>

      <!-- SCANS – wie im Mockup: linke Spalte Verlauf (scrollbar), rechts Fehler & Warnungen -->
      <section id="tab-scans" class="hidden">
        <div class="grid grid-cols-1 lg:grid-cols-2 grid-gap">
          <div class="card p-4">
            <div class="font-semibold mb-3">Scan-Historie</div>
            <div id="scanHistory" class="scroll-area space-y-2"></div>
          </div>
          <div class="card p-4">
            <div class="font-semibold mb-3">Fehler &amp; Warnungen</div>
            <div id="scanErrors" class="scroll-area space-y-2"></div>
          </div>
        </div>
      </section>

      <!-- DATENQUALITÄT (kompakter Balken-Chart, Zeitachse) -->
      <section id="tab-quality" class="hidden">
        <div class="card p-4 space-y-4">
          <div class="font-semibold">Datenqualität &amp; Telemetrie</div>
          <div class="grid grid-cols-1 md:grid-cols-3 grid-gap">
            <div class="card p-4">
              <div class="text-sm text-[var(--muted)]">API Latenz (Ø)</div>
              <div class="text-xl font-semibold">180 ms</div>
              <div class="text-xs text-[var(--muted)] mt-1">Polygon Starter</div>
            </div>
            <div class="card p-4">
              <div class="text-sm text-[var(--muted)]">Fehlquoten</div>
              <div class="text-xl font-semibold">2.1 %</div>
              <div class="text-xs text-[var(--muted)] mt-1">404/400/RateLimit</div>
            </div>
            <div class="card p-4">
              <div class="text-sm text-[var(--muted)]">Datenabdeckung</div>
              <div class="text-xl font-semibold">98.7 %</div>
              <div class="text-xs text-[var(--muted)] mt-1">gültige Bars</div>
            </div>
          </div>

          <!-- kompakter Chart -->
          <div class="card p-4">
            <canvas id="qualityBar" height="160"></canvas>
            <div class="text-xs text-[var(--muted)] mt-2">Dies sind Dummy-Werte zur visuellen Darstellung.</div>
          </div>
        </div>
      </section>

      <!-- FOLLOW-MODE – exakt wie im Mockup (Zeitachse & KPIs) -->
      <section id="tab-follow" class="hidden">
        <div class="grid grid-cols-1 lg:grid-cols-5 grid-gap">
          <!-- Chart links -->
          <div class="lg:col-span-3 card p-4">
            <div class="flex items-center justify-between mb-3">
              <div class="font-semibold">Follow-Mode: <span id="followTicker">NVDA</span></div>
              <select id="followSelect" class="text-sm border rounded-lg px-2 py-1">
                <option>NVDA</option><option>TSLA</option><option>AMD</option><option>AAPL</option><option>AMZN</option><option>META</option>
              </select>
            </div>
            <canvas id="followChart" height="190"></canvas>

            <div class="grid grid-cols-2 md:grid-cols-4 grid-gap mt-4">
              <div class="card p-4">
                <div class="text-sm text-[var(--muted)]">MTF Trend</div>
                <div class="font-semibold">D1/H1/15m aligned</div>
              </div>
              <div class="card p-4">
                <div class="text-sm text-[var(--muted)]">Score</div>
                <div class="font-semibold">92 %</div>
                <div class="text-xs text-[var(--muted)] mt-1">RVOL 1.4 • ATR% 3.2</div>
              </div>
              <div class="card p-4">
                <div class="text-sm text-[var(--muted)]">Empf. Richtung</div>
                <div class="font-semibold">LONG</div>
              </div>
              <div class="card p-4">
                <div class="text-sm text-[var(--muted)]">Haltedauer</div>
                <div class="font-semibold">1–3h</div>
              </div>
            </div>
          </div>

          <!-- Letztes Signal rechts -->
          <div class="lg:col-span-2 card p-4">
            <div class="font-semibold mb-3">Letztes Signal</div>
            <div class="grid grid-cols-2 gap-2 text-sm">
              <div class="text-[var(--muted)]">Entry</div><div class="mono">123.45</div>
              <div class="text-[var(--muted)]">SL</div><div class="mono">119.80</div>
              <div class="text-[var(--muted)]">TP1</div><div class="mono">128.20</div>
              <div class="text-[var(--muted)]">TP2</div><div class="mono">132.00</div>
              <div class="text-[var(--muted)]">CRV</div><div class="mono">2.10 : 1</div>
              <div class="text-[var(--muted)]">Chance</div><div class="mono">72 %</div>
            </div>
            <div class="text-xs text-[var(--muted)] mt-2">
              Kommentar: Breakout über MTF-Cluster; Volumen bestätigt; AVWAP Support.
            </div>
          </div>
        </div>
      </section>

      <!-- EINSTELLUNGEN (nur Platzhalter) -->
      <section id="tab-settings" class="hidden">
        <div class="card p-4">
          <div class="font-semibold">Einstellungen (UI-Mockup)</div>
          <div class="text-sm text-[var(--muted)] mt-2">Weitere Logik folgt später.</div>
        </div>
      </section>
    </main>
  </div>

  <script>
    // Icons
    lucide.createIcons();

    // Tabs
    const tabs = ["overview","signals","tickers","scans","quality","follow","settings"];
    const navButtons = document.querySelectorAll("aside [data-tab]");
    function showTab(name){
      tabs.forEach(t=>{
        document.getElementById("tab-"+t).classList.toggle("hidden", t!==name);
      });
      navButtons.forEach(b=>{
        b.classList.toggle("tab-active", b.getAttribute("data-tab")===name);
      });
    }
    navButtons.forEach(b=> b.addEventListener("click", ()=> showTab(b.getAttribute("data-tab")) ));
    showTab("overview"); // Start

    // Dummy Daten
    const times = ["09:30","10:00","10:30","11:00","11:30","12:00","12:30","13:00","13:30"];
    const followData = [100,101.2,99.8,102.4,103.1,102.7,104.3,103.9,105.0];

    // Follow-Chart
    const fctx = document.getElementById("followChart").getContext("2d");
    new Chart(fctx, {
      type: "line",
      data: {
        labels: times,
        datasets: [{
          data: followData,
          borderColor: "#0b1220",
          pointRadius: 0,
          tension: .3,
          fill: false
        }]
      },
      options: {
        plugins: { legend: {display:false} },
        scales: {
          x: { grid: { display: true } },
          y: { grid: { display: true } }
        }
      }
    });

    // Datenqualität – kompakter Balken-Chart mit Uhrzeiten
    const qctx = document.getElementById("qualityBar")?.getContext("2d");
    if (qctx){
      new Chart(qctx,{
        type:"bar",
        data:{
          labels: times,
          datasets:[{ data: times.map(()=> Math.round(8+Math.random()*12)), backgroundColor:"#0b1220" }]
        },
        options:{
          plugins:{ legend:{display:false} },
          scales:{ y:{ beginAtZero:true } }
        }
      });
    }

    // Live-Signale Liste
    const demoSignals = [
      {sym:"NVDA", dir:"LONG",  age:"5m",  entry:"188.10", sl:"158.15", tp1:"125.14", tp2:"230.12", crv:"2.66", win:"65"},
      {sym:"TSLA", dir:"SHORT", age:"12m", entry:"140.47", sl:"189.99", tp1:"134.56", tp2:"206.91", crv:"1.79", win:"72"},
      {sym:"AMD",  dir:"LONG",  age:"19m", entry:"145.37", sl:"183.37", tp1:"125.77", tp2:"209.31", crv:"2.18", win:"65"},
      {sym:"AAPL", dir:"SHORT", age:"26m", entry:"128.09", sl:"173.56", tp1:"121.57", tp2:"204.09", crv:"2.72", win:"73"},
      {sym:"AMZN", dir:"LONG",  age:"33m", entry:"176.66", sl:"175.64", tp1:"141.20", tp2:"195.26", crv:"2.62", win:"68"},
      {sym:"META", dir:"SHORT", age:"40m", entry:"176.05", sl:"110.27", tp1:"159.44", tp2:"237.63", crv:"2.20", win:"76"}
    ];
    const signalsList = document.getElementById("signalsList");
    demoSignals.forEach(s=>{
      const row = document.createElement("div");
      row.className="py-3 flex items-center justify-between";
      row.innerHTML = `
        <div class="flex items-center gap-3">
          <i data-lucide="${s.dir==='LONG'?'trending-up':'trending-down'}" class="w-4 h-4"></i>
          <div class="font-semibold">${s.sym}</div>
          <span class="pill ${s.dir==='LONG'?'pill-ok':'pill-bad'}">${s.dir}</span>
          <span class="text-xs text-[var(--muted)]">${s.age} alt</span>
        </div>
        <div class="grid grid-cols-6 gap-6 text-sm">
          <div><div class="text-xs text-[var(--muted)]">Entry</div><div class="mono">${s.entry}</div></div>
          <div><div class="text-xs text-[var(--muted)]">SL</div><div class="mono">${s.sl}</div></div>
          <div><div class="text-xs text-[var(--muted)]">TP1</div><div class="mono">${s.tp1}</div></div>
          <div><div class="text-xs text-[var(--muted)]">TP2</div><div class="mono">${s.tp2}</div></div>
          <div><div class="text-xs text-[var(--muted)]">CRV</div><div class="mono">${s.crv}:1</div></div>
          <div><div class="text-xs text-[var(--muted)]">Chance</div><div class="mono">${s.win}%</div></div>
        </div>`;
      signalsList.appendChild(row);
    });
    lucide.createIcons();

    // Tickerliste Tabelle (kompakt, Datum oben neben Titel)
    const demoTickers = ["NVDA","TSLA","AMD","AAPL","AMZN","META","MSFT","GOOGL","NFLX","AVGO","SMCI","ARM","COIN","MRNA","PLTR","RIVN","SHOP","BA","SQ","ROKU"];
    const tbody = document.getElementById("tickerBody");
    demoTickers.forEach((t,i)=>{
      const change = (Math.random()*4-2).toFixed(2);
      const trend  = ["Aufwärts","Seitwärts","Abwärts"][i%3];
      const ok = Math.random()>.2;
      const gap = Math.random()>.8 ? "GAP" : "";
      const tr = document.createElement("tr");
      tr.className="border-b border-[#eef2f7] hover:bg-[#f9fafb]";
      tr.innerHTML = `
        <td class="px-3 py-2 font-semibold">${t}</td>
        <td class="px-3 py-2">${["Neu","Aktiv","Beendet"][Math.floor(Math.random()*3)]}</td>
        <td class="px-3 py-2 mono">${(100+Math.random()*900).toFixed(2)}</td>
        <td class="px-3 py-2 ${parseFloat(change)>=0?'text-green-600':'text-red-600'}">${change}%</td>
        <td class="px-3 py-2">${trend}</td>
        <td class="px-3 py-2">${(70+Math.random()*30|0)}%</td>
        <td class="px-3 py-2">${(1+Math.random()*1.2).toFixed(2)}</td>
        <td class="px-3 py-2">${(2+Math.random()*5).toFixed(2)}</td>
        <td class="px-3 py-2">${(8+Math.floor(Math.random()*7))}:${(10+Math.floor(Math.random()*50)).toString().padStart(2,"0")}</td>
        <td class="px-3 py-2">${ok?'<span class="pill pill-ok">Erfolg</span>':'<span class="pill pill-bad">Fehlgeschlagen</span>'}</td>
        <td class="px-3 py-2">${gap?'<span class="pill pill-warn">⚠︎ '+gap+'</span>':'<span class="text-gray-400">—</span>'}</td>
        <td class="px-3 py-2">${Math.random()>.9?'<span class="pill pill-warn">Warnung</span>':'<span class="pill pill-ok">OK</span>'}</td>`;
      tbody.appendChild(tr);
    });

    // Scan-Historie + Fehler & Warnungen
    const scanHistory = document.getElementById("scanHistory");
    const scanErrors  = document.getElementById("scanErrors");
    const scans = Array.from({length:8}).map((_,i)=>({
      at: `2025-10-28 ${8+i}:${(10+Math.floor(Math.random()*50)).toString().padStart(2,"0")}`,
      type: i%2===0?"Full Market Scan":"Live-Scan",
      L: 2+Math.floor(Math.random()*5),
      S: 2+Math.floor(Math.random()*5),
      status: Math.random()>0.15?"Erfolg":"Fehlgeschlagen",
      duration: `${5+Math.floor(Math.random()*20)}s`,
      error: Math.random()>0.85?"Rate limit":""
    }));
    scans.forEach(s=>{
      const row = document.createElement("div");
      row.className="flex items-center justify-between px-3 py-2 rounded-xl border border-[var(--ring)]";
      row.innerHTML = `
        <div>
          <div class="font-medium">${s.type}</div>
          <div class="text-xs text-[var(--muted)]">${s.at} • ${s.duration}</div>
        </div>
        <div class="text-sm">L ${s.L} · S ${s.S}</div>
        <span class="pill ${s.status==='Erfolg'?'pill-ok':'pill-bad'}">${s.status}</span>
      `;
      scanHistory.appendChild(row);

      if (s.error){
        const er = document.createElement("div");
        er.className="flex items-center justify-between px-3 py-2 rounded-xl border border-[var(--ring)]";
        er.innerHTML = `
          <div class="flex items-center gap-2">
            <i data-lucide="triangle-alert" class="w-4 h-4 text-yellow-600"></i>
            <div>
              <div class="font-medium">${s.error}</div>
              <div class="text-xs text-[var(--muted)]">${s.at}</div>
            </div>
          </div>
          <span class="pill pill-warn">Beobachten</span>
        `;
        scanErrors.appendChild(er);
      }
    });
    lucide.createIcons();
  </script>
</body>
</html>
