// Arcrun 桌面 App — 前端（t193）
//
// 版面照 leo 08-04 指定（附 Google Drive 截圖）：
//   「可以完全模仿 gdrive，**左方側邊欄，在右方替換頁面**」
//   ⇒ 設定不再開 popup，全部是右側的頁；只有「確認刪除」才用覆蓋層。
import './arcrun-cis.css';   // 共用底層（色票/字體/紋理）——唯一真相源在 arcrun-cis/css/
import './style.css';        // 本 App 的版面

const go = window.go.main.App;
const $ = (id) => document.getElementById(id);
const esc = (s) => String(s).replace(/[&<>"]/g, (c) =>
  ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]));

// 跟隨系統深淺色（CIS 兩套色票都在 arcrun-cis.css 定義好了）
const mq = window.matchMedia('(prefers-color-scheme: dark)');
const applyTheme = () =>
  document.documentElement.setAttribute('data-theme', mq.matches ? 'dark' : 'light');
mq.addEventListener('change', applyTheme);
applyTheme();

let state = null;
let page = 'home';
let updateInfo = null;   // { current, latest, available, notes, staged }

// ── 覆蓋層（只給必須打斷的確認）──
function openSheet(html, wire) {
  $('sheet').innerHTML = html; $('overlay').classList.add('on'); if (wire) wire();
}
function closeSheet() { $('overlay').classList.remove('on'); }
$('overlay').addEventListener('click', (e) => { if (e.target.id === 'overlay') closeSheet(); });
document.addEventListener('keydown', (e) => { if (e.key === 'Escape') closeSheet(); });

// ── 側邊欄換頁 ──
document.querySelectorAll('#side .nav').forEach((el) => {
  el.onclick = () => {
    page = el.dataset.page;
    document.querySelectorAll('#side .nav').forEach((n) => n.classList.toggle('on', n === el));
    renderPage();
  };
});

// ── 各頁 ──
function pageHome(s) {
  const folders = (s.accounts || []).reduce((n, a) => n + (a.folders || []).length, 0);
  if (!s.accounts || !s.accounts.length) return onboarding();
  return `
    <div class="card">
      <h3>目前狀況</h3>
      <div class="kv" style="margin-top:10px">
        <div><div class="big-num">${s.accounts.length}</div><div class="k">個知識庫</div></div>
        <div><div class="big-num">${folders}</div><div class="k">個資料夾在看守</div></div>
        <div><div class="big-num">${s.extractedOK || 0}</div><div class="k">份已整理</div></div>
      </div>
    </div>
    <div class="card">
      <h3>快速動作</h3>
      <div class="acts">
        <button id="qAdd">加入資料夾</button>
        <button id="qPortal">開啟知識庫網頁</button>
        <button id="qDocs">使用說明</button>
      </div>
    </div>`;
}

function pageFolders(s) {
  if (!s.accounts || !s.accounts.length) return onboarding();
  return (s.accounts).map((a) => `
    <div class="acct"><span class="name">${esc(a.name)}</span><span class="host">${esc(a.host)}</span></div>
    ${(a.folders || []).map((f) => `
      <div class="folder">
        <span class="path" title="${esc(f.path)}">${esc(f.path)}</span>
        <span class="tag">自動同步中</span>
        <button class="ghost" data-rm="${esc(f.path)}" data-acc="${f.accIdx}">移除</button>
      </div>`).join('')
      || `<div class="folder"><span class="path dim">還沒有資料夾</span></div>`}
  `).join('') + `
    <div class="acts">
      <button class="primary" id="fAdd">加入資料夾</button>
      <button id="fAcct">新增知識庫帳號</button>
    </div>`;
}

