@extends('layouts.app-layout')

@php
    use App\Enums\PlanAccionEstadoEnum;

    $puedeGestionarPlanes = $puedeGestionarPlanes ?? (bool) auth()->user()?->funcionario;
    $volverUrl =
        $volverUrl ??
        (auth()->user()?->funcionario ? route('funcionario.dashboard') : route('contacto.dashboard'));
    $estadoActual = $estado ?? null;
    $esVistaTotal = blank($estadoActual) || $estadoActual === 'total';
    $filtroEliminados = $puedeGestionarPlanes && $estadoActual === 'eliminado';
    $colorBordeCards = match ($estadoActual) {
        PlanAccionEstadoEnum::ASIGNADO->value => '#ffc107',
        PlanAccionEstadoEnum::EN_PROCESO->value => '#0d6efd',
        PlanAccionEstadoEnum::FINALIZADO->value => '#198754',
        'eliminado' => '#dc3545',
        default => '#0d6efd',
    };
    $colorFondoCards = match ($estadoActual) {
        PlanAccionEstadoEnum::ASIGNADO->value => 'rgba(255,193,7,.06)',
        PlanAccionEstadoEnum::EN_PROCESO->value => 'rgba(13,110,253,.06)',
        PlanAccionEstadoEnum::FINALIZADO->value => 'rgba(25,135,84,.06)',
        'eliminado' => 'rgba(220,53,69,.06)',
        default => '#ffffff',
    };
    $colorSombraCards = match ($estadoActual) {
        PlanAccionEstadoEnum::ASIGNADO->value => 'rgba(255,255,255,.82)',
        PlanAccionEstadoEnum::EN_PROCESO->value => 'rgba(255,255,255,.82)',
        PlanAccionEstadoEnum::FINALIZADO->value => 'rgba(255,255,255,.82)',
        'eliminado' => 'rgba(255,255,255,.82)',
        default => 'rgba(255,255,255,.72)',
    };
@endphp

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

