---
// Centre - HAUT : tabs (Carte O mindmap | Chatbot RAG branche PC7).
//          BAS  : iframe carte AEP + scroll articles Substack (PC4).
import CarteOWrapper from '../vue/CarteOWrapper.vue';
import ChatbotV2 from '../vue/ChatbotV2.vue';
import EmbedDynamique from '../vue/EmbedDynamique.vue';
---
<div id="col-centre-grid" class="h-full grid gap-2 p-2" style="grid-template-rows: 1fr 2fr;">
  <!-- HAUT 50% : tabs Carte O / Chatbot -->
  <section id="col-centre-haut" class="border border-neutral-200 rounded flex flex-col overflow-hidden bg-white" style="min-height: 0;">
    <nav role="tablist" aria-label="Vues centrales" class="flex border-b border-neutral-200 px-1 pt-1">
      <button
        type="button"
        role="tab"
        id="tab-mindmap"
        aria-controls="panel-mindmap"
        aria-selected="true"
        data-tab="mindmap"
        class="tab-btn px-3 py-2 text-sm border-b-2 border-neutral-900 font-medium text-neutral-900"
      >
        Carte O
      </button>
      <button
        type="button"
        role="tab"
        id="tab-chatbot"
        aria-controls="panel-chatbot"
        aria-selected="false"
        data-tab="chatbot"
        class="tab-btn px-3 py-2 text-sm border-b-2 border-transparent text-neutral-500 hover:text-neutral-900"
      >
        Chatbot
      </button>
    </nav>

    <div class="flex-1 overflow-hidden relative">
      <div
        id="panel-mindmap"
        role="tabpanel"
        aria-labelledby="tab-mindmap"
        data-tab-panel="mindmap"
        class="absolute inset-0"
      >
        <CarteOWrapper client:visible />
      </div>
      <div
        id="panel-chatbot"
        role="tabpanel"
        aria-labelledby="tab-chatbot"
        data-tab-panel="chatbot"
        class="absolute inset-0 hidden"
      >
        <ChatbotV2 client:visible />
      </div>
    </div>
  </section>

  <!-- Drag handle desktop - redimensionnement vertical md+ -->
  <div
    id="col-centre-drag-handle"
    class="hidden md:flex items-center justify-center h-2 cursor-row-resize hover:bg-neutral-200 transition-colors w-full -mt-1 -mb-1"
    aria-hidden="true"
  >
    <span class="block w-10 h-0.5 bg-neutral-300 rounded-full"></span>
  </div>

  <!-- Poignee repli zone HAUT - mobile only -->
  <button
    id="col-centre-poignee"
    type="button"
    aria-label="Replier ou deployer la Carte O"
    class="md:hidden flex items-center justify-center h-6 bg-neutral-100 border-y border-neutral-200 cursor-pointer w-full -mt-2 -mb-2 hover:bg-neutral-200 transition-colors"
  >
    <span class="block w-8 h-0.5 bg-neutral-400 rounded-full"></span>
  </button>

  <!-- BAS 50% : embed dynamique (carte AEP default, article journal au click) -->
  <section class="border border-neutral-200 rounded overflow-hidden bg-white" style="min-height: 0;">
    <div class="h-full min-h-[60vh] md:min-h-[400px]">
      <EmbedDynamique client:visible />
    </div>
  </section>
</div>

