@extends('layouts.app-layout')

@php
    use App\Enums\AccionEstadoEnum;
    use App\Enums\FuncionarioRolEnum;

    $puedeGestionarAccion = $puedeGestionarAccion ?? (bool) auth()->user()?->funcionario;
    $esFuncionarioAdmin = (auth()->user()?->funcionario?->rol?->value ?? auth()->user()?->funcionario?->rol) === FuncionarioRolEnum::ADMIN->value;
    $funcionarios = $funcionarios ?? collect();
    $estadoEnum = $accion->estado instanceof AccionEstadoEnum
        ? $accion->estado
        : AccionEstadoEnum::tryFrom((string) $accion->estado);
    $accionEliminada = method_exists($accion, 'trashed') && $accion->trashed();
    $accionVencida = $accion->fecha_vencimiento && $accion->fecha_vencimiento->lt(now()->startOfDay());
    $estadosContactoDisponibles = AccionEstadoEnum::cases();
    $esContactoAutenticado = $esContactoAutenticado ?? (bool) auth()->user()?->contacto;
    $funcionariosLookup = $funcionarios->map(function ($funcionario) {
        return [
            'id' => $funcionario->id,
            'nombre' => trim(($funcionario->user->nombre ?? '') . ' ' . ($funcionario->user->apellido ?? '')),
            'rol' => $funcionario->rol->label(),
        ];
    })->values();
    $estadoClass = match($estadoEnum) {
        AccionEstadoEnum::PENDIENTE => 'bg-warning-subtle text-warning-emphasis',
        AccionEstadoEnum::EN_PROCESO => 'bg-primary-subtle text-primary',
        AccionEstadoEnum::FINALIZADA => 'bg-success-subtle text-success',
        default => 'bg-secondary-subtle text-secondary'
    };
    $estadoLabel = $estadoEnum?->label() ?? ucfirst((string) $accion->estado);
@endphp