@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 planes</p>
                    <h1 class="h4 fw-bold mb-3">Planes de acción</h1>
                </div>
            </div>
            @if ($puedeGestionarPlanes)
                <div class="d-flex flex-column align-items-end gap-1">
                    <a href="{{ route('planes.create') }}"
                        class="btn btn-sm rounded-circle d-flex align-items-center justify-content-center text-white"
                        style="width:36px;height:36px;background:#0d6efd;border-color:#0d6efd;">
                        <i class="bi bi-plus-lg"></i>
                    </a>
                </div>
            @endif
        </div>

        @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        <form method="GET" action="{{ route('planes.index') }}" class="d-flex flex-column gap-3 mb-4"
            id="filtro-planes-form">
            <input type="hidden" name="estado" value="{{ $estadoActual }}">
            <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(13,110,253,.35)!important;box-shadow:0 .35rem 1rem rgba(13,110,253,.14)!important;">
                        <input type="search" id="buscador-planes" name="q" value="{{ $busqueda ?? '' }}"
                            class="form-control border-0 ps-4" placeholder="Buscar por nombre de plan o unidad"
                            autocomplete="off" aria-label="Buscar planes">
                        <span class="input-group-text bg-white border-0 px-3">
                            <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('planes.index', array_filter(['q' => $busqueda])) }}"
                    class="text-decoration-none text-reset d-block h-100">
                    <div class="card shadow-sm h-100 {{ $esVistaTotal ? 'border-2' : 'border-0' }}"
                        style="{{ $esVistaTotal ? 'box-shadow: 0 .35rem 1rem rgba(13,110,253,.16); border-color:rgba(13,110,253,.38)!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">Todos los planes</span>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-6 col-md-4 col-xl">
                <a href="{{ route('planes.index', array_filter(['estado' => PlanAccionEstadoEnum::ASIGNADO->value, 'q' => $busqueda])) }}"
                    class="text-decoration-none text-reset d-block h-100">
                    <div class="card shadow-sm h-100 {{ $estadoActual === PlanAccionEstadoEnum::ASIGNADO->value ? 'border-primary-subtle' : 'border-0' }}"
                        style="{{ $estadoActual === PlanAccionEstadoEnum::ASIGNADO->value ? 'box-shadow: 0 .35rem 1rem rgba(13,110,253,.16); border-color:rgba(13,110,253,.38)!important;' : '' }}">
                        <div class="card-body">
                            <p class="text-muted text-uppercase small mb-1">Asignados</p>
                            <h3 class="h4 fw-bold mb-0">{{ $stats['asignado'] ?? 0 }}</h3>
                            <span class="badge bg-warning-subtle text-warning-emphasis">En inicio</span>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-6 col-md-4 col-xl">
                <a href="{{ route('planes.index', array_filter(['estado' => PlanAccionEstadoEnum::EN_PROCESO->value, 'q' => $busqueda])) }}"
                    class="text-decoration-none text-reset d-block h-100">
                    <div class="card shadow-sm h-100 {{ $estadoActual === PlanAccionEstadoEnum::EN_PROCESO->value ? 'border-primary-subtle' : 'border-0' }}"
                        style="{{ $estadoActual === PlanAccionEstadoEnum::EN_PROCESO->value ? 'box-shadow: 0 .35rem 1rem rgba(13,110,253,.16); border-color:rgba(13,110,253,.38)!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">Avanzando</span>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-6 col-md-4 col-xl">
                <a href="{{ route('planes.index', array_filter(['estado' => PlanAccionEstadoEnum::FINALIZADO->value, 'q' => $busqueda])) }}"
                    class="text-decoration-none text-reset d-block h-100">
                    <div class="card shadow-sm h-100 {{ $estadoActual === PlanAccionEstadoEnum::FINALIZADO->value ? 'border-primary-subtle' : 'border-0' }}"
                        style="{{ $estadoActual === PlanAccionEstadoEnum::FINALIZADO->value ? 'box-shadow: 0 .35rem 1rem rgba(13,110,253,.16); border-color:rgba(13,110,253,.38)!important;' : '' }}">
                        <div class="card-body">
                            <p class="text-muted text-uppercase small mb-1">Finalizados</p>
                            <h3 class="h4 fw-bold mb-0">{{ $stats['finalizado'] ?? 0 }}</h3>
                            <span class="badge bg-success-subtle text-success">Cerrados</span>
                        </div>
                    </div>
                </a>
            </div>
            @if ($puedeGestionarPlanes)
                <div class="col-6 col-md-4 col-xl">
                    <a href="{{ route('planes.index', array_filter(['estado' => 'eliminado', 'q' => $busqueda])) }}"
                        class="text-decoration-none text-reset d-block h-100">
                        <div class="card shadow-sm h-100 {{ $filtroEliminados ? 'border-primary-subtle' : 'border-0' }}"
                            style="{{ $filtroEliminados ? 'box-shadow: 0 .35rem 1rem rgba(13,110,253,.16); border-color:rgba(13,110,253,.38)!important;' : '' }}">
                            <div class="card-body">
                                <p class="text-muted text-uppercase small mb-1">Eliminados</p>
                                <h3 class="h4 fw-bold mb-0">{{ $stats['eliminado'] ?? 0 }}</h3>
                                <span class="badge bg-danger-subtle text-danger">Archivados</span>
                            </div>
                        </div>
                    </a>
                </div>
            @endif
        </div>

        <div class="d-flex flex-column" style="min-height: 420px;">
            <div class="d-flex flex-column gap-3 grow">
                @forelse($planes as $plan)
                    @php
                        $planEliminado = method_exists($plan, 'trashed') && $plan->trashed();
                        $estadoPlan = $planEliminado
                            ? 'eliminado'
                            : ($plan->estado instanceof PlanAccionEstadoEnum
                                ? $plan->estado->value
                                : (string) $plan->estado);
                        $colorBordePlan = $esVistaTotal
                            ? '#0d6efd'
                            : match ($estadoPlan) {
                                PlanAccionEstadoEnum::ASIGNADO->value => '#ffc107',
                                PlanAccionEstadoEnum::EN_PROCESO->value => '#0d6efd',
                                PlanAccionEstadoEnum::FINALIZADO->value => '#198754',
                                'eliminado' => '#dc3545',
                                default => $colorBordeCards,
                            };
                        $colorBordeContenedor = $esVistaTotal
                            ? 'rgba(13,110,253,.35)'
                            : match ($estadoPlan) {
                                PlanAccionEstadoEnum::ASIGNADO->value => 'rgba(255,193,7,.38)',
                                PlanAccionEstadoEnum::EN_PROCESO->value => 'rgba(13,110,253,.35)',
                                PlanAccionEstadoEnum::FINALIZADO->value => 'rgba(25,135,84,.35)',
                                'eliminado' => 'rgba(220,53,69,.35)',
                                default => 'rgba(13,110,253,.35)',
                            };
                        $colorBordeInicialPlan = match ($estadoPlan) {
                            PlanAccionEstadoEnum::ASIGNADO->value => 'rgba(255,193,7,.42)',
                            PlanAccionEstadoEnum::EN_PROCESO->value => 'rgba(13,110,253,.38)',
                            PlanAccionEstadoEnum::FINALIZADO->value => 'rgba(25,135,84,.38)',
                            'eliminado' => 'rgba(220,53,69,.36)',
                            default => 'rgba(13,110,253,.32)',
                        };
                        $estiloCardPlan = "border:0;border-left:4px solid {$colorBordePlan};";
                        if (!$esVistaTotal) {
                            $estiloCardPlan .= "background-color:{$colorFondoCards};box-shadow:0 .35rem 1rem {$colorSombraCards},0 .18rem .5rem rgba(15,23,42,.05)!important;";
                        }
                        $estiloInicialPlan = $esVistaTotal
                            ? 'background:linear-gradient(135deg,#e8f1ff,#d9e8ff);color:#0d4cc0;'
                            : "background:#ffffff;color:#0d4cc0;border:1px solid {$colorBordeInicialPlan};";
                        $estadoEnum =
                            $plan->estado instanceof PlanAccionEstadoEnum
                                ? $plan->estado
                                : PlanAccionEstadoEnum::tryFrom($plan->estado);
                        $acciones = $plan->acciones ?? collect();
                        $accionesTotal = $acciones->count();
                        $accionesFinalizadas = $acciones->where('estado', 'finalizada')->count();
                        $accionesTexto = $acciones->pluck('detalle_accion')->join(' ');
                        $busquedaRow = mb_strtolower(
                            trim(
                                ($plan->titulo ?? '') .
                                    ' ' .
                                    ($plan->unidadAtencion->nombre_comercial ?? '') .
                                    ' ' .
                                    ($plan->descripcion ?? '') .
                                    ' ' .
                                    ($estadoEnum?->label() ?? '') .
                                    ' ' .
                                    $accionesTexto,
                            ),
                        );
                    @endphp
                    <div class="card shadow-sm position-relative row-plan"
                        style="{{ $estiloCardPlan }}" data-busqueda="{{ $busquedaRow }}">
                        <div class="card-body">
                            <a href="{{ route('planes.show', $plan->id) }}" class="stretched-link"
                                aria-label="Ver plan"></a>
                            <div class="d-flex align-items-start justify-content-between gap-3">
                                <div class="d-flex align-items-start gap-3">
                                    <div class="rounded-circle d-flex align-items-center justify-content-center fw-semibold"
                                        style="width:44px;height:44px;{{ $estiloInicialPlan }}">
                                        {{ mb_substr($plan->titulo, 0, 1) }}
                                    </div>
                                    <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($plan->titulo, 120) }}</h2>
                                            @if ($plan->fecha_vencimiento)
                                                <span class="badge bg-danger-subtle text-danger-emphasis">Vencimiento:
                                                    {{ $plan->fecha_vencimiento?->format('d/m/Y') }}</span>
                                            @endif
                                            @if ($planEliminado && !$filtroEliminados)
                                                <span class="badge bg-danger-subtle text-danger">Eliminado</span>
                                            @endif
                                        </div>
                                        <div class="text-muted small text-break" style="overflow-wrap:anywhere;">
                                            Unidad:
                                            <strong>{{ \Illuminate\Support\Str::limit($plan->unidadAtencion->nombre_comercial ?? '—', 100) }}</strong>
                                            @if ($planEliminado)
                                                · Eliminado: {{ $plan->deleted_at?->format('d/m/Y') }}
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                @if ($puedeGestionarPlanes)
                                    <div class="d-flex gap-2 position-relative" style="z-index:3;">
                                        @if ($planEliminado)
                                            <form action="{{ route('planes.restore', $plan->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"
                                                    style="width:34px;height:34px;" title="Restaurar">
                                                    <i class="bi bi-arrow-counterclockwise text-success"></i>
                                                </button>
                                            </form>
                                        @else
                                            <a href="{{ route('planes.edit', $plan) }}"
                                                class="btn btn-outline-primary btn-sm shadow-sm rounded-circle d-flex align-items-center justify-content-center"
                                                style="width:34px;height:34px;" 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"
                                                style="width:34px;height:34px;" title="Eliminar" data-bs-toggle="modal"
                                                data-bs-target="#deleteModalplan-{{ $plan->id }}">
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        @endif
                                    </div>
                                @endif
                            </div>
                            <div class="d-flex flex-wrap gap-3 align-items-center mt-3">
                                <span class="badge bg-light text-dark border">
                                    {{ $accionesTotal }} {{ $accionesTotal === 1 ? 'acción' : 'acciones' }}
                                </span>
                                <span class="badge bg-success-subtle text-success border-0">
                                    {{ $accionesFinalizadas }} finalizada{{ $accionesFinalizadas === 1 ? '' : 's' }}
                                </span>
                            </div>
                            @if ($plan->descripcion)
                                <p class="text-muted mb-0 mt-3 text-break" style="overflow-wrap:anywhere;">
                                    {{ \Illuminate\Support\Str::limit($plan->descripcion, 220) }}</p>
                            @endif
                        </div>
                    </div>
                    @if ($puedeGestionarPlanes && !$planEliminado)
                        <x-delete-confirmation-modal :id="'plan-' . $plan->id" title="Confirmar eliminación de plan de acción"
                            :entity-name="$plan->titulo" :entity-data="[
                                'subtitle' => 'Estado: ' . ($estadoEnum?->label() ?? 'Desconocido'),
                                'details' => [
                                    '<strong>Unidad:</strong> ' . ($plan->unidadAtencion->nombre_comercial ?? 'N/A'),
                                    '<strong>Acciones asociadas:</strong> ' . $accionesTotal,
                                ],
                            ]"
                            warning-message="Esta acción eliminará el plan de acción y quedará disponible para restaurar desde eliminados."
                            :route="route('planes.destroy', $plan->id)" button-text="Eliminar plan"
                            :show-avatar="false" />
                    @endif
                @empty
                    <div class="text-center text-muted py-5">
                        {{ $filtroEliminados ? 'No hay planes eliminados.' : 'No hay planes de acción creados.' }}
                    </div>
                @endforelse
            </div>
        </div>

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

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

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

            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();
                }
            });
        })();
    </script>
@endpush