import { Box, Typography, useTheme } from "@mui/material";
import {
    Chart as ChartJS,
    CategoryScale,
    LinearScale,
    BarElement,
    Title,
    Tooltip,
    Legend,
    ArcElement,
    LineElement,
    PointElement,
} from "chart.js";
import { Bar, Pie, Line } from "react-chartjs-2";

// Chart.js registrieren
ChartJS.register(
    CategoryScale,
    LinearScale,
    BarElement,
    Title,
    Tooltip,
    Legend,
    ArcElement,
    LineElement,
    PointElement
);

export default function StatisticsInfo() {
    const theme = useTheme();

    const weeklySalesData = {
        labels: ["Week 1", "Week 2", "Week 3", "Week 4"],
        datasets: [
            {
                label: "Weekly Sales (€)",
                data: [1200, 2100, 800, 1600],
                backgroundColor: theme.palette.mode === "dark"
                    ? "rgba(0, 230, 255, 0.5)"
                    : "rgba(75, 192, 192, 0.5)",
                borderColor: theme.palette.mode === "dark"
                    ? "rgba(0, 230, 255, 1)"
                    : "rgba(75, 192, 192, 1)",
                borderWidth: 1,
            },
        ],
    };

    const itemSalesData = {
        labels: ["Tomatensamen", "Blumenerde", "Gießkanne", "Pflanzendünger"],
        datasets: [
            {
                label: "Item Sales",
                data: [400, 300, 200, 100],
                backgroundColor: [
                    theme.palette.warning.main,
                    theme.palette.info.main,
                    theme.palette.success.main,
                    theme.palette.secondary.main,
                ],
                hoverBackgroundColor: [
                    theme.palette.warning.light,
                    theme.palette.info.light,
                    theme.palette.success.light,
                    theme.palette.secondary.light,
                ],
            },
        ],
    };

    const userSalesData = {
        labels: ["John Doe", "Jane Smith", "Alice Johnson", "Bob Brown"],
        datasets: [
            {
                label: "Sales by User",
                data: [5, 8, 3, 6],
                fill: false,
                borderColor: theme.palette.primary.main,
                backgroundColor: theme.palette.primary.light,
                tension: 0.1,
            },
        ],
    };

    const baseOptions = {
        responsive: true,
        plugins: {
            legend: {
                position: "top" as const,
                labels: {
                    color: theme.palette.text.primary,
                },
            },
            title: {
                display: false,
            },
        },
        scales: {
            x: {
                ticks: { color: theme.palette.text.primary },
                grid: {
                    color: theme.palette.divider,
                },
            },
            y: {
                ticks: { color: theme.palette.text.primary },
                grid: {
                    color: theme.palette.divider,
                },
            },
        },
    };

    return (
        <Box sx={{ color: theme.palette.text.primary }}>
            <Typography variant="h4" align="center" gutterBottom>
                Sales Statistics
            </Typography>

            <Box sx={{ mb: 4 }}>
                <Typography variant="h6" align="center" gutterBottom>
                    Weekly Sales
                </Typography>
                <Bar data={weeklySalesData} options={baseOptions} />
            </Box>

            <Box sx={{ mb: 4 }}>
                <Typography variant="h6" align="center" gutterBottom>
                    Item Sales Distribution
                </Typography>
                <Pie
                    data={itemSalesData}
                    options={{
                        ...baseOptions,
                        scales: undefined, // Pie braucht keine Achsen
                    }}
                />
            </Box>

            <Box>
                <Typography variant="h6" align="center" gutterBottom>
                    Sales by User
                </Typography>
                <Line data={userSalesData} options={baseOptions} />
            </Box>
        </Box>
    );
}
