@extends('layouts.app')

@section('title', 'Innovation Statistics')

@section('content')
<div class="container py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h2 class="fw-bold mb-0">Innovation Statistics</h2>
        </div>
    </div>

    <div class="row g-4">
        <div class="col-md-6 col-lg-4">
            <div class="card shadow-sm"><div class="card-body">
                <h5 class="fw-bold">Gender</h5>
                <canvas id="genderChart"></canvas>
            </div></div>
        </div>

        <div class="col-md-6 col-lg-4">
            <div class="card shadow-sm"><div class="card-body">
                <h5 class="fw-bold">Funding Status</h5>
                <canvas id="fundingChart"></canvas>
            </div></div>
        </div>

        <div class="col-md-6 col-lg-4">
            <div class="card shadow-sm"><div class="card-body">
                <h5 class="fw-bold">Partnerships</h5>
                <canvas id="partnershipChart"></canvas>
            </div></div>
        </div>

        <div class="col-md-12">
            <div class="card shadow-sm"><div class="card-body">
                <h5 class="fw-bold">Categories</h5>
                <canvas id="categoryChart" height="110"></canvas>
            </div></div>
        </div>

        <div class="col-md-6">
            <div class="card shadow-sm"><div class="card-body">
                <h5 class="fw-bold">Stage</h5>
                <canvas id="stageChart"></canvas>
            </div></div>
        </div>

        <div class="col-md-6">
            <div class="card shadow-sm"><div class="card-body">
                <h5 class="fw-bold">Innovation Year ({{ $minYear }}+)</h5>
                <canvas id="yearChart"></canvas>
            </div></div>
        </div>
    </div>
</div>

{{-- Chart.js --}}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
    const toLabels = (obj) => Object.keys(obj || {});
    const toValues = (obj) => Object.values(obj || {});

    const pretty = (s) => {
        if (!s) return 'Unknown';
        return s.toString()
            .replaceAll('_', ' ')
            .trim()
            .replace(/\b\w/g, c => c.toUpperCase()); // Title Case
    };

    const gender = @json($genderStats);
    const funding = @json($fundingStats);
    const partnership = @json($partnershipStats);
    const stage = @json($stageStats);
    const years = @json($yearStats);
    const categories = @json($categoryStats);

    function normalize(obj) {
        const out = {};
        for (const [k, v] of Object.entries(obj || {})) {
            out[pretty(k)] = v;
        }
        return out;
    }

    function makePie(id, dataObj) {
        const el = document.getElementById(id);
        if (!el) return;

        const labels = toLabels(dataObj);
        const values = toValues(dataObj);

        if (!labels.length) {
            el.parentElement.innerHTML += `<p class="text-muted mb-0">No data available.</p>`;
            return;
        }

        new Chart(el, {
            type: 'doughnut',
            data: { labels, datasets: [{ data: values }] },
            options: {
                responsive: true,
                plugins: { legend: { position: 'bottom' } }
            }
        });
    }

    // Nice palette (repeatable)
        const palette = [
        '#0d6efd', '#198754', '#ffc107', '#dc3545', '#6f42c1', '#20c997',
        '#fd7e14', '#0dcaf0', '#6610f2', '#6c757d', '#212529', '#e83e8c'
        ];

        function colorsFor(n) {
        const out = [];
        for (let i = 0; i < n; i++) out.push(palette[i % palette.length]);
        return out;
        }


    function makeBar(id, dataObj, horizontal=false) {
        const el = document.getElementById(id);
        if (!el) return;

        const labels = toLabels(dataObj);
        const values = toValues(dataObj);

        if (!labels.length) {
            el.parentElement.innerHTML += `<p class="text-muted mb-0">No data available.</p>`;
            return;
        }

        const barColors = colorsFor(labels.length);

        new Chart(el, {
            type: 'bar',
            data: {
                labels,
                datasets: [{
                    data: values,
                    backgroundColor: barColors,
                    borderColor: barColors,
                    borderWidth: 1,
                    borderRadius: 8
                }]
            },
            options: {
                responsive: true,
                indexAxis: horizontal ? 'y' : 'x',
                plugins: { legend: { display: false } },
                scales: {
                    y: { beginAtZero: true },
                    x: {
                        ticks: {
                            autoSkip: false,
                            maxRotation: horizontal ? 0 : 45,
                            minRotation: horizontal ? 0 : 0
                        }
                    }
                }
            }
        });
    }

    // Normalize labels for nicer display
    makePie('genderChart', normalize(gender));
    makePie('fundingChart', normalize(funding));
    makePie('partnershipChart', normalize(partnership));

    // Categories usually already have nice names
    makeBar('categoryChart', categories, true);

    makeBar('stageChart', normalize(stage), false);
    makeBar('yearChart', years, false); // years are numbers already, keep as-is
</script>

@endsection