@extends('layouts.app-layout')

@section('title', 'Detalle de contacto')

@section('content')
    @php
        $isOwnProfile = auth()->check() && auth()->user()->contacto?->id === $contacto->id;
        $backUrl = $isOwnProfile ? route('contacto.dashboard') : route('contactos.index');

        $estadoRaw = $contacto->estado->value ?? $contacto->estado;
        $estadoLabel = 'Inactivo';
        $estadoClass = 'bg-warning-subtle text-warning-emphasis';

        if ($contacto->trashed()) {
            $estadoLabel = 'Eliminado';
            $estadoClass = 'bg-danger-subtle text-danger-emphasis';
        } elseif ($estadoRaw === 'activo') {
            $estadoLabel = 'Activo';
            $estadoClass = 'bg-success-subtle text-success-emphasis';
        }

        $puedeRestaurar = $contacto->trashed() || $estadoRaw === 'inactivo';
        $puedeEditar = !$contacto->trashed();
        $puedeInactivar = $puedeInactivar ?? false;

        $nombre = trim(($contacto->user->nombre ?? '') . ' ' . ($contacto->user->apellido ?? ''));
        $iniciales = mb_strtoupper(
            mb_substr($contacto->user->nombre ?? '', 0, 1) . mb_substr($contacto->user->apellido ?? '', 0, 1),
        );

        $authUser = auth()->user();
        $funcionarioAuth = $authUser?->funcionario;
        $funcionarioEstado = $funcionarioAuth?->estado?->value ?? $funcionarioAuth?->estado;
        $puedeVerTodasUnidades = (bool) $funcionarioAuth
            && $funcionarioEstado === \App\Enums\UserStatusEnum::ACTIVO->value;
        $unidadesAccesiblesIds = $puedeVerTodasUnidades
            ? collect()
            : ($authUser?->contacto?->unidadesAtencion()->pluck('unidades_atencion.id') ?? collect());

        $rolesPorUnidad = $contacto->unidadesAtencion->map(function ($unidad) use ($puedeVerTodasUnidades, $unidadesAccesiblesIds) {
            $rolPivot = $unidad->pivot->rol_en_empresa ?? null;

            if ($rolPivot instanceof \App\Enums\RolEnEmpresaEnum) {
                $rolLabel = $rolPivot->label();
            } else {
                $rolRaw = is_scalar($rolPivot) ? (string) $rolPivot : '';
                $rolLabel = $rolRaw !== '' ? ucfirst(str_replace('_', ' ', $rolRaw)) : '—';
            }

            return [
                'unidad_id' => $unidad->id,
                'unidad' => $unidad->nombre_comercial ?? 'Unidad',
                'rol' => $rolLabel,
                'puede_ver' => $puedeVerTodasUnidades || $unidadesAccesiblesIds->contains($unidad->id),
            ];
        });
    @endphp

    <style>
        .contacto-show {
            --fs-blue: #0d6efd;
            --fs-blue-dark: #0a58ca;
            --fs-orange: #f97316;
            --fs-ink: #1f2937;
            --fs-muted: #6b7280;
        }

        .contacto-show .fs-hero {
            background: linear-gradient(120deg, var(--fs-blue) 0%, var(--fs-blue-dark) 60%, var(--fs-orange) 160%);
            border: 0;
            border-radius: 1.25rem;
            box-shadow: 0 18px 45px rgba(13, 110, 253, 0.22);
            color: #fff;
            overflow: hidden;
            position: relative;
        }

        .contacto-show .fs-hero::after {
            background: radial-gradient(circle, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 68%);
            content: "";
            height: 220px;
            position: absolute;
            right: -80px;
            top: -95px;
            width: 220px;
        }

        .contacto-show .fs-avatar {
            align-items: center;
            background: rgba(255, 255, 255, 0.22);
            border: 1px solid rgba(255, 255, 255, 0.35);
            border-radius: 50%;
            display: inline-flex;
            font-size: 1.3rem;
            font-weight: 700;
            height: 64px;
            justify-content: center;
            width: 64px;
        }

        .contacto-show .fs-icon-btn {
            align-items: center;
            border-radius: 50%;
            display: inline-flex;
            height: 38px;
            justify-content: center;
            padding: 0;
            width: 38px;
        }

        .contacto-show .fs-icon-btn-back {
            border-color: rgba(255, 255, 255, 0.55);
            color: #fff;
        }

        .contacto-show .fs-icon-btn-back:hover {
            background: rgba(255, 255, 255, 0.14);
            border-color: #fff;
            color: #fff;
        }

        .contacto-show .fs-icon-btn-edit {
            color: var(--fs-blue-dark);
        }

        .contacto-show .fs-icon-btn-edit:hover {
            background: #fff;
            color: var(--fs-blue-dark);
        }

        .contacto-show .fs-icon-btn-delete {
            background: #fff;
            border-color: #fff;
            color: #dc3545;
        }

        .contacto-show .fs-icon-btn-delete:hover {
            background: #fff;
            border-color: #fff;
            color: #b02a37;
        }

        .contacto-show .fs-panel {
            border: 0;
            border-radius: 1rem;
            box-shadow: 0 8px 26px rgba(15, 23, 42, 0.08);
        }

        .contacto-show .fs-panel-title {
            color: var(--fs-ink);
            font-size: 0.95rem;
            font-weight: 700;
            letter-spacing: 0.03em;
            text-transform: uppercase;
        }

        .contacto-show .fs-info-label {
            color: var(--fs-muted);
            font-size: 0.76rem;
            letter-spacing: 0.03em;
            text-transform: uppercase;
        }

        .contacto-show .fs-info-value {
            color: var(--fs-ink);
            font-weight: 600;
        }

        .contacto-show .fs-unidad-link {
            color: inherit;
            text-decoration: none;
            transition: box-shadow .18s ease, transform .18s ease;
        }

        .contacto-show .fs-unidad-link:hover {
            box-shadow: 0 .2rem .5rem rgba(15, 23, 42, .12);
            transform: translateY(-1px);
        }

        .contacto-show .fs-fade {
            animation: fsFadeUp .32s ease-out both;
        }

        .contacto-show .fs-fade-delay {
            animation-delay: .08s;
        }

        .contacto-show .fs-fade-delay-2 {
            animation-delay: .16s;
        }

        @keyframes fsFadeUp {
            from {
                opacity: 0;
                transform: translateY(8px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @media (max-width: 768px) {
            .contacto-show .fs-actions form {
                flex: 1 1 100%;
            }

            .contacto-show .fs-actions form .btn {
                width: 100%;
            }
        }
    </style>

    <div class="container py-4 contacto-show">
        @if (session('success'))
            <div class="alert alert-success border-0 shadow-sm mb-3 fs-fade" role="alert">
                {{ session('success') }}
            </div>
        @endif

        @if ($contacto->trashed())
            <div class="alert alert-warning border-0 shadow-sm mb-3 fs-fade" role="alert">
                Este contacto está inactivo/eliminado. Puedes reactivarlo para habilitarlo nuevamente.
            </div>
        @endif

        <div class="fs-hero p-4 p-lg-5 mb-4 fs-fade">
            <div class="row align-items-center g-4 position-relative" style="z-index:1;">
                <div class="col-lg-8">
                    <div class="d-flex align-items-start gap-3">
                        <span class="fs-avatar">{{ $iniciales ?: 'C' }}</span>
                        <div>
                            <p class="text-white-50 mb-1 small text-uppercase" style="letter-spacing:.08em;">Perfil contacto
                            </p>
                            <h1 class="h3 mb-2 fw-bold">{{ $nombre ?: 'Contacto' }}</h1>
                            <div class="d-flex flex-wrap gap-2 align-items-center">
                                <span class="badge text-bg-light border">{{ $contacto->unidadesAtencion->count() }}
                                    unidad(es)</span>
                                <span class="badge {{ $estadoClass }}">{{ $estadoLabel }}</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4">
                    <div class="d-flex flex-wrap justify-content-lg-end gap-2 fs-actions">
                        <a href="{{ $backUrl }}" class="btn btn-outline-light fs-icon-btn fs-icon-btn-back"
                            title="Volver" aria-label="Volver">
                            <i class="bi bi-arrow-left"></i>
                        </a>

                        @if ($puedeEditar)
                            <a href="{{ route('contactos.edit', $contacto) }}"
                                class="btn btn-light fs-icon-btn fs-icon-btn-edit" title="Editar" aria-label="Editar">
                                <i class="bi bi-pencil"></i>
                            </a>
                        @endif

                        @if ($puedeInactivar)
                            <button type="button" class="btn btn-light fs-icon-btn fs-icon-btn-delete"
                                data-bs-toggle="modal" data-bs-target="#deleteModal{{ $contacto->id }}" title="Eliminar"
                                aria-label="Eliminar">
                                <i class="bi bi-trash"></i>
                            </button>
                        @endif

                        @if ($puedeRestaurar)
                            <form action="{{ route('contactos.restore', $contacto) }}" method="POST">
                                @csrf
                                @method('PATCH')
                                <button type="submit" class="btn btn-success btn-sm px-3">
                                    <i class="bi bi-arrow-counterclockwise me-1"></i> Reactivar
                                </button>
                            </form>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <div class="row g-4">
            <div class="col-12 col-lg-7 fs-fade fs-fade-delay">
                <div class="card fs-panel h-100">
                    <div class="card-body p-4">
                        <h2 class="fs-panel-title mb-4">Datos personales</h2>

                        <div class="row g-3">
                            <div class="col-md-6">
                                <div class="fs-info-label mb-1">Email</div>
                                <div class="fs-info-value">{{ $contacto->user->email }}</div>
                            </div>
                            <div class="col-md-6">
                                <div class="fs-info-label mb-1">Cedula</div>
                                <div class="fs-info-value">{{ $contacto->user->cedula ?? '—' }}</div>
                            </div>
                            <div class="col-md-6">
                                <div class="fs-info-label mb-1">Telefono</div>
                                <div class="fs-info-value">{{ $contacto->user->telefono ?? '—' }}</div>
                            </div>
                            <div class="col-md-6">
                                <div class="fs-info-label mb-1">Consentimiento de datos</div>
                                <div class="fs-info-value">
                                    {{ $contacto->consentimiento_datos ? 'Aceptado' : 'No aceptado' }}</div>
                            </div>
                            <div class="col-12">
                                <button type="button" class="btn btn-link p-0" data-bs-toggle="modal"
                                    data-bs-target="#privacyPolicyModal">
                                    Ver Política de privacidad
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-12 col-lg-5 fs-fade fs-fade-delay-2">
                <div class="card fs-panel mb-4">
                    <div class="card-body p-4">
                        <h2 class="fs-panel-title mb-4">Vinculacion</h2>

                        <div class="d-grid gap-3">
                            <div>
                                <div class="fs-info-label mb-1">Roles por unidad</div>
                                <div>
                                    @forelse($rolesPorUnidad as $dato)
                                        <div class="small">
                                            <span class="fs-info-value">{{ $dato['rol'] }}</span>
                                            <span class="text-muted">@ {{ $dato['unidad'] }}</span>
                                        </div>
                                    @empty
                                        <div class="text-muted small">Sin roles asignados</div>
                                    @endforelse
                                </div>
                            </div>
                            <div>
                                <div class="fs-info-label mb-1">Unidades asociadas</div>
                                <div>
                                    @if ($contacto->unidadesAtencion->isEmpty())
                                        <span class="text-muted small">Sin unidades asociadas</span>
                                    @else
                                        @foreach ($contacto->unidadesAtencion as $unidad)
                                            @php
                                                $puedeVerUnidad = $puedeVerTodasUnidades || $unidadesAccesiblesIds->contains($unidad->id);
                                            @endphp
                                            @if($puedeVerUnidad)
                                                <a href="{{ route('unidades-atencion.show', $unidad) }}"
                                                   class="badge bg-body-tertiary text-dark border me-1 mb-1 fs-unidad-link">
                                                    {{ $unidad->nombre_comercial }}
                                                </a>
                                            @else
                                                <span class="badge bg-body-tertiary text-dark border me-1 mb-1">
                                                    {{ $unidad->nombre_comercial }}
                                                </span>
                                            @endif
                                        @endforeach
                                    @endif
                                </div>
                            </div>
                            <div>
                                <div class="fs-info-label mb-1">Estado</div>
                                <div><span class="badge {{ $estadoClass }}">{{ $estadoLabel }}</span></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card fs-panel">
                    <div class="card-body p-4">
                        <h2 class="fs-panel-title mb-4">Trazabilidad</h2>

                        <div class="d-grid gap-3">
                            <div>
                                <div class="fs-info-label mb-1">Creado</div>
                                <div class="fs-info-value">{{ $contacto->created_at->format('d/m/Y H:i') }}</div>
                            </div>
                            <div>
                                <div class="fs-info-label mb-1">Ultima actualizacion</div>
                                <div class="fs-info-value">{{ $contacto->updated_at->format('d/m/Y H:i') }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    @include('partials.privacy-policy-modal')

    @if ($puedeInactivar)
        <x-delete-confirmation-modal :id="$contacto->id" title="Confirmar desactivacion de contacto" :entity-name="$contacto->user->nombre . ' ' . $contacto->user->apellido"
            :entity-data="[
                'subtitle' => 'CI: ' . ($contacto->user->cedula ?? '—'),
                'details' => [
                    '<strong>Consentimiento:</strong> ' .
                    ($contacto->consentimiento_datos ? 'Aceptado' : 'No aceptado'),
                    '<i class=\'bi bi-envelope me-1\'></i> ' . $contacto->user->email,
                    '<i class=\'bi bi-telephone me-1\'></i> ' . ($contacto->user->telefono ?? '—'),
                    '<strong>Unidades:</strong> ' .
                    ($contacto->unidadesAtencion->isEmpty()
                        ? 'Sin unidades asociadas'
                        : $contacto->unidadesAtencion->pluck('nombre_comercial')->join(', ')),
                ],
            ]"
            warning-message="Esta accion desactivara el perfil del contacto. Los datos se conservaran en el sistema y podran ser reactivados posteriormente."
            :route="route('contactos.destroy', $contacto)" button-text="Desactivar contacto" :show-avatar="false" />
    @endif
@endsection