<template>
  <div class="puro-page">
    <div class="bg-glow soft"></div>

    <nav class="nav">
      <div class="container nav-inner">
        <router-link to="/" class="brand">
          <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.8">
            <path d="M12 2L21 7V17L12 22L3 17V7L12 2Z" fill="rgba(34, 211, 238, 0.08)"/>
          </svg>
          <span>PURO AI</span>
        </router-link>
        <div class="nav-links">
          <router-link to="/">{{ $t('docs.nav.products') }}</router-link>
          <router-link to="/pricing">{{ $t('docs.nav.pricing') }}</router-link>
          <router-link to="/docs" class="active">{{ $t('docs.nav.docs') }}</router-link>
        </div>
        <div class="nav-cta">
          <PuroLocaleSwitcher />
          <router-link to="/login" class="btn btn-ghost">{{ $t('docs.nav.login') }}</router-link>
          <router-link to="/register" class="btn btn-primary">{{ $t('docs.nav.signup') }}</router-link>
        </div>
      </div>
    </nav>

    <section class="docs-hero container">
      <h1>{{ $t('docs.hero.title') }}</h1>
      <p class="subtitle">{{ $t('docs.hero.subtitle') }}</p>
    </section>

    <div class="container docs-body">
      <section id="get-key" class="docs-section">
        <h2>{{ $t('docs.sections.getKey.heading') }}</h2>
        <p>{{ $t('docs.sections.getKey.desc') }}</p>
        <div class="callout">
          <a href="mailto:admin@puro.im">admin@puro.im</a>
        </div>
        <p class="note">{{ $t('docs.sections.getKey.note') }}</p>
      </section>

      <section id="codex" class="docs-section">
        <h2>{{ $t('docs.sections.codex.heading') }}</h2>
        <p>{{ $t('docs.sections.codex.configIntro') }}</p>
        <div class="code-panel">
          <div class="code-head">
            <div class="traffic">
              <span></span><span></span><span></span>
            </div>
            <div class="code-tabs">
              <span class="tab active">~/.codex/config.toml</span>
            </div>
            <button class="code-copy" @click="copyCode($event)" type="button">
              <svg viewBox="0 0 16 16" width="12" height="12" fill="currentColor">
                <path d="M4 1.5h5a.5.5 0 0 1 .5.5v1h1V2a1.5 1.5 0 0 0-1.5-1.5H4A1.5 1.5 0 0 0 2.5 2v8A1.5 1.5 0 0 0 4 11.5h1v-1H4a.5.5 0 0 1-.5-.5V2a.5.5 0 0 1 .5-.5z"/>
                <path d="M7 4.5A1.5 1.5 0 0 1 8.5 3h5A1.5 1.5 0 0 1 15 4.5v9a1.5 1.5 0 0 1-1.5 1.5h-5A1.5 1.5 0 0 1 7 13.5v-9z"/>
              </svg>
              {{ $t('docs.sections.codex.copy') }}
            </button>
          </div>
          <pre class="mono"><code>model_provider = <span class="str">"OpenAI"</span>
model = <span class="str">"gpt-5.4"</span>
wire_api = <span class="str">"responses"</span>

