@extends('layouts.owner')

@section('title', __('Dashboard — Lined'))
@section('page-title', __('Dashboard'))
@section('page-subtitle'){{ __('Bem-vindo de volta') }}, {{ session('user_name', __('Cliente')) }}@endsection

@section('content')

    @php
        $statusLabels = [
            0 => __('Pendente'),
            1 => __('Finalizado'),
            2 => __('Cancelado'),
        ];
        $statusClasses = [
            0 => 'bg-amber-400/10 border-amber-400/25 text-amber-400',
            1 => 'bg-brand-green/10 border-brand-green/25 text-brand-green',
            2 => 'bg-red-500/10 border-red-500/25 text-red-400',
        ];

        $svcLabels = [];
        $svcData   = [];
        foreach ($appointments_by_service as $row) {
            $r = (object)(array) $row;
            $svcLabels[] = $r->service_name ?? __('Sem serviço');
            $svcData[]   = (int) $r->total;
        }
    @endphp

    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 sm:gap-5 mb-6 sm:mb-8">

        <div class="rounded-2xl border border-brand-green/20 bg-brand-green/5 p-5 sm:p-6">
            <div class="flex items-start justify-between mb-4 sm:mb-5">
                <div class="w-11 h-11 sm:w-12 sm:h-12 rounded-xl bg-brand-green/10 border border-brand-green/20 flex items-center justify-center shrink-0">
                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#22C55E" stroke-width="2" stroke-linecap="round">
                        <line x1="12" y1="1" x2="12" y2="23" />
                        <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
                    </svg>
                </div>
            </div>
            <div class="font-heading font-bold text-white text-2xl md:text-3xl leading-none tabular-nums break-words">R$ {{ number_format((float) $revenue_total, 2, ',', '.') }}</div>
            <div class="text-gray-400 text-sm mt-2">{{ __('Ganho total') }}</div>
        </div>

        <div class="rounded-2xl border border-white/8 bg-white/3 p-5 sm:p-6">
            <div class="flex items-start justify-between mb-4 sm:mb-5">
                <div class="w-11 h-11 sm:w-12 sm:h-12 rounded-xl bg-blue-500/10 border border-blue-500/15 flex items-center justify-center shrink-0">
                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#60A5FA" stroke-width="2" stroke-linecap="round">
                        <rect x="3" y="3" width="7" height="7" /><rect x="14" y="3" width="7" height="7" />
                        <rect x="14" y="14" width="7" height="7" /><rect x="3" y="14" width="7" height="7" />
                    </svg>
                </div>
            </div>
            <div class="font-heading font-bold text-white text-2xl md:text-3xl leading-none tabular-nums">{{ $services_count }}</div>
            <div class="text-gray-500 text-sm mt-2">{{ __('Serviços') }}</div>
        </div>

        <div class="rounded-2xl border border-white/8 bg-white/3 p-5 sm:p-6">
            <div class="flex items-start justify-between mb-4 sm:mb-5">
                <div class="w-11 h-11 sm:w-12 sm:h-12 rounded-xl bg-amber-500/10 border border-amber-500/15 flex items-center justify-center shrink-0">
                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#FBBF24" stroke-width="2" stroke-linecap="round">
                        <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
                        <circle cx="9" cy="7" r="4" />
                        <path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75" />
                    </svg>
                </div>
            </div>
            <div class="font-heading font-bold text-white text-2xl md:text-3xl leading-none tabular-nums">{{ $professionals_count }}</div>
            <div class="text-gray-500 text-sm mt-2">{{ __('Profissionais') }}</div>
        </div>

    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-5 mb-6 sm:mb-8">

        <div class="lg:col-span-2 min-w-0 rounded-2xl border border-white/8 bg-white/3 p-4 sm:p-6">
            <div class="flex items-center justify-between gap-3 mb-5 sm:mb-6">
                <h3 class="font-heading font-bold text-white text-base min-w-0">{{ __('Ganhos por mês') }}</h3>
                <span class="text-gray-500 text-sm shrink-0 tabular-nums">{{ $year }}</span>
            </div>
            <div class="h-56 sm:h-64">
                <canvas id="revenueChart"></canvas>
            </div>
        </div>

        <div class="min-w-0 rounded-2xl border border-white/8 bg-white/3 p-4 sm:p-6">
            <h3 class="font-heading font-bold text-white text-base mb-5 sm:mb-6">{{ __('Agendamentos por serviço') }}</h3>
            @if (count($svcLabels) > 0)
                <div class="h-72 sm:h-64">
                    <canvas id="serviceChart"></canvas>
                </div>
            @else
                <div class="h-56 sm:h-64 flex items-center justify-center text-center">
                    <p class="text-gray-500 text-sm">{{ __('Sem dados de agendamentos.') }}</p>
                </div>
            @endif
        </div>

    </div>

    <div class="rounded-2xl border border-white/8 bg-white/3 overflow-hidden">
        <div class="px-4 sm:px-6 py-4 sm:py-5 border-b border-white/8 flex items-center justify-between gap-3">
            <h3 class="font-heading font-bold text-white text-base min-w-0">{{ __('Próximos agendamentos') }}</h3>
            <a href="{{ route('owner.quotes.index') }}"
                class="text-brand-green text-sm font-semibold hover:text-brand-green-dark no-underline transition-colors shrink-0 whitespace-nowrap">
                {{ __('Ver todos →') }}
            </a>
        </div>

        @if (count($upcoming) > 0)
            <div class="divide-y divide-white/4">
                @foreach ($upcoming as $a)
                    @php
                        $apt = (object)(array) $a;
                        $st  = (int) ($apt->status ?? 0);
                        $dateFmt = !empty($apt->appointment_date)
                            ? \Carbon\Carbon::parse($apt->appointment_date)->format('d/m/Y')
                            : '—';
                    @endphp
                    <div class="flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-5 px-4 sm:px-6 py-4 sm:py-5 hover:bg-white/3 transition-colors">

                        {{-- Linha 1: ícone + quem/o quê --}}
                        <div class="flex items-center gap-3 sm:gap-5 min-w-0 sm:flex-1">
                            <div class="w-11 h-11 sm:w-12 sm:h-12 rounded-xl bg-white/6 border border-white/10 flex flex-col items-center justify-center shrink-0">
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#9CA3AF" stroke-width="2" stroke-linecap="round">
                                    <rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
                                    <line x1="16" y1="2" x2="16" y2="6" />
                                    <line x1="8" y1="2" x2="8" y2="6" />
                                    <line x1="3" y1="10" x2="21" y2="10" />
                                </svg>
                            </div>
                            <div class="flex-1 min-w-0">
                                <p class="text-[0.95rem] font-semibold text-white truncate">{{ $apt->names ?? '—' }}</p>
                                <p class="text-sm text-gray-500 truncate mt-0.5">
                                    {{ $apt->service_name ?? '—' }} · {{ $apt->professional_name ?? '—' }}
                                </p>
                            </div>
                        </div>

                        {{-- Linha 2 no celular: data/hora e status, alinhados
                             sob o texto acima (pl-14 = largura do ícone). --}}
                        <div class="flex items-center justify-between sm:justify-end gap-3 sm:gap-5 shrink-0 pl-14 sm:pl-0">
                            <div class="text-left sm:text-right shrink-0">
                                <p class="text-[0.95rem] font-bold text-white tabular-nums">{{ $dateFmt }}</p>
                                <p class="text-brand-green text-xs font-semibold mt-0.5 tabular-nums">{{ $apt->appointment_interval ?? '' }}</p>
                            </div>
                            <span class="shrink-0 inline-flex items-center px-2.5 py-1 rounded-lg border text-[0.68rem] font-bold uppercase tracking-wider {{ $statusClasses[$st] ?? $statusClasses[0] }}">
                                {{ $statusLabels[$st] ?? $st }}
                            </span>
                        </div>
                    </div>
                @endforeach
            </div>
        @else
            <div class="px-6 py-14 sm:py-16 flex flex-col items-center text-center">
                <div class="w-14 h-14 rounded-2xl bg-white/5 border border-white/10 flex items-center justify-center mb-4">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#6B7280" stroke-width="2" stroke-linecap="round">
                        <rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
                        <line x1="16" y1="2" x2="16" y2="6" />
                        <line x1="8" y1="2" x2="8" y2="6" />
                        <line x1="3" y1="10" x2="21" y2="10" />
                    </svg>
                </div>
                <p class="text-gray-400 text-sm">{{ __('Nenhum agendamento próximo.') }}</p>
            </div>
        @endif
    </div>

