@extends('layouts.app-layout')

@php
    use App\Enums\PlanAccionEstadoEnum;

    $fechaMinimaVencimiento = now()->toDateString();
    $unidadesLookup = $unidades
        ->map(fn($unidad) => ['id' => $unidad->id, 'nombre' => $unidad->nombre_comercial])
        ->values();
    $unidadSeleccionadaId = (int) old('unidad_atencion_id', 0);
    $unidadSeleccionadaNombre =
        $unidadSeleccionadaId > 0 ? optional($unidades->firstWhere('id', $unidadSeleccionadaId))->nombre_comercial : '';
@endphp

@section('title', 'Nuevo plan de acción - ' . config('app.name'))
@section('navbar_suffix', 'Planes de acción')

@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="{{ route('planes.index') }}"
                    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;">Plan de acción</p>
                    <h1 class="h5 fw-bold mb-0">Crear nuevo plan</h1>
                </div>
            </div>
        </div>

        <form method="POST" action="{{ route('planes.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>
                        <div class="row g-3">
                            <div class="col-12 col-md-8">
                                <label class="form-label small text-muted mb-1">Título del plan</label>
                                <input type="text" name="titulo"
                                    class="form-control @error('titulo') is-invalid @enderror" value="{{ old('titulo') }}"
                                    maxlength="180" placeholder="Ej: Asesoría en marketing">
                                @error('titulo')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-12 col-md-4">
                                <label class="form-label small text-muted mb-1">Estado</label>
                                <select name="estado" class="form-select @error('estado') is-invalid @enderror">
                                    @foreach (PlanAccionEstadoEnum::cases() as $estado)
                                        <option value="{{ $estado->value }}" @selected(old('estado', PlanAccionEstadoEnum::ASIGNADO->value) === $estado->value)>
                                            {{ $estado->label() }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('estado')
                                    <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-3 d-flex align-items-center gap-2">
                            <i class="bi bi-shop text-primary"></i>
                            <span>Unidad de atención</span>
                        </p>
                        <div class="position-relative">
                            <div class="position-relative">
                                <input type="search" id="unidad_lookup"
                                    class="form-control form-control-sm pe-5 @error('unidad_atencion_id') 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 por nombre de unidad" autocomplete="off"
                                    value="{{ $unidadSeleccionadaNombre }}">
                                <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="unidad-suggestions"
                                class="list-group position-absolute w-100 shadow-sm d-none mt-1 rounded-3 overflow-hidden"
                                style="z-index:1000;max-height:240px;overflow-y:auto;"></div>
                        </div>
                        <div class="invalid-feedback d-block d-none" id="unidad-error"></div>
                        <div class="text-success small mt-1 d-none" id="unidad-encontrada"></div>
                        <input type="hidden" name="unidad_atencion_id" id="unidad_atencion_id"
                            value="{{ $unidadSeleccionadaId ?: '' }}">
                        @error('unidad_atencion_id')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="bg-white border rounded-3 p-3 shadow-sm">
                        <label class="form-label small text-muted mb-1">Descripción</label>
                        <textarea name="descripcion" rows="4" class="form-control @error('descripcion') is-invalid @enderror"
                            placeholder="Objetivo del plan, alcances, notas" maxlength="500">{{ old('descripcion') }}</textarea>
                        <div class="form-text">Máximo 500 caracteres.</div>
                        @error('descripcion')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>

            <div class="d-flex justify-content-between align-items-center">
                <a href="{{ route('planes.index') }}" class="btn btn-link text-decoration-none">Cancelar</a>
                <button type="submit" class="btn btn-primary px-4">Guardar plan</button>
            </div>
        </form>
    </div>
@endsection

@push('scripts')
    <script>
        (() => {
            const unidadInput = document.getElementById('unidad_lookup');
            const unidadSuggestions = document.getElementById('unidad-suggestions');
            const unidadIdInput = document.getElementById('unidad_atencion_id');
            const errorBox = document.getElementById('unidad-error');
            const successBox = document.getElementById('unidad-encontrada');
            const unidades = @json($unidadesLookup);

            if (!unidadInput || !unidadSuggestions || !unidadIdInput || !errorBox || !successBox) {
                return;
            }

            let debounceTimer = null;

            if (unidadIdInput.value && unidadInput.value) {
                successBox.textContent = `✓ Unidad seleccionada: ${unidadInput.value}`;
                successBox.classList.remove('d-none');
            }

            const resetSelection = () => {
                unidadIdInput.value = '';
                successBox.textContent = '';
                successBox.classList.add('d-none');
            };

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

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

            const hideSuggestions = () => {
                unidadSuggestions.classList.add('d-none');
                unidadSuggestions.innerHTML = '';
            };

            const selectUnidad = (unidad) => {
                unidadInput.value = unidad.nombre;
                unidadIdInput.value = unidad.id;
                clearError();
                successBox.textContent = `✓ Unidad seleccionada: ${unidad.nombre}`;
                successBox.classList.remove('d-none');
                hideSuggestions();
            };

            const renderSuggestions = (items) => {
                unidadSuggestions.innerHTML = '';

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

                items.forEach((unidad) => {
                    const option = document.createElement('button');
                    option.type = 'button';
                    option.className = 'list-group-item list-group-item-action';
                    option.innerHTML = `<span class="fw-semibold">${unidad.nombre}</span>`;
                    option.addEventListener('click', () => selectUnidad(unidad));
                    unidadSuggestions.appendChild(option);
                });

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

            const filterUnidades = () => {
                const term = unidadInput.value.trim().toLowerCase();
                clearError();
                resetSelection();

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

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

                if (!matches.length) {
                    showError('Unidad no encontrada.');
                    hideSuggestions();
                    return;
                }

                renderSuggestions(matches);
            };

            unidadInput.addEventListener('input', () => {
                clearTimeout(debounceTimer);
                debounceTimer = setTimeout(filterUnidades, 180);
            });

            unidadInput.addEventListener('keydown', (e) => {
                if (e.key === 'Escape') {
                    hideSuggestions();
                }
                if (e.key === 'Enter') {
                    const term = unidadInput.value.trim().toLowerCase();
                    const matches = unidades.filter((unidad) => unidad.nombre.toLowerCase().includes(term));
                    if (matches.length === 1) {
                        e.preventDefault();
                        selectUnidad(matches[0]);
                    } else if (!unidadIdInput.value) {
                        e.preventDefault();
                        showError('Selecciona una unidad de la lista.');
                    }
                }
            });

            document.addEventListener('click', (e) => {
                if (!unidadInput.contains(e.target) && !unidadSuggestions.contains(e.target)) {
                    hideSuggestions();
                }
            });
        })();
    </script>
@endpush