/* Interactive Roadmap Section */
const { useState: useStateR, useMemo: useMemoR } = React;

const ROADMAP_ITEMS = [
  // ─── Q2 2026 (Shipping now)
  {
    id: 'auth',
    quarter: 'Q2 2026',
    quarterIdx: 0,
    category: 'auth',
    status: 'in-progress',
    priority: 'high',
    title: 'Authentification externe',
    effort: '8–12h',
    lede: "Architecture provider-agnostic : Kinde par défaut, Auth0 / Clerk en option. Switch via variable d'environnement.",
    progress: 45,
    details: {
      steps: [
        { label: 'Créer compte Kinde et configurer l\u2019app', done: true },
        { label: 'Installer dépendances backend (jsonwebtoken, jwks-rsa)', done: true },
        { label: 'Créer structure auth/ avec types et providers', done: true },
        { label: 'Implémenter KindeAuthProvider', done: true },
        { label: 'Créer authMiddleware', done: false },
        { label: 'Appliquer middleware aux routes existantes', done: false },
        { label: 'Installer SDK Kinde frontend', done: false },
        { label: 'Créer AuthContext et useAuth hook', done: false },
        { label: 'Ajouter Login / Logout dans Header', done: false },
        { label: 'Tester le flow complet', done: false },
      ],
      decisions: [
        { q: 'Sync User local ?', a: 'Copie User en DB pour garder des relations Board → User, via webhook Kinde.' },
        { q: 'Multi-tenant ?', a: 'Ajouter userId sur Board et Folder. Chaque user ne voit que ses boards.' },
        { q: 'Rôles ?', a: 'Admin / User / Viewer — géré côté Kinde pour rester provider-agnostic.' },
      ],
    },
  },
  {
    id: 'loading',
    quarter: 'Q2 2026',
    quarterIdx: 0,
    category: 'ux',
    status: 'in-progress',
    priority: 'medium',
    title: 'Rework pages de chargement',
    effort: '4h',
    lede: 'Gradient bleu moderne, skeleton loaders cohérents, transitions smooth vers le contenu.',
    progress: 60,
    details: {
      steps: [
        { label: 'Skeleton loaders cohérents sur Dashboard, Board, Settings', done: true },
        { label: 'Animation fluide des placeholders', done: true },
        { label: 'Transition smooth vers le contenu', done: false },
      ],
    },
  },

  // ─── Q3 2026
  {
    id: 'formulas',
    quarter: 'Q3 2026',
    quarterIdx: 1,
    category: 'database',
    status: 'planned',
    priority: 'medium',
    title: 'Formules Database',
    effort: '10h',
    lede: 'Syntaxe type tableur : {Prix} * {Quantité}, SUM(), AVG(). Parser basé sur expr-eval.',
    details: {
      steps: [
        { label: 'Parser d\u2019expressions avec expr-eval', done: false },
        { label: 'FormulaCell component', done: false },
        { label: 'PropertyConfigModal pour éditer les formules', done: false },
      ],
    },
  },
  {
    id: 'board-view',
    quarter: 'Q3 2026',
    quarterIdx: 1,
    category: 'database',
    status: 'planned',
    priority: 'medium',
    title: 'Vue Board (Kanban-like)',
    effort: '8h',
    lede: 'Groupement par propriété SELECT, drag & drop entre groupes avec @dnd-kit.',
    details: {
      steps: [
        { label: 'BoardView, BoardGroup, BoardCard components', done: false },
        { label: 'Drag & drop entre groupes', done: false },
        { label: 'Persistance du groupement', done: false },
      ],
    },
  },
  {
    id: 'csv-import',
    quarter: 'Q3 2026',
    quarterIdx: 1,
    category: 'database',
    status: 'planned',
    priority: 'medium',
    title: 'Import CSV',
    effort: '6h',
    lede: 'Parser papaparse, mapping des colonnes, inférence de types automatique.',
    details: {
      steps: [
        { label: 'Parser avec papaparse', done: false },
        { label: 'Flow d\u2019import avec mapping des colonnes', done: false },
        { label: 'Inférence de types automatique', done: false },
      ],
    },
  },
  {
    id: 'ai-canvas',
    quarter: 'Q3 2026',
    quarterIdx: 1,
    category: 'ai',
    status: 'planned',
    priority: 'high',
    title: 'Intégration IA (Canvas)',
    effort: '20h+',
    lede: 'Lecture intelligente des cartes et éléments, suggestions contextuelles, actions via prompts.',
    details: {
      steps: [
        { label: 'Lecture intelligente des cartes Kanban et éléments Canvas', done: false },
        { label: 'Analyse du contenu (titres, descriptions, checklists, tags)', done: false },
        { label: 'Suggestions contextuelles (idées, améliorations, regroupements)', done: false },
        { label: 'Créer des cartes automatiquement via prompt', done: false },
        { label: 'Réorganiser les colonnes via prompt', done: false },
        { label: 'Générer des résumés', done: false },
        { label: 'Intégration API Claude / OpenAI configurable', done: false },
        { label: 'Panel IA dans la sidebar', done: false },
      ],
    },
  },

  // ─── Q4 2026
  {
    id: 'perf',
    quarter: 'Q4 2026',
    quarterIdx: 2,
    category: 'perf',
    status: 'planned',
    priority: 'medium',
    title: 'Performance & offline',
    effort: '12h',
    lede: 'Lazy routes, virtualisation des listes, service worker pour le cache offline.',
    details: {
      steps: [
        { label: 'Lazy loading Dashboard, BoardView, Settings', done: false },
        { label: 'Virtualisation avec react-window', done: false },
        { label: 'Service Worker pour cache offline', done: false },
        { label: 'Optimistic updates avec TanStack Query', done: false },
      ],
    },
  },
  {
    id: 'backend',
    quarter: 'Q4 2026',
    quarterIdx: 2,
    category: 'backend',
    status: 'planned',
    priority: 'medium',
    title: 'Durcissement backend',
    effort: '10h',
    lede: 'asyncHandler partout, validation Zod, rate limiting, logging structuré.',
    details: {
      steps: [
        { label: 'Migrer routes vers asyncHandler', done: false },
        { label: 'Validation Zod sur tous les endpoints', done: false },
        { label: 'Rate limiting (express-rate-limit)', done: false },
        { label: 'Logging structuré (pino / winston)', done: false },
      ],
    },
  },
  {
    id: 'a11y',
    quarter: 'Q4 2026',
    quarterIdx: 2,
    category: 'ux',
    status: 'planned',
    priority: 'medium',
    title: 'Accessibilité & clavier',
    effort: '8h',
    lede: 'Keyboard nav complète, ARIA, focus trap dans les modales, skip links.',
    details: {
      steps: [
        { label: 'Keyboard navigation complète', done: false },
        { label: 'ARIA labels sur tous les éléments interactifs', done: false },
        { label: 'Focus trap dans les modales', done: false },
        { label: 'Skip links pour accessibilité', done: false },
        { label: 'Dark mode toggle amélioré', done: false },
      ],
    },
  },
  {
    id: 'devops',
    quarter: 'Q4 2026',
    quarterIdx: 2,
    category: 'backend',
    status: 'planned',
    priority: 'low',
    title: 'CI/CD & monitoring',
    effort: '10h',
    lede: 'GitHub Actions, Vitest, Playwright, Docker multi-stage, Sentry.',
    details: {
      steps: [
        { label: 'CI/CD avec GitHub Actions', done: false },
        { label: 'Tests unitaires Vitest', done: false },
        { label: 'Tests E2E Playwright', done: false },
        { label: 'Docker production multi-stage', done: false },
        { label: 'Monitoring Sentry', done: false },
      ],
    },
  },

  // ─── 2027+
  {
    id: 'collab',
    quarter: '2027+',
    quarterIdx: 3,
    category: 'collab',
    status: 'later',
    priority: 'high',
    title: 'Collaboration temps réel',
    effort: '40h+',
    lede: 'Real-time sync, curseurs multi-utilisateurs, commentaires, historique, partage de boards.',
    details: {
      steps: [
        { label: 'Real-time sync (WebSockets / Liveblocks)', done: false },
        { label: 'Curseurs multi-utilisateurs', done: false },
        { label: 'Commentaires sur éléments', done: false },
        { label: 'Historique des modifications', done: false },
        { label: 'Partage de boards (liens publics)', done: false },
      ],
    },
  },
];

