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

@section('content')
    @php
        $performance = $agent->performance;
        $fullName = trim(($agent->firstName ?? '').' '.($agent->lastName ?? '')) ?: 'Agente sin nombre';
        $imageUrl = $agent->imageUrl
            ? (\Illuminate\Support\Str::startsWith($agent->imageUrl, ['http://', 'https://'])
                ? $agent->imageUrl
                : \Illuminate\Support\Facades\Storage::disk('public')->url($agent->imageUrl))
            : null;
        $initials = mb_strtoupper(mb_substr($agent->firstName ?? 'A', 0, 1).mb_substr($agent->lastName ?? '', 0, 1));
        $target = $performance['target'] ?? [];
        $pipelineColors = ['bg-blue-400', 'bg-sky-500', 'bg-indigo-500', 'bg-emerald-500'];
    @endphp

    <div class="flex-1 overflow-y-auto p-4 md:p-6 no-scrollbar">
        <div class="mx-auto max-w-7xl space-y-6">
            @if (session('success'))
                <div class="rounded-lg border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm font-medium text-emerald-700">
                    {{ session('success') }}
                </div>
            @endif
            @if (session('error'))
                <div class="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm font-medium text-red-700">
                    {{ session('error') }}
                </div>
            @endif

            <nav class="flex items-center gap-2 text-sm text-slate-500">
                <a class="hover:text-primary" href="{{ route('realEstate.dashboard') }}">Dashboard</a>
                <span>/</span>
                <a class="hover:text-primary" href="{{ route('realEstate.agents') }}">Agentes</a>
                <span>/</span>
                <span class="font-medium text-slate-900 dark:text-white">{{ $fullName }}</span>
            </nav>

            <section
                class="rounded-xl border border-gray-200 bg-white p-5 shadow-sm dark:border-gray-800 dark:bg-[#151b2b]">
                <div class="flex flex-col justify-between gap-5 sm:flex-row sm:items-center">
                    <div class="flex items-center gap-4">
                        @if ($imageUrl)
                            <img class="size-20 rounded-full object-cover ring-4 ring-slate-100 dark:ring-slate-800"
                                src="{{ $imageUrl }}" alt="{{ $fullName }}">
                        @else
                            <div
                                class="flex size-20 items-center justify-center rounded-full bg-primary/10 text-2xl font-bold text-primary ring-4 ring-slate-100 dark:ring-slate-800">
                                {{ $initials }}
                            </div>
                        @endif
                        <div>
                            <div class="flex flex-wrap items-center gap-2">
                                <h1 class="text-2xl font-bold text-slate-900 dark:text-white">{{ $fullName }}</h1>
                                <span @class([
                                    'rounded-full px-2.5 py-1 text-xs font-semibold',
                                    'bg-emerald-50 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300' => $agent->isActive,
                                    'bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-300' => ! $agent->isActive,
                                ])>
                                    {{ $agent->isActive ? 'Activo' : 'Inactivo' }}
                                </span>
                            </div>
                            <p class="mt-1 text-sm font-medium text-slate-500">
                                {{ $agent->experienceLevel ?? 'Sin nivel asignado' }}
                            </p>
                            <p class="mt-1 text-sm text-slate-500">
                                {{ implode(' · ', array_filter([
                                    $agent->place,
                                    implode(', ', $performance['agencies'] ?? []),
                                ])) ?: 'Sin ubicación o inmobiliaria asignada' }}
                            </p>
                        </div>
                    </div>
                    <div class="flex flex-wrap gap-2">
                        <a href="#seller-notification"
                            class="inline-flex items-center gap-2 rounded-lg bg-primary px-3 py-2 text-sm font-semibold text-white hover:bg-blue-700">
                            <span class="material-symbols-outlined text-lg">notifications_active</span>
                            Notificar
                        </a>
                        <a href="{{ route('realEstate.agents.edit', $agent->id) }}"
                            class="inline-flex items-center gap-2 rounded-lg border border-gray-200 px-3 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50 dark:border-gray-700 dark:text-slate-200 dark:hover:bg-slate-800">
                            <span class="material-symbols-outlined text-lg">edit</span>
                            Editar
                        </a>
                        @if ($agent->phone)
                            <a href="tel:{{ $agent->phone }}"
                                class="inline-flex items-center gap-2 rounded-lg border border-gray-200 px-3 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50 dark:border-gray-700 dark:text-slate-200 dark:hover:bg-slate-800">
                                <span class="material-symbols-outlined text-lg">call</span>
                                {{ $agent->phone }}
                            </a>
                        @endif
                        @if ($agent->email)
                            <a href="mailto:{{ $agent->email }}"
                                class="inline-flex items-center gap-2 rounded-lg bg-primary px-3 py-2 text-sm font-semibold text-white hover:bg-blue-700">
                                <span class="material-symbols-outlined text-lg">mail</span>
                                Contactar
                            </a>
                        @endif
                    </div>
                </div>
            </section>

            <section id="seller-notification"
                class="scroll-mt-6 rounded-xl border border-gray-200 bg-white p-5 shadow-sm dark:border-gray-800 dark:bg-[#151b2b]">
                <details @if ($errors->notification->any()) open @endif>
                    <summary class="flex cursor-pointer list-none items-center justify-between gap-4">
                        <div class="flex items-center gap-3">
                            <span class="material-symbols-outlined rounded-lg bg-primary/10 p-2 text-primary">
                                notifications_active
                            </span>
                            <div>
                                <h2 class="font-bold text-slate-900 dark:text-white">Enviar notificación personalizada</h2>
                                <p class="mt-1 text-sm text-slate-500">
                                    Se enviará a todos los dispositivos activos de {{ $fullName }} y quedará en su historial.
                                </p>
                            </div>
                        </div>
                        <span class="material-symbols-outlined text-slate-400">expand_more</span>
                    </summary>

                    <form class="mt-5 grid grid-cols-1 gap-4" method="POST"
                        action="{{ route('realEstate.agents.notifications.send', $agent->id) }}">
                        @csrf
                        <div>
                            <label for="notification_title"
                                class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-slate-200">
                                Título
                            </label>
                            <input id="notification_title" name="title" type="text" maxlength="120" required
                                value="{{ old('title') }}" placeholder="Ej. Reunión de ventas"
                                class="w-full rounded-lg border-gray-300 text-sm dark:border-gray-700 dark:bg-slate-900 dark:text-white">
                            @error('title', 'notification')
                                <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                        <div>
                            <label for="notification_message"
                                class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-slate-200">
                                Mensaje
                            </label>
                            <textarea id="notification_message" name="message" rows="4" maxlength="1000" required
                                placeholder="Escribe el mensaje que recibirá el vendedor..."
                                class="w-full resize-none rounded-lg border-gray-300 text-sm dark:border-gray-700 dark:bg-slate-900 dark:text-white">{{ old('message') }}</textarea>
                            @error('message', 'notification')
                                <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                            @enderror
                            <p class="mt-1 text-xs text-slate-400">
                                Puedes usar <code>{nombre}</code> y <code>{nombre_completo}</code> para personalizar el texto.
                            </p>
                        </div>
                        <div class="flex justify-end">
                            <button type="submit"
                                class="inline-flex items-center gap-2 rounded-lg bg-primary px-5 py-2.5 text-sm font-bold text-white hover:bg-blue-700">
                                <span class="material-symbols-outlined text-lg">send</span>
                                Enviar notificación
                            </button>
                        </div>
                    </form>
                </details>
            </section>

            <section class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
                @foreach ([
                    ['label' => 'Ventas del año', 'value' => \Illuminate\Support\Number::currency((float) ($performance['year_sales'] ?? 0), in: 'MXN'), 'icon' => 'payments', 'tone' => 'text-blue-600 bg-blue-50 dark:bg-blue-900/30'],
                    ['label' => 'Conversión', 'value' => number_format((float) ($performance['conversion'] ?? 0), 1).'%', 'icon' => 'percent', 'tone' => 'text-purple-600 bg-purple-50 dark:bg-purple-900/30'],
                    ['label' => 'Prospectos activos', 'value' => number_format((int) ($performance['active_leads'] ?? 0)), 'icon' => 'group', 'tone' => 'text-orange-600 bg-orange-50 dark:bg-orange-900/30'],
                    ['label' => 'Citas del mes', 'value' => number_format((int) ($performance['appointments_this_month'] ?? 0)), 'icon' => 'event_available', 'tone' => 'text-emerald-600 bg-emerald-50 dark:bg-emerald-900/30'],
                ] as $metric)
                    <article
                        class="rounded-xl border border-gray-200 bg-white p-5 shadow-sm dark:border-gray-800 dark:bg-[#151b2b]">
                        <div class="flex items-start justify-between gap-3">
                            <div>
                                <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">
                                    {{ $metric['label'] }}
                                </p>
                                <p class="mt-2 text-2xl font-bold text-slate-900 dark:text-white">{{ $metric['value'] }}</p>
                            </div>
                            <span class="material-symbols-outlined rounded-lg p-2 {{ $metric['tone'] }}">
                                {{ $metric['icon'] }}
                            </span>
                        </div>
                    </article>
                @endforeach
            </section>

            <section
                class="rounded-xl border border-gray-200 bg-white p-5 shadow-sm dark:border-gray-800 dark:bg-[#151b2b]">
                <div class="flex flex-col justify-between gap-3 sm:flex-row sm:items-end">
                    <div>
                        <h2 class="font-bold text-slate-900 dark:text-white">Meta mensual · {{ $target['label'] ?? '' }}</h2>
                        <p class="mt-1 text-sm text-slate-500">
                            Meta: {{ $target['revenue_formatted'] ?? '$0.00' }}
                        </p>
                    </div>
                    <div class="text-left sm:text-right">
                        <p class="text-xl font-bold text-primary">{{ $target['achieved_formatted'] ?? '$0.00' }}</p>
                        <p class="text-xs text-slate-500">{{ number_format((float) ($target['progress'] ?? 0), 1) }}% completado</p>
                    </div>
                </div>
                <div class="mt-4 h-3 overflow-hidden rounded-full bg-slate-100 dark:bg-slate-800">
                    <div class="h-full rounded-full bg-primary"
                        style="width: {{ min(100, max(0, (float) ($target['progress'] ?? 0))) }}%"></div>
                </div>
                <div class="mt-2 flex justify-between text-xs text-slate-400">
                    <span>{{ $target['period_start'] ?? '' }}</span>
                    <span>{{ $target['period_end'] ?? '' }}</span>
                </div>

                <details class="mt-5 border-t border-gray-100 pt-5 dark:border-gray-800" @if ($errors->any()) open @endif>
                    <summary class="flex cursor-pointer list-none items-center justify-between gap-3">
                        <div>
                            <h3 class="text-sm font-bold text-slate-900 dark:text-white">Configurar metas del agente</h3>
                            <p class="mt-1 text-xs text-slate-500">
                                Define objetivos mensuales de prospección, ventas y cobranza.
                            </p>
                        </div>
                        <span class="material-symbols-outlined text-slate-400">expand_more</span>
                    </summary>

                    <form class="mt-5 grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3"
                        action="{{ route('realEstate.agents.targets.store', $agent->id) }}" method="POST">
                        @csrf
                        <div>
                            <label class="mb-1.5 block text-xs font-bold uppercase text-slate-500" for="month">
                                Mes de la meta
                            </label>
                            <input id="month" name="month" type="month" required
                                value="{{ old('month', now()->format('Y-m')) }}"
                                class="w-full rounded-lg border-gray-300 text-sm dark:border-gray-700 dark:bg-slate-900">
                            @error('month')
                                <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-slate-500" for="target_leads">
                                Prospectos
                            </label>
                            <input id="target_leads" name="target_leads" type="number" min="0" required
                                value="{{ old('target_leads', $target['target_leads'] ?? 0) }}"
                                class="w-full rounded-lg border-gray-300 text-sm dark:border-gray-700 dark:bg-slate-900">
                            @error('target_leads')
                                <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-slate-500"
                                for="target_appointments">Citas</label>
                            <input id="target_appointments" name="target_appointments" type="number" min="0" required
                                value="{{ old('target_appointments', $target['target_appointments'] ?? 0) }}"
                                class="w-full rounded-lg border-gray-300 text-sm dark:border-gray-700 dark:bg-slate-900">
                            @error('target_appointments')
                                <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-slate-500"
                                for="target_units_sold">Unidades vendidas</label>
                            <input id="target_units_sold" name="target_units_sold" type="number" min="0" required
                                value="{{ old('target_units_sold', $target['target_units_sold'] ?? 0) }}"
                                class="w-full rounded-lg border-gray-300 text-sm dark:border-gray-700 dark:bg-slate-900">
                            @error('target_units_sold')
                                <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-slate-500"
                                for="target_revenue">Meta de ventas (MXN)</label>
                            <input id="target_revenue" name="target_revenue" type="number" min="0" step="0.01" required
                                value="{{ old('target_revenue', $target['revenue'] ?? 0) }}"
                                class="w-full rounded-lg border-gray-300 text-sm dark:border-gray-700 dark:bg-slate-900">
                            @error('target_revenue')
                                <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-slate-500"
                                for="target_collection">Meta de cobranza (MXN)</label>
                            <input id="target_collection" name="target_collection" type="number" min="0" step="0.01"
                                required value="{{ old('target_collection', $target['target_collection'] ?? 0) }}"
                                class="w-full rounded-lg border-gray-300 text-sm dark:border-gray-700 dark:bg-slate-900">
                            @error('target_collection')
                                <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                        <div class="flex justify-end md:col-span-2 lg:col-span-3">
                            <button type="submit"
                                class="inline-flex items-center gap-2 rounded-lg bg-primary px-5 py-2.5 text-sm font-bold text-white hover:bg-blue-700">
                                <span class="material-symbols-outlined text-lg">flag</span>
                                Guardar metas
                            </button>
                        </div>
                    </form>
                </details>
            </section>

            <section class="grid grid-cols-1 gap-6 lg:grid-cols-2">
                <article
                    class="rounded-xl border border-gray-200 bg-white p-5 shadow-sm dark:border-gray-800 dark:bg-[#151b2b]">
                    <h2 class="font-bold text-slate-900 dark:text-white">Ventas de los últimos 6 meses</h2>
                    <div class="mt-6 flex h-56 items-end justify-between gap-3">
                        @foreach ($performance['monthly_sales'] ?? [] as $month)
                            <div class="group flex h-full min-w-0 flex-1 flex-col items-center justify-end gap-2">
                                <div class="relative flex h-44 w-full items-end overflow-visible rounded-t bg-blue-50 dark:bg-blue-900/20">
                                    <div class="w-full rounded-t bg-primary transition-opacity group-hover:opacity-80"
                                        style="height: {{ $month['height'] }}%"></div>
                                    <span
                                        class="pointer-events-none absolute -top-8 left-1/2 hidden -translate-x-1/2 whitespace-nowrap rounded bg-slate-900 px-2 py-1 text-[10px] text-white group-hover:block">
                                        {{ $month['amount_formatted'] }}
                                    </span>
                                </div>
                                <span class="text-xs font-medium text-slate-500">{{ $month['label'] }}</span>
                            </div>
                        @endforeach
                    </div>
                </article>

                <article
                    class="rounded-xl border border-gray-200 bg-white p-5 shadow-sm dark:border-gray-800 dark:bg-[#151b2b]">
                    <h2 class="font-bold text-slate-900 dark:text-white">Embudo de conversión</h2>
                    <div class="mt-6 space-y-4">
                        @foreach ($performance['pipeline'] ?? [] as $index => $stage)
                            <div>
                                <div class="mb-1.5 flex justify-between text-sm">
                                    <span class="font-medium text-slate-700 dark:text-slate-300">
                                        {{ $stage['label'] }} ({{ $stage['count'] }})
                                    </span>
                                    <span class="text-slate-500">{{ $stage['percentage'] }}%</span>
                                </div>
                                <div class="h-8 overflow-hidden rounded-lg bg-slate-100 dark:bg-slate-800">
                                    <div class="flex h-full items-center rounded-lg px-2 text-xs font-bold text-white {{ $pipelineColors[$index] ?? 'bg-primary' }}"
                                        style="width: {{ max(2, $stage['percentage']) }}%">
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </article>
            </section>

            <section
                class="overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-800 dark:bg-[#151b2b]">
                <div class="flex items-center justify-between border-b border-gray-200 p-5 dark:border-gray-800">
                    <div>
                        <h2 class="font-bold text-slate-900 dark:text-white">Cartera asignada</h2>
                        <p class="mt-1 text-sm text-slate-500">Prospectos vinculados con este agente.</p>
                    </div>
                    <a href="{{ route('realEstate.lead.create') }}"
                        class="rounded-lg bg-primary px-3 py-2 text-xs font-semibold text-white hover:bg-blue-700">
                        Agregar prospecto
                    </a>
                </div>
                <div class="overflow-x-auto">
                    <table class="w-full min-w-[720px] text-left text-sm">
                        <thead class="bg-slate-50 text-xs uppercase text-slate-500 dark:bg-slate-800/50">
                            <tr>
                                <th class="px-5 py-3 font-semibold">Prospecto</th>
                                <th class="px-5 py-3 font-semibold">Interés</th>
                                <th class="px-5 py-3 font-semibold">Estatus</th>
                                <th class="px-5 py-3 font-semibold">Último contacto</th>
                                <th class="px-5 py-3"></th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
                            @forelse ($performance['portfolio'] ?? [] as $lead)
                                <tr class="hover:bg-slate-50 dark:hover:bg-slate-800/40">
                                    <td class="px-5 py-4">
                                        <p class="font-semibold text-slate-900 dark:text-white">{{ $lead['name'] }}</p>
                                        <p class="text-xs text-slate-500">{{ $lead['email'] }}</p>
                                    </td>
                                    <td class="px-5 py-4 text-slate-600 dark:text-slate-300">{{ $lead['interest'] }}</td>
                                    <td class="px-5 py-4">
                                        <span class="rounded-full bg-blue-50 px-2.5 py-1 text-xs font-semibold text-blue-700 dark:bg-blue-900/30 dark:text-blue-300">
                                            {{ $lead['status'] }}
                                        </span>
                                    </td>
                                    <td class="px-5 py-4 text-slate-500">
                                        {{ $lead['last_contact'] ? \Carbon\Carbon::parse($lead['last_contact'])->format('d/m/Y') : 'Sin actividad' }}
                                    </td>
                                    <td class="px-5 py-4 text-right">
                                        <a class="text-primary hover:underline"
                                            href="{{ route('realEstate.lead.show', $lead['id']) }}">Ver</a>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5" class="px-5 py-12 text-center text-slate-500">
                                        Este agente todavía no tiene prospectos asignados.
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </section>
        </div>
    </div>
@endsection