<script>
  // Poignee repli zone HAUT (mobile only, D.3)
  const grid = document.getElementById('col-centre-grid');
  const haut = document.getElementById('col-centre-haut');
  const poignee = document.getElementById('col-centre-poignee');

  const applyRepliState = (replie: boolean) => {
    if (!grid || !haut) return;
    if (replie) {
      grid.classList.remove('grid-rows-2');
      grid.style.gridTemplateRows = '0fr 1fr';
      haut.style.overflow = 'hidden';
      haut.style.minHeight = '0';
      poignee?.setAttribute('aria-label', 'Deployer la Carte O');
    } else {
      grid.classList.remove('grid-rows-2');
      grid.style.gridTemplateRows = '1fr 2fr';
      haut.style.overflow = '';
      haut.style.minHeight = '';
      poignee?.setAttribute('aria-label', 'Replier la Carte O');
    }
  };

  // Etat initial depuis sessionStorage
  const savedRepli = sessionStorage.getItem('tf-haut-replie');
  applyRepliState(savedRepli === 'true');

  poignee?.addEventListener('click', () => {
    const current = sessionStorage.getItem('tf-haut-replie') === 'true';
    const next = !current;
    sessionStorage.setItem('tf-haut-replie', String(next));
    applyRepliState(next);
  });

  // Drag-resize desktop (>=768px)
  const dragHandle = document.getElementById('col-centre-drag-handle');
  const gridEl = document.getElementById('col-centre-grid');

  if (dragHandle && gridEl) {
    let isDragging = false;
    let startY = 0;
    let startTop = 0;

    const getGridHeight = () => gridEl.getBoundingClientRect().height;

    const getHautPercent = (): number => {
      const rows = gridEl.style.gridTemplateRows;
      if (rows && rows.includes('fr')) {
        const parts = rows.split(' ');
        if (parts.length >= 2) {
          const top = parseFloat(parts[0]) || 1;
          const bot = parseFloat(parts[parts.length - 1]) || 1;
          return (top / (top + bot)) * 100;
        }
      }
      if (rows && rows.includes('%')) {
        const parts = rows.split(' ');
        return parseFloat(parts[0]) || 50;
      }
      return 33.33;
    };

    dragHandle.addEventListener('mousedown', (e: MouseEvent) => {
      if (sessionStorage.getItem('tf-haut-replie') === 'true') return;
      isDragging = true;
      startY = e.clientY;
      startTop = (getHautPercent() / 100) * getGridHeight();
      document.body.style.cursor = 'row-resize';
      document.body.style.userSelect = 'none';
      e.preventDefault();
    });

    document.addEventListener('mousemove', (e: MouseEvent) => {
      if (!isDragging || !gridEl) return;
      const delta = e.clientY - startY;
      const totalH = getGridHeight();
      const newTop = Math.min(Math.max(startTop + delta, totalH * 0.2), totalH * 0.8);
      const topPct = (newTop / totalH) * 100;
      const botPct = 100 - topPct;
      gridEl.style.gridTemplateRows = `${topPct.toFixed(1)}% ${botPct.toFixed(1)}%`;
      gridEl.classList.remove('grid-rows-2');
    });

    document.addEventListener('mouseup', () => {
      if (isDragging) {
        isDragging = false;
        document.body.style.cursor = '';
        document.body.style.userSelect = '';
        const rows = gridEl.style.gridTemplateRows;
        if (rows) sessionStorage.setItem('tf-centre-rows', rows);
      }
    });

    // Restaurer position depuis sessionStorage
    const savedRows = sessionStorage.getItem('tf-centre-rows');
    if (savedRows && sessionStorage.getItem('tf-haut-replie') !== 'true') {
      gridEl.style.gridTemplateRows = savedRows;
      gridEl.classList.remove('grid-rows-2');
    }

    // Double-click sur drag handle = reset default 1/3 + 2/3
    dragHandle.addEventListener('dblclick', () => {
      gridEl.style.gridTemplateRows = '1fr 2fr';
      gridEl.classList.remove('grid-rows-2');
      sessionStorage.removeItem('tf-centre-rows');
    });
  }

  // Tabs toggle.
  const tabs = document.querySelectorAll<HTMLButtonElement>('[data-tab]');
  const panels = document.querySelectorAll<HTMLElement>('[data-tab-panel]');

  tabs.forEach((tab) => {
    tab.addEventListener('click', () => {
      const target = tab.dataset.tab;
      if (!target) return;

      tabs.forEach((t) => {
        const active = t.dataset.tab === target;
        t.setAttribute('aria-selected', active ? 'true' : 'false');
        t.classList.toggle('border-neutral-900', active);
        t.classList.toggle('border-transparent', !active);
        t.classList.toggle('font-medium', active);
        t.classList.toggle('text-neutral-900', active);
        t.classList.toggle('text-neutral-500', !active);
      });

      panels.forEach((p) => {
        p.classList.toggle('hidden', p.dataset.tabPanel !== target);
      });
    });
  });
</script>