import React, { useEffect } from 'react';
import {
    Chart as ChartJS,
    CategoryScale,
    LinearScale,
    BarElement,
    Title,
    Tooltip,
    Legend,
    ArcElement,
} from 'chart.js';
import { Bar } from 'react-chartjs-2';
import { Head, usePage } from '@inertiajs/react';
import { useDispatch } from 'react-redux';
import { setPageTitle } from '@/Components/features/common/headerSlice';
import { Squares2X2Icon } from '@heroicons/react/24/outline';

ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend, ArcElement);

const Dashboard = () => {
    const dispatch = useDispatch();

    // Ambil data dari Inertia props
    const { props } = usePage();
    const {
        monthlyIncome = 0,
        studentCount = 0,
        totalBalance = 0,
        paymentTrend = { labels: [], data: [] },
    } = props;

    useEffect(() => {
        dispatch(setPageTitle('Dashboard'));
    }, [dispatch]);

    const barChartData = {
        labels: paymentTrend.labels,
        datasets: [
            {
                label: 'Pemasukan Bulanan',
                data: paymentTrend.data,
                backgroundColor: 'rgb(86, 207, 225)',
            },
        ],
    };

    const barChartOptions = {
        responsive: true,
        plugins: {
            legend: { display: false },
            title: {
                display: true,
                text: 'Tren Pemasukan Bulanan',
                font: { size: 16, weight: 'bold' },
            },
            tooltip: {
                callbacks: {
                    label: function (context) {
                        return `Rp ${context.parsed.y.toLocaleString()}`;
                    },
                },
            },
        },
        scales: {
            x: { grid: { display: false } },
            y: {
                grid: { display: false },
                ticks: {
                    callback: function (value) {
                        return `Rp ${value.toLocaleString()}`;
                    },
                },
            },
        },
        maintainAspectRatio: false,
    };

    return (
        <div className="card bg-base-100 shadow-xl">
            <Head title="Dashboard" />
            <div className="card-body">
                <div className="flex items-center mb-6">
                    <div className="bg-gradient-to-tr from-blue-400 to-blue-600 p-3 rounded-lg mr-3">
                        <Squares2X2Icon className="h-6 w-6 text-white" />
                    </div>
                    <h1 className="text-2xl font-bold">Dashboard</h1>
                    <div className="ml-auto">
                        <span className="text-gray-700">Overview</span>
                    </div>
                </div>

                {/* Kartu info utama */}
                <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
                    <div className="rounded-lg overflow-hidden bg-gradient-to-r from-orange-300 to-pink-400 text-white p-6">
                        <p className="text-xl font-medium mb-4">Pemasukan Bulan Ini</p>
                        <p className="text-4xl font-bold mb-6">
                            Rp {(Number(monthlyIncome) || 0).toLocaleString()}
                        </p>
                    </div>

                    <div className="rounded-lg overflow-hidden bg-gradient-to-r from-blue-300 to-blue-500 text-white p-6">
                        <p className="text-xl font-medium mb-4">Santri Aktif</p>
                        <p className="text-4xl font-bold mb-6">{studentCount || 0}</p>
                    </div>

                    <div className="rounded-lg overflow-hidden bg-gradient-to-r from-green-300 to-teal-500 text-white p-6">
                        <p className="text-xl font-medium mb-4">Total Saldo Wallet</p>
                        <p className="text-4xl font-bold mb-6">
                            Rp {(Number(totalBalance) || 0).toLocaleString()}
                        </p>
                    </div>
                </div>

                {/* Grafik Tren Pembayaran */}
                <div className="w-full bg-base-100">
                    <div className="rounded-lg p-6 shadow">
                        <div className="flex justify-between items-center mb-6">
                            <h2 className="text-xl font-bold">Tren Pembayaran 12 Bulan Terakhir</h2>
                        </div>
                        <div className="h-64">
                            <Bar data={barChartData} options={barChartOptions} />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default Dashboard;
