@extends('layouts.app-layout')

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

    $estadoEnum =
        $plan->estado instanceof PlanAccionEstadoEnum ? $plan->estado : PlanAccionEstadoEnum::tryFrom($plan->estado);
    $estadoClass = $estadoEnum?->badgeClass() ?? 'bg-secondary-subtle text-secondary';
@endphp

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

@section('content')
    @php
        $puedeGestionarPlan = $puedeGestionarPlan ?? (bool) auth()->user()?->funcionario;
        $accionesPlan = $plan->acciones;
        $planEliminado = method_exists($plan, 'trashed') && $plan->trashed();
        $accionesPendientes = $accionesPlan
            ->filter(fn($a) => ($a->estado?->value ?? $a->estado) === 'pendiente')
            ->count();
        $accionesEnProceso = $accionesPlan
            ->filter(fn($a) => ($a->estado?->value ?? $a->estado) === 'en_proceso')
            ->count();
        $accionesFinalizadas = $accionesPlan
            ->filter(fn($a) => ($a->estado?->value ?? $a->estado) === 'finalizada')
            ->count();
        $fechaCreacion =
            optional($plan->fecha_creacion)->format('d/m/Y H:i') ?? $plan->created_at?->format('d/m/Y H:i');
    @endphp

    <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">{{ $plan->titulo }}</h1>
                    @if ($planEliminado)
                        <div class="mt-2">
                            <span class="badge bg-danger-subtle text-danger-emphasis border border-danger-subtle">Plan
                                eliminado (solo lectura)</span>
                        </div>
                    @endif
                </div>
            </div>
            @if ($puedeGestionarPlan && !$planEliminado)
                <div class="d-flex gap-2 mt-1">
                    <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 plan">
                        <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 plan" data-bs-toggle="modal"
                        data-bs-target="#deleteModal{{ $plan->id }}">
                        <i class="bi bi-trash"></i>
                    </button>
                </div>
            @elseif($puedeGestionarPlan)
                <form action="{{ route('planes.restore', $plan->id) }}" method="POST" 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 plan">
                        <i class="bi bi-arrow-counterclockwise"></i>
                        <span>Restaurar</span>
                    </button>
                </form>
            @endif
        </div>

        @if (session('success'))
            <div id="plan-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%);">
                <div class="row g-3 mb-3">
                    <div class="col-12 col-md-3">
                        <div class="bg-white border border-primary-subtle 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-flag-fill text-primary"></i>
                                <span>Estado</span>
                            </p>
                            <span
                                class="badge rounded-pill px-3 py-2 {{ $estadoClass }}">{{ $estadoEnum?->label() ?? '—' }}</span>
                        </div>
                    </div>
                    <div class="col-12 col-md-3">
                        <div class="bg-white border border-primary-subtle 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-shop text-primary"></i>
                                <span>Unidad</span>
                            </p>
                            <p class="mb-0 fw-semibold">{{ $plan->unidadAtencion->nombre_comercial ?? '—' }}</p>
                        </div>
                    </div>
                    <div class="col-12 col-md-3">
                        <div class="bg-white border border-primary-subtle 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-primary"></i>
                                <span>Creado</span>
                            </p>
                            <p class="mb-0 fw-semibold">{{ $fechaCreacion ?? '—' }}</p>
                        </div>
                    </div>
                    <div class="col-12 col-md-3">
                        <div class="bg-white border border-success-subtle 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-clock-history text-success"></i>
                                <span>Vencimiento</span>
                            </p>
                            <p class="mb-0 fw-semibold">
                                {{ $plan->fecha_vencimiento?->format('d/m/Y H:i') ?? 'Sin vencimiento' }}</p>
                        </div>
                    </div>
                </div>

                <div class="row g-3 mb-3">
                    <div class="col-6 col-md-3">
                        <div class="bg-white border rounded-3 p-3 h-100 shadow-sm">
                            <p class="text-muted text-uppercase small mb-1">Acciones</p>
                            <p class="mb-0 fw-bold h5">{{ $accionesPlan->count() }}</p>
                        </div>
                    </div>
                    <div class="col-6 col-md-3">
                        <div class="bg-white border border-warning-subtle rounded-3 p-3 h-100 shadow-sm">
                            <p class="text-muted text-uppercase small mb-1">Pendientes</p>
                            <p class="mb-0 fw-bold h5 text-warning-emphasis">{{ $accionesPendientes }}</p>
                        </div>
                    </div>
                    <div class="col-6 col-md-3">
                        <div class="bg-white border border-primary-subtle rounded-3 p-3 h-100 shadow-sm">
                            <p class="text-muted text-uppercase small mb-1">En proceso</p>
                            <p class="mb-0 fw-bold h5 text-primary">{{ $accionesEnProceso }}</p>
                        </div>
                    </div>
                    <div class="col-6 col-md-3">
                        <div class="bg-white border border-success-subtle rounded-3 p-3 h-100 shadow-sm">
                            <p class="text-muted text-uppercase small mb-1">Finalizadas</p>
                            <p class="mb-0 fw-bold h5 text-success">{{ $accionesFinalizadas }}</p>
                        </div>
                    </div>
                </div>

                @if ($plan->descripcion)
                    <div class="bg-white border rounded-3 p-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>Descripción</span>
                        </p>
                        <p class="text-muted mb-0">{{ $plan->descripcion }}</p>
                    </div>
                @endif
            </div>
        </div>

        <div class="card border-0 shadow-sm mb-4">
            <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-list-task"></i>
                            </span>
                            <div>
                                <h2 class="h6 fw-bold mb-1">Acciones del plan</h2>
                                <p class="text-muted small mb-0">Acciones vinculadas y responsables asignados.</p>
                            </div>
                        </div>
                        @if ($puedeGestionarPlan && !$planEliminado)
                            <a href="{{ route('acciones.create', ['plan' => $plan->id]) }}"
                                class="btn btn-primary btn-sm rounded-circle shadow-sm d-flex align-items-center justify-content-center ms-auto"
                                style="width:34px;height:34px;" title="Nueva acción">
                                <i class="bi bi-plus-lg"></i>
                            </a>
                        @endif
                    </div>
                    <div class="d-grid gap-2 mt-1">
                        @forelse($accionesPlan as $accion)
                            @php
                                $estadoAccionEnum =
                                    $accion->estado instanceof AccionEstadoEnum
                                        ? $accion->estado
                                        : AccionEstadoEnum::tryFrom((string) $accion->estado);
                                $accionClass = match ($estadoAccionEnum) {
                                    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',
                                };
                                $estadoAccionLabel = $estadoAccionEnum?->label() ?? ucfirst((string) $accion->estado);
                            @endphp
                            <div class="card border-0 shadow-sm bg-white">
                                <div class="card-body p-3">
                                    <div class="d-flex justify-content-between align-items-start gap-3">
                                        <div>
                                            <div class="d-flex align-items-center gap-2 flex-wrap">
                                                <h3 class="h6 fw-bold mb-0">{{ $accion->detalle_accion }}</h3>
                                                <span
                                                    class="badge rounded-pill {{ $accionClass }}">{{ $estadoAccionLabel }}</span>
                                                @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">{{ $accion->descripcion }}</p>
                                            @endif
                                            <div class="d-flex flex-wrap gap-2 align-items-center">
                                                <span class="text-muted small">Responsables:</span>
                                                @forelse($accion->responsables as $responsable)
                                                    <span
                                                        class="d-inline-flex align-items-center gap-1 badge bg-body-tertiary text-dark border">
                                                        <i class="bi bi-person-fill text-primary"></i>
                                                        <span>{{ $responsable->user->nombre ?? '' }}
                                                            {{ $responsable->user->apellido ?? '' }}</span>
                                                    </span>
                                                @empty
                                                    <span class="text-muted small">Sin responsables</span>
                                                @endforelse
                                            </div>
                                        </div>
                                        <div class="d-flex align-items-center gap-2">
                                            <a href="{{ route('acciones.show', $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="Ver acción">
                                                <i class="bi bi-eye text-primary"></i>
                                            </a>
                                            @if ($puedeGestionarPlan)
                                                <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"
                                                    style="width:34px;height:34px;" title="Editar acción">
                                                    <i class="bi bi-pencil"></i>
                                                </a>
                                            @endif
                                            @if ($puedeGestionarPlan && !$planEliminado)
                                                <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="Quitar acción"
                                                    data-bs-toggle="modal"
                                                    data-bs-target="#deleteModaldetach-{{ $plan->id }}-{{ $accion->id }}">
                                                    <i class="bi bi-x-lg"></i>
                                                </button>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @if ($puedeGestionarPlan && !$planEliminado)
                                <x-delete-confirmation-modal :id="'detach-' . $plan->id . '-' . $accion->id" title="Confirmar quitar acción del plan"
                                    :entity-name="$accion->detalle_accion" :entity-data="[
                                        'subtitle' => 'Plan: ' . $plan->titulo,
                                        'details' => [
                                            '<strong>Estado:</strong> ' . $estadoAccionLabel,
                                            '<strong>Compromiso:</strong> ' .
                                            ($accion->fecha_vencimiento
                                                ? \Illuminate\Support\Carbon::parse($accion->fecha_vencimiento)->format(
                                                    'd/m/Y',
                                                )
                                                : 'Sin fecha'),
                                        ],
                                    ]"
                                    warning-message="La acción se desvinculará de este plan, pero seguirá existiendo en el sistema."
                                    :route="route('planes.detachAccion', [$plan, $accion])" button-text="Quitar acción"
                                    :show-avatar="false" />
                            @endif
                        @empty
                            <div class="d-flex align-items-center gap-2 text-muted small py-2">
                                <i class="bi bi-info-circle"></i>
                                <span>Este plan aún no tiene acciones asociadas.</span>
                            </div>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Modal de confirmación de eliminación --}}
    @if ($puedeGestionarPlan)
        <x-delete-confirmation-modal :id="$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> ' . $plan->acciones->count(),
                    '<strong>Creado:</strong> ' . $plan->created_at->format('d/m/Y'),
                ],
            ]"
            warning-message="Esta acción eliminará permanentemente el plan de acción y todas sus acciones asociadas. Esta acción NO se puede deshacer."
            :route="route('planes.destroy', $plan)" button-text="Eliminar plan" :show-avatar="false" />
    @endif
@endsection

@push('scripts')
    <script>
        (() => {
            const toast = document.getElementById('plan-success-toast');
            if (!toast) return;

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