@extends('layouts.app')

@section('title', 'Dashboard — ImóvelZapAi')
@section('page-title', 'Visão geral')

@section('content')
    @include('partials.flash')

    @if ($metrics->requiresResponse > 0 || $metrics->readyForAttendance > 0)
        <div class="mb-6 rounded-xl border border-amber-200 bg-amber-50 p-4 shadow-sm">
            <p class="text-sm font-semibold text-amber-900">Ação recomendada agora</p>
            <p class="mt-1 text-sm text-amber-800">
                @if ($metrics->requiresResponse > 0)
                    <strong>{{ $metrics->requiresResponse }}</strong> {{ $metrics->requiresResponse === 1 ? 'pessoa requer' : 'pessoas requerem' }} sua resposta.
                @endif
                @if ($metrics->requiresResponse > 0 && $metrics->readyForAttendance > 0)
                    ·
                @endif
                @if ($metrics->readyForAttendance > 0)
                    <strong>{{ $metrics->readyForAttendance }}</strong> {{ $metrics->readyForAttendance === 1 ? 'pessoa pronta' : 'pessoas prontas' }} para atendimento.
                @endif
            </p>
            <div class="mt-3 flex flex-wrap gap-2">
                @if ($metrics->requiresResponse > 0)
                    <a href="{{ route('people.inbox') }}" class="rounded-lg bg-amber-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-amber-700">
                        Abrir caixa de entrada
                    </a>
                @endif
                @if ($metrics->readyForAttendance > 0)
                    <a href="{{ route('people.index', ['estagio' => 'prontas']) }}" class="rounded-lg border border-amber-300 bg-white px-3 py-1.5 text-sm font-medium text-amber-900 hover:bg-amber-100">
                        Ver prontas para atendimento
                    </a>
                @endif
            </div>
        </div>
    @endif

    <div class="mb-6 grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
        <a href="{{ route('people.inbox') }}" @class([
            'rounded-xl border p-6 shadow-sm transition',
            'border-red-200 bg-red-50 hover:bg-red-100' => $metrics->requiresResponse > 0,
            'border-slate-200 bg-white hover:bg-slate-50' => $metrics->requiresResponse === 0,
        ])>
            <p class="text-sm font-medium text-slate-500">Requer resposta</p>
            <p class="mt-2 text-3xl font-semibold text-slate-900">{{ $metrics->requiresResponse }}</p>
        </a>

        <div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
            <p class="text-sm font-medium text-slate-500">Conversas hoje</p>
            <p class="mt-2 text-3xl font-semibold text-slate-900">{{ $metrics->conversationsToday }}</p>
        </div>

        <div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
            <p class="text-sm font-medium text-slate-500">Conversas ativas</p>
            <p class="mt-2 text-3xl font-semibold text-slate-900">{{ $metrics->activeConversations }}</p>
        </div>

        <a href="{{ route('people.index', ['estagio' => 'interessadas']) }}" class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm transition hover:bg-slate-50">
            <p class="text-sm font-medium text-slate-500">Pessoas interessadas</p>
            <p class="mt-2 text-3xl font-semibold text-slate-900">{{ $metrics->interestedPeople }}</p>
        </a>
    </div>

    <div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
        <a href="{{ route('people.index', ['estagio' => 'prontas']) }}" @class([
            'rounded-xl border p-6 shadow-sm transition',
            'border-amber-300 bg-amber-50 hover:bg-amber-100' => $metrics->readyForAttendance > 0,
            'border-slate-200 bg-white hover:bg-slate-50' => $metrics->readyForAttendance === 0,
        ])>
            <p class="text-sm font-medium text-slate-500">Prontas para atendimento</p>
            <p class="mt-2 text-3xl font-semibold text-slate-900">{{ $metrics->readyForAttendance }}</p>
        </a>

        <a href="{{ route('people.index', ['estagio' => 'negociacao']) }}" class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm transition hover:bg-slate-50">
            <p class="text-sm font-medium text-slate-500">Em negociação</p>
            <p class="mt-2 text-3xl font-semibold text-slate-900">{{ $metrics->negotiatingPeople }}</p>
        </a>

        <div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
            <p class="text-sm font-medium text-slate-500">Abandonos (30 dias)</p>
            <p class="mt-2 text-3xl font-semibold text-slate-900">{{ $metrics->abandonedLast30Days }}</p>
            <p class="mt-1 text-xs text-slate-500">Conversas marcadas como perdidas</p>
        </div>

        <div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
            <p class="text-sm font-medium text-slate-500">Tempo médio até atendimento</p>
            <p class="mt-2 text-3xl font-semibold text-slate-900">
                @if ($metrics->averageMinutesToHuman !== null)
                    {{ $metrics->averageMinutesToHuman }} min
                @else
                    —
                @endif
            </p>
        </div>
    </div>

    <div class="mt-4 grid gap-4 sm:grid-cols-3">
        <div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
            <p class="text-sm font-medium text-slate-500">Imóveis enviados hoje</p>
            <p class="mt-2 text-2xl font-semibold text-slate-900">{{ $metrics->propertiesSentToday }}</p>
        </div>
        <div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
            <p class="text-sm font-medium text-slate-500">Qualificadas hoje</p>
            <p class="mt-2 text-2xl font-semibold text-slate-900">{{ $metrics->peopleQualifiedToday }}</p>
        </div>
        <div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
            <p class="text-sm font-medium text-slate-500">Assumidas hoje</p>
            <p class="mt-2 text-2xl font-semibold text-slate-900">{{ $metrics->peopleAssumedToday }}</p>
        </div>
    </div>

    @isset($publishingMetrics)
        <div class="mt-8">
            <h2 class="text-lg font-semibold text-slate-900">Publicação de imóveis</h2>
            <p class="mt-1 text-sm text-slate-500">Status multicanal do catálogo</p>

            <div class="mt-4 grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
                <a href="{{ route('publishing.center') }}" class="rounded-xl border border-emerald-200 bg-emerald-50 p-6 shadow-sm transition hover:bg-emerald-100">
                    <p class="text-sm font-medium text-emerald-700">Imóveis publicados</p>
                    <p class="mt-2 text-3xl font-semibold text-emerald-950">{{ $publishingMetrics->publishedProperties }}</p>
                </a>

                <a href="{{ route('properties.index') }}" @class([
                    'rounded-xl border p-6 shadow-sm transition',
                    'border-amber-300 bg-amber-50 hover:bg-amber-100' => $publishingMetrics->pendingProperties > 0,
                    'border-slate-200 bg-white hover:bg-slate-50' => $publishingMetrics->pendingProperties === 0,
                ])>
                    <p class="text-sm font-medium text-slate-500">Pendentes</p>
                    <p class="mt-2 text-3xl font-semibold text-slate-900">{{ $publishingMetrics->pendingProperties }}</p>
                    <p class="mt-1 text-xs text-slate-500">Aguardando publicação ou sincronização</p>
                </a>

                <a href="{{ route('properties.index') }}" @class([
                    'rounded-xl border p-6 shadow-sm transition',
                    'border-red-200 bg-red-50 hover:bg-red-100' => $publishingMetrics->errorProperties > 0,
                    'border-slate-200 bg-white hover:bg-slate-50' => $publishingMetrics->errorProperties === 0,
                ])>
                    <p class="text-sm font-medium text-slate-500">Com erro</p>
                    <p class="mt-2 text-3xl font-semibold text-slate-900">{{ $publishingMetrics->errorProperties }}</p>
                    <p class="mt-1 text-xs text-slate-500">Precisam de atenção</p>
                </a>

                <div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
                    <p class="text-sm font-medium text-slate-500">Última sincronização</p>
                    <p class="mt-2 text-2xl font-semibold text-slate-900">
                        @if ($publishingMetrics->lastSyncedAtLabel())
                            {{ $publishingMetrics->lastSyncedAtLabel() }}
                        @else
                            —
                        @endif
                    </p>
                </div>
            </div>
        </div>
    @endisset

    @php($copilot = $metrics->copilot)
    <div class="mt-8">
        <h2 class="text-lg font-semibold text-slate-900">Copiloto IA</h2>
        <p class="mt-1 text-sm text-slate-500">Últimos 30 dias — uso do assistente pelo time</p>

        <div class="mt-4 grid gap-4 sm:grid-cols-2 xl:grid-cols-5">
            <div class="rounded-xl border border-violet-200 bg-violet-50 p-6 shadow-sm">
                <p class="text-sm font-medium text-violet-700">Resumos gerados</p>
                <p class="mt-2 text-3xl font-semibold text-violet-950">{{ $copilot->summariesGenerated }}</p>
            </div>
            <div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
                <p class="text-sm font-medium text-slate-500">Sugestões aceitas</p>
                <p class="mt-2 text-3xl font-semibold text-slate-900">{{ $copilot->suggestionsAccepted }}</p>
            </div>
            <div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
                <p class="text-sm font-medium text-slate-500">Sugestões editadas</p>
                <p class="mt-2 text-3xl font-semibold text-slate-900">{{ $copilot->suggestionsEdited }}</p>
            </div>
            <div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
                <p class="text-sm font-medium text-slate-500">Sugestões descartadas</p>
                <p class="mt-2 text-3xl font-semibold text-slate-900">{{ $copilot->suggestionsDiscarded }}</p>
            </div>
            <div class="rounded-xl border border-emerald-200 bg-emerald-50 p-6 shadow-sm">
                <p class="text-sm font-medium text-emerald-700">Tempo economizado</p>
                <p class="mt-2 text-3xl font-semibold text-emerald-950">
                    @if ($copilot->totalTimeSavedSeconds > 0)
                        ~{{ $copilot->totalTimeSavedMinutes() }} min
                    @else
                        —
                    @endif
                </p>
            </div>
        </div>
    </div>
@endsection
