from __future__ import annotations

from pathlib import Path

from .dictionary_tool import load_dictionary


def build_specimen(dict_path: Path, font_path: Path, out_path: Path) -> Path:
    specs = load_dictionary(dict_path)
    rows = []
    for s in specs:
        rows.append(
            f"<tr><td class='glyph'>{s.char}</td><td>{s.gloss}</td><td>{s.root}</td><td>{s.symbol_id}</td><td>U+{s.codepoint:04X}</td></tr>"
        )
    html = f"""<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width,initial-scale=1"/>
  <title>LogiGlyph Specimen</title>
  <style>
    @font-face {{
      font-family: 'LogiGlyph';
      src: url('{font_path.name}') format('truetype');
    }}
    body {{ font-family: 'Segoe UI', sans-serif; background: #f4f7f8; color: #1f2a30; margin: 24px; }}
    h1 {{ margin: 0 0 12px; }}
    table {{ border-collapse: collapse; width: 100%; background: #ffffff; }}
    td, th {{ border: 1px solid #d8e1e4; padding: 8px 10px; text-align: left; }}
    th {{ background: #ecf3f5; }}
    .glyph {{ font-family: 'LogiGlyph', sans-serif; font-size: 34px; width: 68px; text-align: center; }}
  </style>
</head>
<body>
  <h1>LogiGlyph Specimen</h1>
  <p>Each symbol is compositional: semantic base + onset + vowel + coda.</p>
  <table>
    <thead>
      <tr><th>Glyph</th><th>Gloss</th><th>Root</th><th>Symbol ID</th><th>Codepoint</th></tr>
    </thead>
    <tbody>
      {''.join(rows)}
    </tbody>
  </table>
</body>
</html>
"""
    out_path.parent.mkdir(parents=True, exist_ok=True)
    out_path.write_text(html, encoding="utf-8")
    return out_path

