import os
import http.server
import socketserver
import urllib.parse
import html
import json
import sqlite3
import markdown
from markdown.extensions.toc import TocExtension

PORT = 9120
BOARDS_DIR = "/root/.hermes/kanban/boards"
FILES_ROOT = "/"

FILES_BLOCKED = [
    "auth.json", ".env", "google_token.json",
    ".git", "__pycache__", "node_modules",
    ".key", ".pem", "credentials.json", "token.pickle",
    "state.db",
]

CTYPE = {
    ".html": "text/html; charset=utf-8",
    ".js": "application/javascript; charset=utf-8",
    ".css": "text/css; charset=utf-8",
    ".json": "application/json; charset=utf-8",
    ".png": "image/png",
    ".jpg": "image/jpeg",
    ".jpeg": "image/jpeg",
    ".gif": "image/gif",
    ".svg": "image/svg+xml",
    ".pdf": "application/pdf"
}

RAW_EXT = {
    ".md", ".txt", ".yaml", ".yml", ".json", ".csv", ".toml", ".ini",
    ".cfg", ".conf", ".log", ".xml", ".html", ".sh", ".py", ".js", ".css",
    ".env.example"
}

def _is_blocked(fpath):
    fpath = fpath.replace("\\", "/")
    parts = fpath.split("/")
    for b in FILES_BLOCKED:
        if b in parts:
            return True
    return False

def _get_available_boards():
    try:
        return sorted([d for d in os.listdir(BOARDS_DIR) if os.path.isdir(os.path.join(BOARDS_DIR, d))])
    except Exception:
        return ["nv-office"]

def _get_kanban_db_path(board_name):
    board_name = "".join([c for c in board_name if c.isalnum() or c in ("-", "_")])
    return os.path.join(BOARDS_DIR, board_name, "kanban.db")

def _get_kanban_data(board_name, sort_by="priority"):
    db_path = _get_kanban_db_path(board_name)
    if not os.path.exists(db_path):
        return []
    try:
        con = sqlite3.connect("file:%s?mode=ro" % db_path, uri=True, timeout=2)
        con.row_factory = sqlite3.Row
        
        if sort_by == "created":
            order = "created_at DESC"
        elif sort_by == "created_asc":
            order = "created_at ASC"
        elif sort_by == "title":
            order = "title ASC"
        elif sort_by == "title_desc":
            order = "title DESC"
        elif sort_by == "priority_asc":
            order = "priority ASC"
        else:  # priority desc
            order = "priority DESC, created_at DESC"
        
        tasks = con.execute(
            f"SELECT id, title, assignee, status, priority FROM tasks WHERE status != 'archived' ORDER BY {order}"
        ).fetchall()
        con.close()
        return tasks
    except Exception as e:
        print(f"Error reading kanban for board {board_name}: {e}")
        return []

