@extends('layouts.app')
@section('title', '自建考試')
@section('content')
<div class="max-w-6xl mx-auto" x-data="customExam()">
    <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-8">
        <div>
            <h1 class="text-3xl font-bold text-gray-900 dark:text-white">自建考試</h1>
            <p class="text-gray-600 dark:text-gray-400 mt-1">從公開題庫選擇題目，組成您的專屬練習</p>
        </div>
        <div class="flex items-center gap-2 px-4 py-2 bg-purple-50 dark:bg-purple-900/20 border border-purple-200 dark:border-purple-800 rounded-lg">
            <svg class="w-5 h-5 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
            <span class="text-sm font-bold text-purple-700 dark:text-purple-300">已選 <span x-text="selected.length">0</span> 題</span>
        </div>
    </div>

    <!-- 第一步：考試名稱 -->
    <div class="bg-white dark:bg-slate-900 rounded-xl shadow-lg border border-gray-100 dark:border-slate-800 overflow-hidden mb-4">
        <div class="bg-purple-50 dark:bg-purple-900/20 px-5 py-3 border-b border-purple-100 dark:border-purple-800">
            <h3 class="text-sm font-bold text-purple-700 dark:text-purple-300">第一步：命名您的練習考試</h3>
        </div>
        <div class="p-4">
            <input type="text" x-model="title" placeholder="例如：法學大意模擬練習"
                   class="w-full px-4 py-3 rounded-lg border-2 border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-800 text-gray-900 dark:text-white text-base focus:outline-none focus:border-purple-500">
            <p class="mt-1.5 text-xs text-gray-400">建立後會出現在「我的練習」中</p>
        </div>
    </div>

    @php
        $subjectMapJson = collect($catSubjectMap)->map(function ($subjects) {
            return collect($subjects)->map(fn($name, $id) => ['id' => $id, 'name' => $name])->values();
        });
    @endphp

    <!-- 第二步：選擇考試分類與考科 -->
    <form method="GET" x-data="customFilter()" class="bg-white dark:bg-slate-900 rounded-xl shadow-lg border border-gray-100 dark:border-slate-800 overflow-hidden mb-4">
        <div class="bg-blue-50 dark:bg-blue-900/20 px-5 py-3 border-b border-blue-100 dark:border-blue-800">
            <h3 class="text-sm font-bold text-blue-700 dark:text-blue-300">第二步：選擇考試分類與考科</h3>
        </div>
        <div class="p-4">
            <div class="flex flex-wrap gap-3">
                <select name="category_id" x-model="categoryId" @change="onCategoryChange()" class="px-4 py-2.5 rounded-lg border-2 border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-800 text-gray-900 dark:text-white text-sm min-w-[200px]">
                    <option value="">-- 請選擇考試類別 --</option>
                    @foreach($categoryOptions as $opt)
                        <option value="{{ $opt['id'] }}" {{ request('category_id') == $opt['id'] ? 'selected' : '' }}>{{ str_repeat('　', $opt['depth']) }}{{ $opt['depth'] > 0 ? '└ ' : '' }}{{ $opt['name'] }}</option>
                    @endforeach
                </select>
                <select name="subject_id" x-model="subjectId" @change="$el.form.submit()" class="px-4 py-2.5 rounded-lg border-2 border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-800 text-gray-900 dark:text-white text-sm min-w-[180px]"
                        :disabled="!categoryId">
                    <option value="" x-text="categoryId ? '-- 該類別所有考科 --' : '-- 請先選擇類別 --'"></option>
                    <template x-for="sub in availableSubjects" :key="sub.id">
                        <option :value="sub.id" :selected="sub.id == subjectId" x-text="sub.name"></option>
                    </template>
                </select>
                @if(request('category_id') || request('subject_id'))
                    <a href="{{ route('practice.create_custom') }}" class="px-4 py-2.5 bg-gray-200 dark:bg-slate-700 text-gray-600 dark:text-gray-300 rounded-lg text-sm font-medium">重選</a>
                @endif
            </div>
            <!-- 目前篩選提示 -->
            @if(request('category_id'))
            <div class="mt-3 flex items-center gap-2 text-xs text-blue-600 dark:text-blue-400">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                目前顯示：{{ $categoryOptions[collect($categoryOptions)->search(fn($o) => $o['id'] == request('category_id'))]['name'] ?? '' }}
                @if(request('subject_id'))
                    → {{ $questions->first()?->exam?->subject?->name ?? '' }}
                @else
                    （所有考科）
                @endif
                的題目
            </div>
            @endif
        </div>
    </form>

    <!-- 第二步：進階篩選（題型、難度、關鍵字） -->
    <form method="GET" class="bg-white dark:bg-slate-900 rounded-xl shadow-lg border border-gray-100 dark:border-slate-800 overflow-hidden mb-6">
        <div class="bg-gray-50 dark:bg-slate-800 px-5 py-3 border-b border-gray-100 dark:border-slate-700">
            <h3 class="text-sm font-bold text-gray-600 dark:text-gray-300">第三步：篩選題目（可選）</h3>
        </div>
        <div class="p-4">
            <!-- 保留上一步的分類/考科 -->
            @if(request('category_id'))<input type="hidden" name="category_id" value="{{ request('category_id') }}">@endif
            @if(request('subject_id'))<input type="hidden" name="subject_id" value="{{ request('subject_id') }}">@endif
            <div class="flex flex-wrap gap-3">
                <input type="text" name="search" value="{{ request('search') }}" placeholder="輸入關鍵字搜尋題目內容..." class="flex-1 min-w-[250px] px-4 py-2.5 rounded-lg border-2 border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-800 text-gray-900 dark:text-white text-sm focus:outline-none focus:border-purple-500">
                <select name="type" onchange="this.form.submit()" class="px-4 py-2.5 rounded-lg border-2 border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-800 text-gray-900 dark:text-white text-sm">
                    <option value="">所有題型</option>
                    <option value="multiple_choice" {{ request('type') == 'multiple_choice' ? 'selected' : '' }}>選擇題</option>
                    <option value="short_answer" {{ request('type') == 'short_answer' ? 'selected' : '' }}>簡答題</option>
                    <option value="true_false" {{ request('type') == 'true_false' ? 'selected' : '' }}>是非題</option>
                    <option value="essay" {{ request('type') == 'essay' ? 'selected' : '' }}>問答題</option>
                    <option value="fill_blank" {{ request('type') == 'fill_blank' ? 'selected' : '' }}>填充題</option>
                </select>
                <select name="difficulty" onchange="this.form.submit()" class="px-4 py-2.5 rounded-lg border-2 border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-800 text-gray-900 dark:text-white text-sm">
                    <option value="">所有難度</option>
                    <option value="1" {{ request('difficulty') == '1' ? 'selected' : '' }}>簡單</option>
                    <option value="2" {{ request('difficulty') == '2' ? 'selected' : '' }}>中等</option>
                    <option value="3" {{ request('difficulty') == '3' ? 'selected' : '' }}>困難</option>
                </select>
                <button class="px-5 py-2.5 bg-purple-600 text-white rounded-lg text-sm font-medium hover:bg-purple-700">搜尋題目</button>
                @if(request('search') || request('type') || request('difficulty'))
                    <a href="{{ route('practice.create_custom', array_filter(['category_id' => request('category_id'), 'subject_id' => request('subject_id')])) }}" class="px-4 py-2.5 bg-gray-200 dark:bg-slate-700 text-gray-600 dark:text-gray-300 rounded-lg text-sm font-medium">清除篩選</a>
                @endif
            </div>
        </div>
    </form>
    <script>
    function customFilter() {
        return {
            categoryId: '{{ request('category_id', '') }}',
            subjectId: '{{ request('subject_id', '') }}',
            subjectMap: @json($subjectMapJson),
            get availableSubjects() {
                if (!this.categoryId) return [];
                return this.subjectMap[this.categoryId] || [];
            },
            onCategoryChange() {
                this.subjectId = '';
                this.$nextTick(() => this.$el.submit());
            },
        };
    }
    </script>

    @include('components.pagination-bar', ['paginator' => $questions])

    <!-- Batch Selection Bar -->
    <div class="flex flex-wrap items-center gap-2 mt-4 mb-3">
        <button type="button" @click="selectAllPage()" class="px-3 py-1.5 text-xs font-semibold rounded-lg border-2 border-purple-300 dark:border-purple-700 text-purple-700 dark:text-purple-300 hover:bg-purple-50 dark:hover:bg-purple-900/20 transition-colors">
            <span x-text="allPageSelected ? '取消本頁' : '全選本頁'">全選本頁</span>
            <span class="text-purple-400">({{ $questions->count() }})</span>
        </button>
        <button type="button" @click="selectAllFiltered()" class="px-3 py-1.5 text-xs font-semibold rounded-lg border-2 border-indigo-300 dark:border-indigo-700 text-indigo-700 dark:text-indigo-300 hover:bg-indigo-50 dark:hover:bg-indigo-900/20 transition-colors">
            全選符合條件 <span class="text-indigo-400">({{ $questions->total() }})</span>
        </button>

        {{-- Group by exam for quick select --}}
        @php
            $examGroups = $questions->groupBy(fn($q) => $q->exam_id);
        @endphp
        @if($examGroups->count() > 1)
        <span class="text-gray-300 dark:text-slate-600 mx-1">|</span>
        <span class="text-xs text-gray-500 dark:text-gray-400">按考試選取：</span>
        @foreach($examGroups as $examId => $group)
            @php $examTitle = $group->first()->exam->title ?? '未知'; @endphp
            <button type="button"
                    @click="selectByExam({{ json_encode($group->pluck('id')->values()->all()) }})"
                    class="px-2 py-1 text-xs rounded-lg bg-gray-100 dark:bg-slate-800 text-gray-700 dark:text-gray-300 hover:bg-purple-100 dark:hover:bg-purple-900/30 hover:text-purple-700 dark:hover:text-purple-300 transition-colors truncate max-w-[200px]"
                    title="{{ $examTitle }}">
                {{ Str::limit($examTitle, 25) }} ({{ $group->count() }})
            </button>
        @endforeach
        @endif
    </div>

    <!-- Question List -->
    <div class="space-y-3 mb-6">
        @forelse($questions as $q)
        <div class="bg-white dark:bg-slate-900 rounded-xl border-2 transition-all cursor-pointer"
             :class="selected.includes({{ $q->id }}) ? 'border-purple-500 shadow-lg shadow-purple-100 dark:shadow-purple-900/20' : 'border-gray-100 dark:border-slate-800 hover:border-purple-300 dark:hover:border-purple-700'"
             @click="toggleQuestion({{ $q->id }})">
            <div class="p-4 flex items-start gap-4">
                <!-- Checkbox -->
                <div class="pt-0.5">
                    <div class="w-6 h-6 rounded-md border-2 flex items-center justify-center transition-colors"
                         :class="selected.includes({{ $q->id }}) ? 'bg-purple-600 border-purple-600' : 'border-gray-300 dark:border-slate-600'">
                        <svg x-show="selected.includes({{ $q->id }})" class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
                    </div>
                </div>
                <!-- Content -->
                <div class="flex-1 min-w-0">
                    <p class="text-gray-900 dark:text-white text-sm leading-relaxed">{{ Str::limit($q->question_text, 150) }}</p>
                    <div class="flex flex-wrap gap-2 mt-2">
                        <span class="px-2 py-0.5 text-xs rounded-full font-medium bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400">
                            {{ match($q->question_type) { 'multiple_choice' => '選擇題', 'true_false' => '是非題', 'fill_blank' => '填充題', 'essay' => '問答題', default => '簡答題' } }}
                        </span>
                        <span class="px-2 py-0.5 text-xs rounded-full font-medium {{ $q->difficulty === 1 ? 'bg-green-100 text-green-700' : ($q->difficulty === 3 ? 'bg-red-100 text-red-700' : 'bg-yellow-100 text-yellow-700') }}">
                            {{ match($q->difficulty) { 1 => '簡單', 3 => '困難', default => '中等' } }}
                        </span>
                        @if($q->exam && $q->exam->subject)
                        <span class="px-2 py-0.5 text-xs rounded-full bg-gray-100 text-gray-600 dark:bg-slate-800 dark:text-gray-400">{{ $q->exam->subject->name }}</span>
                        @endif
                        <span class="px-2 py-0.5 text-xs rounded-full bg-gray-100 text-gray-500 dark:bg-slate-800 dark:text-gray-400">來源：{{ $q->exam->title ?? '未知' }}</span>
                    </div>
                </div>
            </div>
        </div>
        @empty
        <div class="text-center py-12 bg-white dark:bg-slate-900 rounded-xl shadow-lg">
            <p class="text-gray-500 dark:text-gray-400">沒有符合條件的公開題目</p>
        </div>
        @endforelse
    </div>

    <div class="mb-8">@include('components.pagination-bar', ['paginator' => $questions])</div>

    <!-- Sticky Bottom: Create Exam -->
    <div x-show="selected.length > 0" x-transition
         class="fixed bottom-0 left-0 right-0 bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm border-t border-gray-200 dark:border-slate-700 shadow-2xl z-40 p-4">
        <form action="{{ route('practice.store_custom') }}" method="POST" @submit="if(!title.trim()){alert('請先在第一步輸入考試名稱');return false;}" class="max-w-4xl mx-auto flex items-center gap-4">
            @csrf
            <input type="hidden" name="title" :value="title">
            <template x-for="id in selected" :key="id">
                <input type="hidden" name="question_ids[]" :value="id">
            </template>
            <div class="flex-1 flex items-center gap-2 min-w-0">
                <span class="text-sm text-gray-600 dark:text-gray-400 whitespace-nowrap">考試名稱：</span>
                <span class="text-sm font-bold text-purple-700 dark:text-purple-300 truncate" x-text="title || '（尚未命名）'"></span>
            </div>
            <div class="flex items-center gap-3 flex-shrink-0">
                <span class="text-sm text-gray-600 dark:text-gray-400 whitespace-nowrap">已選 <strong class="text-purple-600 dark:text-purple-400" x-text="selected.length"></strong> 題</span>
                <button type="button" @click="selected = []" class="px-3 py-2 text-sm text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg">清除</button>
                <button type="submit" class="px-6 py-2.5 bg-gradient-to-r from-purple-600 to-pink-600 text-white font-semibold rounded-lg hover:shadow-lg hover:scale-105 transition-all whitespace-nowrap">建立並開始練習</button>
            </div>
        </form>
    </div>
