{{-- Renders one content block. Expects $block (CourseContentBlock). --}}
@php $d = $block->data ?? []; @endphp
@switch($block->type)
  @case('paragraph')
    <div class="text-body-lg font-body-lg text-on-surface leading-relaxed whitespace-pre-line">{{ data_get($d, 'text') }}</div>
    @break

  @case('heading')
    @if((int) data_get($d, 'level', 2) === 3)
      <h4 class="text-headline-md font-headline-md text-on-surface">{{ data_get($d, 'text') }}</h4>
    @else
      <h3 class="text-headline-lg font-headline-lg text-on-surface">{{ data_get($d, 'text') }}</h3>
    @endif
    @break

  @case('image')
    <figure class="text-center">
      @if(data_get($d, 'path'))
        <img src="{{ \App\Models\CourseContentBlock::imageUrl(data_get($d, 'path')) }}" alt="{{ data_get($d, 'alt') }}" class="mx-auto max-w-full max-h-96 rounded-xl">
      @endif
      @if(data_get($d, 'caption'))
        <figcaption class="text-label-md font-label-md text-outline mt-2 text-center">{{ data_get($d, 'caption') }}</figcaption>
      @endif
    </figure>
    @break

  @case('text_image')
    @php $tiText = trim((string) data_get($d, 'text')); @endphp
    @if($tiText === '')
      {{-- No accompanying text — just center the image like a standalone image block. --}}
      <figure class="text-center">
        @if(data_get($d, 'path'))
          <img src="{{ \App\Models\CourseContentBlock::imageUrl(data_get($d, 'path')) }}" alt="{{ data_get($d, 'alt') }}" class="mx-auto max-w-full max-h-96 rounded-xl">
        @endif
        @if(data_get($d, 'caption'))<figcaption class="text-label-md font-label-md text-outline mt-2 text-center">{{ data_get($d, 'caption') }}</figcaption>@endif
      </figure>
    @else
      <div class="flex flex-col {{ data_get($d, 'image_side') === 'left' ? 'md:flex-row-reverse' : 'md:flex-row' }} gap-6 items-center">
        <div class="flex-1 text-body-lg font-body-lg text-on-surface leading-relaxed whitespace-pre-line">{{ $tiText }}</div>
        @if(data_get($d, 'path'))
          <figure class="w-full md:w-1/2 shrink-0 text-center">
            <img src="{{ \App\Models\CourseContentBlock::imageUrl(data_get($d, 'path')) }}" alt="{{ data_get($d, 'alt') }}" class="mx-auto w-full max-h-64 object-cover rounded-xl">
            @if(data_get($d, 'caption'))<figcaption class="text-label-md font-label-md text-outline mt-2 text-center">{{ data_get($d, 'caption') }}</figcaption>@endif
          </figure>
        @endif
      </div>
    @endif
    @break

  @case('video')
    @php
      $yt = \App\Models\CourseContentBlock::youtubeId(data_get($d, 'youtube_url'));
      $isYt = data_get($d, 'source') === 'youtube' && $yt;
      $isUpload = data_get($d, 'source') === 'upload' && data_get($d, 'path');
      $vid = 'vid-'.$block->id;
    @endphp
    <div @if($isYt || $isUpload) data-interaction="video" @endif>
      @if(data_get($d, 'title'))<p class="text-body-md font-body-md text-on-surface font-semibold mb-2">{{ data_get($d, 'title') }}</p>@endif
      @if($isYt)
        <div class="relative w-full rounded-xl overflow-hidden" style="aspect-ratio:16/9">
          <iframe id="{{ $vid }}" data-yt class="absolute inset-0 w-full h-full" src="https://www.youtube.com/embed/{{ $yt }}?enablejsapi=1&rel=0" title="{{ data_get($d, 'title', 'Video') }}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
      @elseif($isUpload)
        <video controls class="w-full rounded-xl bg-black" src="{{ asset('storage/'.data_get($d, 'path')) }}"></video>
      @else
        <div class="surface-card rounded-xl px-6 py-10 text-center text-outline"><span class="material-symbols-outlined">videocam_off</span><p class="text-label-md font-label-md mt-1">Video not available</p></div>
      @endif
      @if(data_get($d, 'transcript'))
        <div class="mt-3 rounded-xl border border-outline-variant divide-y divide-outline-variant overflow-hidden">
          <details class="cb-accordion group">
            <summary class="flex items-center justify-between gap-3 px-4 py-3 cursor-pointer hover:bg-surface-container-high">
              <span class="text-body-md font-body-md text-on-surface font-semibold inline-flex items-center gap-1.5"><span class="material-symbols-outlined text-[18px] text-outline">subtitles</span> Transcript</span>
              <span class="material-symbols-outlined text-outline transition-transform group-open:rotate-180">expand_more</span>
            </summary>
            <div class="px-4 pb-4 text-body-md font-body-md text-on-surface-variant whitespace-pre-line max-h-72 overflow-y-auto">{{ data_get($d, 'transcript') }}</div>
          </details>
        </div>
      @endif
    </div>
    @break

  @case('callout')
    @php
      $variant = data_get($d, 'variant', 'info');
      $cv = [
        'info' => ['bg-primary/5 border-primary/30', 'text-primary', 'info'],
        'success' => ['bg-primary/5 border-primary/30', 'text-primary', 'check_circle'],
        'warning' => ['bg-gold/10 border-gold/40', 'text-[#8a6d3b]', 'warning'],
        'danger' => ['bg-error-container border-error/30', 'text-error', 'report'],
      ][$variant] ?? ['bg-surface-container-high border-outline-variant', 'text-on-surface-variant', 'info'];
    @endphp
    <div class="flex items-start gap-3 rounded-xl border p-4 {{ $cv[0] }}">
      <span class="material-symbols-outlined {{ $cv[1] }}">{{ $cv[2] }}</span>
      <p class="text-body-md font-body-md text-on-surface flex-1 whitespace-pre-line">{{ data_get($d, 'text') }}</p>
    </div>
    @break

  @case('divider')
    <hr class="border-outline-variant">
    @break

  @case('accordion')
    {{-- Wrapper carries the interaction (and its "done" badge); inner card keeps overflow-hidden for rounded corners. --}}
    <div class="max-w-2xl mx-auto" data-interaction="accordion">
      <div class="rounded-xl border border-outline-variant divide-y divide-outline-variant overflow-hidden">
        @foreach(data_get($d, 'items', []) as $item)
          <details class="cb-accordion group">
            <summary class="flex items-center justify-between gap-3 px-4 py-3 cursor-pointer hover:bg-surface-container-high">
              <span class="text-body-md font-body-md text-on-surface font-bold">{{ data_get($item, 'title') }}</span>
              <span class="material-symbols-outlined text-outline transition-transform group-open:rotate-180">expand_more</span>
            </summary>
            <div class="px-4 pb-4">
              @if(data_get($item, 'image'))
                <img src="{{ \App\Models\CourseContentBlock::imageUrl(data_get($item, 'image')) }}" alt="{{ data_get($item, 'title') }}" class="block mx-auto rounded-lg mb-3 max-h-56 w-auto">
              @endif
              @if(data_get($item, 'body'))
                <p class="text-body-md font-body-md text-on-surface-variant whitespace-pre-line">{{ data_get($item, 'body') }}</p>
              @endif
            </div>
          </details>
        @endforeach
      </div>
    </div>
    @break

  @case('carousel')
    @php $cid = 'car-'.$block->id; $slides = collect(data_get($d, 'slides', []))->filter(fn ($s) => data_get($s, 'image') || data_get($s, 'title'))->values(); @endphp
    @if($slides->isNotEmpty())
      <div class="carousel" id="{{ $cid }}" data-interaction="carousel" data-total="{{ $slides->count() }}">
        <div class="flex items-center gap-2 sm:gap-4">
          <button type="button" class="car-prev shrink-0 w-10 h-10 rounded-full flex items-center justify-center text-outline hover:bg-surface-container-high hover:text-primary" aria-label="Previous">
            <span class="material-symbols-outlined">chevron_left</span>
          </button>
          <div class="flex-1 min-w-0 text-center">
            @foreach($slides as $i => $slide)
              <div class="car-slide {{ $i === 0 ? '' : 'hidden' }}" data-index="{{ $i }}">
                @if(data_get($slide, 'image'))
                  <div class="mx-auto w-56 h-56 sm:w-64 sm:h-64 rounded-full overflow-hidden bg-secondary-container p-2 flex items-center justify-center">
                    <img src="{{ \App\Models\CourseContentBlock::imageUrl(data_get($slide, 'image')) }}" alt="{{ data_get($slide, 'title') }}" class="w-full h-full object-cover rounded-full">
                  </div>
                @endif
                @if(data_get($slide, 'title'))<p class="mt-4 text-body-lg font-body-lg text-on-surface font-bold">{{ data_get($slide, 'title') }}</p>@endif
                @if(data_get($slide, 'caption'))<p class="mt-1 text-body-md font-body-md text-on-surface-variant">{{ data_get($slide, 'caption') }}</p>@endif
              </div>
            @endforeach
          </div>
          <button type="button" class="car-next shrink-0 w-10 h-10 rounded-full flex items-center justify-center text-outline hover:bg-surface-container-high hover:text-primary" aria-label="Next">
            <span class="material-symbols-outlined">chevron_right</span>
          </button>
        </div>
        <div class="car-dots flex items-center justify-center gap-2 mt-5">
          @foreach($slides as $i => $slide)
            <button type="button" class="car-dot w-3 h-3 rounded-full {{ $i === 0 ? 'bg-on-surface' : 'bg-outline-variant' }}" data-index="{{ $i }}" aria-label="Slide {{ $i + 1 }}"></button>
          @endforeach
        </div>
      </div>
    @endif
    @break

  @case('flip_card')
    <div class="flip-card h-44 max-w-sm mx-auto cursor-pointer select-none" data-interaction="flip" onclick="flipCard(this)" style="perspective:1000px">
      <div class="flip-card-inner relative w-full h-full">
        <div class="flip-face absolute inset-0 surface-card rounded-xl flex items-center justify-center text-center p-6 border border-outline-variant">
          <div>
            <p class="text-body-lg font-body-lg text-on-surface font-semibold">{{ data_get($d, 'front') }}</p>
            <p class="text-label-md font-label-md text-outline mt-2">Click to flip</p>
          </div>
        </div>
        <div class="flip-face flip-back absolute inset-0 bg-primary text-on-primary rounded-xl flex items-center justify-center text-center p-6">
          <p class="text-body-md font-body-md">{{ data_get($d, 'back') }}</p>
        </div>
      </div>
    </div>
    @break

  @case('knowledge_check')
    @php $bid = 'kc-'.$block->id; @endphp
    <div class="surface-card rounded-xl p-5 border border-outline-variant" id="{{ $bid }}" data-kc data-interaction="kc">
      <div class="flex items-center gap-2 mb-3">
        <span class="material-symbols-outlined text-primary">quiz</span>
        <p class="text-body-lg font-body-lg text-on-surface font-semibold">{{ data_get($d, 'question') }}</p>
      </div>
      <div class="space-y-2">
        @foreach(data_get($d, 'options', []) as $i => $opt)
          <label class="flex items-center gap-3 px-4 py-2.5 rounded-lg border border-outline-variant/60 hover:bg-surface-container-high cursor-pointer kc-opt" data-correct="{{ data_get($opt, 'correct') ? 1 : 0 }}">
            <input type="radio" name="{{ $bid }}" value="{{ $i }}" class="w-5 h-5 border-outline-variant text-primary">
            <span class="text-body-md font-body-md text-on-surface flex-1">{{ data_get($opt, 'text') }}</span>
            <span class="material-symbols-outlined text-[18px] kc-mark hidden"></span>
          </label>
        @endforeach
      </div>
      <div class="flex items-center gap-3 mt-3">
        <button type="button" onclick="kcCheck('{{ $bid }}')" class="bg-primary text-on-primary px-4 py-1.5 rounded-lg text-label-md font-label-md hover:opacity-90">Check answer</button>
        <span class="kc-result text-label-md font-label-md font-bold"></span>
      </div>
      @if(data_get($d, 'explanation'))
        <p class="kc-explain hidden text-label-md font-label-md text-outline mt-2"><span class="font-bold">Why:</span> {{ data_get($d, 'explanation') }}</p>
      @endif
    </div>
    @break