@section('title', '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="{{ route('acciones.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;">Acción</p>
                    <h1 class="h5 fw-bold mb-0">{{ $accion->detalle_accion }}</h1>
                </div>
            </div>
            @if($puedeGestionarAccion && !$accionEliminada)
                <div class="d-flex gap-2 mt-1">
                    <a href="{{ route('acciones.edit', $accion) }}"
                       class="btn btn-light btn-sm border shadow-sm rounded-circle d-flex align-items-center justify-content-center"
                       style="width:34px;height:34px;"
                       title="Editar">
                        <i class="bi bi-pencil text-primary"></i>
                    </a>
                    <form action="{{ route('acciones.destroy', $accion) }}" method="POST" onsubmit="return confirm('¿Eliminar esta acción?');">
                        @csrf
                        @method('DELETE')
                        <button type="submit"
                                class="btn btn-light btn-sm border shadow-sm rounded-circle d-flex align-items-center justify-content-center"
                                style="width:34px;height:34px;"
                                title="Eliminar">
                            <i class="bi bi-trash text-danger"></i>
                        </button>
                    </form>
                </div>
            @elseif($puedeGestionarAccion)
                <form action="{{ route('acciones.restore', $accion->id) }}" method="POST" onsubmit="return confirm('¿Restaurar esta acción?');" class="d-flex mt-1">
                    @csrf
                    @method('PATCH')
                    <button type="submit"
                            class="btn btn-success btn-sm rounded-pill d-inline-flex align-items-center gap-1 px-3 shadow-sm"
                            title="Restaurar acción">
                        <i class="bi bi-arrow-counterclockwise"></i>
                        <span>Restaurar</span>
                    </button>
                </form>
            @endif
        </div>

        @if(session('success'))
            <div id="accion-success-toast" class="position-fixed top-0 end-0 p-3" style="z-index:1080;">
                <div class="alert alert-success border-0 shadow rounded-3 mb-0 d-flex align-items-center gap-2 py-2 px-3">
                    <i class="bi bi-check-circle-fill"></i>
                    <span class="small fw-semibold">{{ session('success') }}</span>
                    <button type="button" class="btn-close ms-2" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            </div>
        @endif

        <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%);">
                @if($accionEliminada)
                    <div class="mb-3">
                        <span class="badge bg-danger-subtle text-danger-emphasis border border-danger-subtle">Acción eliminada (solo lectura)</span>
                    </div>
                @endif
                <div class="row g-3 mb-3">
                    <div class="col-12 col-md-6">
                        <div class="bg-white border border-warning-subtle rounded-3 p-3 h-100 shadow-sm">
                            <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-2">
                                <p class="text-muted text-uppercase small mb-0 d-flex align-items-center gap-2">
                                    <i class="bi bi-flag-fill text-warning-emphasis"></i>
                                    <span>Estado</span>
                                </p>
                                @if($puedeGestionarAccion && !$accionEliminada)
                                    <form action="{{ route('acciones.update-estado', $accion) }}"
                                          method="POST"
                                          class="m-0">
                                        @csrf
                                        @method('PATCH')
                                        <select name="estado"
                                                id="estado-detalle-funcionario-{{ $accion->id }}"
                                                class="form-select form-select-sm rounded-pill accion-contacto-status-select"
                                                aria-label="Actualizar estado de acción"
                                                onchange="this.form.requestSubmit()">
                                            @foreach($estadosContactoDisponibles as $estadoDisponible)
                                                <option value="{{ $estadoDisponible->value }}"
                                                        @selected(($accion->estado?->value ?? (string) $accion->estado) === $estadoDisponible->value)>
                                                    {{ $estadoDisponible->label() }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </form>
                                @elseif($esContactoAutenticado && !$puedeGestionarAccion && !$accionEliminada)
                                    @if(!$accionVencida)
                                        <form action="{{ route('acciones.update-estado-contacto', $accion) }}"
                                              method="POST"
                                              class="m-0">
                                            @csrf
                                            @method('PATCH')
                                            <select name="estado"
                                                    id="estado-detalle-contacto-{{ $accion->id }}"
                                                    class="form-select form-select-sm rounded-pill accion-contacto-status-select"
                                                    aria-label="Actualizar estado de acción"
                                                    onchange="this.form.requestSubmit()">
                                                @foreach($estadosContactoDisponibles as $estadoDisponible)
                                                    <option value="{{ $estadoDisponible->value }}"
                                                            @selected(($accion->estado?->value ?? (string) $accion->estado) === $estadoDisponible->value)>
                                                        {{ $estadoDisponible->label() }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </form>
                                    @else
                                        <span class="small text-muted d-inline-flex align-items-center gap-1">
                                            <i class="bi bi-lock"></i>
                                            Sin edición (vencida)
                                        </span>
                                    @endif
                                @endif
                            </div>
                            <div class="d-flex flex-wrap gap-2 mt-2">
                                <span class="badge rounded-pill px-3 py-2 {{ $estadoClass }}">{{ $estadoLabel }}</span>
                                @if($accion->es_reunion)
                                    <span class="badge rounded-pill px-3 py-2 bg-info-subtle text-info-emphasis">Acción de reunión</span>
                                @endif
                                @if($accionVencida && ($puedeGestionarAccion || $accionEliminada))
                                    <span class="badge rounded-pill bg-secondary-subtle text-secondary accion-badge-vencida">Vencida</span>
                                @endif
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-md-6">
                        <div class="bg-white border rounded-3 p-3 h-100 shadow-sm">
                            <p class="text-muted text-uppercase small mb-2 d-flex align-items-center gap-2">
                                <i class="bi bi-calendar-check-fill text-danger"></i>
                                <span>Vencimiento</span>
                            </p>
                            <p class="mb-0 fw-semibold text-danger-emphasis">
                                {{ $accion->fecha_vencimiento ? \Illuminate\Support\Carbon::parse($accion->fecha_vencimiento)->format('d/m/Y') : 'Sin fecha' }}
                            </p>
                        </div>
                    </div>
                </div>

                <div class="row g-3 mb-3">
                    <div class="col-12 col-md-6">
                        <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">{{ $accion->created_at?->format('d/m/Y H:i') ?? 'No disponible' }}</p>
                        </div>
                    </div>
                    <div class="col-12 col-md-6">
                        <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">{{ $accion->updated_at?->format('d/m/Y H:i') ?? 'No disponible' }}</p>
                        </div>
                    </div>
                </div>

                @if($accion->descripcion)
                    <div class="bg-white border rounded-3 p-3 mb-3 shadow-sm">
                        <p class="text-muted small text-uppercase mb-1 d-flex align-items-center gap-2">
                            <i class="bi bi-card-text text-primary"></i>
                            <span>Descripcion</span>
                        </p>
                        <p class="text-muted mb-0">{{ $accion->descripcion }}</p>
                    </div>
                @endif

                @php
                    $unidadesAsociadas = $accion->planes
                        ->pluck('unidadAtencion')
                        ->filter()
                        ->unique('id')
                        ->values();
                @endphp

                <div class="bg-white border rounded-3 p-3 mb-3 shadow-sm">
                    <p class="text-muted small text-uppercase mb-2 d-flex align-items-center gap-2">
                        <i class="bi bi-diagram-3-fill text-primary"></i>
                        <span>Planes asociados</span>
                    </p>
                    <div class="d-flex flex-wrap gap-2 align-items-center">
                        @if($accion->planes->isNotEmpty())
                            @foreach($accion->planes as $plan)
                                <a href="{{ route('planes.show', $plan) }}" class="badge bg-body-tertiary text-dark border text-decoration-none">
                                    {{ $plan->titulo }}
                                </a>
                            @endforeach
                        @else
                            <span class="text-muted small">Sin plan asignado</span>
                        @endif
                    </div>
                </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-building text-primary"></i>
                        <span>Unidades de atención</span>
                    </p>
                    <div class="d-flex flex-wrap gap-2 align-items-center">
                        @if($unidadesAsociadas->isNotEmpty())
                            @foreach($unidadesAsociadas as $unidad)
                                <span class="badge bg-body-tertiary text-dark border">
                                    {{ $unidad->nombre_comercial ?? 'Unidad' }}
                                </span>
                            @endforeach
                        @else
                            <span class="text-muted small">Sin unidad asociada</span>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <div class="card border-0 shadow-sm">
            <div class="card-body p-4">
                <div class="bg-light border rounded-3 p-3">
                    <div class="d-flex flex-wrap justify-content-between align-items-start gap-3 mb-3">
                        <div class="d-flex align-items-start gap-2">
                            <span class="d-inline-flex align-items-center justify-content-center rounded-circle bg-primary-subtle text-primary"
                                  style="width:30px;height:30px;">
                                <i class="bi bi-people-fill"></i>
                            </span>
                            <div>
                                <h2 class="h6 fw-bold mb-1">Responsables Innova</h2>
                                <p class="text-muted small mb-0">
                                    {{ $puedeGestionarAccion ? 'Asigna uno o más funcionarios a esta acción.' : 'Responsables asignados a esta acción.' }}
                                </p>
                            </div>
                        </div>
                        @if($puedeGestionarAccion)
                            <form method="POST"
                                  action="{{ route('acciones.addResponsable', $accion) }}"
                                  class="d-flex flex-wrap gap-2 ms-auto align-items-center"
                                  style="max-width:460px;width:100%;">
                                @csrf
                                <div class="position-relative flex-grow-1" style="min-width:240px;">
                                    <input type="search"
                                           id="funcionario_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 funcionario por nombre o apellido"
                                           autocomplete="off"
                                           {{ $accionEliminada ? 'disabled' : '' }}>
                                    <span class="position-absolute top-50 end-0 translate-middle-y me-3 text-primary pe-none">
                                        <i class="bi bi-search"></i>
                                    </span>
                                    <input type="hidden" name="funcionario_id" id="funcionario_id_hidden">
                                    <div id="funcionario-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 id="funcionario-error" class="text-danger small d-none w-100"></div>
                                @error('funcionario_id')
                                    <div class="text-danger small w-100">{{ $message }}</div>
                                @enderror
                            </form>
                        @endif
                    </div>

                    <div class="d-flex flex-wrap gap-2">
                        @forelse($accion->responsables as $responsable)
                            <div class="d-inline-flex align-items-center gap-2 px-3 py-2 rounded-pill border bg-white shadow-sm">
                                <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">
                                    @if($esFuncionarioAdmin)
                                        <a href="{{ route('funcionarios.show', $responsable) }}"
                                           class="small fw-semibold text-decoration-none text-dark">
                                            {{ $responsable->user->nombre ?? '' }} {{ $responsable->user->apellido ?? '' }}
                                        </a>
                                    @else
                                        <span class="small fw-semibold">{{ $responsable->user->nombre ?? '' }} {{ $responsable->user->apellido ?? '' }}</span>
                                    @endif
                                    <span class="text-muted" style="font-size:.72rem;">{{ $responsable->rol?->label() ?? 'Funcionario' }}</span>
                                </div>
                                @if($puedeGestionarAccion && !$accionEliminada)
                                    <form action="{{ route('acciones.removeResponsable', [$accion, $responsable]) }}" method="POST" onsubmit="return confirm('¿Quitar responsable?');">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" 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>
                                    </form>
                                @endif
                            </div>
                        @empty
                            <div class="d-flex align-items-center gap-2 text-muted small">
                                <i class="bi bi-info-circle"></i>
                                <span>Sin responsables asignados.</span>
                            </div>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Modal de confirmación de eliminación --}}
    @if($puedeGestionarAccion)
        <x-delete-confirmation-modal
            :id="$accion->id"
            title="Confirmar eliminación de acción"
            :entity-name="$accion->detalle_accion"
            :entity-data="[
                'subtitle' => 'Estado: ' . $estadoLabel,
                'details' => [
                    '<strong>Responsables:</strong> ' . ($accion->responsables->isNotEmpty()
                        ? $accion->responsables
                            ->map(fn ($responsable) => trim(($responsable->user->nombre ?? '') . ' ' . ($responsable->user->apellido ?? '')))
                            ->filter()
                            ->join(', ')
                        : 'Sin responsables'),
                    '<strong>Vencimiento:</strong> ' . ($accion->fecha_vencimiento ? $accion->fecha_vencimiento->format('d/m/Y') : 'Sin vencimiento'),
                    '<strong>Planes asociados:</strong> ' . $accion->planes->count()
                ]
            ]"
            warning-message="Esta acción eliminará permanentemente la acción. Si está asociada a planes de acción, la relación se eliminará también."
            :route="route('acciones.destroy', $accion)"
            button-text="Eliminar acción"
            :show-avatar="false"
        />
    @endif
