<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <title>ECAI — Search & Chat</title>
  <link rel="stylesheet" type="text/css" href='/static/css/ecai-chat.css' />
  <link rel="stylesheet" type="text/css" href='/static/css/ecai.css' />
  <link rel="stylesheet" type="text/css" href='/static/css/ecai-merged.css' />
  <style>
    /* unify background + blend */
    body { background: var(--bg); color: var(--text, var(--fg)); }
    .blank { display:flex; align-items:center; justify-content:center; flex:1; }
    .searchbox { max-width:600px; width:100%; }
  </style>
</head>
<body>
<div class="app" id="app">

  <!-- Sidebar (from chat template) -->
  <aside class="sidebar">
    <div class="brand">
      <h1>ECAI</h1>
      <p>Search · Chat · Deterministic</p>
    </div>

    <div class="section">
      <div style="font-size:11px;color:var(--muted);margin-bottom:6px">Project</div>
      <div class="row">
        <select id="projectSelect" style="flex:1"></select>
        <button id="btnNewProject">+ New</button>
      </div>
      <div class="row" style="margin-top:6px">
        <button class="link" id="btnRenameProject">Rename</button>
        <button class="link" id="btnDeleteProject">Delete</button>
        <button class="link" id="btnPassphrase">Passphrase</button>
      </div>
    </div>

    <div class="section" style="border-top:none;padding-top:6px">
      <div style="font-size:11px;color:var(--muted);margin:6px 0">Conversations</div>
      <div id="convList" class="list"></div>
    </div>

    <div class="section">
      <button class="primary" style="width:100%" id="btnNewChat">New chat</button>
    </div>
  </aside>

  <!-- Main area -->
  <main class="main">
    <div class="topbar">
      <div id="projectName">Project: —</div>
      <div id="sessionInfo" style="font-size:12px;color:var(--muted)"></div>
    </div>

    <!-- Blank/Search state -->
    <div id="blank" class="blank">
      <div class="wrap">
        <div class="brand">ECAI</div>
        <div class="row">
          <div class="searchbox">
            <input id="q" type="text" placeholder='Ask anything … (quotes for exact phrase, "-" to exclude)' autofocus />
            <button id="clear" class="clear-btn" title="Clear query">×</button>
            <button id="go" class="btn btn-primary">Search</button>
          </div>
        </div>
        <div id="status" class="status">Type and press Enter, or click Search.</div>
        <div id="count" class="sub"></div>
        <div id="results" class="results"></div>
      </div>
    </div>

    <!-- Chat area (hidden until chat starts) -->
    <div id="chatArea" style="display:none;flex:1;flex-direction:column">
      <div class="messages" id="messages"></div>
      <div class="composer">
        <div class="row">
          <textarea id="input" placeholder="Ask anything. Your history is encrypted at rest."></textarea>
          <button id="btnSend" class="primary">Send</button>
        </div>
        <div class="status" id="statusChat"></div>
      </div>
    </div>
  </main>
</div>

<!-- Scripts -->
<script type='module' src='/static/js/sidekick.js'></script>
<script type='module' src='/static/js/wallet.js' defer></script>
<script type='module' src='/static/js/ecai.js' defer></script>
<script type='module' src='/static/js/ecai-chat.js' defer></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
  const q = document.getElementById('q');
  const go = document.getElementById('go');
  const blank = document.getElementById('blank');
  const chatArea = document.getElementById('chatArea');
  const input = document.getElementById('input');
  const send = document.getElementById('btnSend');

  function startChatFromSearch(query) {
    blank.style.display = 'none';
    chatArea.style.display = 'flex';
    input.value = query;
    // optional: auto-send
    send.click();
  }

  go.addEventListener('click', () => {
    const query = q.value.trim();
    if (query) startChatFromSearch(query);
  });
  q.addEventListener('keydown', (e) => {
    if (e.key === 'Enter') {
      e.preventDefault();
      const query = q.value.trim();
      if (query) startChatFromSearch(query);
    }
  });
});
</script>
</body>
</html>

