{{-- School curriculum PARTS — tabbed by level: Fields / Tracks / Skills /
     Questions / QA Review, each with a count + CRUD into the scoped Content
     resources. Scoped to public + this org's own content. Vars: $d. --}}
@php
    $c = $d['counts'];
    $canEditAll = $d['canEditAll'] ?? false;
    $res = [
        'fields'    => \App\Filament\Resources\FieldResource::class,
        'tracks'    => \App\Filament\Resources\TrackResource::class,
        'skills'    => \App\Filament\Resources\SkillResource::class,
        'questions' => \App\Filament\Resources\QuestionResource::class,
    ];
    // Host-relative URLs (isAbsolute:false) so links work on localhost OR 127.0.0.1.
    $newUrl  = fn (string $tab) => $res[$tab]::getUrl('create', [], false);
    $editUrl = function (string $tab, array $row) use ($res, $canEditAll) {
        return (($row['owned'] ?? false) || $canEditAll)
            ? $res[$tab]::getUrl('edit', ['record' => $row['id']], false)
            : null;
    };
    $badge = function (array $r): array {
        if (empty($r['owned'])) {
            return ['Public', 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300'];
        }
        return ($r['status'] ?? '') === 'Published'
            ? ['Yours · Published', 'bg-success-100 text-success-700']
            : ['Yours · Draft', 'bg-warning-100 text-warning-700'];
    };
    $qaClass = [
        'approved' => 'bg-success-100 text-success-700',
        'flagged' => 'bg-danger-100 text-danger-700',
        'needs_revision' => 'bg-warning-100 text-warning-700',
    ];
    $newBtn = fn (string $tab, string $label) =>
        '<a href="' . $newUrl($tab) . '" class="rounded-md bg-primary-600 px-2.5 py-1 text-xs font-semibold text-white hover:bg-primary-700">+ New ' . $label . '</a>';
@endphp

<div x-data="{ tab: 'qa' }" class="text-sm">
    {{-- Tab headers with counts --}}
    <div class="flex flex-wrap gap-1 border-b border-gray-200 dark:border-gray-700">
        @foreach (['fields' => 'Fields', 'tracks' => 'Tracks', 'skills' => 'Skills', 'questions' => 'Questions', 'qa' => 'QA Review'] as $key => $label)
            <button type="button" x-on:click="tab = '{{ $key }}'"
                    :class="tab === '{{ $key }}' ? 'border-primary-600 text-primary-600' : 'border-transparent text-gray-500 hover:text-gray-700'"
                    class="flex items-center gap-1.5 border-b-2 px-3 py-2 font-medium">
                {{ $label }}
                <span class="rounded-full bg-gray-100 px-1.5 text-xs text-gray-600 dark:bg-gray-700 dark:text-gray-300">{{ $c[$key] }}</span>
            </button>
        @endforeach
    </div>

    {{-- FIELDS --}}
    <div x-show="tab === 'fields'" x-cloak class="mt-3">
        <div class="mb-2 flex justify-end">{!! $newBtn('fields', 'Field') !!}</div>
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead class="text-left text-xs uppercase text-gray-400">
                    <tr><th class="py-1 pr-3">Field</th><th class="pr-3">Tracks</th><th class="pr-3">Questions</th><th>Scope</th></tr>
                </thead>
                <tbody>
                    @forelse ($d['fields'] as $f)
                        @php
                            [$bl, $bc] = $badge($f);
                            $eu = $editUrl('fields', $f);
                        @endphp
                        <tr class="border-b border-gray-100 dark:border-gray-800">
                            <td class="py-1.5 pr-3 font-medium">
                                @if ($eu)<a href="{{ $eu }}" class="text-primary-600 hover:underline">{{ $f['name'] }}</a>@else<span class="text-gray-800 dark:text-gray-100">{{ $f['name'] }}</span>@endif
                            </td>
                            <td class="pr-3 text-gray-500">{{ $f['tracks'] }}</td>
                            <td class="pr-3 text-gray-500">{{ $f['questions'] }}</td>
                            <td><span class="rounded px-1.5 py-0.5 text-xs {{ $bc }}">{{ $bl }}</span></td>
                        </tr>
                    @empty
                        <tr><td colspan="4" class="py-4 text-center text-gray-400">No fields.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    {{-- TRACKS --}}
    <div x-show="tab === 'tracks'" x-cloak class="mt-3">
        <div class="mb-2 flex justify-end">{!! $newBtn('tracks', 'Track') !!}</div>
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead class="text-left text-xs uppercase text-gray-400">
                    <tr><th class="py-1 pr-3">Track</th><th class="pr-3">Skills</th><th class="pr-3">Questions</th><th>Scope</th></tr>
                </thead>
                <tbody>
                    @forelse ($d['tracks'] as $t)
                        @php
                            [$bl, $bc] = $badge($t);
                            $eu = $editUrl('tracks', $t);
                        @endphp
                        <tr class="border-b border-gray-100 dark:border-gray-800">
                            <td class="py-1.5 pr-3 font-medium">
                                @if ($eu)<a href="{{ $eu }}" class="text-primary-600 hover:underline">{{ $t['name'] }}</a>@else<span class="text-gray-800 dark:text-gray-100">{{ $t['name'] }}</span>@endif
                            </td>
                            <td class="pr-3 text-gray-500">{{ $t['skills'] }}</td>
                            <td class="pr-3 text-gray-500">{{ $t['questions'] }}</td>
                            <td><span class="rounded px-1.5 py-0.5 text-xs {{ $bc }}">{{ $bl }}</span></td>
                        </tr>
                    @empty
                        <tr><td colspan="4" class="py-4 text-center text-gray-400">No tracks.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    {{-- SKILLS --}}
    <div x-show="tab === 'skills'" x-cloak class="mt-3">
        <div class="mb-2 flex justify-end">{!! $newBtn('skills', 'Skill') !!}</div>
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead class="text-left text-xs uppercase text-gray-400">
                    <tr><th class="py-1 pr-3">Skill</th><th class="pr-3">Questions</th><th>Scope</th></tr>
                </thead>
                <tbody>
                    @forelse ($d['skills'] as $s)
                        @php
                            [$bl, $bc] = $badge($s);
                            $eu = $editUrl('skills', $s);
                        @endphp
                        <tr class="border-b border-gray-100 dark:border-gray-800">
                            <td class="py-1.5 pr-3 font-medium">
                                @if ($eu)<a href="{{ $eu }}" class="text-primary-600 hover:underline">{{ $s['name'] }}</a>@else<span class="text-gray-800 dark:text-gray-100">{{ $s['name'] }}</span>@endif
                            </td>
                            <td class="pr-3 text-gray-500">{{ $s['questions'] }}</td>
                            <td><span class="rounded px-1.5 py-0.5 text-xs {{ $bc }}">{{ $bl }}</span></td>
                        </tr>
                    @empty
                        <tr><td colspan="3" class="py-4 text-center text-gray-400">No skills.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    {{-- QUESTIONS --}}
    <div x-show="tab === 'questions'" x-cloak class="mt-3">
        <div class="mb-2 flex items-center justify-between">
            <span class="text-xs text-gray-500">{{ $c['questions'] }} in your curriculum — {{ $d['ownQuestionCount'] }} created by your org; the rest public AGS content.</span>
            {!! $newBtn('questions', 'Question') !!}
        </div>
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead class="text-left text-xs uppercase text-gray-400">
                    <tr><th class="py-1 pr-3">#</th><th class="pr-3">Question (yours)</th><th class="pr-3">Status</th><th>QA</th></tr>
                </thead>
                <tbody>
                    @forelse ($d['ownQuestions'] as $q)
                        <tr class="border-b border-gray-100 dark:border-gray-800">
                            <td class="py-1.5 pr-3 text-xs text-gray-300">{{ $q['id'] }}</td>
                            <td class="max-w-md truncate pr-3">
                                <a href="{{ \App\Filament\Resources\QuestionResource::getUrl('edit', ['record' => $q['id']], false) }}" class="text-primary-600 hover:underline">{{ $q['question'] }}</a>
                            </td>
                            <td class="pr-3 text-xs text-gray-500">{{ $q['status'] }}</td>
                            <td><span class="rounded px-1.5 py-0.5 text-xs {{ $qaClass[$q['qa']] ?? 'bg-gray-100 text-gray-500' }}">{{ str_replace('_', ' ', $q['qa']) }}</span></td>
                        </tr>
                    @empty
                        <tr><td colspan="4" class="py-4 text-center text-gray-400">Your org hasn't created any questions yet — use “+ New Question”.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    {{-- QA REVIEW --}}
    <div x-show="tab === 'qa'" x-cloak class="mt-3">
        @forelse ($d['qaReview'] as $q)
            <div wire:key="qa-{{ $q['id'] }}" class="flex flex-wrap items-center gap-2 border-b border-gray-100 py-1.5 dark:border-gray-800">
                <span class="text-xs text-gray-300">#{{ $q['id'] }}</span>
                <span class="max-w-md truncate text-gray-700 dark:text-gray-200">{{ $q['question'] }}</span>
                <span class="rounded px-1.5 py-0.5 text-xs {{ $qaClass[$q['qa']] ?? 'bg-gray-100 text-gray-500' }}">{{ str_replace('_', ' ', $q['qa']) }}</span>
                <span class="ml-auto flex gap-1">
                    <button type="button" wire:click="setQaStatus({{ $q['id'] }}, 'approved')" class="rounded bg-success-50 px-1.5 py-0.5 text-xs font-medium text-success-700 hover:bg-success-100">Approve</button>
                    <button type="button" wire:click="setQaStatus({{ $q['id'] }}, 'needs_revision')" class="rounded bg-warning-50 px-1.5 py-0.5 text-xs font-medium text-warning-700 hover:bg-warning-100">Revise</button>
                    <button type="button" wire:click="setQaStatus({{ $q['id'] }}, 'flagged')" class="rounded bg-danger-50 px-1.5 py-0.5 text-xs font-medium text-danger-700 hover:bg-danger-100">Flag</button>
                </span>
            </div>
        @empty
            <div class="py-6 text-center text-gray-400">Nothing awaiting QA — all your questions are approved.</div>
        @endforelse
    </div>
</div>