[model_providers.OpenAI]
name = <span class="str">"OpenAI"</span>
base_url = <span class="str">"https://ai.puro.im"</span>
wire_api = <span class="str">"responses"</span>
requires_openai_auth = <span class="kw">true</span></code></pre>
        </div>
        <p>{{ $t('docs.sections.codex.authIntro') }}</p>
        <div class="code-panel">
          <div class="code-head">
            <div class="traffic">
              <span></span><span></span><span></span>
            </div>
            <div class="code-tabs">
              <span class="tab active">~/.codex/auth.json</span>
            </div>
            <button class="code-copy" @click="copyCode($event)" type="button">
              <svg viewBox="0 0 16 16" width="12" height="12" fill="currentColor">
                <path d="M4 1.5h5a.5.5 0 0 1 .5.5v1h1V2a1.5 1.5 0 0 0-1.5-1.5H4A1.5 1.5 0 0 0 2.5 2v8A1.5 1.5 0 0 0 4 11.5h1v-1H4a.5.5 0 0 1-.5-.5V2a.5.5 0 0 1 .5-.5z"/>
                <path d="M7 4.5A1.5 1.5 0 0 1 8.5 3h5A1.5 1.5 0 0 1 15 4.5v9a1.5 1.5 0 0 1-1.5 1.5h-5A1.5 1.5 0 0 1 7 13.5v-9z"/>
              </svg>
              {{ $t('docs.sections.codex.copy') }}
            </button>
          </div>
          <pre class="mono"><code>{
  <span class="str">"OPENAI_API_KEY"</span>: <span class="str">"sk-xxxxxxxxxxxxxxxx"</span>
}</code></pre>
        </div>
        <p>{{ $t('docs.sections.codex.verifyIntro') }}</p>
        <div class="code-panel">
          <div class="code-head">
            <div class="traffic">
              <span></span><span></span><span></span>
            </div>
            <div class="code-tabs">
              <span class="tab active">shell</span>
            </div>
            <button class="code-copy" @click="copyCode($event)" type="button">
              <svg viewBox="0 0 16 16" width="12" height="12" fill="currentColor">
                <path d="M4 1.5h5a.5.5 0 0 1 .5.5v1h1V2a1.5 1.5 0 0 0-1.5-1.5H4A1.5 1.5 0 0 0 2.5 2v8A1.5 1.5 0 0 0 4 11.5h1v-1H4a.5.5 0 0 1-.5-.5V2a.5.5 0 0 1 .5-.5z"/>
                <path d="M7 4.5A1.5 1.5 0 0 1 8.5 3h5A1.5 1.5 0 0 1 15 4.5v9a1.5 1.5 0 0 1-1.5 1.5h-5A1.5 1.5 0 0 1 7 13.5v-9z"/>
              </svg>
              {{ $t('docs.sections.codex.copy') }}
            </button>
          </div>
          <pre class="mono"><code><span class="cm">$</span> codex exec --sandbox read-only <span class="str">"say hi"</span></code></pre>
        </div>
      </section>

      <section id="claude-code" class="docs-section">
        <h2>{{ $t('docs.sections.claudeCode.heading') }}</h2>
        <p>{{ $t('docs.sections.claudeCode.configIntro') }}</p>
        <div class="code-panel">
          <div class="code-head">
            <div class="traffic">
              <span></span><span></span><span></span>
            </div>
            <div class="code-tabs">
              <span class="tab active">~/.claude/settings.json</span>
            </div>
            <button class="code-copy" @click="copyCode($event)" type="button">
              <svg viewBox="0 0 16 16" width="12" height="12" fill="currentColor">
                <path d="M4 1.5h5a.5.5 0 0 1 .5.5v1h1V2a1.5 1.5 0 0 0-1.5-1.5H4A1.5 1.5 0 0 0 2.5 2v8A1.5 1.5 0 0 0 4 11.5h1v-1H4a.5.5 0 0 1-.5-.5V2a.5.5 0 0 1 .5-.5z"/>
                <path d="M7 4.5A1.5 1.5 0 0 1 8.5 3h5A1.5 1.5 0 0 1 15 4.5v9a1.5 1.5 0 0 1-1.5 1.5h-5A1.5 1.5 0 0 1 7 13.5v-9z"/>
              </svg>
              {{ $t('docs.sections.claudeCode.copy') }}
            </button>
          </div>
          <pre class="mono"><code>{
  <span class="str">"base_url"</span>: <span class="str">"https://ai.puro.im"</span>,
  <span class="str">"api_key"</span>: <span class="str">"sk-xxxxxxxxxxxxxxxx"</span>
}</code></pre>
        </div>
        <p class="note">{{ $t('docs.sections.claudeCode.note') }}</p>
      </section>

      <section id="curl" class="docs-section">
        <h2>{{ $t('docs.sections.curl.heading') }}</h2>
        <p>{{ $t('docs.sections.curl.openaiIntro') }}</p>
        <div class="code-panel">
          <div class="code-head">
            <div class="traffic">
              <span></span><span></span><span></span>
            </div>
            <div class="code-tabs">
              <span class="tab active">curl</span>
            </div>
            <button class="code-copy" @click="copyCode($event)" type="button">
              <svg viewBox="0 0 16 16" width="12" height="12" fill="currentColor">
                <path d="M4 1.5h5a.5.5 0 0 1 .5.5v1h1V2a1.5 1.5 0 0 0-1.5-1.5H4A1.5 1.5 0 0 0 2.5 2v8A1.5 1.5 0 0 0 4 11.5h1v-1H4a.5.5 0 0 1-.5-.5V2a.5.5 0 0 1 .5-.5z"/>
                <path d="M7 4.5A1.5 1.5 0 0 1 8.5 3h5A1.5 1.5 0 0 1 15 4.5v9a1.5 1.5 0 0 1-1.5 1.5h-5A1.5 1.5 0 0 1 7 13.5v-9z"/>
              </svg>
              {{ $t('docs.sections.curl.copy') }}
            </button>
          </div>
          <pre class="mono"><code><span class="cm">$</span> curl https://ai.puro.im/responses \
  -H <span class="str">"Authorization: Bearer sk-xxx"</span> \
  -H <span class="str">"Content-Type: application/json"</span> \
  -d <span class="str">'{"model":"gpt-5.4","input":"hello"}'</span></code></pre>
        </div>
        <p>{{ $t('docs.sections.curl.anthropicIntro') }}</p>
        <div class="code-panel">
          <div class="code-head">
            <div class="traffic">
              <span></span><span></span><span></span>
            </div>
            <div class="code-tabs">
              <span class="tab active">curl</span>
            </div>
            <button class="code-copy" @click="copyCode($event)" type="button">
              <svg viewBox="0 0 16 16" width="12" height="12" fill="currentColor">
                <path d="M4 1.5h5a.5.5 0 0 1 .5.5v1h1V2a1.5 1.5 0 0 0-1.5-1.5H4A1.5 1.5 0 0 0 2.5 2v8A1.5 1.5 0 0 0 4 11.5h1v-1H4a.5.5 0 0 1-.5-.5V2a.5.5 0 0 1 .5-.5z"/>
                <path d="M7 4.5A1.5 1.5 0 0 1 8.5 3h5A1.5 1.5 0 0 1 15 4.5v9a1.5 1.5 0 0 1-1.5 1.5h-5A1.5 1.5 0 0 1 7 13.5v-9z"/>
              </svg>
              {{ $t('docs.sections.curl.copy') }}
            </button>
          </div>
          <pre class="mono"><code><span class="cm">$</span> curl https://ai.puro.im/v1/messages \
  -H <span class="str">"Authorization: Bearer sk-xxx"</span> \
  -H <span class="str">"Content-Type: application/json"</span> \
  -H <span class="str">"anthropic-version: 2023-06-01"</span> \
  -d <span class="str">'{"model":"claude-opus-4-7","max_tokens":100,"messages":[{"role":"user","content":"hi"}]}'</span></code></pre>
        </div>
      </section>

      <section id="models" class="docs-section">
        <h2>{{ $t('docs.sections.models.heading') }}</h2>
        <div class="table-wrap">
          <table class="models-table mono">
            <thead>
              <tr>
                <th>{{ $t('docs.sections.models.colModel') }}</th>
                <th>{{ $t('docs.sections.models.colPlatform') }}</th>
                <th>{{ $t('docs.sections.models.colContext') }}</th>
                <th>{{ $t('docs.sections.models.colStatus') }}</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td><code>gpt-5.4</code></td>
                <td><span class="provider gpt"><span class="dot"></span>OpenAI（ChatGPT Plus / Codex OAuth）</span></td>
                <td>272K</td>
                <td><span class="badge-ok">OK</span></td>
              </tr>
              <tr>
                <td><code>gpt-5.4-codex</code></td>
                <td><span class="provider gpt"><span class="dot"></span>{{ $t('docs.sections.models.codexDedicated') }}</span></td>
                <td>272K</td>
                <td><span class="badge-ok">OK</span></td>
              </tr>
              <tr>
                <td><code>claude-opus-4-7</code></td>
                <td><span class="provider claude"><span class="dot"></span>Anthropic（Claude Pro / Max OAuth）</span></td>
                <td>200K</td>
                <td><span class="badge-ok">OK</span></td>
              </tr>
              <tr>
                <td><code>claude-sonnet-4-6</code></td>
                <td><span class="provider claude"><span class="dot"></span>Anthropic</span></td>
                <td>200K</td>
                <td><span class="badge-ok">OK</span></td>
              </tr>
              <tr>
                <td><code>gemini-2.5-pro</code></td>
                <td><span class="provider gemini"><span class="dot"></span>Google（Code Assist OAuth）</span></td>
                <td>1M</td>
                <td><span class="badge-beta">BETA</span></td>
              </tr>
              <tr>
                <td><code>gemini-2.5-flash</code></td>
                <td><span class="provider gemini"><span class="dot"></span>Google</span></td>
                <td>1M</td>
                <td><span class="badge-beta">BETA</span></td>
              </tr>
            </tbody>
          </table>
        </div>
        <i18n-t tag="p" class="note" keypath="docs.sections.models.note">
          <template #repo><code class="mono">{{ $t('docs.sections.models.noteRepo') }}</code></template>
          <template #dashboard><router-link to="/dashboard">{{ $t('docs.sections.models.noteDashboard') }}</router-link></template>
        </i18n-t>
      </section>

      <section id="feedback" class="docs-section">
        <h2>{{ $t('docs.sections.feedback.heading') }}</h2>
        <p>{{ $t('docs.sections.feedback.desc') }}</p>
        <div class="callout">
          <a href="mailto:admin@puro.im">admin@puro.im</a>
        </div>
      </section>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import PuroLocaleSwitcher from '@/components/puro/PuroLocaleSwitcher.vue'

