@extends('layouts.app')
@section('title', $module->title)
@section('content')

  @include('partials.flash')

  <style>
    @keyframes orgSpinSlow { to { transform: rotate(360deg); } }
    .spin-slow { animation: orgSpinSlow 9s linear infinite; transform-origin: center; }
    .step-node { transition: transform .18s ease, box-shadow .18s ease; }
    .step-link:hover .step-node { transform: translateY(-2px) scale(1.06); box-shadow: 0 6px 14px rgba(16,24,40,.12); }
  </style>

  <a href="{{ auth()->user()->learnRoute('course.show', $course->slug) }}" class="inline-flex items-center gap-1 text-label-md font-label-md text-outline hover:text-primary mb-4">
    <span class="material-symbols-outlined text-[18px]">arrow_back</span> Back to {{ $course->title }}
  </a>

  @php
    $minSeconds = $minSeconds ?? $module->effectiveMinSeconds();
    $remaining = $completed ? 0 : max(0, (int) $minSeconds - (int) ($secondsSpent ?? 0));
    $timerActive = ! $completed && (int) $minSeconds > 0 && $remaining > 0;
    // Interactive blocks (video / flip card / knowledge check / carousel / accordion) must be completed before finishing.
    $interactionCount = $module->blocks->whereIn('type', ['video', 'flip_card', 'knowledge_check', 'carousel', 'accordion'])->count();
    $gateLocked = ! $completed && ($remaining > 0 || $interactionCount > 0);
    $currentIndex = $modules->search(fn ($m) => $m->id === $module->id);
    $typeLabel = [
      'content' => 'Content', 'knowledge_check' => 'Knowledge Check',
      'final_assessment' => 'Final Assessment', 'certificate' => 'Certificate',
    ];
  @endphp

  {{-- Modules stepper (interactive) --}}
  <div class="surface-card rounded-xl px-4 py-5 mb-stack-lg overflow-x-auto">
    <div class="flex min-w-max">
      @php
        // Frontier = first module not yet completed. Anything after it is locked.
        $firstIncomplete = $modules->search(fn ($m) => $m->progress_status !== 'completed');
        if ($firstIncomplete === false) { $firstIncomplete = $modules->count(); }
      @endphp
      @foreach($modules as $i => $m)
        @php
          $isCurrent = $m->id === $module->id;
          $isDone = $m->progress_status === 'completed';
          $isQuiz = in_array($m->module_type, ['knowledge_check','final_assessment'], true);
          $isLocked = $i > $firstIncomplete && ! $isCurrent;
          $to = $isQuiz
            ? auth()->user()->learnRoute('course.assessment.start', [$course->slug, $m->id])
            : auth()->user()->learnRoute('course.module.show', [$course->slug, $m->id]);
          $node = $isDone
            ? 'bg-primary text-on-primary'
            : ($isCurrent ? 'bg-primary text-on-primary ring-4 ring-primary/20' : 'bg-surface border border-outline-variant text-outline');
        @endphp
        <{{ $isLocked ? 'div' : 'a' }} @unless($isLocked) href="{{ $to }}" @endunless title="{{ $isLocked ? 'Complete the previous module first' : $m->title }}" class="step-link relative flex flex-col items-center w-[150px] shrink-0 {{ $isLocked ? 'cursor-not-allowed opacity-60' : '' }}">
          {{-- connector to next node --}}
          @unless($loop->last)
            <span class="absolute top-[19px] left-1/2 w-full h-[3px] rounded-full {{ $i < $currentIndex ? 'bg-primary' : 'bg-outline-variant/60' }}"></span>
          @endunless
          {{-- node with animated ring on the current step --}}
          <span class="relative z-10">
            @if($isCurrent && !$isDone)
              <span class="absolute inset-0 rounded-xl bg-primary/25 animate-ping"></span>
              <svg class="absolute -inset-1.5 w-[52px] h-[52px] spin-slow text-primary/50" viewBox="0 0 52 52" fill="none" aria-hidden="true">
                <circle cx="26" cy="26" r="23" stroke="currentColor" stroke-width="2" stroke-dasharray="5 6" stroke-linecap="round"/>
              </svg>
            @endif
            <span class="step-node relative w-10 h-10 rounded-xl flex items-center justify-center font-bold {{ $node }}">
              @if($isDone)
                <span class="material-symbols-outlined text-[22px]">check</span>
              @elseif($isLocked)
                <span class="material-symbols-outlined text-[20px]">lock</span>
              @elseif($isQuiz)
                <span class="material-symbols-outlined text-[20px]">quiz</span>
              @else
                {{ $i + 1 }}
              @endif
            </span>
          </span>
          {{-- labels --}}
          <p class="text-label-md font-label-md font-bold mt-2.5 text-center px-1 leading-tight {{ $isCurrent ? 'text-primary' : ($isDone ? 'text-on-surface' : 'text-on-surface-variant') }} line-clamp-2">{{ $i + 1 }}. {{ $m->title }}</p>
          <p class="text-label-md font-label-md text-outline text-center">{{ $typeLabel[$m->module_type] ?? 'Module' }}</p>
        </{{ $isLocked ? 'div' : 'a' }}>
      @endforeach
    </div>
  </div>

  <div class="grid grid-cols-1 lg:grid-cols-3 gap-gutter">
    {{-- Content --}}
    <div class="lg:col-span-2 min-w-0">
      @if($module->module_image)
        <img src="{{ \App\Models\CourseContentBlock::imageUrl($module->module_image) }}" alt="{{ $module->title }}" class="w-full max-h-64 object-cover rounded-xl mb-5">
      @endif
      <div class="mb-6">
        <p class="text-label-md font-label-md text-outline uppercase tracking-wide">Module {{ $module->module_number }}</p>
        <h3 class="text-headline-lg font-headline-lg text-on-surface">{{ $module->title }}</h3>
      </div>

      <div class="space-y-6">
        @forelse($module->blocks as $block)
          @include('partials._content-block', ['block' => $block])
        @empty
          <div class="surface-card rounded-xl px-6 py-12 text-center">
            <span class="material-symbols-outlined text-[42px] text-outline mb-2">description</span>
            <p class="text-body-md font-body-md text-outline">This module has no content yet.</p>
          </div>
        @endforelse
      </div>
    </div>

    {{-- Sticky sidebar: timer (left) + Your progress (right) in one card --}}
    <div class="lg:col-span-1">
      <div class="surface-card rounded-xl p-6 lg:sticky lg:top-24">
        <div class="flex items-center gap-4 mb-5">
          {{-- LEFT: timer / status --}}
          <div class="shrink-0">
            @if($timerActive)
              @php $r = 42; $circ = 2 * M_PI * $r; @endphp
              <div class="relative w-[96px] h-[96px]">
                <svg width="96" height="96" viewBox="0 0 96 96" class="-rotate-90">
                  <circle cx="48" cy="48" r="{{ $r }}" fill="none" stroke="#EAEEF2" stroke-width="8"/>
                  <circle id="timerRing" cx="48" cy="48" r="{{ $r }}" fill="none" stroke="#0E7C7B" stroke-width="8" stroke-linecap="round"
                    stroke-dasharray="{{ round($circ, 1) }}" stroke-dashoffset="0" style="transition: stroke-dashoffset 1s linear"/>
                </svg>
                <div class="absolute inset-0 flex items-center justify-center">
                  <span class="text-xl font-bold text-on-surface tabular-nums leading-none timer-display">--:--</span>
                </div>
              </div>
            @elseif($completed)
              <span class="material-symbols-outlined text-[64px] text-primary leading-none">check_circle</span>
            @else
              <span class="w-[64px] h-[64px] rounded-full bg-primary/10 flex items-center justify-center"><span class="material-symbols-outlined text-[32px] text-primary">{{ (int) $minSeconds > 0 ? 'timer' : 'menu_book' }}</span></span>
            @endif
          </div>

          {{-- RIGHT: Your progress --}}
          <div class="flex-1 min-w-0">
            <h4 class="text-headline-md font-headline-md text-on-surface">Your progress</h4>
            @if($completed)
              <p class="text-body-md font-body-md text-primary font-semibold">Module completed</p>
            @elseif($timerActive)
              <p class="text-body-md font-body-md text-on-surface-variant">Unlocks when the timer ends — keep this open.</p>
            @elseif((int) $minSeconds > 0)
              <p class="text-body-md font-body-md text-primary font-semibold">Minimum time reached</p>
            @else
              <p class="text-body-md font-body-md text-on-surface-variant">Work through the content, then mark it complete.</p>
            @endif
          </div>
        </div>

        @if($completed)
          <a href="{{ auth()->user()->learnRoute('course.show', $course->slug) }}" class="block text-center bg-surface-container-high text-on-surface-variant px-5 py-2.5 rounded-lg text-label-md font-label-md hover:bg-surface-container-highest">Back to course</a>
        @else
          @if($interactionCount > 0)
            <div id="interStatus" class="flex items-center gap-2 mb-3 text-label-md font-label-md text-on-surface-variant">
              <span class="material-symbols-outlined text-[18px]" id="interIcon">interactive_space</span>
              <span>Activities <span id="interCount" class="font-bold">0/{{ $interactionCount }}</span> completed</span>
            </div>
          @endif
          <form method="POST" action="{{ auth()->user()->learnRoute('course.module.complete', [$course->slug, $module->id]) }}">
            @csrf
            <button type="submit" id="completeBtn" @disabled($gateLocked)
              class="w-full inline-flex items-center justify-center gap-1.5 bg-primary text-on-primary px-6 py-2.5 rounded-lg text-label-md font-label-md hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed">
              <span class="material-symbols-outlined text-[18px]" id="completeIcon">{{ $gateLocked ? 'lock' : 'check' }}</span>
              <span id="completeText">{{ $remaining > 0 ? 'Locked' : ($interactionCount > 0 ? 'Finish activities' : 'Mark complete') }}</span>
            </button>
          </form>
        @endif
      </div>
    </div>
  </div>

  @unless($completed)
    <script>
      (function(){
        var btn = document.getElementById('completeBtn');
        if(!btn) return;
        var icon = document.getElementById('completeIcon');
        var text = document.getElementById('completeText');
        var interStat = document.getElementById('interStatus');
        var interCountEl = document.getElementById('interCount');
        var interIcon = document.getElementById('interIcon');

        var timerActive = {{ $timerActive ? 'true' : 'false' }};
        var total = {{ (int) $minSeconds }};
        var left = {{ $remaining }};
        var timerDone = !timerActive || left <= 0;
        var iDone = 0, iTotal = {{ $interactionCount }};

        function updateGate(){
          var interOk = iTotal === 0 || iDone >= iTotal;
          var ready = timerDone && interOk;
          btn.disabled = !ready;
          if(ready){ icon.textContent = 'check'; text.textContent = 'Mark complete'; }
          else if(!timerDone){ icon.textContent = 'lock'; text.textContent = 'Locked'; }
          else { icon.textContent = 'checklist'; text.textContent = 'Finish activities (' + iDone + '/' + iTotal + ')'; }
          if(interCountEl) interCountEl.textContent = iDone + '/' + iTotal;
          if(interStat) interStat.classList.toggle('text-primary', interOk);
          if(interIcon) interIcon.textContent = interOk ? 'task_alt' : 'interactive_space';
        }

        // Interactions
        if(window.Segra){
          Segra.interactions.cb = function(done, tot){ iDone = done; iTotal = tot; updateGate(); };
          Segra.registerInteractions();
        }

        // Timer countdown — only advances while this module screen is visible & focused.
        if(timerActive && left > 0){
          var ring = document.getElementById('timerRing');
          var CIRC = {{ round(2 * M_PI * 42, 1) }};
          var displays = document.querySelectorAll('.timer-display');
          var heartbeatUrl = @json(auth()->user()->learnRoute('course.module.heartbeat', [$course->slug, $module->id]));
          var token = @json(csrf_token());
          var pending = 0;                          // unsent active seconds
          var fmt = function(s){ var m = Math.floor(s/60), r = s%60; return (m<10?'0':'')+m+':'+(r<10?'0':'')+r; };
          var paint = function(){ displays.forEach(function(d){ d.textContent = fmt(left); }); if(ring){ var f = total>0?left/total:0; ring.style.strokeDashoffset = (CIRC*(1-f)).toFixed(1); } };
          var onScreen = function(){ return document.visibilityState === 'visible' && document.hasFocus(); };
          function flush(keepalive){
            if(pending <= 0) return;
            var n = pending; pending = 0;
            try {
              fetch(heartbeatUrl, {
                method: 'POST', keepalive: !!keepalive,
                headers: { 'Content-Type': 'application/x-www-form-urlencoded', 'X-CSRF-TOKEN': token, 'X-Requested-With': 'XMLHttpRequest' },
                body: 'seconds=' + n + '&_token=' + encodeURIComponent(token)
              }).catch(function(){ pending += n; });
            } catch (e) { pending += n; }
          }
          paint();
          var t = setInterval(function(){
            if(!onScreen()) return;                 // paused while away / tab hidden
            left--; pending++; paint();
            if(pending >= 10) flush();
            if(left <= 0){ clearInterval(t); flush(); timerDone = true; displays.forEach(function(d){ d.textContent = 'Ready'; }); updateGate(); }
          }, 1000);
          // Persist progress when leaving or hiding the tab.
          document.addEventListener('visibilitychange', function(){ if(document.visibilityState === 'hidden') flush(true); });
          window.addEventListener('pagehide', function(){ flush(true); });
          window.addEventListener('beforeunload', function(){ flush(true); });
        }

        updateGate();
      })();
    </script>
  @endunless

@endsection