CSS = """
* { box-sizing: border-box; }
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; background: #0f1117; color: #c9d1d9; padding: 1.5rem; margin: 0; }
.container { max-width: 1400px; margin: 0 auto; }
h1 { color: #f0c040; font-size: 1.5rem; margin: 0 0 1rem 0; display: flex; align-items: center; gap: 0.5rem; }
h1 small { font-size: 0.8rem; color: #8b949e; font-weight: normal; }

/* TOP BAR */
.topbar { background: #161b22; border: 1px solid #30363d; border-radius: 8px; padding: 0.75rem 1rem; margin-bottom: 1rem; display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem; }
.topbar-label { color: #8b949e; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }

.board-selector-group { display: flex; gap: 0.5rem; }
.board-btn { background: #21262d; color: #c9d1d9; padding: 0.4rem 0.8rem; border-radius: 6px; text-decoration: none; border: 1px solid #30363d; font-size: 0.85rem; font-weight: 500; transition: all 0.15s; }
.board-btn:hover { background: #30363d; border-color: #58a6ff; }
.board-btn.active-board { background: #1f6feb; color: #fff; border-color: #1f6feb; }

.sort-select { background: #21262d; color: #c9d1d9; border: 1px solid #30363d; border-radius: 6px; padding: 0.4rem 0.6rem; font-size: 0.85rem; cursor: pointer; }

.controls-row { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.controls-row a { color: #58a6ff; text-decoration: none; font-size: 0.85rem; }
.controls-row a:hover { text-decoration: underline; }

/* BOARD */
.board { display: flex; gap: 1rem; overflow-x: auto; align-items: flex-start; }
.column { background: #161b22; border: 1px solid #30363d; border-radius: 8px; min-width: 260px; width: 260px; flex-shrink: 0; display: flex; flex-direction: column; }
.column-header { padding: 0.75rem 1rem; border-bottom: 1px solid #30363d; font-weight: 600; font-size: 0.85rem; color: #8b949e; text-transform: uppercase; letter-spacing: 0.5px; display: flex; justify-content: space-between; align-items: center; }
.column-count { background: #21262d; color: #c9d1d9; padding: 0.1rem 0.5rem; border-radius: 10px; font-size: 0.75rem; }

.task-list { padding: 0.5rem; flex: 1; }

.task { background: #0d1117; border: 1px solid #30363d; border-left: 3px solid #58a6ff; border-radius: 6px; padding: 0.75rem; margin-bottom: 0.5rem; transition: border-color 0.15s; }
.task:hover { border-color: #8b949e; }
.task-priority-high { border-left-color: #f85149; }
.task-priority-med { border-left-color: #d29922; }
.task-title { color: #e6edf3; font-size: 0.82rem; line-height: 1.4; margin-bottom: 0.5rem; }
.task-meta { font-size: 0.72rem; color: #8b949e; display: flex; justify-content: space-between; align-items: center; }
.task-assignee { display: flex; align-items: center; gap: 0.3rem; }
.task-tag { background: #21262d; padding: 0.1rem 0.4rem; border-radius: 4px; font-family: monospace; font-size: 0.7rem; }

/* Collect/Collapse */
.toggle-btn { display: block; width: 100%; text-align: center; background: #21262d; border: 1px dashed #30363d; border-radius: 6px; color: #8b949e; padding: 0.5rem; font-size: 0.78rem; cursor: pointer; margin-top: 0.25rem; transition: all 0.15s; }
.toggle-btn:hover { background: #30363d; color: #c9d1d9; border-style: solid; }
.hidden-tasks { display: none; }
.hidden-tasks.visible { display: block; }
"""

