<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>Customer Feedback Intelligence</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <link rel="stylesheet" href="/static/styles.css">
</head>
<body>
  <aside class="sidebar">
    <div class="brand"><div class="logo">N</div><div><b>Neural Ninjas</b><span>Agent Intelligence</span></div></div>
    <nav>
      <a href="#overview" class="active">Overview</a>
      <a href="#analytics">Analytics</a>
      <a href="#reviews">Review Explorer</a>
      <a href="#live">Live Analyzer</a>
    </nav>
    <div class="agent-status"><i></i><div><b>4 Agents Online</b><span>Parallel orchestration</span></div></div>
  </aside>

  <main>
    <section class="hero" id="overview">
      <div>
        <p class="kicker">MULTI-AGENT CUSTOMER INTELLIGENCE</p>
        <h1>Turn raw feedback into <span>decisions.</span></h1>
        <p class="hero-copy">Four parallel AI agents analyze sentiment, issue type, urgency/churn risk and routing before a fan-in aggregator calculates business priority.</p>
      </div>
      <div class="api-pill"><i></i> FastAPI connected</div>
    </section>

    <section class="metrics">
      <article><span>Total Reviews</span><strong id="totalReviews">—</strong><small>Analyzed feedback</small></article>
      <article><span>Critical</span><strong id="criticalCount">—</strong><small>Immediate attention</small></article>
      <article><span>Negative</span><strong id="negativeCount">—</strong><small>Negative sentiment</small></article>
      <article><span>Avg Priority</span><strong><b id="avgPriority">—</b><em>/100</em></strong><small>Portfolio-wide score</small></article>
    </section>

    <section class="analytics" id="analytics">
      <article class="panel"><p class="kicker">VOICE OF CUSTOMER</p><h2>Sentiment Mix</h2><div class="chart"><canvas id="sentimentChart"></canvas></div></article>
      <article class="panel"><p class="kicker">BUSINESS RISK</p><h2>Priority Distribution</h2><div class="chart"><canvas id="priorityChart"></canvas></div></article>
      <article class="panel wide"><p class="kicker">OPERATIONS</p><h2>Department Routing</h2><div class="chart"><canvas id="departmentChart"></canvas></div></article>
      <article class="panel wide"><p class="kicker">PRODUCT SIGNALS</p><h2>Issue Breakdown</h2><div id="issueBars" class="issue-bars"></div></article>
    </section>

    <section class="panel reviews-panel" id="reviews">
      <div class="panel-head"><div><p class="kicker">REVIEW EXPLORER</p><h2>Prioritized Customer Queue</h2></div>
        <div class="filters"><input id="searchInput" placeholder="Search customer or issue..."><select id="priorityFilter"><option value="">All priorities</option><option>CRITICAL</option><option>HIGH</option><option>MEDIUM</option><option>LOW</option></select><select id="departmentFilter"><option value="">All departments</option></select></div>
      </div>
      <div class="table-wrap"><table><thead><tr><th>Customer</th><th>Issue</th><th>Sentiment</th><th>Department</th><th>Urgency</th><th>Churn</th><th>Priority</th></tr></thead><tbody id="reviewsTable"></tbody></table></div>
    </section>

    <section class="live-grid" id="live">
      <article class="panel">
        <p class="kicker">LIVE MULTI-AGENT TEST</p><h2>Analyze New Feedback</h2>
        <p class="muted">Paste any customer feedback. FastAPI sends it through all four LangGraph agents in parallel.</p>
        <textarea id="liveFeedback" placeholder="The app crashes whenever I upload a PDF and our client deadline is today. If this is not fixed, we are moving to another product."></textarea>
        <button id="analyzeBtn">Run 4-Agent Analysis →</button><div id="liveStatus" class="status-text"></div>
      </article>
      <article class="panel result-panel" id="liveResult"><div class="empty"><div class="orbit"><span></span><span></span><span></span><span></span><b>AI</b></div><h3>Waiting for feedback</h3><p>Your structured analysis will appear here.</p></div></article>
    </section>
  </main>
  <script src="/static/app.js"></script>
</body>
</html>
