#!/usr/bin/env python3
"""生成独立HTML学习界面（JSON内嵌，无需服务器）"""
import json, os

with open(os.path.expanduser('~/eju_qbank/unified_qbank.json'), encoding='utf-8') as f:
    data = json.load(f)

# 把img_paths转为相对路径（供本地file://访问）
PAGES_PREFIX = os.path.expanduser("~/.hermes/sandboxes/docker/default/home/eju_work/pages/")
for item in data:
    item['imgs_rel'] = [
        'pages/' + p.replace(PAGES_PREFIX, '')
        for p in item['img_paths']
        if os.path.exists(p)
    ]

data_js = json.dumps(data, ensure_ascii=False)

html = f"""<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>EJU 刷题系统</title>
<style>
*{{box-sizing:border-box;margin:0;padding:0}}
body{{font-family:'Segoe UI',system-ui,sans-serif;background:#0f1117;color:#e4e8f0;display:flex;height:100vh;overflow:hidden}}

/* 左侧栏 */
#sidebar{{width:260px;background:#1a1d2e;border-right:1px solid #2a2d3e;display:flex;flex-direction:column;flex-shrink:0}}
#sidebar h1{{font-size:16px;font-weight:700;padding:16px;border-bottom:1px solid #2a2d3e;color:#7c8cf8}}
.filter-group{{padding:12px 14px;border-bottom:1px solid #2a2d3e}}
.filter-group label{{font-size:11px;color:#7a8599;text-transform:uppercase;letter-spacing:.8px;display:block;margin-bottom:6px}}
select,input[type=text]{{width:100%;background:#252840;border:1px solid #3a3d54;border-radius:6px;color:#e4e8f0;padding:7px 10px;font-size:13px;outline:none}}
select:focus,input:focus{{border-color:#7c8cf8}}
#qlist{{flex:1;overflow-y:auto;padding:8px}}
.qcard{{background:#252840;border-radius:8px;margin-bottom:6px;padding:10px 12px;cursor:pointer;border:2px solid transparent;transition:all .15s}}
.qcard:hover{{background:#2d3052;border-color:#7c8cf8}}
.qcard.active{{border-color:#7c8cf8;background:#2d3052}}
.qcard-title{{font-size:13px;font-weight:600;margin-bottom:3px}}
.qcard-sub{{font-size:11px;color:#7a8599}}
.tag{{display:inline-block;background:#1e2a4a;color:#7c8cf8;border-radius:4px;padding:1px 6px;font-size:10px;margin-top:3px}}
.tag.chem{{background:#1e3a2a;color:#4ade80}}
.tag.phys{{background:#3a1e2a;color:#f472b6}}
.tag.math{{background:#3a2a1e;color:#fb923c}}

/* 主区域 */
#main{{flex:1;display:flex;flex-direction:column;overflow:hidden}}
#toolbar{{background:#1a1d2e;border-bottom:1px solid #2a2d3e;padding:10px 16px;display:flex;gap:10px;align-items:center}}
#toolbar button{{background:#7c8cf8;color:#fff;border:none;border-radius:6px;padding:7px 14px;font-size:13px;cursor:pointer;font-weight:600}}
#toolbar button:hover{{background:#6c7ce8}}
#toolbar button.sec{{background:#252840;color:#e4e8f0}}
#toolbar button.sec:hover{{background:#2d3052}}
#stats{{margin-left:auto;font-size:12px;color:#7a8599}}

#content{{flex:1;overflow-y:auto;padding:20px}}
#empty{{display:flex;align-items:center;justify-content:center;height:100%;color:#7a8599;font-size:15px}}

.question-view{{max-width:900px}}
.qv-header{{margin-bottom:16px}}
.qv-header h2{{font-size:18px;font-weight:700;margin-bottom:6px}}
.qv-meta{{font-size:13px;color:#7a8599;display:flex;gap:12px;flex-wrap:wrap}}
.qv-meta span{{background:#252840;border-radius:6px;padding:3px 10px}}

.img-grid{{display:flex;flex-direction:column;gap:12px;margin-bottom:20px}}
.img-grid img{{max-width:100%;border-radius:8px;border:1px solid #2a2d3e}}

.answer-box{{background:#1a1d2e;border:1px solid #2a2d3e;border-radius:10px;overflow:hidden;margin-bottom:20px}}
.answer-box .ah{{padding:12px 16px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-weight:600;user-select:none}}
.answer-box .ah:hover{{background:#252840}}
.answer-body{{padding:14px 16px;border-top:1px solid #2a2d3e;display:none}}
.answer-body.show{{display:block}}

.ans-table{{width:100%;border-collapse:collapse;font-size:13px}}
.ans-table th{{text-align:left;padding:6px 10px;color:#7a8599;background:#252840;border-bottom:1px solid #2a2d3e}}
.ans-table td{{padding:6px 10px;border-bottom:1px solid #1e2030}}
.ans-num{{font-family:monospace;font-weight:700;color:#7c8cf8}}

/* 练习模式 */
.practice-mode #qlist{{display:none}}
.practice-toolbar{{display:flex;gap:8px;margin-bottom:16px}}

::-webkit-scrollbar{{width:5px}}
::-webkit-scrollbar-track{{background:transparent}}
::-webkit-scrollbar-thumb{{background:#3a3d54;border-radius:3px}}
</style>
</head>
<body>
<div id="sidebar">
  <h1>📚 EJU 刷题系统</h1>
  <div class="filter-group">
    <label>科目</label>
    <select id="fSubj">
      <option value="">全部</option>
      <option>物理</option>
      <option>化学</option>
      <option>数学Course2</option>
    </select>
  </div>
  <div class="filter-group">
    <label>年份</label>
    <select id="fYear"><option value="">全部</option></select>
  </div>
  <div class="filter-group">
    <label>考点 Level 1</label>
    <select id="fL1"><option value="">全部</option></select>
  </div>
  <div class="filter-group">
    <label>关键词</label>
    <input type="text" id="fKw" placeholder="搜索考点...">
  </div>
  <div id="qlist"></div>
</div>

<div id="main">
  <div id="toolbar">
    <button onclick="prevQ()">◀ 上一题</button>
    <button onclick="nextQ()">下一题 ▶</button>
    <button class="sec" onclick="randomQ()">🎲 随机</button>
    <button class="sec" onclick="toggleAnswer()">👁 显示答案</button>
    <div id="stats"></div>
  </div>
  <div id="content"><div id="empty">← 从左侧选择题目</div></div>
</div>

<script>
const RAW = {data_js};
let filtered = [...RAW];
let currentIdx = -1;
let answerVisible = false;

// 初始化筛选选项
function initFilters() {{
  const years = [...new Set(RAW.map(r=>r.year))].sort();
  const l1s = [...new Set(RAW.map(r=>r.level1).filter(Boolean))].sort();
  document.getElementById('fYear').innerHTML = '<option value="">全部</option>' +
    years.map(y=>`<option>${{y}}</option>`).join('');
  document.getElementById('fL1').innerHTML = '<option value="">全部</option>' +
    l1s.map(l=>`<option>${{l}}</option>`).join('');
}}

function subjectClass(s) {{
  if(s.includes('化学')) return 'chem';
  if(s.includes('物理')) return 'phys';
  if(s.includes('数学')) return 'math';
  return '';
}}

function applyFilter() {{
  const subj = document.getElementById('fSubj').value;
  const year = document.getElementById('fYear').value;
  const l1   = document.getElementById('fL1').value;
  const kw   = document.getElementById('fKw').value.toLowerCase();
  filtered = RAW.filter(r => {{
    if(subj && !r.subject.includes(subj)) return false;
    if(year && r.year != year) return false;
    if(l1 && r.level1 !== l1) return false;
    if(kw && !(r.level1+r.level2+r.subject).toLowerCase().includes(kw)) return false;
    return true;
  }});
  renderList();
  document.getElementById('stats').textContent = `${{filtered.length}} 题`;
}}

function renderList() {{
  const ul = document.getElementById('qlist');
  ul.innerHTML = filtered.map((r,i)=>{{
    const sc = subjectClass(r.subject);
    return `<div class="qcard" onclick="selectQ(${{i}})" id="qc${{i}}">
      <div class="qcard-title">${{r.year}}${{r.kai}} ${{r.subject}}</div>
      <div class="qcard-sub">${{r.group_id}}</div>
      ${{r.level1?`<span class="tag ${{sc}}">${{r.level1}}</span>`:''}}&nbsp;
      ${{r.level2?`<span class="tag">${{r.level2}}</span>`:''}}</div>`;
  }}).join('');
}}

function selectQ(i) {{
  document.querySelectorAll('.qcard').forEach(c=>c.classList.remove('active'));
  const el = document.getElementById('qc'+i);
  if(el) {{ el.classList.add('active'); el.scrollIntoView({{block:'nearest'}}); }}
  currentIdx = i;
  answerVisible = false;
  renderQuestion(filtered[i]);
}}

function renderQuestion(r) {{
  if(!r) return;
  const sc = subjectClass(r.subject);
  // 答案部分
  let ansHtml = '';
  if(Object.keys(r.section_answers||{{}}).length) {{
    for(const [sec, rows] of Object.entries(r.section_answers)) {{
      const rowHtml = rows.map(row=>
        `<tr><td>${{sec}}</td><td>${{row.q_num}}</td>
         <td class="ans-num">${{row.answer}}</td>
         <td style="color:#7a8599;font-size:11px">${{row.letters||''}}</td></tr>`
      ).join('');
      ansHtml += rowHtml;
    }}
    ansHtml = `<div class="answer-box">
      <div class="ah" onclick="this.nextElementSibling.classList.toggle('show')">
        <span>📋 参考答案</span><span>▼</span>
      </div>
      <div class="answer-body${{answerVisible?' show':''}}">
        <table class="ans-table">
          <tr><th>大题</th><th>题号</th><th>正解</th><th>答案位</th></tr>
          ${{ansHtml}}
        </table>
      </div>
    </div>`;
  }} else {{
    ansHtml = `<div class="answer-box"><div class="ah" style="color:#555">暂无答案数据</div></div>`;
  }}

  // 图片部分
  let imgHtml = '';
  if(r.imgs_rel && r.imgs_rel.length) {{
    imgHtml = `<div class="img-grid">${{
      r.imgs_rel.map(p=>`<img src="${{p}}" loading="lazy" onerror="this.style.display='none'">`).join('')
    }}</div>`;
  }} else if(r.pages && r.pages.length) {{
    imgHtml = `<div style="color:#7a8599;padding:20px;background:#1a1d2e;border-radius:8px;margin-bottom:16px">
      📄 对应页码: ${{r.pages.join(', ')}} (图片路径不可访问，请通过HTTP服务器访问)</div>`;
  }}

  // 考点
  const topicHtml = r.topics && r.topics.length ?
    r.topics.map(t=>t.level2?`<span class="tag ${{sc}}">${{t.level1}} › ${{t.level2}}</span> `:'').join('') : '';

  document.getElementById('empty').style.display='none';
  document.getElementById('content').innerHTML = `
    <div class="question-view">
      <div class="qv-header">
        <h2>${{r.year}}年 ${{r.kai}} · ${{r.subject}} · ${{r.group_id}}</h2>
        <div class="qv-meta">
          <span>📅 ${{r.exam_name}}</span>
          ${{r.pages&&r.pages.length?`<span>📄 p${{r.pages.join(', p')}}</span>`:''}}
        </div>
        <div style="margin-top:8px">${{topicHtml}}</div>
      </div>
      ${{imgHtml}}
      ${{ansHtml}}
    </div>`;
}}

function toggleAnswer() {{
  answerVisible = !answerVisible;
  document.querySelectorAll('.answer-body').forEach(el=>{{
    el.classList.toggle('show', answerVisible);
  }});
}}

function prevQ() {{ if(currentIdx>0) selectQ(currentIdx-1); }}
function nextQ() {{ if(currentIdx<filtered.length-1) selectQ(currentIdx+1); }}
function randomQ() {{ selectQ(Math.floor(Math.random()*filtered.length)); }}

// 快捷键
document.addEventListener('keydown', e=>{{
  if(e.key==='ArrowRight'||e.key==='n') nextQ();
  if(e.key==='ArrowLeft'||e.key==='p') prevQ();
  if(e.key===' ') {{ e.preventDefault(); toggleAnswer(); }}
  if(e.key==='r') randomQ();
}});

['fSubj','fYear','fL1'].forEach(id=>document.getElementById(id).addEventListener('change',applyFilter));
document.getElementById('fKw').addEventListener('input',applyFilter);

initFilters();
applyFilter();
document.getElementById('stats').textContent = `${{filtered.length}} 题`;
</script>
</body>
</html>"""

out = os.path.expanduser('~/eju_qbank/study.html')
with open(out, 'w', encoding='utf-8') as f:
    f.write(html)
print(f"✅ study.html 生成完毕: {len(html)//1024}KB")
print(f"   文件位置: {out}")
