@extends('layouts.dashboard.inface', ['section' => 'leads'])

@section('content')
    <div class="mx-auto flex min-h-0 w-full max-w-[1400px] flex-1 flex-col gap-6 overflow-y-auto p-6 md:p-10"
        style="height: calc(100vh - 3.5rem); height: calc(100dvh - 3.5rem); overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch;">
        <div class="mb-2 flex items-center gap-2 text-sm text-[#616f89] dark:text-gray-400">
            <a class="transition-colors hover:text-primary" href="{{ route('realEstate.leads') }}">Prospectos</a>
            <span class="material-symbols-outlined text-sm">chevron_right</span>
            <span class="font-medium text-[#111318] dark:text-white">Detalle del Prospecto</span>
        </div>

        @if (session('success'))
            <div
                class="rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-700 dark:border-emerald-900/40 dark:bg-emerald-900/20 dark:text-emerald-300">
                {{ session('success') }}
            </div>
        @endif

        <div class="grid grid-cols-1 items-start gap-8 lg:grid-cols-12">
            <div class="flex flex-col gap-6 lg:col-span-5">
                <div
                    class="overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-800 dark:bg-[#1a2332]">
                    <div class="flex items-center justify-between border-b border-gray-100 p-6 dark:border-gray-800">
                        <h3 class="text-lg font-bold">Informacion del Prospecto</h3>
                        <a
                            class="flex items-center gap-2 rounded-lg border border-primary/20 px-4 py-2 text-sm font-semibold text-primary transition-all hover:bg-primary/5"
                            href="{{ route('realEstate.lead.create', ['lead_id' => $prospect['id']]) }}">
                            <span class="material-symbols-outlined text-[18px]">edit</span>
                            <span>Editar Prospecto</span>
                        </a>
                    </div>

                    <div class="flex flex-col gap-8 p-8">
                        <div class="flex items-start gap-4">
                            <div
                                class="flex size-20 items-center justify-center rounded-2xl bg-primary/10 text-2xl font-bold text-primary">
                                {{ $prospect['initials'] ?? 'PR' }}
                            </div>
                            <div class="flex flex-col gap-1">
                                <h2 class="text-2xl font-bold">{{ $prospect['fullName'] ?? 'Prospecto sin nombre' }}</h2>
                                <span
                                    class="inline-flex w-fit items-center rounded-full px-2.5 py-0.5 text-xs font-medium {{ $prospect['status']['class'] ?? '' }}">
                                    {{ $prospect['status']['name'] ?? 'Sin estatus' }}
                                </span>
                            </div>
                        </div>

                        <div class="grid grid-cols-1 gap-x-4 gap-y-6 sm:grid-cols-2">
                            <div class="flex flex-col gap-1">
                                <span
                                    class="text-xs font-medium uppercase tracking-wider text-[#616f89] dark:text-gray-400">Correo
                                    Electronico</span>
                                <div class="flex items-center gap-2">
                                    <span class="material-symbols-outlined text-sm text-gray-400">mail</span>
                                    <span class="text-sm font-medium">{{ $prospect['email'] ?: 'Sin correo registrado' }}</span>
                                </div>
                            </div>

                            <div class="flex flex-col gap-1">
                                <span
                                    class="text-xs font-medium uppercase tracking-wider text-[#616f89] dark:text-gray-400">Telefono</span>
                                <div class="flex items-center gap-2">
                                    <span class="material-symbols-outlined text-sm text-gray-400">phone</span>
                                    <span class="text-sm font-medium">{{ $prospect['phone'] ?: 'Sin telefono registrado' }}</span>
                                </div>
                            </div>

                            <div class="flex flex-col gap-1">
                                <span
                                    class="text-xs font-medium uppercase tracking-wider text-[#616f89] dark:text-gray-400">Propiedad
                                    de Interes</span>
                                <div class="flex items-center gap-2">
                                    <span class="material-symbols-outlined text-sm text-primary">apartment</span>
                                    <span class="text-sm font-semibold text-primary">
                                        {{ $prospect['interest']['name'] ?? 'Sin interes registrado' }}
                                    </span>
                                </div>
                            </div>

                            <div class="flex flex-col gap-1">
                                <span
                                    class="text-xs font-medium uppercase tracking-wider text-[#616f89] dark:text-gray-400">Fuente</span>
                                <div class="flex items-center gap-2">
                                    <span
                                        class="material-symbols-outlined text-sm text-pink-500">{{ $prospect['sourceIcon'] ?? 'campaign' }}</span>
                                    <span class="text-sm font-medium">{{ $prospect['source'] ?: 'Sin fuente registrada' }}</span>
                                </div>
                            </div>

                            <div class="flex flex-col gap-1">
                                <span
                                    class="text-xs font-medium uppercase tracking-wider text-[#616f89] dark:text-gray-400">Agente
                                    Asignado</span>
                                <div class="flex items-center gap-2">
                                    <div
                                        class="flex h-6 w-6 items-center justify-center rounded-full bg-primary/10 text-[10px] font-bold text-primary">
                                        {{ $prospect['agent']['initials'] ?? 'AG' }}
                                    </div>
                                    <span class="text-sm font-medium">{{ $prospect['agent']['name'] ?? 'Sin agente asignado' }}</span>
                                </div>
                            </div>

                            <div class="flex flex-col gap-1">
                                <span
                                    class="text-xs font-medium uppercase tracking-wider text-[#616f89] dark:text-gray-400">Fecha
                                    de Creacion</span>
                                <div class="flex items-center gap-2">
                                    <span class="material-symbols-outlined text-sm text-gray-400">event</span>
                                    <span class="text-sm font-medium">{{ $prospect['createdAtFormatted'] ?? 'Sin fecha' }}</span>
                                </div>
                            </div>
                        </div>

                        <div
                            class="rounded-lg border border-gray-100 bg-gray-50 p-4 dark:border-gray-800 dark:bg-[#131b29]">
                            <span class="text-xs font-bold uppercase text-[#616f89] dark:text-gray-400">Notas Rapidas</span>
                            <p class="mt-3 text-sm italic text-gray-600 dark:text-gray-300">
                                "{{ $prospect['notes'] ?: 'Sin notas registradas para este prospecto.' }}"
                            </p>
                        </div>
                    </div>
                </div>

                <div
                    class="overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-800 dark:bg-[#1a2332]">
                    <div class="border-b border-gray-100 p-6 dark:border-gray-800">
                        <h3 class="text-lg font-bold">Próxima acción</h3>
                        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                            Sugiere el siguiente paso al vendedor. Un nuevo evento comercial podrá recalcularlo automáticamente.
                        </p>
                    </div>

                    <div class="space-y-5 p-6">
                        @if ($nextAction)
                            <div class="rounded-xl border border-primary/20 bg-primary/5 p-4">
                                <div class="flex items-start gap-3">
                                    <span class="material-symbols-outlined mt-0.5 text-primary">event_upcoming</span>
                                    <div>
                                        <p class="font-bold text-gray-900 dark:text-white">{{ $nextAction['title'] }}</p>
                                        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                                            {{ $nextActionOptions[$nextAction['flow_step']] ?? $nextAction['flow_step'] }} ·
                                            prioridad {{ mb_strtolower($nextActionPriorities[$nextAction['priority']] ?? $nextAction['priority']) }} ·
                                            vence {{ \Carbon\Carbon::parse($nextAction['due_at'])->timezone(config('app.timezone'))->translatedFormat('d M Y, H:i') }}
                                        </p>
                                    </div>
                                </div>
                            </div>
                        @else
                            <div class="rounded-xl border border-dashed border-gray-200 p-4 text-sm text-gray-500 dark:border-gray-700 dark:text-gray-400">
                                No hay una próxima acción pendiente.
                            </div>
                        @endif

                        @if ($canSuggestNextAction)
                            <form class="space-y-4" method="POST"
                                x-data="{ actionType: @js(old('type', $nextAction['flow_step'] ?? 'follow_up')) }"
                                action="{{ route('realEstate.lead.nextAction.suggest', $prospect['id']) }}">
                                @csrf

                                <div>
                                    <label class="mb-1.5 block text-xs font-bold uppercase text-gray-500" for="next-action-type">
                                        Acción sugerida
                                    </label>
                                    <select id="next-action-type" name="type" required x-model="actionType"
                                        class="w-full rounded-lg border-gray-300 bg-white text-sm dark:border-gray-700 dark:bg-[#131b29]">
                                        @foreach ($nextActionOptions as $value => $label)
                                            <option value="{{ $value }}" @selected(old('type', $nextAction['flow_step'] ?? 'follow_up') === $value)>
                                                {{ $label }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('type')
                                        <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                                    @enderror
                                </div>

                                <div>
                                    <label class="mb-1.5 block text-xs font-bold uppercase text-gray-500" for="next-action-title">
                                        Título
                                    </label>
                                    <input id="next-action-title" name="title" type="text" maxlength="160" required
                                        value="{{ old('title', $nextAction['title'] ?? '') }}" placeholder="Ej. Llamar para confirmar presupuesto"
                                        class="w-full rounded-lg border-gray-300 bg-white text-sm dark:border-gray-700 dark:bg-[#131b29]">
                                    @error('title')
                                        <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                                    @enderror
                                </div>

                                <div>
                                    <label class="mb-1.5 block text-xs font-bold uppercase text-gray-500" for="next-action-priority">
                                        Prioridad
                                    </label>
                                    <select id="next-action-priority" name="priority" required
                                        class="w-full rounded-lg border-gray-300 bg-white text-sm dark:border-gray-700 dark:bg-[#131b29]">
                                        @foreach ($nextActionPriorities as $value => $label)
                                            <option value="{{ $value }}" @selected(old('priority', $nextAction['priority'] ?? 'normal') === $value)>
                                                {{ $label }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('priority')
                                        <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                                    @enderror
                                </div>

                                <div x-cloak x-show="['contact', 'follow_up'].includes(actionType)" x-transition>
                                    <label class="mb-1.5 block text-xs font-bold uppercase text-gray-500" for="next-action-whatsapp-message">
                                        Cuerpo de mensaje para WhatsApp
                                        <span class="font-normal normal-case">(opcional)</span>
                                    </label>
                                    <textarea id="next-action-whatsapp-message" name="whatsapp_message" rows="5" maxlength="2000"
                                        placeholder="Escribe el mensaje que recibirá el vendedor como sugerencia para contactar al prospecto."
                                        class="w-full resize-y rounded-lg border-gray-300 bg-white text-sm dark:border-gray-700 dark:bg-[#131b29]">{{ old('whatsapp_message', $nextAction['whatsapp_message'] ?? '') }}</textarea>
                                    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                                        Si se deja vacío, Contactar utilizará el mensaje predeterminado y Dar seguimiento conservará su flujo normal.
                                    </p>
                                    @error('whatsapp_message')
                                        <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                                    @enderror
                                </div>

                                <div>
                                    <label class="mb-1.5 block text-xs font-bold uppercase text-gray-500" for="next-action-due-at">
                                        Fecha y hora límite
                                    </label>
                                    <input id="next-action-due-at" name="due_at" type="datetime-local" required
                                        min="{{ now(config('app.timezone'))->addMinute()->format('Y-m-d\TH:i') }}"
                                        value="{{ old('due_at', now(config('app.timezone'))->addDay()->setTime(10, 0)->format('Y-m-d\TH:i')) }}"
                                        class="w-full rounded-lg border-gray-300 bg-white text-sm dark:border-gray-700 dark:bg-[#131b29]">
                                    @error('due_at')
                                        <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                                    @enderror
                                </div>

                                @error('next_action')
                                    <p class="text-sm text-red-600">{{ $message }}</p>
                                @enderror

                                <button type="submit"
                                    class="inline-flex w-full items-center justify-center gap-2 rounded-lg bg-primary px-4 py-2.5 text-sm font-bold text-white transition hover:bg-primary/90">
                                    <span class="material-symbols-outlined text-[18px]">recommend</span>
                                    Sugerir próxima acción
                                </button>
                            </form>
                        @else
                            <p class="rounded-lg bg-gray-50 p-3 text-sm text-gray-500 dark:bg-[#131b29] dark:text-gray-400">
                                El prospecto está cerrado; reactívalo para sugerir una nueva acción.
                            </p>
                        @endif
                    </div>
                </div>
            </div>

            <div class="flex flex-col gap-6 lg:col-span-7">
                <div
                    class="flex min-h-[600px] flex-col overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-800 dark:bg-[#1a2332]">
                    <div class="border-b border-gray-100 p-6 dark:border-gray-800">
                        <h3 class="text-lg font-bold">Historial de Seguimiento</h3>
                    </div>

                    <div class="relative flex-1 p-6">
                        @if (($prospect['activities'] ?? []) !== [])
                            <div class="absolute bottom-8 left-10 top-8 w-px bg-gray-200 dark:bg-gray-700"></div>
                        @endif

                        <div class="flex flex-col gap-10">
                            @forelse (($prospect['activities'] ?? []) as $activity)
                                <div class="group relative flex gap-6">
                                    <div
                                        class="z-10 flex size-8 items-center justify-center rounded-full ring-4 ring-white dark:ring-[#1a2332] {{ $activity['iconClass'] }}">
                                        <span class="material-symbols-outlined text-sm">{{ $activity['icon'] }}</span>
                                    </div>

                                    <div class="flex flex-col gap-2">
                                        <div class="flex flex-wrap items-center gap-2">
                                            <span class="text-sm font-bold">{{ $activity['title'] }}</span>
                                            @if (!empty($activity['eventDateBadge']))
                                                <span
                                                    class="rounded bg-gray-100 px-2 py-0.5 text-[11px] font-medium text-[#616f89] dark:bg-gray-800 dark:text-gray-400">
                                                    {{ $activity['eventDateBadge'] }}
                                                </span>
                                            @endif
                                        </div>

                                        <p class="text-sm text-gray-600 dark:text-gray-400">
                                            {{ $activity['notes'] ?: 'Actividad registrada sin observaciones adicionales.' }}
                                        </p>

                                        @if (!empty($activity['interestName']))
                                            <div class="text-xs text-primary">
                                                Interes relacionado: {{ $activity['interestName'] }}
                                            </div>
                                        @endif

                                        @if (!empty($activity['agentName']))
                                            <div class="text-xs italic text-gray-400">
                                                Registrado por {{ $activity['agentName'] }}
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            @empty
                                <div
                                    class="rounded-xl border border-dashed border-gray-200 bg-gray-50 px-6 py-10 text-center text-sm text-gray-500 dark:border-gray-800 dark:bg-[#131b29] dark:text-gray-400">
                                    Este prospecto aun no tiene actividades registradas.
                                </div>
                            @endforelse
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="fixed bottom-10 right-10">
        <button
            class="flex h-14 items-center justify-center gap-2 rounded-full bg-primary pl-5 pr-7 text-sm font-bold text-white shadow-2xl shadow-blue-500/40 transition-all hover:scale-105 hover:bg-primary/90 active:scale-95"
            type="button">
            <span class="material-symbols-outlined text-[24px]">add_circle</span>
            <span>Registrar Nueva Actividad</span>
        </button>
    </div>
@endsection