@endsection

@push('scripts')
    <script>
        (() => {
            const toast = document.getElementById('accion-success-toast');
            if (toast) {
                setTimeout(() => {
                    toast.style.transition = 'opacity .35s ease';
                    toast.classList.add('opacity-0');
                    setTimeout(() => toast.remove(), 360);
                }, 2200);
            }

            const funcionarioInput = document.getElementById('funcionario_lookup');
            const funcionarioSuggestions = document.getElementById('funcionario-suggestions');
            const funcionarioHidden = document.getElementById('funcionario_id_hidden');
            const funcionarioError = document.getElementById('funcionario-error');
            const form = funcionarioInput?.closest('form');
            const funcionarios = @json($funcionariosLookup);
            let debounceTimer = null;

            if (!funcionarioInput || !funcionarioSuggestions || !funcionarioHidden || !form || funcionarioInput.disabled) {
                return;
            }

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

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

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

            const selectFuncionario = (funcionario, submitAfterSelect = false) => {
                funcionarioInput.value = `${funcionario.nombre} (${funcionario.rol})`;
                funcionarioHidden.value = funcionario.id;
                clearError();
                hideSuggestions();

                if (submitAfterSelect) {
                    form.requestSubmit();
                }
            };

            const renderSuggestions = (items) => {
                funcionarioSuggestions.innerHTML = '';
                if (!items.length) {
                    hideSuggestions();
                    return;
                }

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

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

            const filterFuncionarios = () => {
                const term = funcionarioInput.value.trim().toLowerCase();
                funcionarioHidden.value = '';

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

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

                renderSuggestions(matches);
            };

            const trySelectSingleMatch = () => {
                const term = funcionarioInput.value.trim().toLowerCase();
                if (!term) return false;

                const matches = funcionarios.filter((item) => item.nombre.toLowerCase().includes(term));
                if (matches.length === 1) {
                    selectFuncionario(matches[0]);
                    return true;
                }

                return false;
            };

            funcionarioInput.addEventListener('input', () => {
                clearError();
                clearTimeout(debounceTimer);
                debounceTimer = setTimeout(filterFuncionarios, 180);
            });

            funcionarioInput.addEventListener('keydown', (e) => {
                if (e.key === 'Enter') {
                    if (!trySelectSingleMatch()) {
                        e.preventDefault();
                        showError('Selecciona un funcionario de la lista.');
                    }
                }

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

            form.addEventListener('submit', (e) => {
                if (!funcionarioHidden.value) {
                    if (trySelectSingleMatch()) {
                        return;
                    }

                    e.preventDefault();
                    showError('Selecciona un funcionario para agregar.');
                }
            });

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