</div>

<script>
function customExam() {
    return {
        selected: [],
        title: '',
        pageIds: @json($questions->pluck('id')->values()->all()),
        get allPageSelected() {
            return this.pageIds.length > 0 && this.pageIds.every(id => this.selected.includes(id));
        },
        toggleQuestion(id) {
            const idx = this.selected.indexOf(id);
            if (idx === -1) { this.selected.push(id); }
            else { this.selected.splice(idx, 1); }
        },
        selectAllPage() {
            if (this.allPageSelected) {
                // Deselect all on this page
                this.selected = this.selected.filter(id => !this.pageIds.includes(id));
            } else {
                // Select all on this page (add missing ones)
                this.pageIds.forEach(id => {
                    if (!this.selected.includes(id)) this.selected.push(id);
                });
            }
        },
        selectByExam(ids) {
            const allSelected = ids.every(id => this.selected.includes(id));
            if (allSelected) {
                this.selected = this.selected.filter(id => !ids.includes(id));
            } else {
                ids.forEach(id => {
                    if (!this.selected.includes(id)) this.selected.push(id);
                });
            }
        },
        async selectAllFiltered() {
            const params = new URLSearchParams(window.location.search);
            params.set('all_ids', '1');
            try {
                const res = await fetch(`{{ route('practice.create_custom') }}?${params}`, {
                    headers: { 'Accept': 'application/json' }
                });
                const data = await res.json();
                if (data.ids && data.ids.length) {
                    const allSelected = data.ids.every(id => this.selected.includes(id));
                    if (allSelected) {
                        this.selected = this.selected.filter(id => !data.ids.includes(id));
                    } else {
                        data.ids.forEach(id => {
                            if (!this.selected.includes(id)) this.selected.push(id);
                        });
                    }
                }
            } catch (e) {
                alert('載入失敗：' + e.message);
            }
        }
    };
}
</script>
@endsection