{{--
    Data contract expected from EmployeeCourseController@show:

    $course = Course {
        title, slug, description, category, duration_minutes, thumbnail,
        pivot: {
            status, progress_percent, assigned_at, due_at, started_at,
            completed_at, time_spent_seconds, final_score_percent,
        },
        modules: Collection<CourseModule> {
            title, module_number, sort_order,
            module_type,          // 'content' | 'knowledge_check' | 'final_assessment' | 'certificate'
            progress_status,      // 'not_started' | 'in_progress' | 'completed'
            time_spent_seconds,
            completed_at,
        },
    }
--}}
@extends('layouts.app')
@section('title', $course->title ?? 'Course')
@section('content')

  {{--
      DUMMY DATA — remove this block once EmployeeCourseController@show passes
      a real $course with ->pivot and ->modules loaded. Uses "??" so real
      data always takes priority.
  --}}
  @php
    $mod = function (string $title, string $type, string $status) {
      return (object) [
        'title' => $title,
        'module_type' => $type,
        'progress_status' => $status,
        'time_spent_seconds' => $status === 'not_started' ? 0 : 360,
        'completed_at' => $status === 'completed' ? '2026-06-10' : null,
      ];
    };

    $course = $course ?? (object) [
      'title' => 'Fire Awareness',
      'slug' => 'fire-awareness',
      'description' => 'Understand fire risks in the workplace, prevention measures, and the correct evacuation procedure for your service.',
      'category' => 'mandatory',
      'duration_minutes' => 30,
      'thumbnail' => null,
      'pivot' => (object) [
        'status' => 'in_progress',
        'progress_percent' => 60,
        'assigned_at' => '2026-06-01',
        'due_at' => '2026-08-01',
        'started_at' => '2026-06-03',
        'completed_at' => null,
        'time_spent_seconds' => 1080,
        'final_score_percent' => null,
      ],
      'modules' => collect([
        $mod('Introduction to Fire Safety', 'content', 'completed'),
        $mod('Common Causes of Fire', 'content', 'completed'),
        $mod('Evacuation Procedures', 'content', 'in_progress'),
        $mod('Knowledge Check', 'knowledge_check', 'not_started'),
        $mod('Final Assessment', 'final_assessment', 'not_started'),
        $mod('Certificate', 'certificate', 'not_started'),
      ]),
    ];

    $statusMeta = match($course->pivot->status ?? 'not_started') {
      'completed'   => ['label' => 'Completed', 'class' => 'bg-secondary-container text-on-secondary-container', 'icon' => 'check_circle'],
      'overdue'     => ['label' => 'Overdue', 'class' => 'bg-error-container text-error', 'icon' => 'warning'],
      'in_progress' => ['label' => 'In Progress', 'class' => 'bg-white text-primary', 'icon' => 'play_circle'],
      default       => ['label' => 'Not Started', 'class' => 'bg-surface-container-high text-on-surface-variant', 'icon' => 'radio_button_unchecked'],
    };

    $typeMeta = fn (string $type) => match($type) {
      'knowledge_check'  => ['icon' => 'quiz', 'label' => 'Knowledge Check'],
      'final_assessment' => ['icon' => 'assignment_turned_in', 'label' => 'Final Assessment'],
      'certificate'      => ['icon' => 'workspace_premium', 'label' => 'Certificate'],
      default            => ['icon' => 'article', 'label' => 'Content'],
    };

    $modules = $course->modules ?? collect();
    $nextModule = $modules->first(fn ($m) => ($m->progress_status ?? 'not_started') !== 'completed');
    $nextModuleIndex = $nextModule ? $modules->search($nextModule) : null;

    $timeSpent = $course->pivot->time_spent_seconds ?? 0;
    $timeSpentLabel = $timeSpent >= 3600
      ? floor($timeSpent / 3600) . 'h ' . floor(($timeSpent % 3600) / 60) . 'm'
      : floor($timeSpent / 60) . 'm';
  @endphp

  {{-- Breadcrumb --}}
  <div class="flex items-center gap-1 text-label-md font-label-md text-outline mb-4">
    <a href="{{ \Illuminate\Support\Facades\Route::has('employee.dashboard') ? route('employee.dashboard') : '#' }}" class="hover:text-primary hover:underline">Dashboard</a>
    <span class="material-symbols-outlined text-[16px]">chevron_right</span>
    <span class="text-on-surface-variant">{{ $course->title }}</span>
  </div>

  @if(session('status'))
    <div class="flex items-center gap-3 bg-secondary-container text-on-secondary-container rounded-lg px-5 py-3 mb-4">
      <span class="material-symbols-outlined">check_circle</span>
      <p class="text-body-md font-body-md">{{ session('status') }}</p>
    </div>
  @endif

  {{-- Header --}}
  <div class="surface-card rounded-xl overflow-hidden mb-stack-lg">
    <div class="bg-primary px-8 py-8 flex flex-col md:flex-row items-center gap-8">
      <div class="flex-1 text-on-primary">
        @if(($course->category ?? null) === 'service_specific')
          <p class="text-label-md font-label-md text-on-primary-container uppercase tracking-wide mb-1">Service Specific</p>
        @endif
        <h3 class="text-headline-lg font-headline-lg mb-2">{{ $course->title }}</h3>
        <p class="text-body-md font-body-md text-on-primary-container max-w-2xl mb-4">{{ $course->description }}</p>
        <div class="flex flex-wrap items-center gap-3">
          <span class="inline-flex items-center gap-1 text-label-md font-label-md px-2.5 py-1 rounded-full {{ $statusMeta['class'] }}">
            <span class="material-symbols-outlined text-[16px]">{{ $statusMeta['icon'] }}</span>
            {{ $statusMeta['label'] }}
          </span>
          <span class="inline-flex items-center gap-1 text-label-md font-label-md text-on-primary-container">
            <span class="material-symbols-outlined text-[16px]">schedule</span>
            {{ $course->duration_minutes }} min total
          </span>
          @if($course->pivot->due_at ?? null)
            <span class="inline-flex items-center gap-1 text-label-md font-label-md text-on-primary-container">
              <span class="material-symbols-outlined text-[16px]">event</span>
              Due {{ \Carbon\Carbon::parse($course->pivot->due_at)->format('j F Y') }}
            </span>
          @endif
        </div>
      </div>
      <div class="flex flex-col items-center gap-2 shrink-0">
        <div class="relative w-20 h-20">
          <svg width="80" height="80" viewBox="0 0 80 80" class="-rotate-90">
            <circle cx="40" cy="40" r="34" fill="none" stroke="rgba(255,255,255,.25)" stroke-width="8"/>
            <circle cx="40" cy="40" r="34" fill="none" stroke="#ffffff" stroke-width="8"
              stroke-dasharray="{{ round(2 * M_PI * 34) }}"
              stroke-dashoffset="{{ round(2 * M_PI * 34 * (1 - ($course->pivot->progress_percent ?? 0) / 100)) }}"
              stroke-linecap="round"/>
          </svg>
          <div class="absolute inset-0 flex items-center justify-center text-on-primary font-bold text-body-lg">{{ $course->pivot->progress_percent ?? 0 }}%</div>
        </div>
        <p class="text-label-md font-label-md text-on-primary-container uppercase tracking-wide">Your Progress</p>
      </div>
    </div>

    @if($course->pivot->status !== 'completed')
      <div class="px-8 py-4 flex items-center justify-between">
        <p class="text-body-md font-body-md text-outline">
          @if($nextModule)
            Next up: <strong class="text-on-surface">{{ $nextModule->title }}</strong>
          @else
            All modules complete — nice work.
          @endif
        </p>
        @if($nextModule)
          <a href="#module-{{ $nextModuleIndex }}"
             class="bg-primary text-on-primary px-5 py-2.5 rounded-lg text-label-md font-label-md hover:opacity-90 transition-opacity">
            {{ ($course->pivot->progress_percent ?? 0) > 0 ? 'Continue' : 'Start Course' }}
          </a>
        @endif
      </div>
    @endif
  </div>

  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

    {{-- Modules list --}}
    <div class="lg:col-span-2">
      <div class="flex items-center gap-2 mb-4">
        <span class="material-symbols-outlined text-primary">view_list</span>
        <h3 class="text-headline-md font-headline-md text-on-surface">Course Modules</h3>
        <span class="text-label-md font-label-md text-outline ml-1">{{ $modules->count() }} {{ Str::plural('module', $modules->count()) }}</span>
      </div>

      <div class="surface-card rounded-xl divide-y divide-outline-variant overflow-hidden">
        @forelse($modules as $index => $courseModule)
          @php
            $mStatus = $courseModule->progress_status ?? 'not_started';
            $isLocked = $mStatus === 'not_started' && $index > 0 && ($modules[$index - 1]->progress_status ?? 'not_started') !== 'completed';
            $mBadge = match($mStatus) {
              'completed'   => ['label' => 'Completed', 'class' => 'text-secondary'],
              'in_progress' => ['label' => 'In progress', 'class' => 'text-primary'],
              default       => ['label' => 'Not started', 'class' => 'text-outline'],
            };
            $type = $typeMeta($courseModule->module_type);
          @endphp
          <div id="module-{{ $index }}" class="flex items-center gap-4 px-5 py-4 {{ $isLocked ? 'opacity-60' : '' }}">
            <div class="shrink-0 w-9 h-9 rounded-full flex items-center justify-center
                {{ $mStatus === 'completed' ? 'bg-secondary-container text-on-secondary-container' : 'bg-surface-container-high text-outline' }}">
              @if($mStatus === 'completed')
                <span class="material-symbols-outlined text-[20px]">check</span>
              @else
                <span class="material-symbols-outlined text-[20px]">{{ $type['icon'] }}</span>
              @endif
            </div>

            <div class="flex-1 min-w-0">
              <p class="text-body-md font-body-md text-on-surface font-semibold leading-snug">{{ $index + 1 }}. {{ $courseModule->title }}</p>
              <p class="text-label-md font-label-md text-outline mt-0.5">{{ $type['label'] }}</p>
            </div>

            <div class="shrink-0 flex items-center gap-3">
              <span class="text-label-md font-label-md font-bold {{ $mBadge['class'] }}">{{ $mBadge['label'] }}</span>
              @php $isQuiz = in_array($courseModule->module_type, ['knowledge_check', 'final_assessment'], true); @endphp
              @if(!$isLocked && $mStatus !== 'completed')
                @if($isQuiz)
                  <a href="{{ auth()->user()->learnRoute('course.assessment.start', [$course->slug, $courseModule->id]) }}"
                    class="inline-flex items-center gap-1.5 bg-primary text-on-primary px-4 py-1.5 rounded-lg text-label-md font-label-md hover:opacity-90 transition-opacity">
                    <span class="material-symbols-outlined text-[18px]">quiz</span> Take assessment
                  </a>
                @else
                  <a href="{{ auth()->user()->learnRoute('course.module.show', [$course->slug, $courseModule->id]) }}"
                    class="bg-primary text-on-primary px-4 py-1.5 rounded-lg text-label-md font-label-md hover:opacity-90 transition-opacity">
                    {{ $mStatus === 'in_progress' ? 'Resume' : 'Start' }}
                  </a>
                @endif
              @elseif($isLocked)
                <span class="material-symbols-outlined text-outline text-[20px]" title="Complete the previous module first">lock</span>
              @elseif($isQuiz)
                <a href="{{ auth()->user()->learnRoute('course.assessment.start', [$course->slug, $courseModule->id]) }}" class="text-label-md font-label-md text-primary font-bold hover:underline">Retake</a>
              @else
                <a href="{{ auth()->user()->learnRoute('course.module.show', [$course->slug, $courseModule->id]) }}" class="text-label-md font-label-md text-primary font-bold hover:underline">Review</a>
              @endif
            </div>
          </div>
        @empty
          <div class="px-5 py-8 text-center text-body-md font-body-md text-outline">No modules have been added to this course yet.</div>
        @endforelse
      </div>

      {{-- Course summary & about (below all modules) --}}
      @if($course->summary || $course->about_course)
        <div class="surface-card rounded-xl px-6 py-6 mt-gutter">
          <div class="flex items-center gap-2 mb-3">
            <span class="material-symbols-outlined text-primary">info</span>
            <h3 class="text-headline-md font-headline-md text-on-surface">About this course</h3>
          </div>
          @if($course->summary)
            <p class="text-body-lg font-body-lg text-on-surface font-semibold mb-4">{{ $course->summary }}</p>
          @endif
          @php $aboutImage = $course->header_image ?: $course->thumbnail; @endphp
          @if($aboutImage)
            <img src="{{ \App\Models\CourseContentBlock::imageUrl($aboutImage) }}" alt="{{ $course->title }}" class="w-full max-h-72 object-cover rounded-xl mb-4">
          @endif
          @if($course->about_course)
            <div class="text-body-md font-body-md text-on-surface-variant leading-relaxed whitespace-pre-line">{{ $course->about_course }}</div>
          @endif
        </div>
      @endif
    </div>

    {{-- Sidebar: key facts + certificate --}}
    <div class="lg:col-span-1 space-y-4">
      <div class="surface-card rounded-xl px-5 py-5">
        <h4 class="text-label-md font-label-md text-outline uppercase tracking-wide mb-3">Course Details</h4>
        <dl class="space-y-3 text-body-md font-body-md">
          <div class="flex items-center justify-between">
            <dt class="text-outline">Assigned</dt>
            <dd class="text-on-surface font-semibold">{{ ($course->pivot->assigned_at ?? null) ? \Carbon\Carbon::parse($course->pivot->assigned_at)->format('j M Y') : '—' }}</dd>
          </div>
          <div class="flex items-center justify-between">
            <dt class="text-outline">Due</dt>
            <dd class="text-on-surface font-semibold">{{ ($course->pivot->due_at ?? null) ? \Carbon\Carbon::parse($course->pivot->due_at)->format('j M Y') : '—' }}</dd>
          </div>
          <div class="flex items-center justify-between">
            <dt class="text-outline">Time Spent</dt>
            <dd class="text-on-surface font-semibold">{{ $timeSpentLabel }}</dd>
          </div>
          @if($course->pivot->final_score_percent ?? null)
            <div class="flex items-center justify-between">
              <dt class="text-outline">Final Score</dt>
              <dd class="text-on-surface font-semibold">{{ $course->pivot->final_score_percent }}%</dd>
            </div>
          @endif
          @if($course->pivot->completed_at ?? null)
            <div class="flex items-center justify-between">
              <dt class="text-outline">Completed</dt>
              <dd class="text-on-surface font-semibold">{{ \Carbon\Carbon::parse($course->pivot->completed_at)->format('j M Y') }}</dd>
            </div>
          @endif
        </dl>
      </div>

      @if($course->pivot->status === 'completed')
        <div class="surface-card rounded-xl px-5 py-5 text-center" style="background-color:#FBF6EE;">
          <span class="material-symbols-outlined text-gold text-[32px] mb-2">workspace_premium</span>
          <p class="text-body-md font-body-md text-on-surface font-semibold mb-1">Certificate Earned</p>
          <p class="text-label-md font-label-md text-outline mb-3">Download your completion certificate for your records.</p>
          <a href="{{ auth()->user()->learnRoute('course.certificate', $course->slug) }}" target="_blank"
             class="block w-full bg-gold text-on-primary px-4 py-2 rounded-lg text-label-md font-label-md hover:opacity-90 transition-opacity">
            View / Download PDF
          </a>
        </div>
      @else
        <div class="surface-card rounded-xl px-5 py-5">
          <h4 class="text-label-md font-label-md text-outline uppercase tracking-wide mb-2">Need Help?</h4>
          <p class="text-body-md font-body-md text-outline">Email <strong class="text-on-surface">training.admin@segralms.com</strong> or use Contact Support in the sidebar.</p>
        </div>
      @endif

      {{-- What you'll learn --}}
      @php
        $learnPoints = collect(preg_split('/\r\n|\r|\n/', (string) ($course->what_youll_learn ?? '')))
          ->map(fn ($p) => trim($p))->filter()->values();
      @endphp
      @if($learnPoints->isNotEmpty())
        <div class="surface-card rounded-xl px-5 py-5">
          <div class="flex items-center gap-2 mb-3">
            <span class="material-symbols-outlined text-primary">checklist</span>
            <h4 class="text-headline-md font-headline-md text-on-surface">What you'll learn</h4>
          </div>
          <ul class="space-y-3">
            @foreach($learnPoints as $point)
              <li class="flex items-start gap-3">
                <span class="material-symbols-outlined text-[20px] text-primary shrink-0" style="font-variation-settings:'FILL' 1;">adjust</span>
                <span class="text-body-md font-body-md text-on-surface-variant">{{ $point }}</span>
              </li>
            @endforeach
          </ul>
        </div>
      @endif
    </div>
  </div>

@endsection