---
export const prerender = false;
import '../../styles/global.css';
import { CONTENT_SCHEMAS } from '../../content/schemas';

const sections = Object.keys(CONTENT_SCHEMAS) as Array<keyof typeof CONTENT_SCHEMAS>;

const sectionLabels: Record<string, { label: string; icon: string; description: string }> = {
  profile: { label: 'Profil', icon: '👤', description: 'Nom, titre, bio, CTA hero, réseaux sociaux' },
  skills: { label: 'Compétences', icon: '⚡', description: 'Stack technique primaire & secondaire' },
  experiences: { label: 'Expériences', icon: '💼', description: 'Parcours professionnel, compétences pro' },
  formations: { label: 'Formations', icon: '🎓', description: 'Diplômes et cursus' },
  projects: { label: 'Projets', icon: '🚀', description: 'Portfolio de réalisations' },
  interests: { label: "Centres d'intérêt", icon: '🎧', description: 'Hobbies affichés sur la home' },
  site: { label: 'Site', icon: '⚙️', description: 'Meta SEO, features globales' },
};
---

<!doctype html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Admin — Dashboard</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&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">
          <span class="font-display text-lg tracking-wider uppercase">
            <span class="text-[color:var(--color-magenta)] glow-text-magenta">Admin</span>
            <span class="text-[color:var(--color-text-muted)] mx-2">/</span>
            <span class="text-[color:var(--color-text)]">Portfolio</span>
          </span>
          <span class="w-2 h-2 rounded-full bg-[color:var(--color-magenta)] animate-pulse-neon"></span>
        </div>

        <div class="flex items-center gap-3">
          <a href="/" target="_blank" class="text-sm font-mono text-[color:var(--color-text-muted)] hover:text-[color:var(--color-cyan)] transition">
            ↗ voir le site
          </a>
          <button
            id="logout-btn"
            class="text-sm font-mono text-[color:var(--color-text-muted)] hover:text-[color:var(--color-magenta)] transition"
          >
            déconnexion
          </button>
        </div>
      </div>
    </header>

    <main class="container mx-auto px-4 py-12">
      <div class="mb-10">
        <p class="font-mono text-xs text-[color:var(--color-cyan)] uppercase tracking-widest mb-2">
          // dashboard
        </p>
        <h1 class="font-display text-4xl font-bold mb-2">Édition du contenu</h1>
        <p class="text-[color:var(--color-text-muted)] max-w-2xl">
          Choisis une section à éditer. Les changements sont enregistrés directement dans les fichiers JSON — la mise à jour est immédiate côté site, aucune recompilation nécessaire.
        </p>
      </div>

      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        {
          sections.map((s) => {
            const meta = sectionLabels[s] ?? { label: s, icon: '📄', description: '' };
            return (
              <a
                href={`/admin/edit/${s}`}
                class="card-neon hover:border-[color:var(--color-cyan)] transition group"
              >
                <div class="flex items-start justify-between mb-3">
                  <span class="text-2xl">{meta.icon}</span>
                  <span class="text-xs font-mono text-[color:var(--color-text-dim)]">{s}.json</span>
                </div>
                <h3 class="font-display text-xl mb-2 group-hover:text-[color:var(--color-cyan)] transition-colors">
                  {meta.label}
                </h3>
                <p class="text-sm text-[color:var(--color-text-muted)]">{meta.description}</p>
                <span class="mt-4 block text-xs font-mono text-[color:var(--color-cyan)] opacity-0 group-hover:opacity-100 transition-opacity">
                  → éditer
                </span>
              </a>
            );
          })
        }
      </div>
    </main>

    <script>
      document.getElementById('logout-btn')?.addEventListener('click', async () => {
        await fetch('/api/auth/logout', { method: 'POST' });
        window.location.href = '/admin/login';
      });
    </script>
  </body>
</html>
