@php
    $greetName = explode(' ', auth()->user()->name)[0];
@endphp
<x-app-layout title="Genel Bakış" breadcrumb="SADECE / DASHBOARD" :subtitle="'Bugün '.now()->format('d.m.Y').' — hoş geldin, '.$greetName.'.'">
    <x-slot name="actions">
        <img src="{{ asset('assets/nexera-theme/logo/sadece-logo.png') }}" alt="Sadece CRM" style="height:28px;width:auto;opacity:.85;">
    </x-slot>

    <div class="kpi-grid">
        <div class="kpi-card">
            <div class="kpi-label">Açık Leadler</div>
            <div class="kpi-value">{{ $stats['openLeads'] }}</div>
            <div class="kpi-chart"><canvas id="chart-leads"></canvas></div>
        </div>
        <div class="kpi-card">
            <div class="kpi-label">Müşteriler</div>
            <div class="kpi-value">{{ $stats['companies'] }}</div>
            <div class="kpi-chart"><canvas id="chart-companies"></canvas></div>
        </div>
        <div class="kpi-card">
            <div class="kpi-label">Kişiler</div>
            <div class="kpi-value">{{ $stats['contacts'] }}</div>
            <div class="kpi-chart"><canvas id="chart-contacts"></canvas></div>
        </div>
        <div class="kpi-card">
            <div class="kpi-label">Açık Fırsatlar (₺)</div>
            <div class="kpi-value">{{ number_format((float) $stats['openDealsValue'], 0) }}</div>
            <div class="kpi-delta up">{{ $stats['openDeals'] }} açık fırsat</div>
            <div class="kpi-chart"><canvas id="chart-deals"></canvas></div>
        </div>
    </div>

    <div class="panel-grid">
        <div class="panel">
            <div class="panel-title">Son Fırsatlar</div>
            <div class="panel-sub">En son güncellenen fırsatlar</div>
            @forelse ($recentDeals as $deal)
                <div class="task">
                    <div class="task-title"><a href="{{ route('deals.show', $deal) }}" style="color:var(--ink-0);text-decoration:none;">{{ $deal->title }}</a></div>
                    <span class="task-meta">{{ $deal->company?->name ?? '—' }} · {{ $stageLabels[$deal->stage] ?? ucfirst($deal->stage) }}</span>
                </div>
            @empty
                <x-empty-state>Henüz fırsat yok.</x-empty-state>
            @endforelse
        </div>
        <div class="panel">
            <div class="panel-title">Son Aktiviteler</div>
            <div class="panel-sub">Ekibinizin en son kayıtları</div>
            @include('activities._list', ['activities' => $recentActivities])
        </div>
    </div>

    <style>
        .kpi-card { position: relative; }
        .kpi-chart { margin-top: 12px; }
        .kpi-chart canvas { width: 100% !important; }
        .kpi-chart-empty { margin-top: 12px; font-size: 11.5px; color: var(--ink-3); }
    </style>

    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.4/dist/chart.umd.min.js"></script>
    <script>
        (function () {
            const palette = ['#8C6B23', '#B08D3E', '#7B8FB5', '#B3811C', '#C1503A', '#5B6883'];
            const gridColor = 'rgba(20,33,61,.06)';

            function emptyNotice(canvasId) {
                const el = document.getElementById(canvasId);
                if (!el) return;
                const notice = document.createElement('div');
                notice.className = 'kpi-chart-empty';
                notice.textContent = 'Henüz veri yok.';
                el.replaceWith(notice);
            }

            // Horizontal bar list — a labeled category breakdown (lead
            // status, company status, deal value by stage). Zero-value
            // categories are dropped so the chart isn't mostly empty space.
            function categoryChart(canvasId, labels, data, tooltipCallback) {
                const pairs = labels.map((l, i) => [l, data[i]]).filter(([, v]) => v > 0);
                if (!pairs.length) return emptyNotice(canvasId);

                const el = document.getElementById(canvasId);
                el.parentElement.style.height = Math.max(56, pairs.length * 26) + 'px';

                new Chart(el, {
                    type: 'bar',
                    data: {
                        labels: pairs.map((p) => p[0]),
                        datasets: [{
                            data: pairs.map((p) => p[1]),
                            backgroundColor: pairs.map((_, i) => palette[i % palette.length]),
                            borderRadius: 4,
                            maxBarThickness: 14,
                        }],
                    },
                    options: {
                        indexAxis: 'y',
                        responsive: true,
                        maintainAspectRatio: false,
                        animation: { duration: 400 },
                        plugins: {
                            legend: { display: false },
                            tooltip: {
                                backgroundColor: '#14213D',
                                padding: 8,
                                titleFont: { family: 'Public Sans', size: 11 },
                                bodyFont: { family: 'Public Sans', size: 11 },
                                callbacks: tooltipCallback ? { label: tooltipCallback } : undefined,
                            },
                        },
                        scales: {
                            x: { display: false, beginAtZero: true },
                            y: {
                                grid: { display: false },
                                ticks: { font: { family: 'Public Sans', size: 10.5 }, color: '#5B6883' },
                            },
                        },
                    },
                });
            }

            // Vertical trend chart (contacts added per month) — keeps every
            // month, including zero ones, so the shape over time is honest.
            function trendChart(canvasId, labels, data) {
                const el = document.getElementById(canvasId);
                if (!el) return;
                el.parentElement.style.height = '64px';

                new Chart(el, {
                    type: 'bar',
                    data: {
                        labels: labels,
                        datasets: [{
                            data: data,
                            backgroundColor: '#B5C1D9',
                            hoverBackgroundColor: '#8C6B23',
                            borderRadius: 3,
                            maxBarThickness: 18,
                        }],
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        animation: { duration: 400 },
                        plugins: {
                            legend: { display: false },
                            tooltip: {
                                backgroundColor: '#14213D',
                                padding: 8,
                                titleFont: { family: 'Public Sans', size: 11 },
                                bodyFont: { family: 'Public Sans', size: 11 },
                            },
                        },
                        scales: {
                            x: {
                                grid: { display: false },
                                ticks: { font: { family: 'Public Sans', size: 10 }, color: '#8891A8' },
                            },
                            y: { display: false, beginAtZero: true, grid: { color: gridColor } },
                        },
                    },
                });
            }

            categoryChart('chart-leads', @json($leadsByStatus->keys()), @json($leadsByStatus->values()));
            categoryChart('chart-companies', @json($companiesByStatus->keys()), @json($companiesByStatus->values()));
            trendChart('chart-contacts', @json($contactsTrend->keys()), @json($contactsTrend->values()));
            categoryChart('chart-deals', @json($dealsByStage->keys()), @json($dealsByStage->values()),
                (ctx) => new Intl.NumberFormat('tr-TR').format(ctx.raw) + ' ₺');
        })();
    </script>
</x-app-layout>