---
export const prerender = false;
import '../../../styles/global.css';
import { loadContent } from '../../../lib/content';
import { CONTENT_SCHEMAS, type ContentKey } from '../../../content/schemas';
import { EditPanel } from '../../../components/admin/EditPanel';

const { section } = Astro.params;

if (!section || !(section in CONTENT_SCHEMAS)) {
  return Astro.redirect('/admin');
}

const key = section as ContentKey;
const data = await loadContent(key);
---

<!doctype html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Admin — Édition {section}</title>
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@500;700&family=JetBrains+Mono:wght@400;500&family=Bebas+Neue&display=swap"
      rel="stylesheet"
    />
  </head>
  <body class="aurora-bg min-h-screen">
    <header class="border-b border-[color:var(--color-border)] backdrop-blur-xl bg-[rgba(10,10,15,0.7)] sticky top-0 z-40">
      <div class="container mx-auto px-4 h-16 flex items-center justify-between">
        <div class="flex items-center gap-3">
          <a href="/admin" class="font-mono text-sm text-[color:var(--color-text-muted)] hover:text-[color:var(--color-cyan)]">
            ← dashboard
          </a>
          <span class="text-[color:var(--color-text-dim)]">/</span>
          <span class="font-display uppercase tracking-wider text-[color:var(--color-cyan)]">
            {section}
          </span>
        </div>
        <a
          href={`/api/content/${section}`}
          target="_blank"
          rel="noreferrer"
          class="font-mono text-xs text-[color:var(--color-text-dim)] hover:text-[color:var(--color-cyan)]"
        >
          ↗ JSON courant
        </a>
      </div>
    </header>

    <main class="container mx-auto px-4 py-6 pb-24">
      <EditPanel section={key} data={data} client:load />
    </main>
  </body>
</html>
