"""Self-contained HTML report template for ``replayt report``."""

from __future__ import annotations

REPORT_HTML = """\
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <title>replayt report &mdash; {run_id}</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    details summary {{ cursor: pointer; }}
    details summary::-webkit-details-marker {{ display: none; }}
    pre {{ white-space: pre-wrap; word-break: break-all; }}
  </style>
</head>
<body class="bg-slate-50 text-slate-900 antialiased min-h-screen">
  <main class="max-w-4xl mx-auto px-4 py-10">

    <!-- Run Header -->
    <section class="mb-8">
      <h1 class="text-2xl font-bold tracking-tight mb-2">Run Report</h1>
      <div class="bg-white border border-slate-200 rounded-lg shadow-sm p-5 space-y-1 text-sm">
        <p><span class="font-medium text-slate-500">Run ID:</span> <code class="text-slate-800">{run_id}</code></p>
        <p><span class="font-medium text-slate-500">Workflow:</span> {workflow_name}@{workflow_version}</p>
        <p><span class="font-medium text-slate-500">Status:</span>
          <span class="{status_class} inline-block px-2 py-0.5 rounded text-xs font-semibold">{status}</span></p>
        <p><span class="font-medium text-slate-500">Duration:</span> {duration}</p>
        {tags_html}
      </div>
    </section>

    <!-- State Timeline -->
    <section class="mb-8">
      <h2 class="text-lg font-semibold mb-3">State Timeline</h2>
      <div class="bg-white border border-slate-200 rounded-lg shadow-sm p-5">
        <ol class="relative border-l-2 border-slate-300 ml-3 space-y-4">
          {timeline_html}
        </ol>
      </div>
    </section>

    <!-- Structured Outputs -->
    {outputs_section}

    <!-- Tool Calls -->
    {tool_calls_section}

    <!-- Token Usage -->
    <section class="mb-8">
      <h2 class="text-lg font-semibold mb-3">Token Usage</h2>
      <div class="bg-white border border-slate-200 rounded-lg shadow-sm p-5 text-sm">
        <table class="w-full text-left">
          <thead><tr class="border-b border-slate-200 text-slate-500">
            <th class="py-1 font-medium">Metric</th><th class="py-1 font-medium text-right">Value</th>
          </tr></thead>
          <tbody>
            <tr><td class="py-1">Prompt tokens</td><td class="py-1 text-right font-mono">{prompt_tokens}</td></tr>
            <tr><td class="py-1">Completion tokens</td>
              <td class="py-1 text-right font-mono">{completion_tokens}</td></tr>
            <tr class="border-t border-slate-200 font-semibold">
              <td class="py-1">Total tokens</td>
              <td class="py-1 text-right font-mono">{total_tokens}</td></tr>
          </tbody>
        </table>
      </div>
    </section>

    <footer class="text-xs text-slate-400 mt-12">Generated by replayt</footer>
  </main>
</body>
</html>
"""

TIMELINE_ITEM = """\
<li class="ml-6">
  <span class="absolute -left-2 w-4 h-4 rounded-full {dot_class} border-2 border-white"></span>
  <p class="text-sm font-medium text-slate-700">{state}</p>
  <p class="text-xs text-slate-400">{ts}</p>
</li>"""

OUTPUTS_SECTION = """\
    <section class="mb-8">
      <h2 class="text-lg font-semibold mb-3">Structured Outputs</h2>
      <div class="bg-white border border-slate-200 rounded-lg shadow-sm p-5 space-y-3">
        {items}
      </div>
    </section>"""

OUTPUT_ITEM = """\
<details class="group">
  <summary class="text-sm font-medium text-slate-700 hover:text-slate-900">{schema_name}</summary>
  <pre class="mt-2 p-3 bg-slate-50 rounded text-xs text-slate-600 border border-slate-100">{data_json}</pre>
</details>"""

TOOL_CALLS_SECTION = """\
    <section class="mb-8">
      <h2 class="text-lg font-semibold mb-3">Tool Calls</h2>
      <div class="bg-white border border-slate-200 rounded-lg shadow-sm divide-y divide-slate-100">
        {items}
      </div>
    </section>"""

TOOL_CALL_ITEM = """\
<details class="group p-4">
  <summary class="text-sm font-medium text-slate-700 hover:text-slate-900">
    {tool} <span class="text-xs text-slate-400">(seq {seq})</span></summary>
  <div class="mt-2 space-y-2">
    <pre class="p-3 bg-slate-50 rounded text-xs text-slate-600 border border-slate-100">{detail_json}</pre>
  </div>
</details>"""