const { t } = useI18n()

async function copyCode(ev: MouseEvent) {
  const button = ev.currentTarget as HTMLButtonElement
  const panel = button.closest('.code-panel')
  const codeEl = panel?.querySelector('pre code') as HTMLElement | null
  if (!codeEl) return
  try {
    await navigator.clipboard.writeText(codeEl.innerText)
    const original = button.innerHTML
    button.innerHTML = `<svg viewBox="0 0 16 16" width="12" height="12" fill="currentColor"><path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/></svg> ${t('docs.sections.codex.copied')}`
    button.classList.add('copied')
    setTimeout(() => {
      button.innerHTML = original
      button.classList.remove('copied')
    }, 1500)
  } catch (e) {
    console.warn('Clipboard copy failed', e)
  }
}
</script>

<style scoped>
/* =============================================================
 * DocsView — component-local styles
 * Globals from puro.css (scoped to .puro-page) provide:
 * - .nav, .nav-inner, .brand, .hex, .nav-links, .nav-cta (nav base)
 * - .mono, .btn, .btn-primary, .container (primitives)
 * ============================================================= */

.puro-page {
  min-height: 100vh;
  position: relative;
}

/* nav brand SVG */
.brand svg { color: var(--cyan); flex-shrink: 0; }

.docs-hero {
  padding: 80px 24px 40px;
  text-align: center;
}
.docs-hero h1 {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 12px;
}
.docs-hero .subtitle {
  color: var(--text-2);
  font-size: 16px;
}

