{{--
    AI Assistant Setup — shared between create + edit.
    Inputs from caller:
      $assistantModes        : array<string,string> (key => description)
      $model (optional)      : ModelItem when editing; null on create
--}}
@php
    $existingMode = old('ai_assistant_mode', $model?->ai_assistant_mode ?? 'default');
    $existingInstruction = old('ai_assistant_custom_instruction', $model?->ai_assistant_custom_instruction ?? '');

    $oldPrompts = old('assistant_prompts');
    if (is_array($oldPrompts)) {
        $promptsForForm = collect($oldPrompts)
            ->filter(fn ($p) => is_array($p) && trim((string) ($p['prompt_text'] ?? '')) !== '')
            ->map(fn ($p) => [
                'prompt_text' => trim((string) ($p['prompt_text'] ?? '')),
                'is_active'   => array_key_exists('is_active', $p) ? (bool) $p['is_active'] : true,
            ])
            ->values()
            ->all();
    } elseif (isset($model) && $model && $model->assistantPrompts) {
        $promptsForForm = $model->assistantPrompts->map(fn ($p) => [
            'prompt_text' => $p->prompt_text,
            'is_active'   => (bool) $p->is_active,
        ])->all();
    } else {
        $promptsForForm = [];
    }

    $suggestUrl = isset($model) && $model && $model->exists
        ? route('staff.models.assistant.suggest', $model)
        : null;
@endphp

<section data-tab-panel="assistant" class="staff-panel space-y-4 hidden">
    <div class="rounded-xl border border-white/10 bg-white/5 p-4">
        <h3 class="text-sm font-semibold text-white">AI Assistant Setup</h3>
        <p class="mt-1 text-xs text-slate-400">
            Leave blank to use the default assistant. Add guidance if you want the assistant to prompt students to observe, compare, identify, or explain features of the model.
        </p>

        <div class="mt-4">
            <label class="mb-1 block text-sm font-medium text-slate-200">Assistant mode</label>
            <select name="ai_assistant_mode" class="w-full rounded-lg border border-white/15 bg-slate-900/70 px-3 py-2 text-slate-100">
                @foreach($assistantModes as $modeKey => $modeLabel)
                    <option value="{{ $modeKey }}" @selected($existingMode === $modeKey)>{{ $modeLabel }}</option>
                @endforeach
            </select>
        </div>

        <div class="mt-4">
            <label class="mb-1 block text-sm font-medium text-slate-200">Custom instruction <span class="font-normal text-slate-400">(optional)</span></label>
            <textarea name="ai_assistant_custom_instruction" rows="3" maxlength="2000" placeholder="e.g. Encourage students to inspect the entrance hall and identify features that suggest this is a formal educational space." class="w-full rounded-lg border border-white/15 bg-slate-900/70 px-3 py-2 text-slate-100">{{ $existingInstruction }}</textarea>
            <p class="mt-1 text-xs text-slate-400">Added to the assistant's system context. Grounding to the model's teaching content is always preserved — custom instructions cannot override it.</p>
        </div>
    </div>

    <div class="rounded-xl border border-white/10 bg-white/5 p-4" data-prompt-editor>
        <div class="mb-3 flex flex-wrap items-center justify-between gap-2">
            <div>
                <h3 class="text-sm font-semibold text-white">Suggested student prompts</h3>
                <p class="mt-1 text-xs text-slate-400">Students see active prompts as one-click chips above the question box on the model page.</p>
            </div>
            <div class="flex items-center gap-2">
                @if($suggestUrl)
                    <button type="button"
                            class="btn-secondary text-sm"
                            data-suggest-prompts
                            data-suggest-url="{{ $suggestUrl }}">
                        <span data-suggest-label>Generate suggested prompts</span>
                    </button>
                @else
                    <span class="text-xs text-slate-400">Save the model once to enable AI generation.</span>
                @endif
                <button type="button" class="btn-secondary text-sm" data-add-prompt>+ Add prompt</button>
            </div>
        </div>

        <div class="space-y-2" data-prompts-list>
            @forelse($promptsForForm as $i => $row)
                <div class="prompt-row flex items-center gap-2 rounded-lg border border-white/10 bg-slate-900/40 p-2" data-prompt-row>
                    <input type="text"
                           name="assistant_prompts[{{ $i }}][prompt_text]"
                           value="{{ $row['prompt_text'] }}"
                           maxlength="290"
                           placeholder="e.g. What do you notice about the main entrance?"
                           class="flex-1 rounded-lg border border-white/15 bg-slate-900/70 px-3 py-2 text-sm text-slate-100"
                           data-prompt-text>
                    <label class="inline-flex items-center gap-1 whitespace-nowrap text-xs text-slate-300">
                        <input type="hidden" name="assistant_prompts[{{ $i }}][is_active]" value="0">
                        <input type="checkbox"
                               name="assistant_prompts[{{ $i }}][is_active]"
                               value="1"
                               {{ $row['is_active'] ? 'checked' : '' }}>
                        Active
                    </label>
                    <button type="button" class="prompt-remove" aria-label="Remove prompt" data-remove-prompt>&times;</button>
                </div>
            @empty
                <p class="rounded-lg border border-dashed border-white/15 bg-slate-900/30 p-3 text-xs text-slate-400" data-prompts-empty>
                    No prompts yet. Click <em>Generate suggested prompts</em> or <em>+ Add prompt</em> to add some.
                </p>
            @endforelse
        </div>

        <template data-prompt-row-template>
            <div class="prompt-row flex items-center gap-2 rounded-lg border border-white/10 bg-slate-900/40 p-2" data-prompt-row>
                <input type="text"
                       name="assistant_prompts[__INDEX__][prompt_text]"
                       value=""
                       maxlength="290"
                       placeholder="e.g. What do you notice about the main entrance?"
                       class="flex-1 rounded-lg border border-white/15 bg-slate-900/70 px-3 py-2 text-sm text-slate-100"
                       data-prompt-text>
                <label class="inline-flex items-center gap-1 whitespace-nowrap text-xs text-slate-300">
                    <input type="hidden" name="assistant_prompts[__INDEX__][is_active]" value="0">
                    <input type="checkbox" name="assistant_prompts[__INDEX__][is_active]" value="1" checked>
                    Active
                </label>
                <button type="button" class="prompt-remove" aria-label="Remove prompt" data-remove-prompt>&times;</button>
            </div>
        </template>
    </div>

    <div class="staff-panel-footer">
        <button type="button" class="btn-secondary" data-form-nav="prev">Back</button>
        <div class="staff-panel-footer-right">
            <button type="submit" class="btn-secondary">Save progress</button>
            <button type="button" class="btn-primary" data-form-nav="next">Next</button>
        </div>
    </div>
</section>