{{-- field → track → skill mastery tree — port of ags_parent MathAtlasView accordion.
     Vars: $fields = MathSnapshotService::for()['fields'] --}}
@php
    // 3-state dot: passed (lime) / attempted-not-passed (blue) / not attempted (gold).
    $dot = function ($passed, $maxile) {
        $c = $passed ? '#88C808' : (! is_null($maxile) ? '#3BA9F4' : '#BF9237');
        return "<span style='display:inline-block;width:9px;height:9px;border-radius:9999px;background:{$c}'></span>";
    };
    $chip = fn ($m) => is_null($m)
        ? "<span class='text-xs text-gray-400'>—</span>"
        : "<span class='text-xs font-semibold text-gray-600 dark:text-gray-300'>M" . round($m) . "</span>";
@endphp

<div class="space-y-2">
    @foreach ($fields as $field)
        <div x-data="{ open: false }" class="rounded-lg border border-gray-200 dark:border-gray-700">
            <div class="flex items-center justify-between gap-3 p-3">
                <button type="button" @click="open = !open" class="flex items-center gap-2 text-left font-semibold">
                    <span x-text="open ? '▾' : '▸'" class="text-gray-400"></span>
                    {!! $dot(false, $field['user_maxile']) !!}
                    {{ $field['name'] }}
                    <span class="text-xs text-gray-400">{{ $field['user_maxile_level_short'] ?? '' }}</span>
                </button>
                {!! $chip($field['user_maxile']) !!}
            </div>
            <div x-show="open" x-cloak class="border-t border-gray-100 dark:border-gray-800">
                @foreach ($field['tracks'] as $track)
                    <div x-data="{ topen: false }" class="border-b border-gray-100 last:border-0 dark:border-gray-800">
                        <div class="flex items-center justify-between gap-3 py-2 pl-6 pr-3">
                            <button type="button" @click="topen = !topen" class="flex items-center gap-2 text-left">
                                <span x-text="topen ? '▾' : '▸'" class="text-gray-400"></span>
                                {!! $dot($track['user_passed'], $track['user_maxile']) !!}
                                {{ $track['name'] }}
                                <span class="text-xs text-gray-400">{{ $track['level_band_short'] ?? '' }}</span>
                            </button>
                            {!! $chip($track['user_maxile']) !!}
                        </div>
                        <div x-show="topen" x-cloak class="pb-2">
                            @foreach ($track['skills'] as $skill)
                                <div class="flex items-center justify-between gap-3 py-1 pl-12 pr-3">
                                    <span class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-300">
                                        {!! $dot($skill['user_passed'], $skill['user_maxile']) !!}
                                        {{ $skill['name'] }}
                                    </span>
                                    {!! $chip($skill['user_maxile']) !!}
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    @endforeach
</div>