{{--
    La page Compte-rendu — voir le docblock de `MeetingMinutesBuilder` pour le
    raisonnement (pas de brouillon persistant, "Créer les tâches" jamais
    automatique).
--}}
@php
    $element = $this->element();
    $meeting = $this->meeting();
    $participants = $this->participants();
    $nextDates = $this->nextDates();
    $document = $this->publishedDocument();
@endphp

<x-filament-panels::page>
    <div class="mb-5 flex flex-wrap items-center gap-3 text-sm text-gray-500 dark:text-gray-400">
        <span class="inline-flex items-center gap-1.5">
            <x-filament::icon icon="heroicon-o-calendar-days" class="h-4 w-4 text-gray-400" />
            {{ $meeting->starts_at?->translatedFormat('l j F Y · H:i') }}
            @if ($meeting->ends_at)
                – {{ $meeting->ends_at->translatedFormat('H:i') }}
            @endif
        </span>
        @if ($meeting->organizer)
            <span class="inline-flex items-center gap-1.5">
                <x-filament::icon icon="heroicon-o-user" class="h-4 w-4 text-gray-400" />
                Organisée par {{ $meeting->organizer->full_name }}
            </span>
        @endif
        @if ($viewMode === 'compose' && $meeting->minutes_document_id !== null)
            <span class="inline-flex items-center gap-1.5 rounded-full bg-warning-50 px-2.5 py-1 text-xs font-semibold text-warning-700 dark:bg-warning-500/10 dark:text-warning-400">
                <x-filament::icon icon="heroicon-o-exclamation-triangle" class="h-3.5 w-3.5" />
                Un compte-rendu existe déjà — republier le remplace
            </span>
        @endif
    </div>

    @if ($viewMode === 'read' && $document !== null)
        <div class="flex flex-col gap-4" x-data="{ copied: false }">
            <div class="flex items-center justify-between">
                <h2 class="text-lg font-bold text-gray-950 dark:text-white">{{ $document->title }}</h2>
                <div class="flex items-center gap-2">
                    <button
                        type="button"
                        x-on:click="navigator.clipboard.writeText($refs.crRawText.value); copied = true; setTimeout(() => copied = false, 2000)"
                        class="inline-flex items-center gap-1.5 rounded-lg border border-gray-200 px-3 py-1.5 text-xs font-semibold text-gray-600 hover:bg-gray-50 dark:border-white/10 dark:text-gray-300 dark:hover:bg-white/5"
                    >
                        <x-filament::icon icon="heroicon-o-clipboard-document" class="h-3.5 w-3.5" />
                        <span x-text="copied ? 'Copié !' : 'Copier pour un email'"></span>
                    </button>
                    @if (\Illuminate\Support\Facades\Gate::allows('update', $element))
                        <button
                            type="button"
                            wire:click="editAgain"
                            class="inline-flex items-center gap-1.5 rounded-lg border border-gray-200 px-3 py-1.5 text-xs font-semibold text-gray-600 hover:bg-gray-50 dark:border-white/10 dark:text-gray-300 dark:hover:bg-white/5"
                        >
                            <x-filament::icon icon="heroicon-o-pencil-square" class="h-3.5 w-3.5" />
                            Modifier
                        </button>
                    @endif
                </div>
            </div>

            <textarea x-ref="crRawText" class="hidden" readonly>{{ $document->body }}</textarea>

            <div class="note-markdown rounded-xl border border-gray-200 bg-white p-6 text-sm text-gray-700 dark:border-white/10 dark:bg-gray-900 dark:text-gray-200">
                {!! \Illuminate\Support\Str::markdown((string) $document->body, ['html_input' => 'strip', 'allow_unsafe_links' => false]) !!}
            </div>
        </div>
    @else
    <div class="flex flex-col gap-5">
        <div class="rounded-xl border border-gray-200 bg-white p-4 dark:border-white/10 dark:bg-gray-900">
            <label class="mb-1.5 block text-xs font-bold tracking-wide text-gray-500 uppercase dark:text-gray-400">Titre</label>
            <input
                type="text"
                wire:model="minutesTitle"
                class="w-full rounded-lg border-gray-200 text-lg font-bold dark:border-white/10 dark:bg-gray-900 dark:text-white"
            />
        </div>

        <div class="rounded-xl border border-gray-200 bg-white p-4 dark:border-white/10 dark:bg-gray-900">
            <label class="mb-1.5 block text-xs font-bold tracking-wide text-gray-500 uppercase dark:text-gray-400">Ordre du jour</label>
            <textarea
                wire:model="agenda"
                rows="3"
                placeholder="Ce qui devait y être traité…"
                class="w-full rounded-lg border-gray-200 text-sm dark:border-white/10 dark:bg-gray-900 dark:text-white"
            ></textarea>
        </div>

        <div class="rounded-xl border border-gray-200 bg-white p-4 dark:border-white/10 dark:bg-gray-900">
            <label class="mb-2.5 block text-xs font-bold tracking-wide text-gray-500 uppercase dark:text-gray-400">Participants</label>
            @if ($participants->isEmpty())
                <p class="text-sm text-gray-400 dark:text-gray-500">Aucun participant renseigné sur la réunion.</p>
            @else
                <div class="flex flex-wrap gap-3">
                    @foreach ($participants as $person)
                        <label class="inline-flex items-center gap-2 rounded-full border border-gray-200 px-3 py-1.5 text-sm dark:border-white/10">
                            <input
                                type="checkbox"
                                wire:model="presentPersonIds.{{ $person->id }}"
                                class="rounded border-gray-300 text-primary-600 dark:border-gray-600"
                            />
                            {{ $person->full_name }}
                        </label>
                    @endforeach
                </div>
                <p class="mt-2 text-[11px] text-gray-400 dark:text-gray-500">Décochez qui était absent.</p>
            @endif
        </div>

        <div class="rounded-xl border border-gray-200 bg-white p-4 dark:border-white/10 dark:bg-gray-900">
            <div class="mb-2.5 flex items-center justify-between">
                <label class="text-xs font-bold tracking-wide text-gray-500 uppercase dark:text-gray-400">Compte-rendu</label>
                <button
                    type="button"
                    wire:click="insertNotes"
                    class="inline-flex items-center gap-1.5 text-[11px] font-semibold text-primary-600 hover:underline dark:text-primary-400"
                >
                    <x-filament::icon icon="heroicon-o-arrow-down-tray" class="h-3.5 w-3.5" />
                    Insérer les notes de la réunion
                </button>
            </div>
            <textarea
                wire:model="body"
                rows="10"
                placeholder="Ce qui s'est dit, décidé…"
                class="w-full rounded-lg border-gray-200 text-sm dark:border-white/10 dark:bg-gray-900 dark:text-white"
            ></textarea>
        </div>

        <div class="rounded-xl border border-gray-200 bg-white p-4 dark:border-white/10 dark:bg-gray-900">
            <label class="mb-2.5 block text-xs font-bold tracking-wide text-gray-500 uppercase dark:text-gray-400">Prochaines étapes</label>

            <div class="space-y-2">
                @foreach ($nextSteps as $index => $step)
                    <div wire:key="next-step-{{ $index }}" class="flex items-center gap-2">
                        <input
                            type="text"
                            wire:model="nextSteps.{{ $index }}.title"
                            placeholder="Ce qu'il reste à faire…"
                            @disabled($step['created_task_id'] !== null)
                            class="flex-1 rounded-lg border-gray-200 text-sm dark:border-white/10 dark:bg-gray-900 dark:text-white disabled:opacity-50"
                        />
                        <select
                            wire:model="nextSteps.{{ $index }}.person_id"
                            @disabled($step['created_task_id'] !== null)
                            class="w-48 rounded-lg border-gray-200 text-sm dark:border-white/10 dark:bg-gray-900 dark:text-white disabled:opacity-50"
                        >
                            <option value="">Responsable…</option>
                            @foreach ($participants as $person)
                                <option value="{{ $person->id }}">{{ $person->full_name }}</option>
                            @endforeach
                        </select>
                        @if ($step['created_task_id'] !== null)
                            <span class="inline-flex items-center gap-1 text-[11px] font-semibold text-success-600 dark:text-success-400">
                                <x-filament::icon icon="heroicon-o-check-circle" class="h-4 w-4" />
                                Créée
                            </span>
                        @else
                            <button type="button" wire:click="removeNextStep({{ $index }})" class="text-gray-400 hover:text-danger-500">
                                <x-filament::icon icon="heroicon-o-x-mark" class="h-4 w-4" />
                            </button>
                        @endif
                    </div>
                @endforeach
            </div>

            <div class="mt-3 flex items-center gap-2">
                <button
                    type="button"
                    wire:click="addNextStep"
                    class="inline-flex items-center gap-1.5 rounded-lg border border-dashed border-gray-200 px-3 py-1.5 text-xs font-semibold text-gray-500 hover:bg-gray-50 dark:border-white/10 dark:text-gray-400 dark:hover:bg-white/5"
                >
                    <x-filament::icon icon="heroicon-o-plus" class="h-3.5 w-3.5" />
                    Ajouter une ligne
                </button>
            </div>

            <div class="mt-3 flex items-center gap-2">
                <input
                    type="text"
                    wire:model="pastedNextSteps"
                    wire:keydown.enter="addNextStepsFromPastedList"
                    placeholder="…ou collez une liste (une étape par ligne)"
                    class="flex-1 rounded-lg border-dashed border-gray-200 text-sm dark:border-white/10 dark:bg-gray-900 dark:text-white"
                />
            </div>

            @if (collect($nextSteps)->contains(fn ($step) => trim($step['title']) !== '' && $step['created_task_id'] === null))
                <div class="mt-3">
                    <button
                        type="button"
                        wire:click="createTasksFromNextSteps"
                        wire:confirm="Créer une vraie tâche assignée pour chaque ligne non encore convertie ?"
                        class="inline-flex items-center gap-1.5 rounded-lg bg-primary-600 px-3 py-1.5 text-xs font-semibold text-white hover:bg-primary-500"
                    >
                        <x-filament::icon icon="heroicon-o-check" class="h-3.5 w-3.5" />
                        Créer les tâches
                    </button>
                </div>
            @endif
        </div>

        @if ($nextDates->isNotEmpty())
            <div class="rounded-xl border border-gray-200 bg-white p-4 dark:border-white/10 dark:bg-gray-900">
                <label class="mb-2.5 block text-xs font-bold tracking-wide text-gray-500 uppercase dark:text-gray-400">Prochaines dates</label>
                <ul class="space-y-1 text-sm text-gray-700 dark:text-gray-200">
                    @foreach ($nextDates as $occurrence)
                        <li>{{ $occurrence->starts_at->translatedFormat('l j F Y · H:i') }}</li>
                    @endforeach
                </ul>
                <p class="mt-2 text-[11px] text-gray-400 dark:text-gray-500">Occurrences suivantes de cette série récurrente.</p>
            </div>
        @endif

        <div class="flex justify-end">
            <button
                type="button"
                wire:click="publish"
                wire:loading.attr="disabled"
                wire:target="publish"
                class="inline-flex items-center gap-1.5 rounded-lg bg-primary-600 px-4 py-2 text-sm font-semibold text-white hover:bg-primary-500 disabled:cursor-not-allowed disabled:opacity-40"
            >
                <x-filament::icon icon="heroicon-o-paper-airplane" class="h-4 w-4" />
                <span wire:loading.remove wire:target="publish">Publier le compte-rendu</span>
                <span wire:loading wire:target="publish">Publication…</span>
            </button>
        </div>
    </div>
    @endif
</x-filament-panels::page>