@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<script>
    const revenueByMonth = @json(array_map('floatval', $revenue_by_month));
    const svcLabels      = @json($svcLabels);
    const svcData        = @json($svcData);

    const monthLabels = ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez'];
    const brl = new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' });

    const revEl = document.getElementById('revenueChart');
    if (revEl) {
        new Chart(revEl, {
            type: 'bar',
            data: {
                labels: monthLabels,
                datasets: [{
                    data: revenueByMonth,
                    backgroundColor: 'rgba(34, 197, 94, 0.55)',
                    hoverBackgroundColor: 'rgba(34, 197, 94, 0.85)',
                    borderRadius: 6,
                    borderSkipped: false,
                }],
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { display: false },
                    tooltip: { callbacks: { label: (c) => brl.format(c.parsed.y) } },
                },
                scales: {
                    x: { grid: { display: false }, ticks: { color: '#9CA3AF' } },
                    y: {
                        beginAtZero: true,
                        grid: { color: 'rgba(255,255,255,0.06)' },
                        ticks: { color: '#9CA3AF', callback: (v) => 'R$ ' + v },
                    },
                },
            },
        });
    }

    const svcEl = document.getElementById('serviceChart');
    if (svcEl && svcData.length) {
        const palette = ['#22C55E','#60A5FA','#FBBF24','#F87171','#A78BFA','#34D399','#F472B6','#FB923C'];
        new Chart(svcEl, {
            type: 'doughnut',
            data: {
                labels: svcLabels,
                datasets: [{
                    data: svcData,
                    backgroundColor: svcLabels.map((_, i) => palette[i % palette.length]),
                    borderColor: '#0d0d0d',
                    borderWidth: 2,
                }],
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                cutout: '62%',
                plugins: {
                    legend: { position: 'bottom', labels: { color: '#9CA3AF', boxWidth: 12, padding: 12 } },
                },
            },
        });
    }
</script>
@endpush