def _render_kanban_html(board_name, tasks, sort_by):
    available = _get_available_boards()
    board_btns = []
    for b in available:
        cls = "active-board" if b == board_name else ""
        board_btns.append(
            f"<a href='/?board={b}&sort={sort_by}' class='board-btn {cls}'>{html.escape(b)}</a>"
        )
    
    sort_options = [
        ("priority", "Priority Cao→Thấp"),
        ("priority_asc", "Priority Thấp→Cao"),
        ("created", "Mới nhất"),
        ("created_asc", "Cũ nhất"),
        ("title", "A→Z"),
        ("title_desc", "Z→A"),
    ]
    sort_opts = "".join(
        f"<option value='{v}' {'selected' if sort_by==v else ''}>{l}</option>"
        for v, l in sort_options
    )

    cols = [
        ("triage", "Cần làm"),
        ("running", "Đang chạy"),
        ("blocked", "Tắc"),
        ("done", "Xong"),
    ]

    cols_html = []
    for status_key, status_name in cols:
        col_tasks = [
            t for t in tasks
            if t["status"] == status_key
            or (status_key == "triage" and t["status"] in ("todo", "ready"))
        ]
        count = len(col_tasks)
        show_initially = min(count, 5)

        task_items = []
        for i, t in enumerate(col_tasks):
            pri_class = (
                "task-priority-high" if int(t["priority"] or 0) >= 10
                else ("task-priority-med" if int(t["priority"] or 0) >= 5 else "")
            )
            hidden = " hidden-tasks" if i >= 5 else ""
            task_items.append(
                f"<div class='task {pri_class}{hidden}'>"
                f"<div class='task-title'><a href='/task?id={t['id']}&board={board_name}' style='color:inherit;text-decoration:none;'>{html.escape(t['title'] or '')}</a></div>"
                f"<div class='task-meta'>"
                f"<span class='task-assignee'>👤 {html.escape(t['assignee'] or '?')}</span>"
                f"<span class='task-tag'>#{t['id']}</span>"
                f"</div></div>"
            )

        body = "".join(task_items[:show_initially])
        if count > 5:
            remaining = count - 5
            body += (
                f"<button class='toggle-btn' data-remaining='{remaining}' onclick=\"toggleTasks(this)\">"
                f"▼ Xem thêm ({remaining})</button>"
            )
            body += f"<div class='hidden-tasks'>{''.join(task_items[5:])}</div>"

        cols_html.append(
            f"<div class='column'>"
            f"<div class='column-header'><span>{status_name}</span><span class='column-count'>{count}</span></div>"
            f"<div class='task-list'>{body}</div></div>"
        )

    return f"""<!DOCTYPE html>
<html lang='vi'>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width,initial-scale=1'>
<title>Kanban OS - {html.escape(board_name)}</title>
<style>{CSS}</style>
<script>
function toggleTasks(btn){{
  var next=btn.nextElementSibling;
  if(next&&next.classList.contains('hidden-tasks')){{
    var expanded=next.classList.toggle('visible');
    var rem=btn.getAttribute('data-remaining');
    btn.textContent=expanded?'▲ Thu gọn ('+rem+')':'▼ Xem thêm ('+rem+')';
  }}
}}
</script>
</head>
<body>
<div class='container'>
  <h1>📋 Kanban OS <small>— {html.escape(board_name)}</small></h1>
  <div class='topbar'>
    <div class='board-selector-group'>
      <span class='topbar-label'>Board:</span>{''.join(board_btns)}
    </div>
    <div class='controls-row'>
      <span class='topbar-label'>Sắp xếp:</span>
      <select class='sort-select' onchange="var s=this.value;var u=new URL(window.location);u.searchParams.set('sort',s);window.location=u.toString()">{sort_opts}</select>
      <a href='/files/'>📁 Files</a>
    </div>
  </div>
  <div class='board'>{''.join(cols_html)}</div>
</div>
</body>
</html>"""

# ── TASK DETAIL ──────────────────────────────────────────────────────

def _get_task_detail(board_name, task_id):
    db_path = _get_kanban_db_path(board_name)
    if not os.path.exists(db_path):
        return None
    try:
        con = sqlite3.connect("file:%s?mode=ro" % db_path, uri=True, timeout=2)
        con.row_factory = sqlite3.Row
        task = con.execute(
            "SELECT * FROM tasks WHERE id = ?", (task_id,)
        ).fetchone()
        con.close()
        if task:
            return dict(task)
        return None
    except Exception as e:
        print(f"Error reading task {task_id}: {e}")
        return None