function pageAI(s) {
  const gem = s.engine === 'gemma';
  return `
    <div class="card">
      <h3>用哪個 AI 幫你整理文件？</h3>
      <label class="radio"><input type="radio" name="ai" value="cloud" ${gem ? '' : 'checked'}/>
        <span><b>雲端 AI</b>（推薦・不必申請任何金鑰）<br/>
        <span class="d">用你自己 Cloudflare 帳號內建的 AI，不需要任何金鑰、不必去別的網站申請。</span></span></label>
      <label class="radio"><input type="radio" name="ai" value="gemini" ${gem ? 'checked' : ''}/>
        <span><b>Google Gemini</b>（需要自己申請金鑰）<br/>
        <span class="d">進階選項。要自己去 aistudio.google.com 申請一把 API Key。</span></span></label>
      <div class="field">
        <div class="lb">Gemini 金鑰${s.geminiKey ? '（目前已設定，清空並儲存即可刪除）' : ''}</div>
        <input type="text" id="k" placeholder="貼上你的 Gemini API Key"/>
      </div>
      <div class="err" id="aiErr" style="display:none"></div>
      <div class="acts"><button class="primary" id="aiSave">儲存</button></div>
    </div>`;
}

// leo：「檢查更新連到 docs 的檢查更新，不正確，**是直接在這裡進行檢查更新**，
//        應該是跳到一個頁面顯示**現在版本與最新版本**，然後**下載可以進行安裝**」
function pageUpdate(s) {
  const u = updateInfo;
  const latest = u ? (u.latest || '查詢中…') : '查詢中…';
  let action = `<button class="primary" id="uCheck">檢查更新</button>`;
  let note = '';
  if (u && u.staged) {
    action = `<button class="primary" id="uApply">重新啟動以完成更新</button>`;
    note = `<div class="d">新版 ${esc(u.latest)} 已下載完成，重新啟動就會套用。</div>`;
  } else if (u && u.available) {
    action = `<button class="primary" id="uDownload">下載並安裝 ${esc(u.latest)}</button>`;
    note = u.notes ? `<div class="d">${esc(u.notes)}</div>` : '';
  } else if (u && u.err) {
    note = `<div class="err">${esc(u.err)}</div>`;
  } else if (u) {
    note = `<div class="d">你已經是最新版本。</div>`;
  }
  return `
    <div class="card">
      <h3>版本與更新</h3>
      <div class="kv" style="margin-top:12px">
        <div><div class="big-num">${esc(s.version || '—')}</div><div class="k">目前版本</div></div>
        <div><div class="big-num">${esc(latest)}</div><div class="k">最新版本</div></div>
      </div>
      <div style="margin-top:14px">${note}</div>
      <div class="acts">${action}</div>
    </div>
    <div class="card">
      <h3>需要協助？</h3>
      <div class="d">安裝、更新、把知識庫接到你的 AI，說明文件都寫在這裡。</div>
      <div class="acts"><button id="uDocs">開啟使用說明</button></div>
    </div>`;
}

function onboarding() {
  return `
    <div class="empty">
      <div class="t">先連上你的知識庫</div>
      <div class="d">
        Arcrun 會看守你指定的資料夾，<br/>
        自動把文件整理成 AI 查得到的知識卡。<br/>
        還沒有知識庫？先到 install.arcrun.dev 裝一個（免費）。
      </div>
      <button class="primary" id="obConnect">新增知識庫帳號</button>
      <button id="obInstall">我還沒有知識庫</button>
    </div>`;
}

// ── 渲染 ──
function renderPage() {
  if (!state) return;
  const el = $('page');
  el.innerHTML = page === 'folders' ? pageFolders(state)
              : page === 'ai'      ? pageAI(state)
              : page === 'update'  ? pageUpdate(state)
              : pageHome(state);
  wire();
}

function wire() {
  const on = (id, fn) => { const e = $(id); if (e) e.onclick = fn; };
  on('qAdd', addFolder); on('fAdd', addFolder);
  on('qDocs', () => go.OpenURL('https://rag.arcrun.dev/docs/'));
  on('uDocs', () => go.OpenURL('https://rag.arcrun.dev/docs/use/update/'));
  on('qPortal', () => {
    const a = state.accounts && state.accounts[0];
    if (a) go.OpenURL('https://' + a.host.replace('arcrun-cypher-executor.', 'arcrun-rag-ui.') + '/portal/');
  });
  on('fAcct', showConnect); on('obConnect', showConnect);
  on('obInstall', () => go.OpenURL('https://install.arcrun.dev/'));
  on('aiSave', saveAI);
  on('uCheck', checkUpdate);
  on('uDownload', downloadUpdate);
  on('uApply', applyUpdate);
  document.querySelectorAll('[data-rm]').forEach((b) => {
    b.onclick = () => confirmRemove(Number(b.dataset.acc), b.dataset.rm);
  });
}

