@extends('layouts.app-layout')

@php
    use App\Enums\AccionEstadoEnum;

    $puedeGestionarAcciones = $puedeGestionarAcciones ?? (bool) auth()->user()?->funcionario;
    $volverUrl =
        $volverUrl ??
        (auth()->user()?->funcionario ? route('funcionario.dashboard') : route('contacto.dashboard'));
    $estadoActual = $estado ?? null;
    $planSeleccionado = $planId ?? null;
    $soloMiasValor = $soloMias ? 1 : null;
    $filtroEliminadas = $puedeGestionarAcciones && $estadoActual === 'eliminado';
    $colorBordeCards = match ($estadoActual) {
        AccionEstadoEnum::PENDIENTE->value => '#ffc107',
        AccionEstadoEnum::EN_PROCESO->value => '#0d6efd',
        AccionEstadoEnum::FINALIZADA->value => '#198754',
        'eliminado' => '#dc3545',
        default => '#ff7a1a',
    };
    $colorTextoMostrando = match ($estadoActual) {
        AccionEstadoEnum::PENDIENTE->value => 'var(--bs-warning-text-emphasis)',
        default => $colorBordeCards,
    };
    $colorFondoCards = match ($estadoActual) {
        AccionEstadoEnum::PENDIENTE->value => 'rgba(255,193,7,.06)',
        AccionEstadoEnum::EN_PROCESO->value => 'rgba(13,110,253,.06)',
        AccionEstadoEnum::FINALIZADA->value => 'rgba(25,135,84,.06)',
        'eliminado' => 'rgba(220,53,69,.06)',
        default => '#ffffff',
    };
    $colorSombraCards = match ($estadoActual) {
        AccionEstadoEnum::PENDIENTE->value => 'rgba(255,255,255,.82)',
        AccionEstadoEnum::EN_PROCESO->value => 'rgba(255,255,255,.82)',
        AccionEstadoEnum::FINALIZADA->value => 'rgba(255,255,255,.82)',
        'eliminado' => 'rgba(255,255,255,.82)',
        default => 'rgba(255,255,255,.72)',
    };
    $filtroActivoMensaje = null;
    if ($soloMias) {
        $filtroActivoMensaje = match ($estadoActual) {
            AccionEstadoEnum::PENDIENTE->value => 'Solo tus acciones pendientes asignadas',
            AccionEstadoEnum::EN_PROCESO->value => 'Solo tus acciones en proceso asignadas',
            AccionEstadoEnum::FINALIZADA->value => 'Solo tus acciones finalizadas asignadas',
            'eliminado' => 'Solo tus acciones eliminadas asignadas',
            default => 'Solo tus acciones asignadas',
        };
    }
@endphp

@section('title', 'Acciones - ' . config('app.name'))
@section('navbar_suffix', 'Acciones')