def _render_task_html(board_name, task):
    if not task:
        return f"""<!DOCTYPE html><html lang='vi'><head><meta charset='utf-8'><meta name='viewport' content='width=device-width,initial-scale=1'><title>Not Found</title><style>body{{background:#0f1117;color:#c9d1d9;font-family:sans-serif;padding:2rem}}a{{color:#58a6ff}}</style></head><body><h1>❌ Task không tìm thấy</h1><a href='/?board={html.escape(board_name)}'>← Về Kanban OS</a></body></html>"""

    def fmt(val):
        if val is None:
            return '<span style="color:#8b949e;font-style:italic">—</span>'
        return html.escape(str(val))

    def iso(ts):
        if not ts:
            return '<span style="color:#8b949e;font-style:italic">—</span>'
        import datetime
        return datetime.datetime.fromtimestamp(int(ts)).strftime("%Y-%m-%d %H:%M")

    priority_label = f"{task.get('priority', 0)} {'⭐' * min(int(task.get('priority', 0) or 0), 5)}"

    status_map = {"todo": "📋 Cần làm", "ready": "📋 Cần làm", "running": "🔄 Đang chạy", "blocked": "🚫 Tắc", "done": "✅ Xong", "cancelled": "❌ Đã huỷ", "archived": "🗄️ Lưu trữ"}
    status_display = status_map.get(task.get("status", ""), task.get("status", "?"))

    fields = [
        ("ID", fmt(task["id"])),
        ("Tiêu đề", fmt(task.get("title", ""))),
        ("Trạng thái", status_display),
        ("Người phụ trách", fmt(task.get("assignee", ""))),
        ("Độ ưu tiên", priority_label),
        ("Ngày tạo", iso(task.get("created_at"))),
        ("Ngày bắt đầu", iso(task.get("started_at"))),
        ("Ngày hoàn thành", iso(task.get("completed_at"))),
    ]

    optional_fields = []
    if task.get("workspace_path"):
        optional_fields.append(("Workspace", f'<a href="/files{html.escape(task["workspace_path"])}" style="color:#58a6ff">{html.escape(task["workspace_path"])}</a>'))
    if task.get("block_kind"):
        optional_fields.append(("Block Kind", fmt(task["block_kind"])))
    if task.get("block_recurrences") and task["block_recurrences"] > 0:
        optional_fields.append(("Block Recurrences", str(task["block_recurrences"])))
    if task.get("max_runtime_seconds"):
        optional_fields.append(("Max Runtime", f"{task['max_runtime_seconds']}s"))
    if task.get("consecutive_failures") and task["consecutive_failures"] > 0:
        optional_fields.append(("Lỗi liên tiếp", str(task["consecutive_failures"])))

    rows = lambda items: "".join(
        f"<tr><td style='white-space:nowrap;font-weight:600;color:#8b949e;padding:.5em .75em;border-bottom:1px solid #21262d'>{label}</td><td style='padding:.5em .75em;border-bottom:1px solid #21262d'>{value}</td></tr>"
        for label, value in items
    )

    body_content = ""
    if task.get("body"):
        body_content = f"""<h2 style='color:#e6edf3;font-size:1.1rem;margin:1.5rem 0 .75rem'>📝 Mô tả</h2><div style='background:#161b22;border:1px solid #30363d;border-radius:8px;padding:1rem;line-height:1.6;white-space:pre-wrap'>{html.escape(task['body'])}</div>"""

    result_content = ""
    if task.get("result"):
        result_content = f"""<h2 style='color:#e6edf3;font-size:1.1rem;margin:1.5rem 0 .75rem'>📊 Kết quả</h2><div style='background:#161b22;border:1px solid #30363d;border-radius:8px;padding:1rem;line-height:1.6;white-space:pre-wrap'>{html.escape(task['result'])}</div>"""

    return f"""<!DOCTYPE html>
<html lang='vi'>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width,initial-scale=1'>
<title>{html.escape(task.get('title','Task'))} — {html.escape(board_name)}</title>
<style>
*{{box-sizing:border-box}}
body{{background:#0f1117;color:#c9d1d9;font-family:'Inter',sans-serif;padding:1.5rem;margin:0;line-height:1.6}}
.container{{max-width:800px;margin:0 auto}}
.back{{display:inline-block;margin-bottom:1rem;color:#8b949e;font-size:.85rem;text-decoration:none}}
.back:hover{{color:#58a6ff;text-decoration:underline}}
h1{{color:#f0c040;font-size:1.3rem;margin:0 0 .75rem;word-break:break-word}}
.card{{background:#161b22;border:1px solid #30363d;border-radius:8px;padding:0;overflow:hidden;margin-bottom:1rem}}
table{{width:100%;border-collapse:collapse}}
a{{color:#58a6ff}}
.status-badge{{display:inline-block;padding:.2em .6em;border-radius:12px;font-size:.8rem;font-weight:600}}
.status-done{{background:#1b4126;color:#7ee787}}
.status-running{{background:#1f3a4d;color:#58a6ff}}
.status-blocked{{background:#4d1f1f;color:#f85149}}
.status-triage{{background:#2d2814;color:#d29922}}
.status-cancelled{{background:#21262d;color:#8b949e}}
.status-archived{{background:#21262d;color:#8b949e}}
</style>
</head>
<body>
<div class='container'>
<a class='back' href='/?board={html.escape(board_name)}'>← Về Kanban OS</a>
<h1>📌 {html.escape(task.get('title',''))}</h1>
<div class='card'>
<table>{rows(fields)}</table>
</div>
{("" if not optional_fields else f"<div class='card'><table>{rows(optional_fields)}</table></div>")}
{body_content}
{result_content}
<a class='back' href='/?board={html.escape(board_name)}' style='margin-top:1rem;display:inline-block'>← Về Kanban OS</a>
</div>
</body>
</html>"""