.docs-body { padding-bottom: 80px; }
.docs-section {
  margin: 48px 0;
  scroll-margin-top: 80px;
}

/* h2 with cyan left-accent bar */
.docs-section h2 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 14px;
  color: var(--text-0);
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
  padding-left: 14px;
  position: relative;
}
.docs-section h2::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 10px;
  width: 3px;
  background: var(--cyan);
  border-radius: 2px;
}

.docs-section p {
  color: var(--text-1);
  font-size: 14px;
  line-height: 1.8;
  margin: 12px 0;
}
.docs-section .note {
  color: var(--text-3);
  font-size: 13px;
}
.docs-section code.mono {
  background: var(--bg-1);
  padding: 2px 6px;
  border-radius: var(--r-sm);
  font-size: 13px;
  color: var(--cyan);
}

/* code panel */
.code-panel {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-code);
  overflow: hidden;
  margin: 12px 0;
}
.code-head {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  gap: 12px;
  background: var(--bg-1);
  border-bottom: 1px solid var(--border);
}
.traffic { display: flex; gap: 6px; flex-shrink: 0; }
.traffic span {
  width: 10px; height: 10px; border-radius: 50%;
}
.traffic span:nth-child(1) { background: #f87171; }
.traffic span:nth-child(2) { background: #fbbf24; }
.traffic span:nth-child(3) { background: #34d399; }
.code-tabs {
  display: flex;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.code-tabs .tab {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-2);
  padding: 2px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}
.code-tabs .tab.active {
  color: var(--cyan);
  background: rgba(34,211,238,0.1);
  border-color: rgba(34,211,238,0.3);
}
.code-copy {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  transition: color 0.15s, border-color 0.15s;
}
.code-copy:hover {
  color: var(--cyan);
  border-color: rgba(34,211,238,0.3);
}
.code-copy.copied {
  color: var(--green, #34d399);
  border-color: rgba(52,211,153,0.3);
}
.code-copy svg { flex-shrink: 0; }

.code-panel pre.mono {
  margin: 0;
  border: none;
  border-radius: 0;
  background: var(--bg-code);
  padding: 16px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-1);
  overflow-x: auto;
}
.code-panel pre .str { color: var(--cyan); }
.code-panel pre .kw { color: var(--amber); }
.code-panel pre .cm { color: var(--text-3); }

.callout {
  padding: 16px 20px;
  background: var(--bg-1);
  border: 1px solid var(--border-2);
  border-left: 3px solid var(--cyan);
  border-radius: var(--r-md);
  margin: 12px 0;
}
.callout a {
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: 14px;
}

/* models table */
.table-wrap {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  margin: 12px 0;
}
.models-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.models-table thead {
  background: var(--bg-1);
}
.models-table th {
  text-align: left;
  padding: 10px 14px;
  color: var(--text-3);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}
.models-table td {
  padding: 12px 14px;
  color: var(--text-1);
  border-bottom: 1px solid rgba(30,41,59,0.5);
}
.models-table tbody tr:last-child td { border-bottom: none; }
.models-table code {
  color: var(--cyan);
  background: transparent;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 12px;
}
.models-table .provider {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.models-table .provider .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.models-table .provider.gpt .dot { background: var(--p-gpt, #10a37f); }
.models-table .provider.claude .dot { background: var(--p-claude, #d97757); }
.models-table .provider.gemini .dot { background: var(--p-gemini, #4285f4); }

.badge-ok {
  display: inline-block;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
  font-family: var(--font-mono);
  color: var(--green, #34d399);
  background: rgba(52,211,153,0.1);
  border: 1px solid rgba(52,211,153,0.3);
  border-radius: 4px;
}
.badge-beta {
  display: inline-block;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
  font-family: var(--font-mono);
  color: var(--amber, #fbbf24);
  background: rgba(251,191,36,0.1);
  border: 1px solid rgba(251,191,36,0.3);
  border-radius: 4px;
}

/* container override (puro.css has 1100px/32px; we want narrower for docs readability) */
.container {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 2;
}
</style>