@section('content')
    <div class="container pt-2 pb-4">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <div class="d-flex align-items-center gap-3">
                <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;">Panel de acciones</p>
                    <h1 class="h4 fw-bold mb-3">Acciones</h1>
                </div>
            </div>
            <div class="d-flex flex-column align-items-end gap-1">
                @if ($puedeGestionarAcciones)
                    <a href="{{ route('acciones.create') }}"
                        class="btn btn-sm rounded-circle d-flex align-items-center justify-content-center text-white"
                        style="width:36px;height:36px;background:#ff7a1a;border-color:#ff7a1a;">
                        <i class="bi bi-plus-lg"></i>
                    </a>
                @endif
                @if ($puedeFiltrarSoloMias ?? false)
                    <div class="form-check form-switch mb-0 pe-1" style="margin-top:8px;">
                        <input class="form-check-input" type="checkbox" role="switch" id="solo_mias" name="solo_mias"
                            form="filtro-acciones-form" value="1" {{ $soloMias ? 'checked' : '' }}>
                        <label class="form-check-label small text-muted" for="solo_mias">Ver mis acciones asignadas</label>
                    </div>
                @endif
            </div>
        </div>

        @if (session('success'))
            <div id="acciones-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

        <form method="GET" action="{{ route('acciones.index') }}" class="d-flex flex-column gap-3 mb-4"
            id="filtro-acciones-form">
            <input type="hidden" name="estado" value="{{ $estadoActual }}">
            <input type="hidden" name="plan_id" value="{{ $planSeleccionado }}">
            <div class="row justify-content-center g-2">
                <div class="col-12 col-lg-8 col-xl-7">
                    <div class="input-group rounded-pill overflow-hidden border bg-white shadow-sm"
                        style="border-color:rgba(255,122,26,.38)!important;box-shadow:0 .35rem 1rem rgba(255,122,26,.16)!important;">
                        <input type="search" id="buscador-acciones" name="q" value="{{ $busqueda ?? '' }}"
                            class="form-control border-0 ps-4" placeholder="Buscar por detalle, plan o responsable"
                            autocomplete="off" aria-label="Buscar acciones">
                        <span class="input-group-text bg-white border-0">
                            <i class="bi bi-search text-muted"></i>
                        </span>
                    </div>
                </div>
            </div>
        </form>

        <div class="row g-3 mb-5">
            <div class="col-6 col-md-4 col-xl">
                <a href="{{ route('acciones.index', array_filter(['q' => $busqueda, 'plan_id' => $planSeleccionado, 'solo_mias' => $soloMiasValor])) }}"
                    class="text-decoration-none text-reset d-block h-100">
                    <div class="card shadow-sm h-100 {{ !$estadoActual ? 'border-2' : 'border-0' }}"
                        style="{{ !$estadoActual ? 'box-shadow: 0 .35rem 1rem rgba(255,122,26,.16); border-color:rgba(255,122,26,.45)!important;' : '' }}">
                        <div class="card-body">
                            <p class="text-muted text-uppercase small mb-1">Total</p>
                            <h3 class="h4 fw-bold mb-0">{{ $stats['total'] ?? 0 }}</h3>
                            <span class="badge bg-light text-dark border mt-2">Acciones registradas</span>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-6 col-md-4 col-xl">
                <a href="{{ route('acciones.index', array_filter(['estado' => AccionEstadoEnum::PENDIENTE->value, 'q' => $busqueda, 'plan_id' => $planSeleccionado, 'solo_mias' => $soloMiasValor])) }}"
                    class="text-decoration-none text-reset d-block h-100">
                    <div class="card shadow-sm h-100 {{ $estadoActual === AccionEstadoEnum::PENDIENTE->value ? 'border-2' : 'border-0' }}"
                        style="{{ $estadoActual === AccionEstadoEnum::PENDIENTE->value ? 'box-shadow: 0 .35rem 1rem rgba(255,122,26,.16); border-color:rgba(255,122,26,.45)!important;' : '' }}">
                        <div class="card-body">
                            <p class="text-muted text-uppercase small mb-1">Pendientes</p>
                            <h3 class="h4 fw-bold mb-0">{{ $stats['pendiente'] ?? 0 }}</h3>
                            <span class="badge bg-warning-subtle text-warning-emphasis">En espera</span>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-6 col-md-4 col-xl">
                <a href="{{ route('acciones.index', array_filter(['estado' => AccionEstadoEnum::EN_PROCESO->value, 'q' => $busqueda, 'plan_id' => $planSeleccionado, 'solo_mias' => $soloMiasValor])) }}"
                    class="text-decoration-none text-reset d-block h-100">
                    <div class="card shadow-sm h-100 {{ $estadoActual === AccionEstadoEnum::EN_PROCESO->value ? 'border-2' : 'border-0' }}"
                        style="{{ $estadoActual === AccionEstadoEnum::EN_PROCESO->value ? 'box-shadow: 0 .35rem 1rem rgba(255,122,26,.16); border-color:rgba(255,122,26,.45)!important;' : '' }}">
                        <div class="card-body">
                            <p class="text-muted text-uppercase small mb-1">En proceso</p>
                            <h3 class="h4 fw-bold mb-0">{{ $stats['en_proceso'] ?? 0 }}</h3>
                            <span class="badge bg-primary-subtle text-primary">Ejecutándose</span>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-6 col-md-4 col-xl">
                <a href="{{ route('acciones.index', array_filter(['estado' => AccionEstadoEnum::FINALIZADA->value, 'q' => $busqueda, 'plan_id' => $planSeleccionado, 'solo_mias' => $soloMiasValor])) }}"
                    class="text-decoration-none text-reset d-block h-100">
                    <div class="card shadow-sm h-100 {{ $estadoActual === AccionEstadoEnum::FINALIZADA->value ? 'border-2' : 'border-0' }}"
                        style="{{ $estadoActual === AccionEstadoEnum::FINALIZADA->value ? 'box-shadow: 0 .35rem 1rem rgba(255,122,26,.16); border-color:rgba(255,122,26,.45)!important;' : '' }}">
                        <div class="card-body">
                            <p class="text-muted text-uppercase small mb-1">Finalizadas</p>
                            <h3 class="h4 fw-bold mb-0">{{ $stats['finalizada'] ?? 0 }}</h3>
                            <span class="badge bg-success-subtle text-success">Completadas</span>
                        </div>
                    </div>
                </a>
            </div>
            @if ($puedeGestionarAcciones)
                <div class="col-6 col-md-4 col-xl">
                    <a href="{{ route('acciones.index', array_filter(['estado' => 'eliminado', 'q' => $busqueda, 'plan_id' => $planSeleccionado, 'solo_mias' => $soloMiasValor])) }}"
                        class="text-decoration-none text-reset d-block h-100">
                        <div class="card shadow-sm h-100 {{ $filtroEliminadas ? 'border-2' : 'border-0' }}"
                            style="{{ $filtroEliminadas ? 'box-shadow: 0 .35rem 1rem rgba(255,122,26,.16); border-color:rgba(255,122,26,.45)!important;' : '' }}">
                            <div class="card-body">
                                <p class="text-muted text-uppercase small mb-1">Eliminadas</p>
                                <h3 class="h4 fw-bold mb-0">{{ $stats['eliminada'] ?? 0 }}</h3>
                                <span class="badge bg-danger-subtle text-danger">Archivadas</span>
                            </div>
                        </div>
                    </a>
                </div>
            @endif
        </div>

        @if (($puedeFiltrarSoloMias ?? false) && $soloMias && $filtroActivoMensaje)
            <div class="d-flex align-items-center mb-3">
                <span class="badge rounded-pill px-3 py-2 fw-semibold d-inline-flex align-items-center gap-2"
                    style="background-color:{{ $colorFondoCards }};color:{{ $colorTextoMostrando }};border:1px solid {{ $colorBordeCards }}55;">
                    <span class="rounded-circle d-inline-block"
                        style="width:8px;height:8px;background-color:{{ $colorBordeCards }};"></span>
                    Mostrando: {{ $filtroActivoMensaje }}
                </span>
            </div>
        @endif

        <div class="d-flex flex-column" style="min-height: 420px;">
            <div class="d-flex flex-column gap-3 grow">
                @forelse($acciones as $accion)
                    @php
                        $accionEliminada = method_exists($accion, 'trashed') && $accion->trashed();
                        $estadoAccion = $accionEliminada
                            ? 'eliminado'
                            : ($accion->estado instanceof AccionEstadoEnum ? $accion->estado->value : (string) $accion->estado);
                        $accionVencida = $accion->fecha_vencimiento && $accion->fecha_vencimiento->lt(now()->startOfDay());
                        $colorBordeAccion = !$estadoActual ? '#ff7a1a' : match ($estadoAccion) {
                            AccionEstadoEnum::PENDIENTE->value => '#ffc107',
                            AccionEstadoEnum::EN_PROCESO->value => '#0d6efd',
                            AccionEstadoEnum::FINALIZADA->value => '#198754',
                            'eliminado' => '#dc3545',
                            default => $colorBordeCards,
                        };
                        $colorBordeContenedor = !$estadoActual ? 'rgba(255,122,26,.35)' : match ($estadoAccion) {
                            AccionEstadoEnum::PENDIENTE->value => 'rgba(255,193,7,.38)',
                            AccionEstadoEnum::EN_PROCESO->value => 'rgba(13,110,253,.35)',
                            AccionEstadoEnum::FINALIZADA->value => 'rgba(25,135,84,.35)',
                            'eliminado' => 'rgba(220,53,69,.35)',
                            default => 'rgba(255,122,26,.35)',
                        };
                        $estiloCardAccion = "border:0;border-left:4px solid {$colorBordeAccion};";
                        if ($estadoActual) {
                            $estiloCardAccion .=
                                "background-color:{$colorFondoCards};box-shadow:0 .35rem 1rem {$colorSombraCards},0 .18rem .5rem rgba(15,23,42,.05)!important;";
                        }
                        $planesTexto = $accion->planes->pluck('titulo')->join(' ');
                        $unidadesTexto = $accion->planes
                            ->pluck('unidadAtencion.nombre_comercial')
                            ->filter()
                            ->unique()
                            ->join(' ');
                        $responsablesTexto = $accion->responsables
                            ->map(fn($r) => trim(($r->user->nombre ?? '') . ' ' . ($r->user->apellido ?? '')))
                            ->join(' ');
                        $busquedaRow = mb_strtolower(
                            trim(
                                ($accion->detalle_accion ?? '') .
                                    ' ' .
                                    ($accion->descripcion ?? '') .
                                    ' ' .
                                    $planesTexto .
                                    ' ' .
                                    $unidadesTexto .
                                    ' ' .
                                    $responsablesTexto,
                            ),
                        );
                    @endphp
                    <div class="card shadow-sm position-relative row-accion"
                        style="{{ $estiloCardAccion }}" data-busqueda="{{ $busquedaRow }}">
                        <div class="card-body">
                            <a href="{{ route('acciones.show', $accion->id) }}" class="stretched-link"
                                aria-label="Ver accion"></a>
                            <div class="d-flex justify-content-between align-items-start gap-3">
                                <div>
                                    <div class="d-flex align-items-center gap-2 flex-wrap">
                                        <h2 class="h6 fw-bold mb-0 text-break" style="overflow-wrap:anywhere;">
                                            {{ \Illuminate\Support\Str::limit($accion->detalle_accion, 120) }}
                                        </h2>
                                        @if($accion->es_reunion)
                                            <span class="badge bg-info-subtle text-info-emphasis">Reunión</span>
                                        @endif
                                        @if ($accionEliminada && !$filtroEliminadas)
                                            <span class="badge bg-danger-subtle text-danger">Eliminada</span>
                                        @endif
                                        @if ($accion->fecha_vencimiento)
                                            <span class="badge bg-danger-subtle text-danger-emphasis">
                                                Vencimiento:
                                                {{ \Illuminate\Support\Carbon::parse($accion->fecha_vencimiento)->format('d/m/Y') }}
                                            </span>
                                        @endif
                                    </div>
                                    @if ($accion->descripcion)
                                        <p class="text-muted mb-2 mt-2 text-break" style="overflow-wrap:anywhere;">
                                            {{ \Illuminate\Support\Str::limit($accion->descripcion, 220) }}
                                        </p>
                                    @endif
                                    @if ($accionEliminada)
                                        <div class="text-muted small mb-2">
                                            Eliminada: {{ $accion->deleted_at?->format('d/m/Y') }}
                                        </div>
                                    @endif
                                    @php
                                        $titulosPlanes = $accion->planes
                                            ->pluck('titulo')
                                            ->filter()
                                            ->unique()
                                            ->join(', ');
                                        $nombresUnidades = $accion->planes
                                            ->pluck('unidadAtencion.nombre_comercial')
                                            ->filter()
                                            ->unique()
                                            ->join(', ');
                                    @endphp
                                    <div class="text-muted small mt-2 d-flex flex-column gap-1">
                                        <div class="accion-meta-line">
                                            <i class="bi bi-clipboard-check accion-meta-icon"></i>
                                            <span class="text-break" style="overflow-wrap:anywhere;">{{ \Illuminate\Support\Str::limit($titulosPlanes !== '' ? $titulosPlanes : 'Sin plan', 140) }}</span>
                                        </div>
                                        <div class="accion-meta-line">
                                            <i class="bi bi-building accion-meta-icon"></i>
                                            <span class="text-break" style="overflow-wrap:anywhere;">{{ \Illuminate\Support\Str::limit($nombresUnidades !== '' ? $nombresUnidades : 'Sin unidad', 140) }}</span>
                                        </div>
                                        @php
                                            $nombresResponsables = $accion->responsables
                                                ->map(
                                                    fn($responsable) => trim(
                                                        ($responsable->user->nombre ?? '') .
                                                            ' ' .
                                                            ($responsable->user->apellido ?? ''),
                                                    ),
                                                )
                                                ->filter()
                                                ->unique()
                                                ->join(', ');
                                        @endphp
                                        <div class="accion-meta-line">
                                            <i class="bi bi-people accion-meta-icon"></i>
                                            <span class="text-break" style="overflow-wrap:anywhere;">Responsables:
                                                {{ \Illuminate\Support\Str::limit($nombresResponsables !== '' ? $nombresResponsables : 'Sin responsables', 180) }}</span>
                                        </div>
                                    </div>
                                </div>
                                @if ($puedeGestionarAcciones)
                                    <div class="d-flex gap-2 position-relative" style="z-index:3;">
                                        @if ($accionEliminada)
                                            <form action="{{ route('acciones.restore', $accion->id) }}" method="POST">
                                                @csrf
                                                @method('PATCH')
                                                <button type="submit"
                                                    class="btn btn-light btn-sm border shadow-sm rounded-circle d-flex align-items-center justify-content-center position-relative"
                                                    style="width:34px;height:34px;z-index:3;" title="Restaurar">
                                                    <i class="bi bi-arrow-counterclockwise text-success"></i>
                                                </button>
                                            </form>
                                        @else
                                            <a href="{{ route('acciones.edit', $accion) }}"
                                                class="btn btn-outline-primary btn-sm shadow-sm rounded-circle d-flex align-items-center justify-content-center position-relative"
                                                style="width:34px;height:34px;z-index:3;" title="Editar">
                                                <i class="bi bi-pencil"></i>
                                            </a>
                                            <button type="button"
                                                class="btn btn-outline-danger btn-sm shadow-sm rounded-circle d-flex align-items-center justify-content-center position-relative"
                                                style="width:34px;height:34px;z-index:3;" title="Eliminar"
                                                data-bs-toggle="modal"
                                                data-bs-target="#deleteModalaccion-{{ $accion->id }}">
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        @endif
                                    </div>
                                @else
                                    @if (!$accionEliminada && $accionVencida)
                                        <div class="d-flex flex-column align-items-end gap-2 position-relative" style="z-index:3;">
                                            <span class="badge bg-secondary-subtle text-secondary accion-badge-vencida">Vencida</span>
                                        </div>
                                    @endif
                                @endif
                            </div>
                        </div>
                    </div>
                    @if($puedeGestionarAcciones && !$accionEliminada)
                        <x-delete-confirmation-modal
                            :id="'accion-' . $accion->id"
                            title="Confirmar eliminación de acción"
                            :entity-name="$accion->detalle_accion"
                            :entity-data="[
                                'subtitle' => 'Estado: ' . ($estadoAccion !== 'eliminado' ? (App\Enums\AccionEstadoEnum::tryFrom($estadoAccion)?->label() ?? ucfirst($estadoAccion)) : 'Eliminada'),
                                'details' => [
                                    '<strong>Planes vinculados:</strong> ' . ($accion->planes->count() ?: 0),
                                    '<strong>Responsables:</strong> ' . ($accion->responsables->count() ?: 0)
                                ]
                            ]"
                            warning-message="Esta acción se eliminará y quedará disponible para restaurar desde eliminadas."
                            :route="route('acciones.destroy', $accion->id)"
                            button-text="Eliminar acción"
                            :show-avatar="false"
                        />
                    @endif
                @empty
                    <div class="text-center text-muted py-5">
                        {{ $filtroEliminadas ? 'No hay acciones eliminadas.' : 'No hay acciones registradas.' }}
                    </div>
                @endforelse
            </div>
        </div>

        @if ($acciones instanceof \Illuminate\Pagination\LengthAwarePaginator && $acciones->hasPages())
            <div class="d-flex flex-column align-items-center gap-1 mt-4">
                <div class="small text-muted">
                    Mostrando {{ $acciones->firstItem() }}–{{ $acciones->lastItem() }} de {{ $acciones->total() }}
                    resultados
                </div>
                {{ $acciones->withQueryString()->links('pagination::simple-bootstrap-5') }}
            </div>
        @endif
    </div>
@endsection

@push('scripts')
    <script>
        (() => {
            const input = document.getElementById('buscador-acciones');
            const form = document.getElementById('filtro-acciones-form');
            if (!input) return;

            const rows = Array.from(document.querySelectorAll('.row-accion'));
            const hadServerSearch = input.value.trim().length > 0;

            const soloMiasToggle = document.getElementById('solo_mias');

            const filter = () => {
                const term = input.value.trim().toLowerCase();
                rows.forEach(row => {
                    const hay = (row.dataset.busqueda || '').includes(term);
                    row.style.display = hay ? '' : 'none';
                });
            };

            input.addEventListener('input', filter, {
                passive: true
            });

            input.addEventListener('search', () => {
                if (!input.value.trim() && hadServerSearch && form) {
                    form.requestSubmit();
                }
            });

            soloMiasToggle?.addEventListener('change', () => {
                form?.requestSubmit();
            }, {
                passive: true
            });
        })();

        (() => {
            const toast = document.getElementById('acciones-success-toast');
            if (!toast) return;

            setTimeout(() => {
                toast.style.transition = 'opacity .35s ease';
                toast.classList.add('opacity-0');
                setTimeout(() => toast.remove(), 360);
            }, 2200);
        })();
    </script>
@endpush