# ── HTTP HANDLER ──────────────────────────────────────────────────────

class KanbanHandler(http.server.BaseHTTPRequestHandler):
    def do_GET(self):
        parsed = urllib.parse.urlparse(self.path)
        path = parsed.path
        query = urllib.parse.parse_qs(parsed.query)

        if path == "/" or path == "/kanban":
            board_name = query.get("board", ["nv-office"])[0]
            sort_by = query.get("sort", ["priority"])[0]
            tasks = _get_kanban_data(board_name, sort_by)
            self.send_response(200)
            self.send_header("Content-Type", "text/html; charset=utf-8")
            self.end_headers()
            self.wfile.write(_render_kanban_html(board_name, tasks, sort_by).encode())
            return

        if path == "/task":
            board_name = query.get("board", ["nv-office"])[0]
            task_id = query.get("id", [""])[0]
            if not task_id:
                self.send_response(302)
                self.send_header("Location", f"/?board={board_name}")
                self.end_headers()
                return
            task = _get_task_detail(board_name, task_id)
            self.send_response(200)
            self.send_header("Content-Type", "text/html; charset=utf-8")
            self.end_headers()
            self.wfile.write(_render_task_html(board_name, task).encode())
            return

        if path.startswith("/files/"):
            self._serve_files(path)
            return

        self.send_response(404)
        self.end_headers()
        self.wfile.write(b"Not found")

    def _serve_files(self, path):
        rel = path[7:]
        target = os.path.abspath(os.path.join(FILES_ROOT, rel.lstrip("/")))
        real_target = os.path.realpath(target)

        if _is_blocked(real_target):
            self.send_response(403)
            self.end_headers()
            self.wfile.write(b"Access denied")
            return

        if os.path.isdir(target):
            try:
                items = sorted(os.listdir(target))
            except Exception as e:
                self.send_response(403)
                self.end_headers()
                self.wfile.write(str(e).encode())
                return

            url_parts = rel.rstrip("/").split("/") if rel.strip("/") else []
            bc = ['<a href="/files/">/</a>']
            acc = ""
            for p in url_parts:
                if not p: continue
                acc += "/" + p
                bc.append(f'<a href="/files{acc}">{html.escape(p)}</a>')
            crumbs = " / ".join(bc)

            rows = []
            for item in items:
                full = os.path.join(target, item)
                is_dir = os.path.isdir(full)
                icon = "📁" if is_dir else "📄"
                lnk = f"/files/{rel.strip('/')}/{item}".replace("//", "/")
                rows.append(f'<li><span class="icon">{icon}</span><a href="{html.escape(lnk)}">{html.escape(item)}</a></li>')

            html_page = f"""<!DOCTYPE html>
<html lang='vi'><head>
<meta charset='utf-8'><meta name='viewport' content='width=device-width,initial-scale=1'>
<title>📁 {html.escape(rel or '/')}</title>
<style>
*{{box-sizing:border-box}}
body{{background:#0f1117;color:#c9d1d9;font-family:'Inter',sans-serif;padding:2rem;margin:0;line-height:1.6}}
.container{{max-width:900px;margin:0 auto}}
.bc{{background:#161b22;border:1px solid #30363d;padding:.75em 1em;border-radius:8px;margin-bottom:1em;font-size:.9em;word-break:break-all}}
.bc a{{color:#58a6ff;text-decoration:none;margin:0 .15em}}
.bc a:hover{{text-decoration:underline}}
.path-note{{margin-bottom:1em;padding:0 1em;font-size:.75em;color:#8b949e}}
.path-note code{{background:#161b22;padding:.1em .3em;border-radius:4px;color:#7ee787}}
ul{{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:.25rem}}
li{{padding:.5em .75em;display:flex;align-items:center;gap:.6em;border-radius:6px;border:1px solid transparent}}
li:hover{{background:#161b22;border-color:#30363d}}
li a{{color:#f0c040;text-decoration:none;display:flex;align-items:center;gap:.5em;width:100%;font-size:.9rem}}
li a:hover{{color:#ffa657}}
.icon{{font-size:1rem;flex-shrink:0}}
a.back-link{{display:inline-block;margin-bottom:1rem;color:#8b949e;font-size:.85rem;text-decoration:none}}
a.back-link:hover{{color:#58a6ff;text-decoration:underline}}
</style></head><body>
<div class='container'>
<a class='back-link' href='/'>← Về Kanban OS</a>
<div class='bc'>📁 {crumbs}</div>
<div class='path-note'>📍 <code>{html.escape(real_target)}</code></div>
<ul>{''.join(rows)}</ul></div></body></html>"""
            self.send_response(200)
            self.send_header("Content-Type", "text/html; charset=utf-8")
            self.end_headers()
            self.wfile.write(html_page.encode())
            return

        if os.path.isfile(target):
            ext = os.path.splitext(target)[1].lower()
            if ext == ".md":
                try:
                    with open(target, "rb") as f:
                        md_text = f.read().decode("utf-8", errors="replace")
                    if "[TOC]" not in md_text.upper():
                        md_text = "[TOC]\n\n" + md_text
                    md = markdown.Markdown(extensions=['extra', 'tables', 'fenced_code', 'toc'])
                    md_html = md.convert(md_text)
                    # Support math formula rendering using MathJax
                    mathjax_script = """
<script>
window.MathJax = {
  tex: {
    inlineMath: [['$', '$'], ['\\\\(', '\\\\)']],
    displayMath: [['$$', '$$'], ['\\\\[', '\\\\]']],
    processEscapes: true
  },
  options: {
    ignoreHtmlClass: 'tex2jax_ignore',
    processHtmlClass: 'tex2jax_process'
  }
};
</script>
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js" async></script>
"""
                    url_dir = os.path.dirname(rel).rstrip("/")
                    url_parts = url_dir.split("/") if url_dir else []
                    bc = ['<a href="/files/">/</a>']
                    acc = ""
                    for p in url_parts:
                        if not p: continue
                        acc += "/" + p
                        bc.append(f'<a href="/files{acc}">{html.escape(p)}</a>')
                    crumbs = " / ".join(bc) + (" / " if bc else "")

                    html_page = f"""<!DOCTYPE html>
<html lang='vi'><head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width,initial-scale=1'>
<title>{html.escape(os.path.basename(target))}</title>
<style>
*{{box-sizing:border-box}}
html{{scroll-behavior:smooth}}
body{{background:#0f1117;color:#c9d1d9;font-family:'Inter',sans-serif;margin:0;line-height:1.6;padding:2rem}}
.container{{max-width:900px;margin:0 auto}}
.bc{{background:#161b22;border:1px solid #30363d;padding:.75em 1em;border-radius:8px;margin-bottom:1em;font-size:.85em}}
.bc a{{color:#58a6ff;text-decoration:none}}
.bc a:hover{{text-decoration:underline}}
h1,h2,h3,h4{{color:#e6edf3;border-bottom:1px solid #30363d;padding-bottom:.3em;position:relative;padding-left:24px;cursor:pointer}}
h1::before, h2::before, h3::before, h4::before {{
  content: '▼';
  position: absolute;
  left: 0;
  top: 2px;
  font-size: 0.7em;
  color: #8b949e;
  transition: transform 0.2s ease;
}}
.collapsed::before {{
  transform: rotate(-90deg);
}}
.collapsed-content {{
  display: none !important;
}}
a{{color:#58a6ff}}
pre{{background:#161b22;padding:1em;border-radius:8px;overflow-x:auto;border:1px solid #30363d}}
code{{background:#161b22;padding:.1em .3em;border-radius:4px}}
pre code{{padding:0;background:transparent}}
table{{border-collapse:collapse;width:100%;margin:1em 0}}
th,td{{border:1px solid #30363d;padding:.5em}}
blockquote{{border-left:4px solid #58a6ff;margin-left:0;padding-left:1em;color:#8b949e}}
img{{max-width:100%}}
.back-link{{display:inline-block;margin-bottom:1rem;color:#8b949e;font-size:.85rem;text-decoration:none}}
.back-link:hover{{color:#58a6ff;text-decoration:underline}}
@media (min-width: 1200px) {{
  body {{ padding-right: 320px; }}
  .toc {{ position: fixed; top: 70px; right: 20px; width: 300px; max-height: calc(100vh - 100px); background: #161b22; border: 1px solid #30363d; border-radius: 8px; padding: 1em; overflow-y: auto; box-shadow: -4px 0 15px rgba(0,0,0,0.5); z-index: 100; font-size: 0.9em; }}
}}
@media (max-width: 1199px) {{
  .toc {{ background: #161b22; border: 1px solid #30363d; border-radius: 8px; padding: 1em; margin-bottom: 1.5em; max-height: 50vh; overflow-y: auto; }}
}}
.toc ul{{list-style:none;padding-left:1.2em;margin:.2em 0}}
.toc > ul{{padding-left:0}}
.toc li{{margin:.2em 0}}
.toc a{{color:#8b949e;text-decoration:none;font-size:.95em;display:block;padding:2px 0}}
.toc a:hover{{color:#58a6ff;text-decoration:underline}}
</style>
{mathjax_script}
</head><body>
<div class='container'>
<a class='back-link' href='{html.escape(os.path.dirname(path) or "/files/")}'>← Về thư mục</a>
<div class='bc'>📄 {crumbs}{html.escape(os.path.basename(target))}</div>
{md_html}</div>
<script>
document.querySelectorAll('h1,h2,h3,h4').forEach(h => {{
  h.addEventListener('click', function() {{
    // toggle current heading indicator
    var s = this.style || this;
    s = this;
    // find all siblings after this heading up to next same-or-higher-level heading
    var tag = this.tagName;
    var els = [];
    var next = this.nextElementSibling;
    var levels = ['H1','H2','H3','H4','H5','H6'];
    var myIdx = levels.indexOf(tag);
    while (next && next.tagName !== undefined) {{
      var nt = next.tagName;
      var nIdx = levels.indexOf(nt);
      if (nIdx >= 0 && nIdx <= myIdx) break; // reached same or higher heading
      els.push(next);
      next = next.nextElementSibling;
    }}
    var collapsed = this.classList.toggle('collapsed');
    els.forEach(function(el) {{
      el.classList.toggle('collapsed-content', collapsed);
    }});
  }});
}});
</script>
</body></html>"""
                    self.send_response(200)
                    self.send_header("Content-Type", "text/html; charset=utf-8")
                    self.end_headers()
                    self.wfile.write(html_page.encode())
                except Exception as e:
                    self.send_response(500)
                    self.end_headers()
                    self.wfile.write(str(e).encode())
                return

            self.send_response(200)
            self.send_header("Content-Type", CTYPE.get(ext, "text/plain; charset=utf-8"))
            self.end_headers()
            with open(target, "rb") as f:
                self.wfile.write(f.read())
            return

        self.send_response(404)
        self.end_headers()
        self.wfile.write(b"File not found")


if __name__ == "__main__":
    print(f"Starting Kanban Server on port {PORT}...")
    socketserver.ThreadingTCPServer.allow_reuse_address = True
    with socketserver.ThreadingTCPServer(("0.0.0.0", PORT), KanbanHandler) as httpd:
        httpd.serve_forever()