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

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

const Dashboard = () => {
    const barChartData = {
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
        datasets: [
            {
                label: 'CHN',
                data: [12, 19, 8, 15, 12, 8, 16, 20, 15, 14],
                backgroundColor: 'rgb(196, 151, 239)',
            },
            {
                label: 'USA',
                data: [19, 12, 15, 8, 9, 16, 14, 12, 10, 15],
                backgroundColor: 'rgb(86, 207, 225)',
            },
            {
                label: 'UK',
                data: [15, 15, 10, 12, 20, 14, 8, 16, 10, 18],
                backgroundColor: 'rgb(255, 170, 145)',
            },
        ],
    };

    const doughnutChartData = {
        labels: ['Social Media', 'Direct', 'Email', 'Organic'],
        datasets: [
            {
                data: [35, 30, 15, 20],
                backgroundColor: [
                    'rgb(255, 99, 132)',
                    'rgb(54, 162, 235)',
                    'rgb(153, 102, 255)',
                    'rgb(75, 192, 192)',
                ],
                borderWidth: 0,
            },
        ],
    };

    const barChartOptions = {
        responsive: true,
        plugins: {
            legend: {
                display: false,
            },
        },
        scales: {
            x: {
                grid: {
                    display: false,
                },
            },
            y: {
                grid: {
                    display: false,
                },
                ticks: {
                    display: false,
                },
            },
        },
        maintainAspectRatio: false,
    };

    const doughnutChartOptions = {
        responsive: true,
        plugins: {
            legend: {
                display: false,
            },
        },
        cutout: '70%',
        maintainAspectRatio: false,
    };

    const dispatch = useDispatch();

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

    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>
                        <span className="ml-2 text-gray-500">
                            <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 inline" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                        </span>
                    </div>
                </div>

                <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">
                        <div className="flex justify-between">
                            <div>
                                <p className="text-xl font-medium mb-4">Weekly Sales</p>
                                <p className="text-4xl font-bold mb-6">$ 15,0000</p>
                                <p>Increased by 60%</p>
                            </div>
                            <div>
                                <svg xmlns="http://www.w3.org/2000/svg" className="h-10 w-10 text-white opacity-80" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
                                </svg>
                            </div>
                        </div>
                    </div>

                    <div className="rounded-lg overflow-hidden bg-gradient-to-r from-blue-300 to-blue-500 text-white p-6">
                        <div className="flex justify-between">
                            <div>
                                <p className="text-xl font-medium mb-4">Weekly Orders</p>
                                <p className="text-4xl font-bold mb-6">45,6334</p>
                                <p>Decreased by 10%</p>
                            </div>
                            <div>
                                <svg xmlns="http://www.w3.org/2000/svg" className="h-10 w-10 text-white opacity-80" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z" />
                                </svg>
                            </div>
                        </div>
                    </div>

                    <div className="rounded-lg overflow-hidden bg-gradient-to-r from-green-300 to-teal-500 text-white p-6">
                        <div className="flex justify-between">
                            <div>
                                <p className="text-xl font-medium mb-4">Visitors Online</p>
                                <p className="text-4xl font-bold mb-6">95,5741</p>
                                <p>Increased by 5%</p>
                            </div>
                            <div>
                                <svg xmlns="http://www.w3.org/2000/svg" className="h-10 w-10 text-white opacity-80" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 12l-1.25-1.25M12 20l1.25-1.25M4 12l1.25 1.25M12 4l-1.25 1.25M20 12h-2M12 20v-2M4 12h2M12 4v2" />
                                </svg>
                            </div>
                        </div>
                    </div>
                </div>

                <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
                    <div className=" rounded-lg p-6 shadow">
                        <div className="flex justify-between items-center mb-6">
                            <h2 className="text-xl font-bold">Visit And Sales Statistics</h2>
                            <div className="flex space-x-4">
                                <div className="flex items-center">
                                    <span className="h-3 w-3 rounded-full bg-purple-400 mr-1"></span>
                                    <span className="text-gray-500 text-sm">CHN</span>
                                </div>
                                <div className="flex items-center">
                                    <span className="h-3 w-3 rounded-full bg-cyan-400 mr-1"></span>
                                    <span className="text-gray-500 text-sm">USA</span>
                                </div>
                                <div className="flex items-center">
                                    <span className="h-3 w-3 rounded-full bg-orange-300 mr-1"></span>
                                    <span className="text-gray-500 text-sm">UK</span>
                                </div>
                            </div>
                        </div>
                        <div className="h-64">
                            <Bar data={barChartData} options={barChartOptions} />
                        </div>
                    </div>

                    <div className="rounded-lg p-6 shadow">
                        <div className="mb-6">
                            <h2 className="text-xl font-bold">Traffic Sources</h2>
                        </div>
                        <div className="flex justify-center">
                            <div className="h-64 w-64">
                                <Doughnut data={doughnutChartData} options={doughnutChartOptions} />
                            </div>
                        </div>
                        <div className="grid grid-cols-2 md:grid-cols-4 gap-2 mt-6">
                            <div className="flex items-center justify-center">
                                <span className="h-3 w-3 rounded-full bg-pink-400 mr-2"></span>
                                <span className="text-gray-700 text-sm">Social Media</span>
                            </div>
                            <div className="flex items-center justify-center">
                                <span className="h-3 w-3 rounded-full bg-blue-400 mr-2"></span>
                                <span className="text-gray-700 text-sm">Direct</span>
                            </div>
                            <div className="flex items-center justify-center">
                                <span className="h-3 w-3 rounded-full bg-purple-400 mr-2"></span>
                                <span className="text-gray-700 text-sm">Email</span>
                            </div>
                            <div className="flex items-center justify-center">
                                <span className="h-3 w-3 rounded-full bg-teal-400 mr-2"></span>
                                <span className="text-gray-700 text-sm">Organic</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default Dashboard;