import { useEffect, useState } from 'react'
import { api } from '../api.js'
import { useAuth } from '../context/AuthContext.jsx'

export default function AdminPlaceholdersPage() {
  const { session } = useAuth()
  const [data, setData] = useState(null)
  const [error, setError] = useState('')

  useEffect(() => {
    api('/api/placeholders', { token: session.token })
      .then(setData)
      .catch((e) => setError(e.message))
  }, [session.token])

  return (
    <section className="card">
      <h1>Platzhalter</h1>
      <p className="muted">Zwei getrennte Systeme: Kontext <code>{'{{key}}'}</code> aus der Registry, Privacy <code>[[TOKEN]]</code> vor dem Egress. Unbekannte Keys scheitern.</p>
      {error && <p className="error">{error}</p>}
      {data && (
        <>
          <h2>Kontext</h2>
          <ul>
            {data.context.map((item) => (
              <li key={item.key}><code>{item.syntax}</code> — {item.description}</li>
            ))}
          </ul>
          <h2>Privacy</h2>
          <ul>
            {data.privacy.map((item) => (
              <li key={item.token}><code>{item.token}</code> — {item.description}</li>
            ))}
          </ul>
        </>
      )}
    </section>
  )
}