@extends('layouts.app-layout')

@php
    use App\Enums\AccionEstadoEnum;

    $volverUrl = $planSeleccionado ? route('planes.show', $planSeleccionado) : route('acciones.index');
    $fechaMinimaVencimiento = now()->toDateString();
    $responsablesPreseleccionados = collect(
        old('responsables', isset($funcionarioActual) ? [$funcionarioActual->id] : []),
    );
    $funcionariosData = $funcionarios
        ->map(function ($funcionario) {
            return [
                'id' => $funcionario->id,
                'nombre' => trim(($funcionario->user->nombre ?? '') . ' ' . ($funcionario->user->apellido ?? '')),
                'rol' => $funcionario->rol->label(),
            ];
        })
        ->values();
@endphp

@section('title', 'Nueva acción - ' . config('app.name'))
@section('navbar_suffix', 'Acciones')

@section('content')
    <div class="container pt-2 pb-4" style="max-width:1120px;">
        <div class="d-flex flex-wrap align-items-start justify-content-between gap-3 mb-4">
            <div class="d-flex align-items-center gap-2">
                <a href="{{ $volverUrl }}"
                    class="btn btn-outline-secondary btn-sm rounded-circle d-flex align-items-center justify-content-center"
                    style="width:36px;height:36px;" title="Volver">
                    <i class="bi bi-arrow-left"></i>
                </a>
                <div>
                    <p class="text-muted small mb-1 text-uppercase" style="letter-spacing:0.08em;">Acción</p>
                    <h1 class="h5 fw-bold mb-0">Crear nueva acción</h1>
                </div>
            </div>
        </div>

        <form method="POST" action="{{ route('acciones.store') }}" novalidate>
            @csrf

            <div class="card border-0 shadow-sm mb-4">
                <div class="card-body p-4 rounded-3" style="background:linear-gradient(180deg,#f8fbff 0%,#ffffff 100%);">
                    <div class="row g-3 mb-3">
                        <div class="col-12 col-md-4">
                            <div class="bg-light border rounded-3 p-3 h-100">
                                <p class="text-muted text-uppercase small mb-1">Fecha de creación</p>
                                <p class="mb-0 text-muted">Se asigna automáticamente al guardar</p>
                            </div>
                        </div>
                        <div class="col-12 col-md-4">
                            <div class="bg-light border rounded-3 p-3 h-100">
                                <p class="text-muted text-uppercase small mb-1">Última modificación</p>
                                <p class="mb-0 text-muted">Se asigna automáticamente al guardar</p>
                            </div>
                        </div>
                        <div class="col-12 col-md-4">
                            <div class="bg-light border rounded-3 p-3 h-100">
                                <label class="form-label small text-muted mb-1">Fecha de vencimiento (opcional)</label>
                                <input type="date" name="fecha_vencimiento" value="{{ old('fecha_vencimiento') }}"
                                    min="{{ $fechaMinimaVencimiento }}"
                                    class="form-control @error('fecha_vencimiento') is-invalid @enderror">
                                @error('fecha_vencimiento')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="bg-white border rounded-3 p-3 shadow-sm mb-3">
                        <p class="text-muted small text-uppercase mb-2 d-flex align-items-center gap-2">
                            <i class="bi bi-flag-fill text-primary"></i>
                            <span>Datos principales</span>
                        </p>
                        @php
                            $esReunionSeleccion = (string) old('es_reunion', '0');
                        @endphp
                        <div class="row g-3">
                            <div class="col-12 col-md-6">
                                <label class="form-label small text-muted mb-1">Detalle de la acción</label>
                                <input type="text" name="detalle_accion"
                                    class="form-control @error('detalle_accion') is-invalid @enderror"
                                    value="{{ old('detalle_accion') }}" maxlength="200"
                                    placeholder="Ej: Reunión con asesor de marketing">
                                @error('detalle_accion')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-12 col-md-3">
                                <label class="form-label small text-muted mb-1">Estado</label>
                                <select name="estado" class="form-select @error('estado') is-invalid @enderror">
                                    @foreach (AccionEstadoEnum::cases() as $estado)
                                        <option value="{{ $estado->value }}" @selected(old('estado', AccionEstadoEnum::PENDIENTE->value) === $estado->value)>
                                            {{ $estado->label() }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('estado')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-12 col-md-3">
                                <label class="form-label small text-muted mb-1">Tipo de acción</label>
                                <select id="es_reunion" name="es_reunion"
                                    class="form-select @error('es_reunion') is-invalid @enderror">
                                    <option value="0" @selected($esReunionSeleccion !== '1')>Normal</option>
                                    <option value="1" @selected($esReunionSeleccion === '1')>Reunión</option>
                                </select>
                                @error('es_reunion')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-12">
                                <p class="small text-muted mb-1">
                                    Tip: usa <strong>Reunión</strong> cuando esta acción implica agendar una reunión.
                                </p>
                                <p id="es_reunion_hint"
                                    class="small text-info-emphasis mb-0 {{ $esReunionSeleccion === '1' ? '' : 'd-none' }}">
                                    Al guardar, te redirigimos automáticamente a agenda.
                                </p>
                            </div>
                        </div>
                    </div>

                    <div class="bg-white border rounded-3 p-3 shadow-sm mb-3">
                        <p class="text-muted small text-uppercase mb-3 d-flex align-items-center gap-2">
                            <i class="bi bi-diagram-3-fill text-primary"></i>
                            <span>Planes asociados</span>
                        </p>
                        <div class="position-relative">
                            <div class="position-relative">
                                <input type="search" id="plan_lookup"
                                    class="form-control form-control-sm pe-5 @error('planes') is-invalid @enderror"
                                    style="border-color:#b6d4fe;box-shadow:0 0 0 .14rem rgba(13,110,253,.12),0 .28rem .9rem rgba(13,110,253,.08);"
                                    placeholder="Buscar plan por título" autocomplete="off">
                                <span class="position-absolute top-50 end-0 translate-middle-y me-3 text-primary pe-none">
                                    <i class="bi bi-search"></i>
                                </span>
                            </div>
                            <div id="plan-suggestions"
                                class="list-group position-absolute w-100 shadow d-none mt-1 rounded-3 overflow-hidden"
                                style="z-index:1000;max-height:280px;overflow-y:auto;"></div>
                        </div>
                        <div class="invalid-feedback d-block d-none" id="plan-error"></div>
                        <div class="mt-3" id="planes-seleccionados-container">
                            <label class="small text-muted mb-1">Planes seleccionados:</label>
                            <div id="planes-badges" class="d-flex flex-wrap gap-2"></div>
                        </div>
                        @error('planes')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                        @error('planes.*')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="bg-white border rounded-3 p-3 shadow-sm">
                        <p class="text-muted small text-uppercase mb-2 d-flex align-items-center gap-2">
                            <i class="bi bi-people-fill text-primary"></i>
                            <span>Responsables Innova (opcional)</span>
                        </p>
                        <div class="row g-2 align-items-end mb-3">
                            <div class="col-12 col-md-8 position-relative">
                                <label for="responsable_lookup" class="form-label small text-muted mb-1">Buscar
                                    responsable</label>
                                <div class="position-relative">
                                    <input type="search" id="responsable_lookup"
                                        class="form-control form-control-sm pe-5"
                                        style="border-color:#b6d4fe;box-shadow:0 0 0 .14rem rgba(13,110,253,.12),0 .28rem .9rem rgba(13,110,253,.08);"
                                        placeholder="Buscar por nombre o apellido" autocomplete="off">
                                    <span
                                        class="position-absolute top-50 end-0 translate-middle-y me-3 text-primary pe-none">
                                        <i class="bi bi-search"></i>
                                    </span>
                                </div>
                                <div id="responsable-suggestions"
                                    class="list-group position-absolute w-100 shadow-sm d-none"
                                    style="z-index:1000;max-height:240px;overflow-y:auto;"></div>
                            </div>
                        </div>
                        <div class="text-danger small d-none mb-2" id="responsable-error"></div>
                        <div>
                            <label class="small text-muted mb-1">Responsables seleccionados:</label>
                            <div id="responsables-selected" class="d-flex flex-wrap gap-2"></div>
                        </div>
                        @error('responsables')
                            <div class="text-danger small mt-1">{{ $message }}</div>
                        @enderror
                        @error('responsables.*')
                            <div class="text-danger small mt-1">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="bg-white border rounded-3 p-3 shadow-sm mt-3">
                        <label class="form-label small text-muted mb-1">Descripción</label>
                        <textarea name="descripcion" rows="4" maxlength="500"
                            class="form-control @error('descripcion') is-invalid @enderror" placeholder="Notas, objetivos, observaciones">{{ old('descripcion') }}</textarea>
                        @error('descripcion')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>

            <div class="d-flex justify-content-between align-items-center">
                <a href="{{ $volverUrl }}" class="btn btn-link text-decoration-none">Cancelar</a>
                <button type="submit" class="btn btn-primary px-4">Guardar acción</button>
            </div>
        </form>
    </div>
@endsection

@push('scripts')
    <script>
        (() => {
            const lookupUrl = "{{ route('acciones.lookup-plan') }}";
            const planInput = document.getElementById('plan_lookup');
            const suggestionsBox = document.getElementById('plan-suggestions');
            const errorBox = document.getElementById('plan-error');
            const badgesContainer = document.getElementById('planes-badges');
            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');

            let debounceTimer = null;
            let selectedPlans = [];

            // Pre-load from old() or planSeleccionado
            const preselectedIds = @json(collect(old('planes', $planSeleccionado ? [$planSeleccionado] : [])));
            const planesData = @json($planes->map(fn($p) => ['id' => $p->id, 'titulo' => $p->titulo]));

            if (preselectedIds.length > 0) {
                preselectedIds.forEach(id => {
                    const plan = planesData.find(p => p.id == id);
                    if (plan) {
                        addPlan(plan.id, plan.titulo, false);
                    }
                });
            }

            function showError(message) {
                errorBox.textContent = message;
                errorBox.classList.remove('d-none');
            }

            function clearError() {
                errorBox.textContent = '';
                errorBox.classList.add('d-none');
            }

            function hideSuggestions() {
                suggestionsBox.classList.add('d-none');
                suggestionsBox.innerHTML = '';
            }

            function showSuggestions(planes) {
                suggestionsBox.innerHTML = '';

                if (!planes || planes.length === 0) {
                    hideSuggestions();
                    return;
                }

                planes.forEach(plan => {
                    const item = document.createElement('button');
                    item.type = 'button';
                    item.className = 'list-group-item list-group-item-action';
                    item.innerHTML = `
                        <div class="d-flex align-items-center gap-2 py-1">
                            <i class="bi bi-diagram-3 text-primary"></i>
                            <span class="fw-semibold">${plan.titulo}</span>
                        </div>
                    `;
                    item.addEventListener('click', (e) => {
                        e.preventDefault();
                        addPlan(plan.id, plan.titulo);
                        planInput.value = '';
                        hideSuggestions();
                    });
                    suggestionsBox.appendChild(item);
                });

                suggestionsBox.classList.remove('d-none');
            }

            function addPlan(id, titulo, showMessage = true) {
                if (selectedPlans.find(p => p.id == id)) {
                    if (showMessage) showError('Este plan ya está seleccionado.');
                    return;
                }

                selectedPlans.push({
                    id,
                    titulo
                });
                renderBadges();
                if (showMessage) clearError();
            }

            function removePlan(id) {
                selectedPlans = selectedPlans.filter(p => p.id != id);
                renderBadges();
            }

            function renderBadges() {
                badgesContainer.innerHTML = '';

                if (selectedPlans.length === 0) {
                    badgesContainer.innerHTML = '<span class="text-muted small">Ningún plan seleccionado</span>';
                    return;
                }

                selectedPlans.forEach(plan => {
                    const chip = document.createElement('div');
                    chip.className =
                        'd-inline-flex align-items-center gap-2 px-3 py-2 rounded-pill border bg-white shadow-sm';
                    chip.innerHTML = `
                        <span class="d-inline-flex align-items-center justify-content-center rounded-circle bg-primary-subtle text-primary" style="width:22px;height:22px;">
                            <i class="bi bi-diagram-3" style="font-size:.72rem;"></i>
                        </span>
                        <span class="small fw-semibold">${plan.titulo}</span>
                        <button type="button" class="btn btn-sm btn-link text-danger text-decoration-none p-0 ms-1" title="Quitar plan">
                            <i class="bi bi-x-circle-fill"></i>
                        </button>
                        <input type="hidden" name="planes[]" value="${plan.id}">
                    `;
                    chip.querySelector('button').addEventListener('click', () => removePlan(plan.id));
                    badgesContainer.appendChild(chip);
                });
            }

            async function searchPlans(titulo) {
                if (!titulo || titulo.length < 2) {
                    hideSuggestions();
                    clearError();
                    return;
                }

                try {
                    const response = await fetch(lookupUrl, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'Accept': 'application/json',
                            'X-CSRF-TOKEN': csrfToken || '',
                        },
                        body: JSON.stringify({
                            titulo
                        }),
                    });

                    const payload = await response.json().catch(() => ({}));

                    if (response.status === 404) {
                        hideSuggestions();
                        return;
                    }

                    if (!response.ok) {
                        hideSuggestions();
                        return;
                    }

                    const {
                        planes
                    } = payload;
                    if (planes && planes.length > 0) {
                        showSuggestions(planes);
                        clearError();
                    } else {
                        hideSuggestions();
                    }

                } catch (error) {
                    hideSuggestions();
                    console.error('Search error:', error);
                }
            }

            planInput.addEventListener('input', () => {
                clearTimeout(debounceTimer);
                const value = planInput.value.trim();

                if (value.length < 2) {
                    hideSuggestions();
                    return;
                }

                debounceTimer = setTimeout(() => {
                    searchPlans(value);
                }, 300);
            });

            planInput.addEventListener('keydown', (e) => {
                if (e.key === 'Escape') {
                    hideSuggestions();
                }
            });

            document.addEventListener('click', (e) => {
                if (!planInput.contains(e.target) && !suggestionsBox.contains(e.target)) {
                    hideSuggestions();
                }
            });

            const responsableInput = document.getElementById('responsable_lookup');
            const responsableSuggestions = document.getElementById('responsable-suggestions');
            const responsableError = document.getElementById('responsable-error');
            const responsablesSelected = document.getElementById('responsables-selected');

            const funcionariosData = @json($funcionariosData);
            const preselectedResponsables = @json($responsablesPreseleccionados->values());
            let selectedResponsables = [];
            let debounceResponsable = null;

            const showResponsableError = (message) => {
                if (!responsableError) return;
                responsableError.textContent = message;
                responsableError.classList.remove('d-none');
            };

            const clearResponsableError = () => {
                if (!responsableError) return;
                responsableError.textContent = '';
                responsableError.classList.add('d-none');
            };

            const hideResponsableSuggestions = () => {
                if (!responsableSuggestions) return;
                responsableSuggestions.classList.add('d-none');
                responsableSuggestions.innerHTML = '';
            };

            const renderResponsablesSelected = () => {
                if (!responsablesSelected) return;
                responsablesSelected.innerHTML = '';

                if (selectedResponsables.length === 0) {
                    responsablesSelected.innerHTML =
                        '<span class="text-muted small">Ningún responsable seleccionado</span>';
                    return;
                }

                selectedResponsables.forEach((responsable) => {
                    const chip = document.createElement('div');
                    chip.className =
                        'd-inline-flex align-items-center gap-2 px-3 py-2 rounded-pill border bg-white shadow-sm';
                    chip.innerHTML = `
                        <span class="d-inline-flex align-items-center justify-content-center rounded-circle bg-primary-subtle text-primary" style="width:22px;height:22px;">
                            <i class="bi bi-person-fill" style="font-size:.72rem;"></i>
                        </span>
                        <div class="d-flex flex-column lh-sm">
                            <span class="small fw-semibold">${responsable.nombre}</span>
                            <span class="text-muted" style="font-size:.72rem;">${responsable.rol}</span>
                        </div>
                        <button type="button" class="btn btn-sm btn-link text-danger text-decoration-none p-0 ms-1" title="Quitar responsable">
                            <i class="bi bi-x-circle-fill"></i>
                        </button>
                        <input type="hidden" name="responsables[]" value="${responsable.id}">
                    `;

                    chip.querySelector('button')?.addEventListener('click', () => {
                        selectedResponsables = selectedResponsables.filter((item) => Number(item
                            .id) !== Number(responsable.id));
                        renderResponsablesSelected();
                    });

                    responsablesSelected.appendChild(chip);
                });
            };

            const addResponsableById = (id) => {
                const responsable = funcionariosData.find((f) => Number(f.id) === Number(id));
                if (!responsable) {
                    showResponsableError('No se encontró el responsable seleccionado.');
                    return;
                }

                if (selectedResponsables.some((item) => Number(item.id) === Number(responsable.id))) {
                    showResponsableError('Ese responsable ya fue agregado.');
                    return;
                }

                selectedResponsables.push(responsable);
                renderResponsablesSelected();
                clearResponsableError();

                if (responsableInput) {
                    responsableInput.value = '';
                    responsableInput.focus();
                }
                hideResponsableSuggestions();
            };

            const showResponsableSuggestions = (items) => {
                if (!responsableSuggestions) return;
                responsableSuggestions.innerHTML = '';

                if (!items.length) {
                    hideResponsableSuggestions();
                    return;
                }

                items.forEach((item) => {
                    const option = document.createElement('button');
                    option.type = 'button';
                    option.className = 'list-group-item list-group-item-action';
                    option.innerHTML =
                        `<span class="fw-semibold">${item.nombre}</span> <span class="text-muted small">(${item.rol})</span>`;
                    option.addEventListener('click', () => {
                        addResponsableById(item.id);
                    });
                    responsableSuggestions.appendChild(option);
                });

                responsableSuggestions.classList.remove('d-none');
            };

            const filterResponsables = () => {
                if (!responsableInput) return;
                const term = responsableInput.value.trim().toLowerCase();

                if (term.length < 2) {
                    hideResponsableSuggestions();
                    return;
                }

                const matches = funcionariosData
                    .filter((item) => item.nombre.toLowerCase().includes(term))
                    .slice(0, 8);

                showResponsableSuggestions(matches);
            };

            const addFromSearch = () => {
                if (!responsableInput) return;
                const term = responsableInput.value.trim().toLowerCase();

                if (!term) {
                    showResponsableError('Escribe el nombre del responsable.');
                    return;
                }

                const matches = funcionariosData.filter((item) => item.nombre.toLowerCase().includes(term));
                if (matches.length === 1) {
                    addResponsableById(matches[0].id);
                    return;
                }

                if (matches.length > 1) {
                    showResponsableError('Hay varios responsables. Selecciona uno de la lista.');
                    showResponsableSuggestions(matches.slice(0, 8));
                    return;
                }

                showResponsableError('No se encontraron responsables con ese texto.');
            };

            if (responsableInput && responsablesSelected) {
                preselectedResponsables.forEach((id) => addResponsableById(id));

                responsableInput.addEventListener('input', () => {
                    clearTimeout(debounceResponsable);
                    debounceResponsable = setTimeout(filterResponsables, 180);
                });

                responsableInput.addEventListener('keydown', (e) => {
                    if (e.key === 'Enter') {
                        e.preventDefault();
                        addFromSearch();
                    }

                    if (e.key === 'Escape') {
                        hideResponsableSuggestions();
                    }
                });

                document.addEventListener('click', (e) => {
                    if (!responsableInput.contains(e.target) && !responsableSuggestions?.contains(e.target)) {
                        hideResponsableSuggestions();
                    }
                });
            }

            const reunionTypeSelect = document.getElementById('es_reunion');
            const reunionHint = document.getElementById('es_reunion_hint');

            const syncReunionHint = () => {
                if (!reunionHint || !reunionTypeSelect) return;

                const esReunion = reunionTypeSelect.value === '1';
                reunionHint.classList.toggle('d-none', !esReunion);
            };

            reunionTypeSelect?.addEventListener('change', syncReunionHint, {
                passive: true
            });
            syncReunionHint();

            // Render initial state
            renderBadges();
        })();
    </script>
@endpush