@endswitch

@once
  <style>
    .flip-card-inner { transition: transform .5s; transform-style: preserve-3d; }
    .flip-card.flipped .flip-card-inner { transform: rotateY(180deg); }
    .flip-face { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
    .flip-back { transform: rotateY(180deg); }
  </style>
  <style>
    [data-interaction].interaction-done { position: relative; }
    [data-interaction].interaction-done::after {
      content: 'done'; font-family: 'Material Symbols Outlined'; font-size: 18px;
      position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 9999px;
      background: #0E7C7B; color: #fff; display: flex; align-items: center; justify-content: center; z-index: 5;
    }
  </style>
  <script>
    // ── Interaction tracking (video / flip card / knowledge check) ──
    window.Segra = window.Segra || {};
    Segra.interactions = { done: {}, total: 0, cb: null };

    Segra.refresh = function () {
      if (Segra.interactions.cb) {
        Segra.interactions.cb(Object.keys(Segra.interactions.done).length, Segra.interactions.total);
      }
    };
    Segra.markDone = function (el) {
      if (!el || el.dataset.iid == null) return;      // only counts once registered
      el.classList.add('interaction-done');
      Segra.interactions.done[el.dataset.iid] = true;
      Segra.refresh();
    };
    Segra.registerInteractions = function () {
      var els = document.querySelectorAll('[data-interaction]');
      Segra.interactions.total = els.length;
      els.forEach(function (el, i) {
        el.dataset.iid = i;
        if (el.dataset.interaction === 'video') {
          var v = el.querySelector('video');
          if (v) { v.addEventListener('play', function () { Segra.markDone(el); }, { once: true }); }
        }
        if (el.dataset.interaction === 'carousel') { Segra.initCarousel(el); }
        if (el.dataset.interaction === 'accordion') { Segra.initAccordion(el); }
      });
      Segra.setupYouTube();
      Segra.refresh();
    };
    Segra.initAccordion = function (el) {
      var items = el.querySelectorAll('details');
      if (!items.length) { Segra.markDone(el); return; }   // nothing to open
      var opened = {};
      items.forEach(function (d, i) {
        d.addEventListener('toggle', function () {
          if (!d.open) return;
          opened[i] = true;
          if (Object.keys(opened).length >= items.length) { Segra.markDone(el); }  // every section opened
        });
      });
    };
    Segra.initCarousel = function (el) {
      var slides = el.querySelectorAll('.car-slide');
      var dots = el.querySelectorAll('.car-dot');
      var total = slides.length;
      var seen = {}; var cur = 0;
      function show(i) {
        cur = (i + total) % total;
        slides.forEach(function (s, n) { s.classList.toggle('hidden', n !== cur); });
        dots.forEach(function (dt, n) {
          dt.classList.toggle('bg-on-surface', n === cur);
          dt.classList.toggle('bg-outline-variant', n !== cur);
        });
        seen[cur] = true;
        if (Object.keys(seen).length >= total) { Segra.markDone(el); }   // viewed every slide
      }
      var prev = el.querySelector('.car-prev'), next = el.querySelector('.car-next');
      if (prev) prev.addEventListener('click', function () { show(cur - 1); });
      if (next) next.addEventListener('click', function () { show(cur + 1); });
      dots.forEach(function (dt) { dt.addEventListener('click', function () { show(parseInt(dt.dataset.index, 10)); }); });
      show(0);
    };
    Segra.setupYouTube = function () {
      var frames = document.querySelectorAll('iframe[data-yt]');
      if (!frames.length) return;
      function build() {
        frames.forEach(function (f) {
          try {
            new YT.Player(f.id, { events: { onStateChange: function (e) {
              if (e.data === YT.PlayerState.PLAYING || e.data === YT.PlayerState.ENDED) {
                Segra.markDone(f.closest('[data-interaction]'));
              }
            }}});
          } catch (err) {}
        });
      }
      if (window.YT && window.YT.Player) { build(); }
      else {
        var prev = window.onYouTubeIframeAPIReady;
        window.onYouTubeIframeAPIReady = function () { if (prev) prev(); build(); };
        if (!document.getElementById('yt-api')) {
          var s = document.createElement('script'); s.id = 'yt-api'; s.src = 'https://www.youtube.com/iframe_api';
          document.head.appendChild(s);
        }
      }
      // Fail-open: if the YouTube API is blocked/offline, don't lock people out.
      setTimeout(function () {
        if (!(window.YT && window.YT.Player)) {
          frames.forEach(function (f) { Segra.markDone(f.closest('[data-interaction]')); });
        }
      }, 9000);
    };

    function flipCard(el) {
      el.classList.toggle('flipped');
      Segra.markDone(el);
    }

    function kcCheck(id){
      var box = document.getElementById(id);
      var picked = box.querySelector('input[type=radio]:checked');
      var result = box.querySelector('.kc-result');
      if(!picked){ result.textContent = 'Pick an answer first.'; result.className = 'kc-result text-label-md font-label-md font-bold text-outline'; return; }
      var ok = false;
      box.querySelectorAll('.kc-opt').forEach(function(opt){
        var mark = opt.querySelector('.kc-mark');
        var input = opt.querySelector('input');
        var correct = opt.dataset.correct === '1';
        if(correct){ mark.textContent='check_circle'; mark.className='material-symbols-outlined text-[18px] kc-mark text-primary'; }
        else if(input.checked){ mark.textContent='cancel'; mark.className='material-symbols-outlined text-[18px] kc-mark text-error'; }
        if(input.checked && correct) ok = true;
      });
      result.textContent = ok ? 'Correct!' : 'Not quite.';
      result.className = 'kc-result text-label-md font-label-md font-bold ' + (ok ? 'text-primary' : 'text-error');
      var ex = box.querySelector('.kc-explain'); if(ex) ex.classList.remove('hidden');
      Segra.markDone(box);      // answering the check counts as completing it
    }
  </script>
@endonce