{{--
    Role-scoped compliance dashboard (Team Lead → CEO).
    From ManagementController@dashboard: $serviceRows, $summary, $attention
--}}
@extends('layouts.app')
@section('title', 'Compliance Overview')
@section('content')

  @include('partials.flash')

  {{-- Summary tiles --}}
  <div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-stack-lg">
    @php
      $tiles = [
        ['label' => 'Services', 'value' => $summary['homes'], 'icon' => 'home_health', 'class' => 'text-primary'],
        ['label' => 'Care Workers', 'value' => $summary['workers'], 'icon' => 'groups', 'class' => 'text-secondary'],
        ['label' => 'Avg. Compliance', 'value' => $summary['avg_compliance'] . '%', 'icon' => 'donut_large', 'class' => 'text-on-secondary-container'],
        ['label' => 'Overdue Courses', 'value' => $summary['overdue_courses'], 'icon' => 'warning', 'class' => 'text-error'],
      ];
    @endphp
    @foreach($tiles as $tile)
      <div class="surface-card rounded-xl p-5 flex items-center gap-4">
        <span class="material-symbols-outlined text-[28px] {{ $tile['class'] }}">{{ $tile['icon'] }}</span>
        <div>
          <p class="text-headline-lg font-headline-lg text-on-surface">{{ $tile['value'] }}</p>
          <p class="text-label-md font-label-md text-outline uppercase tracking-wide">{{ $tile['label'] }}</p>
        </div>
      </div>
    @endforeach
  </div>

  {{-- 12-month compliance trend --}}
  @if(!empty($trend))
    @php
      $current = end($trend); $trend = array_values($trend);
      $prev = count($trend) > 1 ? $trend[count($trend) - 2] : null;
      $delta = $prev ? $current['compliance'] - $prev['compliance'] : 0;
      $peak = collect($trend)->max('compliance');
      // Left donut geometry
      $cur = $current['compliance'];
      $dR = 82; $dC = 2 * M_PI * $dR;
      // Right line-chart geometry (wide viewBox → fills width, no letterboxing)
      $n = count($trend); $W = 960; $H = 250; $pl = 40; $pr = 18; $pt = 16; $pb = 30;
      $pw = $W - $pl - $pr; $ph = $H - $pt - $pb;
      $xf = fn ($i) => $pl + ($n > 1 ? ($i / ($n - 1)) * $pw : $pw / 2);
      $yf = fn ($v) => $pt + (1 - $v / 100) * $ph;
      $linePts = collect($trend)->map(fn ($p, $i) => round($xf($i), 1) . ',' . round($yf($p['compliance']), 1))->implode(' ');
      $areaPath = 'M ' . round($xf(0), 1) . ',' . round($yf(0), 1) . ' '
        . collect($trend)->map(fn ($p, $i) => 'L ' . round($xf($i), 1) . ',' . round($yf($p['compliance']), 1))->implode(' ')
        . ' L ' . round($xf($n - 1), 1) . ',' . round($yf(0), 1) . ' Z';
    @endphp
    <div class="surface-card rounded-xl p-6 mb-stack-lg">
      <div class="flex flex-col md:flex-row md:items-center justify-between gap-3 mb-5">
        <div class="flex items-center gap-2">
          <span class="material-symbols-outlined text-primary">trending_up</span>
          <div>
            <h3 class="text-headline-md font-headline-md text-on-surface">Compliance Trend</h3>
            <p class="text-label-md font-label-md text-outline">Last 12 months · {{ $trendHomeName ?? 'All services' }}</p>
          </div>
        </div>
        <form method="GET" action="{{ route(auth()->user()->primaryRole() . '.dashboard') }}">
          <select name="trend_home" onchange="this.form.submit()" class="py-2.5 px-3 bg-surface-container rounded-lg border-none focus:ring-2 focus:ring-primary/20 text-body-md outline-none max-w-[240px]">
            <option value="">All services</option>
            @foreach($trendHomes as $home)
              <option value="{{ $home->id }}" @selected($trendHomeId === $home->id)>{{ $home->name }}</option>
            @endforeach
          </select>
        </form>
      </div>

      <div class="flex flex-col lg:flex-row items-center gap-6 lg:gap-8">
        {{-- Big circular compliance chart (LEFT) --}}
        <div class="shrink-0 flex flex-col items-center">
          <div class="relative w-[200px] h-[200px]">
            <svg width="200" height="200" viewBox="0 0 200 200" class="-rotate-90">
              <circle cx="100" cy="100" r="{{ $dR }}" fill="none" stroke="#EAEEF2" stroke-width="16"/>
              <circle cx="100" cy="100" r="{{ $dR }}" fill="none" stroke="#0E7C7B" stroke-width="16"
                stroke-dasharray="{{ round($dC) }}" stroke-dashoffset="{{ round($dC * (1 - $cur / 100)) }}" stroke-linecap="round"/>
            </svg>
            <div class="absolute inset-0 flex flex-col items-center justify-center">
              <span class="font-bold text-4xl text-on-surface leading-none">{{ $cur }}%</span>
              <span class="text-label-md font-label-md text-outline uppercase tracking-wide mt-1">Compliant</span>
            </div>
          </div>
          <p class="text-label-md font-label-md {{ $delta > 0 ? 'text-primary' : ($delta < 0 ? 'text-error' : 'text-outline') }} font-bold mt-3">
            @if($delta > 0)▲ {{ $delta }}% this month @elseif($delta < 0)▼ {{ abs($delta) }}% this month @else No change this month @endif
          </p>
          <p class="text-label-md font-label-md text-outline">{{ $current['completed'] }} / {{ $current['assigned'] }} courses complete</p>
        </div>

        {{-- Trend line (RIGHT, fills remaining width) --}}
        <div class="flex-1 w-full min-w-0">
          <svg viewBox="0 0 {{ $W }} {{ $H }}" class="w-full h-auto" preserveAspectRatio="xMidYMid meet">
            {{-- Gridlines + Y labels --}}
            @foreach([0, 25, 50, 75, 100] as $g)
              <line x1="{{ $pl }}" y1="{{ round($yf($g), 1) }}" x2="{{ $W - $pr }}" y2="{{ round($yf($g), 1) }}" stroke="#EAEEF2" stroke-width="1"/>
              <text x="{{ $pl - 8 }}" y="{{ round($yf($g), 1) + 3 }}" text-anchor="end" font-size="11" fill="#8A9199">{{ $g }}%</text>
            @endforeach

            {{-- Area + line --}}
            <path d="{{ $areaPath }}" fill="#0E7C7B" fill-opacity="0.08"/>
            <polyline points="{{ $linePts }}" fill="none" stroke="#0E7C7B" stroke-width="2.5" stroke-linejoin="round" stroke-linecap="round"/>

            {{-- Points + X labels --}}
            @foreach($trend as $i => $p)
              @php $isLast = $i === $n - 1; @endphp
              <circle cx="{{ round($xf($i), 1) }}" cy="{{ round($yf($p['compliance']), 1) }}" r="{{ $isLast ? 5 : 3.5 }}"
                fill="{{ $isLast ? '#0E7C7B' : '#FFFFFF' }}" stroke="#0E7C7B" stroke-width="2">
                <title>{{ $p['label'] }}: {{ $p['compliance'] }}% ({{ $p['completed'] }}/{{ $p['assigned'] }})</title>
              </circle>
              <text x="{{ round($xf($i), 1) }}" y="{{ $H - 10 }}" text-anchor="middle" font-size="11" fill="{{ $isLast ? '#0E7C7B' : '#8A9199' }}" font-weight="{{ $isLast ? '700' : '400' }}">{{ $p['label'] }}</text>
            @endforeach
          </svg>
        </div>
      </div>

      <p class="text-label-md font-label-md text-outline mt-3">Cumulative completion rate at each month-end (courses completed ÷ courses assigned). Peak: {{ $peak }}%.</p>
    </div>
  @endif

  <div class="grid grid-cols-1 lg:grid-cols-3 gap-gutter">
    {{-- Homes compliance --}}
    <div class="lg:col-span-2">
      <div class="flex items-center justify-between mb-4">
        <div class="flex items-center gap-2">
          <span class="material-symbols-outlined text-error">priority_high</span>
          <h3 class="text-headline-md font-headline-md text-on-surface">Services Needing Attention</h3>
        </div>
        <a href="{{ route(auth()->user()->primaryRole() . '.compliance.index') }}" class="text-label-md font-label-md text-primary font-bold hover:underline">All services →</a>
      </div>

      @if($serviceRows->isEmpty())
        <div class="surface-card rounded-xl px-6 py-12 text-center">
          <span class="material-symbols-outlined text-[42px] text-outline mb-2">home_health</span>
          <p class="text-body-lg font-body-lg text-on-surface font-semibold">No services assigned to you yet</p>
          <p class="text-body-md font-body-md text-outline">Once services are assigned to you, their compliance appears here.</p>
        </div>
      @else
        <div class="surface-card rounded-xl overflow-hidden">
          <div class="overflow-x-auto">
            <table class="w-full text-left min-w-[560px]">
              <thead class="bg-surface-container-high">
                <tr class="text-label-md font-label-md text-outline uppercase tracking-wide">
                  <th class="px-5 py-3">Service</th>
                  <th class="px-5 py-3">Workers</th>
                  <th class="px-5 py-3">Overdue</th>
                  <th class="px-5 py-3 w-52">Compliance</th>
                </tr>
              </thead>
              <tbody class="divide-y divide-outline-variant">
                @foreach($serviceRows as $row)
                  @php $pct = $row['compliance']; $bar = $row['overdue'] > 0 ? 'bg-error' : ($pct >= 100 ? 'bg-primary' : 'bg-gold'); @endphp
                  <tr class="text-body-md font-body-md text-on-surface">
                    <td class="px-5 py-4">
                      <a href="{{ route(auth()->user()->primaryRole() . '.compliance.index', ['service' => $row['service']->id]) }}" class="font-semibold hover:text-primary">
                        {{ $row['service']->name }}
                      </a>
                      <p class="text-label-md font-label-md text-outline">{{ $row['service']->code }}{{ $row['service']->region ? ' · ' . $row['service']->region : '' }}</p>
                    </td>
                    <td class="px-5 py-4 text-on-surface-variant">{{ $row['workers'] }}</td>
                    <td class="px-5 py-4">
                      @if($row['overdue'] > 0)
                        <span class="inline-block text-label-md font-label-md px-2.5 py-1 rounded-full bg-error-container text-error">{{ $row['overdue'] }}</span>
                      @else
                        <span class="text-on-surface-variant">0</span>
                      @endif
                    </td>
                    <td class="px-5 py-4">
                      <div class="flex items-center gap-2">
                        <div class="flex-1 h-2 bg-surface-container-high rounded-full overflow-hidden">
                          <div class="h-full {{ $bar }} rounded-full" style="width: {{ $pct }}%"></div>
                        </div>
                        <span class="text-label-md font-label-md text-on-surface-variant w-9 text-right">{{ $pct }}%</span>
                      </div>
                    </td>
                  </tr>
                @endforeach
              </tbody>
            </table>
          </div>
        </div>
      @endif
    </div>

    {{-- Personal compliance + needs attention --}}
    <div class="space-y-gutter">
      @if($personal['total'] > 0)
        <div class="surface-card rounded-xl p-6">
          <div class="flex items-center gap-2 mb-4">
            <span class="material-symbols-outlined text-primary">school</span>
            <h3 class="text-headline-md font-headline-md text-on-surface">Your Training</h3>
          </div>
          <div class="flex items-center gap-5">
            <div class="relative w-20 h-20 shrink-0">
              <svg width="80" height="80" viewBox="0 0 80 80" class="-rotate-90">
                <circle cx="40" cy="40" r="34" fill="none" stroke="#EAEEF2" stroke-width="8"/>
                <circle cx="40" cy="40" r="34" fill="none" stroke="#0E7C7B" stroke-width="8"
                  stroke-dasharray="{{ round(2 * M_PI * 34) }}"
                  stroke-dashoffset="{{ round(2 * M_PI * 34 * (1 - $personal['compliance'] / 100)) }}"
                  stroke-linecap="round"/>
              </svg>
              <div class="absolute inset-0 flex items-center justify-center font-bold text-body-lg text-on-surface">{{ $personal['compliance'] }}%</div>
            </div>
            <div class="flex-1">
              <p class="text-body-md font-body-md text-on-surface"><span class="font-semibold">{{ $personal['completed'] }}</span> of {{ $personal['total'] }} courses complete</p>
              @if($personal['overdue'] > 0)
                <p class="text-label-md font-label-md text-error font-bold mt-1">{{ $personal['overdue'] }} overdue</p>
              @else
                <p class="text-label-md font-label-md text-outline mt-1">Personal compliance</p>
              @endif
              <a href="{{ auth()->user()->learnRoute('courses') }}" class="inline-block mt-2 text-label-md font-label-md text-primary font-bold hover:underline">Go to my courses →</a>
            </div>
          </div>
        </div>
      @endif

      <div>
      <div class="flex items-center gap-2 mb-4">
        <span class="material-symbols-outlined text-error">notification_important</span>
        <h3 class="text-headline-md font-headline-md text-on-surface">Needs Attention</h3>
      </div>
      <div class="surface-card rounded-xl p-2">
        @forelse($attention as $row)
          <div class="flex items-center gap-3 px-3 py-3 rounded-lg">
            <div class="w-9 h-9 rounded-full bg-error-container flex items-center justify-center text-error font-bold text-label-md shrink-0">
              {{ strtoupper(collect(explode(' ', $row['user']->name))->map(fn($n) => $n[0] ?? '')->take(2)->implode('')) }}
            </div>
            <div class="flex-1 min-w-0">
              <p class="text-body-md font-body-md text-on-surface font-semibold truncate">{{ $row['user']->name }}</p>
              <p class="text-label-md font-label-md text-outline truncate">{{ $row['home'] ?? 'Unassigned service' }}</p>
            </div>
            <span class="text-label-md font-label-md px-2.5 py-1 rounded-full bg-error-container text-error whitespace-nowrap">{{ $row['overdue'] }} overdue</span>
          </div>
        @empty
          <div class="px-4 py-10 text-center">
            <span class="material-symbols-outlined text-[32px] text-primary">task_alt</span>
            <p class="text-body-md font-body-md text-on-surface font-semibold mt-1">All on track</p>
            <p class="text-label-md font-label-md text-outline">No overdue training across your services.</p>
          </div>
        @endforelse
      </div>
      </div>
    </div>
  </div>

  {{-- Compliance Organogram reference (CEO/COO) --}}
  @if(!empty($organogram))
    <style>
      .organogram summary { list-style: none; cursor: pointer; }
      .organogram summary::-webkit-details-marker { display: none; }
      .organogram details[open] > summary .org-chevron { transform: rotate(90deg); }
      .organogram .org-chevron { transition: transform .15s ease; }
    </style>
    <div class="mt-stack-lg">
      <div class="flex items-center justify-between mb-4">
        <div class="flex items-center gap-2">
          <span class="material-symbols-outlined text-primary">account_tree</span>
          <h3 class="text-headline-md font-headline-md text-on-surface">Compliance Organogram</h3>
        </div>
        <a href="{{ route(auth()->user()->primaryRole() . '.organogram') }}" class="text-label-md font-label-md text-primary font-bold hover:underline">Open full view →</a>
      </div>
      <div class="surface-card rounded-xl p-4 organogram" id="orgRef">
        @include('management._org-node', ['node' => $organogram, 'depth' => 0])
      </div>
    </div>
  @endif

@endsection