const CATEGORIES = [
  { id: 'all', label: 'Tout', color: '#94A3B8' },
  { id: 'auth', label: 'Auth', color: '#3B82F6' },
  { id: 'database', label: 'Database', color: '#10B981' },
  { id: 'ai', label: 'IA', color: '#EC4899' },
  { id: 'ux', label: 'UX / A11y', color: '#F59E0B' },
  { id: 'perf', label: 'Performance', color: '#A855F7' },
  { id: 'backend', label: 'Backend', color: '#F97316' },
  { id: 'collab', label: 'Collab', color: '#06B6D4' },
];

const QUARTERS = [
  { idx: 0, label: 'Q2 2026', sub: 'En cours' },
  { idx: 1, label: 'Q3 2026', sub: 'Prochain' },
  { idx: 2, label: 'Q4 2026', sub: 'Planifié' },
  { idx: 3, label: '2027+',  sub: 'Horizon' },
];

const PRIORITY_COPY = { high: 'Haute', medium: 'Moyenne', low: 'Basse' };
const STATUS_COPY = { 'in-progress': 'En cours', planned: 'Planifié', later: 'Plus tard' };

function RoadmapSection() {
  const [filter, setFilter] = useStateR('all');
  const [expanded, setExpanded] = useStateR(null);

  const items = useMemoR(() => {
    if (filter === 'all') return ROADMAP_ITEMS;
    return ROADMAP_ITEMS.filter(it => it.category === filter);
  }, [filter]);

  const byQuarter = useMemoR(() => {
    const out = { 0: [], 1: [], 2: [], 3: [] };
    items.forEach(it => out[it.quarterIdx].push(it));
    return out;
  }, [items]);

  const catOf = (id) => CATEGORIES.find(c => c.id === id) || CATEGORIES[0];

  return (
    <section className="horus-section horus-roadmap" id="roadmap">
      <div className="horus-eyebrow">Roadmap publique</div>
      <h2 className="horus-section-title">Ce qui arrive, <em>trimestre par trimestre.</em></h2>
      <p className="horus-section-lede">
        Notre feuille de route est ouverte. Cliquez sur une carte pour voir les étapes détaillées — et filtrez par thème pour suivre ce qui vous intéresse.
      </p>

      {/* Filters */}
      <div className="horus-roadmap__filters">
        {CATEGORIES.map(c => {
          const count = c.id === 'all' ? ROADMAP_ITEMS.length : ROADMAP_ITEMS.filter(x => x.category === c.id).length;
          const active = filter === c.id;
          return (
            <button
              key={c.id}
              className={`horus-roadmap__chip ${active ? 'is-active' : ''}`}
              style={active ? { background: c.color, borderColor: c.color, color: '#0B0D12' } : { '--dot': c.color }}
              onClick={() => setFilter(c.id)}
            >
              <span className="horus-roadmap__chip-dot" style={{ background: c.color }} />
              {c.label}
              <span className="horus-roadmap__chip-count">{count}</span>
            </button>
          );
        })}
      </div>

      {/* Timeline */}
      <div className="horus-roadmap__timeline">
        <div className="horus-roadmap__axis">
          {QUARTERS.map((q, i) => (
            <div key={q.idx} className="horus-roadmap__axis-cell" data-first={i === 0}>
              <div className="horus-roadmap__axis-dot" />
              <div className="horus-roadmap__axis-label">
                <b>{q.label}</b>
                <em>{q.sub}</em>
              </div>
            </div>
          ))}
        </div>

        <div className="horus-roadmap__cols">
          {QUARTERS.map(q => (
            <div key={q.idx} className="horus-roadmap__col">
              {byQuarter[q.idx].length === 0 && (
                <div className="horus-roadmap__empty">— Rien dans ce filtre —</div>
              )}
              {byQuarter[q.idx].map(it => {
                const c = catOf(it.category);
                const isOpen = expanded === it.id;
                return (
                  <article
                    key={it.id}
                    className={`horus-rmcard ${isOpen ? 'is-open' : ''} ${it.status === 'in-progress' ? 'is-live' : ''}`}
                    style={{ '--cat': c.color }}
                    onClick={() => setExpanded(isOpen ? null : it.id)}
                  >
                    <header>
                      <span className="horus-rmcard__cat">{c.label}</span>
                      <span className={`horus-rmcard__status horus-rmcard__status--${it.status}`}>
                        {it.status === 'in-progress' && <span className="horus-rmcard__pulse" />}
                        {STATUS_COPY[it.status]}
                      </span>
                    </header>

                    <h3>{it.title}</h3>
                    <p>{it.lede}</p>

                    <div className="horus-rmcard__meta">
                      <span><i data-lucide="flag" />{PRIORITY_COPY[it.priority]}</span>
                      <span><i data-lucide="timer" />{it.effort}</span>
                      {typeof it.progress === 'number' && (
                        <span className="horus-rmcard__prog">
                          <span className="horus-rmcard__prog-bar"><span style={{ width: it.progress + '%', background: c.color }} /></span>
                          {it.progress}%
                        </span>
                      )}
                    </div>

                    {isOpen && (
                      <div className="horus-rmcard__body" onClick={(e) => e.stopPropagation()}>
                        <h4>Étapes</h4>
                        <ul className="horus-rmcard__steps">
                          {it.details.steps.map((s, i) => (
                            <li key={i} className={s.done ? 'is-done' : ''}>
                              <span className="horus-rmcard__check" style={s.done ? { background: c.color, borderColor: c.color } : {}}>
                                {s.done && <i data-lucide="check" />}
                              </span>
                              {s.label}
                            </li>
                          ))}
                        </ul>
                        {it.details.decisions && (
                          <>
                            <h4>Décisions en cours</h4>
                            <ul className="horus-rmcard__decisions">
                              {it.details.decisions.map((d, i) => (
                                <li key={i}><b>{d.q}</b><em>{d.a}</em></li>
                              ))}
                            </ul>
                          </>
                        )}
                      </div>
                    )}

                    <div className="horus-rmcard__toggle">
                      {isOpen ? (<><i data-lucide="minus" />Réduire</>) : (<><i data-lucide="plus" />Voir les étapes</>)}
                    </div>
                  </article>
                );
              })}
            </div>
          ))}
        </div>
      </div>

      <div className="horus-roadmap__foot">
        <i data-lucide="git-branch" />
        Dernière mise à jour : <b>19 avril 2026</b> · Vous voulez suggérer une feature ? <a href="mailto:roadmap@horus.app">roadmap@horus.app</a>
      </div>
    </section>
  );
}

Object.assign(window, { RoadmapSection });