"use client";

import { AvatarImageNoRounded, GPS2SVG, SeatImage } from "@/assets/svg";
import { Button } from "@/components/ui/buttons/Button";
import { AreaChartCard, BarChartCard, RadialChartCard } from "@/components/ui/charts";
import CustomImage from "@/components/ui/miscellaneous/CustomImage";
import { H3, P, S } from "@/components/ui/typography";
import { useTranslations } from "next-intl";

import React from "react";

const SixthSection = () => {
    const t = useTranslations();

    const content = {
        Radial1: {
            data: [
                { value: 88, fill: "#3194ED" },
            ],
            config: {
                value: {
                    label: t("Battery"),
                },

            },
            dataKey: "value",
        },
        Radial2: {
            data: [
                { value: 100, fill: "#3194ED", displayValue: "ON" },
            ],
            config: {
                value: {
                    label: t("Engine Status"),
                },

            },
            dataKey: "value",
        },
        Radial3: {
            data: [
                { value: 45, fill: "hsla(38, 91%, 66%, 1)" },
            ],
            config: {
                value: {
                    label: t("Fuel"),
                },

            },
            dataKey: "value",
        },
        Radial4: {
            data: [
                { value: 100, fill: "#3194ED" },
            ],
            config: {
                value: {
                    label: t("Engine Oil"),
                },

            },
            dataKey: "value",
        },
        barChart: {
            title: "Consommation de carburant",
            unit: "",
            data: [
                { month: "12", quantity: 4, },
                { month: "", quantity: 2 },
                { month: "", quantity: 3 },
                { month: "16", quantity: 2 },
                { month: "", quantity: 6 },
                { month: "", quantity: 4 },
                { month: "20", quantity: 3 },
                { month: "", quantity: 5 },
                { month: "", quantity: 2 },
                { month: "", quantity: 1 },

            ],
            config: {
                quantity: {
                    label: "Quantity",
                    color: "hsl(var(--primary))",
                },
            }
        },
        lineChart1: {
            title: "Emissions de CO2",
            unit: "",
            axis: true,
            data: [
                { month: "Jan", millage: 90 },
                { month: "Mars", millage: 90 },
                { month: "Mars", millage: 85 },
                { month: "Mars", millage: 85 },
                { month: "Mars", millage: 70 },
                { month: "Mars", millage: 68 },
                { month: "Mars", millage: 67 },
                { month: "Juin", millage: 60 },
            ],
            config: {
                millage: {
                    label: "Millage",
                    color: "hsla(208, 88%, 49%, 0.5)",
                },
            },
        },
    }

    return (
        <section className="flex flex-col-reverse xl:flex-row justify-between items-start xl:items-center gap-y-10 gap-x-20 rounded-md w-full mt-20">
            <div className="flex flex-col gap-2 max-sm:gap-y-8  bg-white p-4 w-full rounded-md shadow-lg">
                <div className="p-4">
                    <div className="flex max-sm:flex-col items-start justify-between gap-4">
                        <div className="flex-1 flex flex-col justify-between gap-10">
                            <div className="flex gap-2">
                                <CustomImage   pageTitle={""} src={AvatarImageNoRounded} className="w-14 h-14 rounded-[8px] object-cover " alt="geo tracking" />
                                <div className="flex flex-col gap-1">
                                    <S>Jhon Martin</S>
                                    <div className="w-24 h-2 bg-gray-200 rounded-full"></div>
                                    <div className="w-16 h-2 bg-gray-200 rounded-full"></div>
                                </div>
                            </div>
                            <div className="flex gap-2">
                                <CustomImage   pageTitle={""} src={SeatImage} className="w-[48px] h-[48px] object-cover" alt="geo tracking" />
                                <div className="flex flex-col">
                                    <S>SEAT MARBELLA</S>
                                    <S className="text-[#71717A] font-[400]">VG987KL</S>
                                </div>
                            </div>
                            <div className="flex gap-2">
                                <div className="w-[36px] h-[36px] bg-[#E7F3FD] flex items-center justify-center rounded-[30px]">
                                    <GPS2SVG className="w-[24px] h-[24px] text-primary" />
                                </div>
                                <div className="flex flex-col">
                                    <S className="text-[#71717A] font-[400]">{t("Position")}</S>
                                    <S>Avenue de Bouvines, Paris</S>
                                </div>
                            </div>
                        </div>
                        <div className="flex-1 flex items-start justify-start flex-wrap -ml-6 -mt-4 sm:-mt-10">
                            <RadialChartCard content={content.Radial1} scale={0.9} />
                            <RadialChartCard content={content.Radial2} scale={0.9} />
                            <RadialChartCard content={content.Radial3} scale={0.9} />
                            <RadialChartCard content={content.Radial4} scale={0.9} />
                        </div>
                    </div>
                </div>
                <div className="min-w-[100%] sm:min-w-[528px] -translate-x-6 ">
                    <BarChartCard content={content.barChart} barSize={25} xLabel={t("Days")} yLabel="KW" className='text-center text-gray-500 sm:min-w-full min-w-[100%] lg:col-span-2  mb-10 ' />
                    <AreaChartCard showX={false} content={content.lineChart1} yLabel="G/m" chartClassName="max-h-[85px]" className='text-center text-gray-500 sm:min-w-full !min-w-full lg:col-span-2  mt-16' />
                </div>

            </div>
            <div className="flex flex-col gap-6 xl:gap-10 ">
                <div className="flex flex-col gap-2 xl:gap-4">
                    <H3>{t("Automated reporting for optimized management")}</H3>
                    <P>{t("With accurate and automated reporting, gain complete visibility into your fleet's performance")}</P>
                    <P>{t("Monitor the status of your vehicles in real time, analyze consumption trends and anticipate needs to make informed decisions")}</P>
                </div>

                <Button url='#contact' className="w-fit">{t("Start now")}</Button>
            </div>
        </section>
    );
};

export default SixthSection;