@extends('layouts.app-layout')

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

@section('content')
    @php
        $user = auth()->user();
        $volverUrl = $user?->contacto
            ? route('contacto.dashboard')
            : route('funcionario.dashboard');
    @endphp

    <div class="container py-4">

        {{-- Top actions (igual a Funcionarios) --}}
        <div class="d-flex align-items-center justify-content-between mb-4">
            <div class="d-flex align-items-center gap-2">
                <a href="{{ $volverUrl }}"
                   class="btn btn-outline-secondary btn-sm rounded-circle d-flex align-items-center justify-content-center ui-icon-btn-36"
                   title="Volver">
                    <i class="bi bi-arrow-left"></i>
                </a>
            </div>

            <a href="{{ route('contactos.create') }}"
               class="btn btn-primary btn-sm rounded-circle d-flex align-items-center justify-content-center ui-icon-btn-36"
               title="Nuevo contacto">
                <i class="bi bi-plus"></i>
            </a>
        </div>

        {{-- Buscador (mismo look) --}}
        <div class="row justify-content-center mb-3">
            <div class="col-12 col-lg-8">
                <div class="d-flex gap-2">
                    <form class="flex-grow-1" method="GET" action="{{ route('contactos.index') }}" id="filtro-form">
                        <input type="hidden" name="filtro" value="{{ $filtro ?? 'activos' }}">
                        <div class="input-group rounded-pill overflow-hidden border bg-white shadow-sm">
                            <input
                                type="search"
                                name="q"
                                value="{{ request('q') ?? '' }}"
                                class="form-control border-0 ps-4"
                                placeholder="Buscar por nombre, apellido, cédula, email o teléfono"
                                id="buscador-contactos"
                                autocomplete="off"
                            >
                            <span class="input-group-text bg-white border-0">
                                <i class="bi bi-search text-muted"></i>
                            </span>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        @php
            $filtroActual = $filtro ?? 'activos';
            $totalCount = $total ?? $contactos->total();
            $activosTotal = $activosCount ?? 0;
            $inactivosTotal = $inactivosCount ?? 0;
        @endphp
        <div class="row justify-content-center mb-4">
            <div class="col-12 col-lg-8">
                <div class="nav nav-pills nav-fill bg-body-tertiary p-1 rounded-pill">
                    <a
                        href="{{ route('contactos.index', ['filtro' => 'todos', 'q' => $busqueda]) }}"
                        class="nav-link rounded-pill d-flex align-items-center justify-content-center gap-1 {{ $filtroActual === 'todos' ? 'active fw-semibold' : '' }}"
                    >
                        <span>Todos</span>
                        <span class="badge rounded-pill px-2 {{ $filtroActual === 'todos' ? 'bg-white text-primary' : 'bg-light text-secondary border' }}">
                            {{ $totalCount }}
                        </span>
                    </a>
                    <a
                        href="{{ route('contactos.index', ['filtro' => 'activos', 'q' => $busqueda]) }}"
                        class="nav-link rounded-pill d-flex align-items-center justify-content-center gap-1 {{ $filtroActual === 'activos' ? 'active fw-semibold' : '' }}"
                    >
                        <span>Activos</span>
                        <span class="badge rounded-pill px-2 {{ $filtroActual === 'activos' ? 'bg-white text-primary' : 'bg-light text-secondary border' }}">
                            {{ $activosTotal }}
                        </span>
                    </a>
                    <a
                        href="{{ route('contactos.index', ['filtro' => 'inactivos', 'q' => $busqueda]) }}"
                        class="nav-link rounded-pill d-flex align-items-center justify-content-center gap-1 {{ $filtroActual === 'inactivos' ? 'active fw-semibold' : '' }}"
                    >
                        <span>Inactivos</span>
                        <span class="badge rounded-pill px-2 {{ $filtroActual === 'inactivos' ? 'bg-white text-primary' : 'bg-light text-secondary border' }}">
                            {{ $inactivosTotal }}
                        </span>
                    </a>
                </div>
            </div>
        </div>

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

                @if(session('error'))
                    <div class="alert alert-danger border-0 shadow rounded-3 mb-0 d-flex align-items-center gap-2 py-2 px-3 js-auto-toast">
                        <i class="bi bi-exclamation-octagon-fill"></i>
                        <span class="small fw-semibold">{{ session('error') }}</span>
                        <button type="button" class="btn-close ms-auto" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif

                @if(session('warning'))
                    <div class="alert alert-warning border-0 shadow rounded-3 mb-0 d-flex align-items-center gap-2 py-2 px-3 js-auto-toast">
                        <i class="bi bi-exclamation-triangle-fill"></i>
                        <span class="small fw-semibold">{{ session('warning') }}</span>
                        <button type="button" class="btn-close ms-auto" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif
            </div>
        @endif

        {{-- Unidades (mantenés el aviso pero con el mismo ancho/layout) --}}
        @if(!$unidadesAtencion->isEmpty())
            <div class="row justify-content-center mb-4">
                <div class="col-12 col-lg-8">
                    <div class="alert alert-info mb-0" role="alert">
                        <strong>Tu(s) unidad(es) de atención:</strong>
                        {{ $unidadesAtencion->pluck('nombre_comercial')->join(', ') }}
                    </div>
                </div>
            </div>
        @endif

        {{-- Lista tipo "cards" (igual a Funcionarios) --}}
        <div class="row justify-content-center">
            <div class="col-12 col-lg-8">
                <div class="d-grid gap-3">
                    @forelse($contactos as $contacto)
                        @php
                            $nombre = $contacto->user->nombre ?? '';
                            $apellido = $contacto->user->apellido ?? '';
                            $cedula = $contacto->user->cedula ?? '—';
                            $email = $contacto->user->email ?? '—';
                            $telefono = $contacto->user->telefono ?? '—';
                            $unidadesTexto = $contacto->unidadesAtencion
                                ->map(fn($u) => $u->nombre_comercial ?? $u->razon_social ?? null)
                                ->filter()
                                ->values()
                                ->join(', ');
                            $unidadesTexto = $unidadesTexto !== '' ? $unidadesTexto : '—';

                            $estadoLabel = 'Inactivo';
                            $estadoClass = 'bg-warning-subtle text-warning-emphasis';
                            $estadoRaw = $contacto->estado->value ?? $contacto->estado;
                            if ($contacto->trashed()) {
                                $estadoLabel = 'Eliminado';
                                $estadoClass = 'bg-danger-subtle text-danger-emphasis';
                            } elseif ($estadoRaw === 'activo') {
                                $estadoLabel = 'Activo';
                                $estadoClass = 'bg-success-subtle text-success-emphasis';
                            }
                            $puedeGestionarActivo = !$contacto->trashed() && $estadoRaw === 'activo';
                            $puedeRestaurar = $contacto->trashed() || $estadoRaw === 'inactivo';

                            $iniciales = mb_substr($nombre,0,1) . mb_substr($apellido,0,1);

                            $busquedaRow = strtolower(trim("$nombre $apellido $cedula $email $telefono $unidadesTexto"));

                            $tieneUnidadCompartidaTitular = $unidadesTitularIds->isNotEmpty()
                                && $contacto->unidadesAtencion->pluck('id')->intersect($unidadesTitularIds)->isNotEmpty();

                            $puedeInactivarContacto = $puedeInactivarComoAdmin || $tieneUnidadCompartidaTitular;
                        @endphp

                        <div class="card shadow-sm row-contacto position-relative" data-busqueda="{{ $busquedaRow }}">
                            <div class="card-body d-flex flex-column flex-md-row align-items-start align-items-md-center gap-3">
                                <a href="{{ route('contactos.show', $contacto) }}"
                                   class="stretched-link"
                                   aria-label="Ver contacto"></a>

                                {{-- Avatar --}}
                                <div class="rounded-circle bg-body-tertiary d-flex align-items-center justify-content-center fw-semibold ui-avatar-42">
                                    {{ $iniciales }}
                                </div>

                                {{-- Info --}}
                                <div class="flex-grow-1">
                                    <div class="d-flex align-items-center gap-2 flex-wrap">
                                        <div class="fw-semibold">{{ $nombre }} {{ $apellido }}</div>

                                        <span class="badge {{ $estadoClass }}">
                                            {{ $estadoLabel }}
                                        </span>
                                    </div>

                                    <div class="text-muted small mt-1">
                                        <span class="d-inline-flex align-items-center">
                                            <i class="bi bi-building me-1" aria-hidden="true"></i> {{ $unidadesTexto }}
                                        </span>
                                    </div>

                                    <div class="text-muted small d-flex flex-wrap gap-3">
                                        <span class="d-inline-flex align-items-center">
                                            <i class="bi bi-credit-card-2-front me-1"></i> {{ $cedula }}
                                        </span>
                                        <span class="d-inline-flex align-items-center">
                                            <i class="bi bi-envelope me-1"></i> {{ $email }}
                                        </span>
                                        <span class="d-inline-flex align-items-center">
                                            <i class="bi bi-telephone me-1"></i> {{ $telefono }}
                                        </span>
                                    </div>
                                </div>

                                {{-- Acciones --}}
                                <div class="d-flex align-items-center gap-2 mt-2 mt-md-0 ms-auto position-relative ui-z-2">
                                    <a href="{{ route('contactos.show', $contacto) }}"
                                       class="btn btn-light btn-sm border shadow-sm rounded-circle d-flex align-items-center justify-content-center flex-shrink-0 ui-icon-btn-34"
                                       title="Ver">
                                        <i class="bi bi-eye text-primary"></i>
                                    </a>

                                    @if($puedeGestionarActivo)
                                        <a href="{{ route('contactos.edit', $contacto) }}"
                                           class="btn btn-light btn-sm border shadow-sm rounded-circle d-flex align-items-center justify-content-center flex-shrink-0 ui-icon-btn-34"
                                           title="Editar">
                                            <i class="bi bi-pencil text-secondary"></i>
                                        </a>

                                        <button
                                            type="button"
                                            class="btn btn-outline-danger btn-sm rounded-circle d-flex align-items-center justify-content-center flex-shrink-0 ui-icon-btn-34"
                                            title="Eliminar"
                                            data-bs-toggle="modal"
                                            data-bs-target="#deleteModal{{ $contacto->id }}"
                                        >
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    @endif

                                    @if($puedeRestaurar)
                                        <button
                                            type="button"
                                            class="btn btn-outline-success btn-sm rounded-circle d-flex align-items-center justify-content-center ui-icon-btn-34"
                                            title="Reactivar"
                                            onclick="document.getElementById('restore-form-{{ $contacto->id }}').submit()"
                                        >
                                            <i class="bi bi-arrow-counterclockwise"></i>
                                        </button>
                                    @endif
                                </div>

                                @if($puedeInactivarContacto)
                                <form id="restore-form-{{ $contacto->id }}"
                                      action="{{ route('contactos.restore', $contacto) }}"
                                      method="POST"
                                      class="d-none">
                                    @csrf
                                    @method('PATCH')
                                </form>
                                @endif

                            </div>
                        </div>

                        {{-- Modal de confirmación de eliminación --}}
                        @if($puedeGestionarActivo)
                            <x-delete-confirmation-modal
                                :id="$contacto->id"
                                title="Confirmar desactivación de contacto"
                                :entity-name="$nombre . ' ' . $apellido"
                                :entity-data="[
                                    'iniciales' => $iniciales,
                                    'subtitle' => 'CI: ' . $cedula,
                                    'details' => [
                                        '<i class=\'bi bi-envelope me-1\'></i> ' . $email,
                                        '<i class=\'bi bi-telephone me-1\'></i> ' . $telefono
                                    ]
                                ]"
                                warning-message="Esta acción desactivará el perfil del contacto. Los datos se conservarán en el sistema y podrán ser reactivados posteriormente desde la sección de contactos inactivos."
                                :route="route('contactos.destroy', $contacto)"
                                button-text="Desactivar contacto"
                                :show-avatar="true"
                            />
                        @endif
                    @empty
                        <div class="text-center text-muted py-5">
                            @if(!$unidadesAtencion->isEmpty())
                                No hay contactos en tu(s) unidad(es) por el momento.
                            @else
                                No hay contactos registrados.
                            @endif
                        </div>
                    @endforelse
                </div>

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

                {{-- Card “Agregar contacto existente…” (mantenida, mismo ancho) --}}
                @if(!$unidadesAtencion->isEmpty())
                    <div id="mi-equipo" class="card border-0 shadow-sm rounded-4 mt-4">
                        <div class="card-header bg-light border-0 rounded-top-4">
                            <h5 class="mb-0">Agregar contacto existente a tu unidad</h5>
                        </div>
                        <div class="card-body">
                            <form action="{{ route('contactos.attach-to-unit') }}" method="POST" novalidate>
                                @csrf

                                <input type="hidden" id="lookup-cedula-url" value="{{ route('contactos.lookup-cedula') }}">

                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label for="cedula_lookup" class="form-label small text-muted mb-2">
                                            Buscar por cédula
                                        </label>
                                        <div class="input-group">
                                            <input
                                                type="text"
                                                id="cedula_lookup"
                                                class="form-control"
                                                placeholder="Ingresa la cédula"
                                                autocomplete="off"
                                            >
                                            <button class="btn btn-outline-primary" type="button" id="buscar-cedula">
                                                Buscar
                                            </button>
                                        </div>
                                        <div class="form-text">Solo se aceptan coincidencias exactas.</div>
                                        <div class="invalid-feedback d-block d-none" id="cedula-error"></div>
                                    </div>

                                    <div class="col-md-6 mb-3">
                                        <label for="contacto_encontrado" class="form-label small text-muted mb-2">
                                            Contacto encontrado
                                        </label>
                                        <div class="form-control bg-body-tertiary" id="contacto_encontrado">—</div>
                                        <input type="hidden" name="contacto_id" id="contacto_id" value="{{ old('contacto_id') }}">
                                        @error('contacto_id')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-md-6 mb-3">
                                        <label for="unidad_atencion_id" class="form-label small text-muted mb-2">
                                            Unidad de atención
                                        </label>
                                        <select
                                            name="unidad_atencion_id"
                                            id="unidad_atencion_id"
                                            class="form-select @error('unidad_atencion_id') is-invalid @enderror"
                                            required>
                                            <option value="">-- Selecciona una unidad --</option>
                                            @foreach ($unidadesAtencion as $unidad)
                                                <option value="{{ $unidad->id }}"
                                                    {{ old('unidad_atencion_id') == $unidad->id ? 'selected' : '' }}>
                                                    {{ $unidad->nombre_comercial }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('unidad_atencion_id')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-md-6 mb-3">
                                        <label for="rol_en_empresa" class="form-label small text-muted mb-2">
                                            Rol en la unidad
                                        </label>
                                        <select
                                            name="rol_en_empresa"
                                            id="rol_en_empresa"
                                            class="form-select @error('rol_en_empresa') is-invalid @enderror"
                                            required>
                                            <option value="">-- Selecciona un rol --</option>
                                            <option value="titular"   @selected(old('rol_en_empresa') === 'titular')>Titular</option>
                                            <option value="socio"     @selected(old('rol_en_empresa') === 'socio')>Socio/a</option>
                                            <option value="encargado" @selected(old('rol_en_empresa') === 'encargado')>Encargado/a</option>
                                            <option value="otro"      @selected(old('rol_en_empresa') === 'otro')>Otro</option>
                                        </select>
                                        @error('rol_en_empresa')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <div class="d-flex gap-2">
                                    <button type="submit" class="btn btn-success" id="agregar-contacto-btn" disabled>
                                        <i class="bi bi-plus-circle me-2"></i>Agregar contacto
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                @endif

            </div>
        </div>

    </div>
@endsection

@push('scripts')
    <script>
        (() => {
            const toasts = Array.from(document.querySelectorAll('#contactos-toasts .js-auto-toast'));
            if (!toasts.length) return;

            toasts.forEach((toast, index) => {
                setTimeout(() => {
                    toast.style.transition = 'opacity .35s ease';
                    toast.classList.add('opacity-0');
                    setTimeout(() => toast.remove(), 360);
                }, 2200 + (index * 250));
            });
        })();

        (() => {
            const input = document.getElementById('buscador-contactos');
            const form = document.getElementById('filtro-form');
            if (!input) return;

            const rows = Array.from(document.querySelectorAll('.row-contacto'));
            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