function render(s) {
  const first = !state;
  state = s;
  $('ver').textContent = s.version ? s.version : '';
  $('statusBig').textContent = s.statusBig;
  $('statusBig').classList.toggle('syncing', !!s.syncing);
  $('statusSub').textContent = s.statusSub;
  // 只有狀態列每秒更新；頁面內容不重繪，避免打斷輸入
  if (first) renderPage();
}

async function tick() {
  try { render(await go.GetState()); } catch (e) { /* 後端還沒起來 */ }
}

// ── 動作 ──
$('btnSync').onclick = async () => { await go.SyncNow(); tick(); };

async function addFolder() {
  if (!state || !state.accounts.length) { showConnect(); return; }
  const p = await go.PickFolder();
  if (!p) return;
  await go.AddFolder(0, p);
  state = await go.GetState(); renderPage();
}

function confirmRemove(accIdx, path) {
  openSheet(`
    <h2>移除這個資料夾？</h2>
    <p>「${esc(path)}」不再自動同步。<br/>已經上傳的知識卡不會被刪除。</p>
    <div class="acts"><button id="c1">取消</button><button class="primary" id="c2">移除</button></div>`,
    () => {
      $('c1').onclick = closeSheet;
      $('c2').onclick = async () => {
        await go.RemoveFolder(accIdx, path); closeSheet();
        state = await go.GetState(); renderPage();
      };
    });
}

function showConnect() {
  openSheet(`
    <h2>連上你的知識庫</h2>
    <p>貼上你的知識庫網址，再輸入你在網站上設定的帳號密碼。</p>
    <div class="field"><div class="lb">知識庫網址</div>
      <input type="text" id="u" placeholder="https://arcrun-cypher-executor.xxxx.workers.dev"/></div>
    <div class="field"><div class="lb">帳號（Email）</div>
      <input type="text" id="e" placeholder="you@example.com"/></div>
    <div class="field"><div class="lb">密碼</div><input type="password" id="p"/></div>
    <div class="err" id="err" style="display:none"></div>
    <div class="acts"><button id="c1">取消</button><button class="primary" id="c2">連線</button></div>`,
    () => {
      $('c1').onclick = closeSheet;
      $('c2').onclick = async () => {
        try {
          await go.Connect($('u').value.trim(), $('e').value.trim(), $('p').value);
          closeSheet(); state = await go.GetState(); renderPage();
        } catch (ex) { $('err').textContent = String(ex); $('err').style.display = 'block'; }
      };
    });
}

async function saveAI() {
  const useGemini = document.querySelector('input[name=ai]:checked').value === 'gemini';
  try {
    await go.SetAI(useGemini, $('k').value.trim());
    state = await go.GetState(); renderPage();
  } catch (ex) { $('aiErr').textContent = String(ex); $('aiErr').style.display = 'block'; }
}

// 更新：**在 App 裡完成**（leo 指定），不是丟去 docs
async function checkUpdate() {
  updateInfo = { latest: '查詢中…' }; renderPage();
  try { updateInfo = await go.CheckUpdate(); } catch (ex) { updateInfo = { err: String(ex) }; }
  renderPage();
}
async function downloadUpdate() {
  updateInfo = Object.assign({}, updateInfo, { notes: '下載中…請稍候' }); renderPage();
  try { updateInfo = await go.DownloadUpdate(); } catch (ex) { updateInfo = { err: String(ex) }; }
  renderPage();
}
async function applyUpdate() {
  try { await go.ApplyUpdate(); } catch (ex) { updateInfo = { err: String(ex) }; renderPage(); }
}

tick();
setInterval(tick, 1000);