import { Button } from '@/components/ui/buttons/Button'
import { CustomCard } from '@/components/ui/cards'
import { BarChartCard, PieChartCard } from '@/components/ui/charts'
import { H3, P } from '@/components/ui/typography'
import { BadgeCheckIcon } from 'lucide-react'
import { useTranslations } from 'next-intl'
import React from 'react'

const GestionParcReports = () => {
    const t = useTranslations()

    const content = {
        pieChart: {
            title: "Vehicle uses",
            unit: "%",
            data: [
                { service: "Carpooling", value: 58, fill: "hsla(144, 51%, 51%, 1)" },
                { service: "Attribution", value: 27, fill: "hsla(0, 84%, 60%, 1)" },
                { service: "Convoy", value: 15, fill: "hsla(208, 88%, 49%, 1)" },
            ],

            config: {
                value: {
                    label: t("Cost"),
                },
            }
        },
        pieChartLarge: {
            title: "Repair status",
            data: [
                { service: "Future", value: 10, fill: "hsla(38, 91%, 66%, 1)" },
                { service: "Finished", value: 15, fill: "hsla(0, 84%, 60%, 1)" },
                { service: "Late", value: 8, fill: "hsla(208, 88%, 49%, 1)" },
                { service: "Resolved", value: 35, fill: "hsla(144, 51%, 51%, 1)" }
            ],

            config: {
                value: {
                    label: "Cost",
                },
            }
        },
        barChart: {
            title: "Fuel consumption",
            unit: "k",
            data: [
                { month: "Jan", vehicle1: 1, vehicle2: 1, vehicle3: 1 },
                { month: "Fév", vehicle1: 2, vehicle2: 1, vehicle3: 1 },
                { month: "Mars", vehicle1: 1, vehicle2: 1, vehicle3: 1 },
                { month: "Avr", vehicle1: 2, vehicle2: 1, vehicle3: 1 },
                { month: "Mai", vehicle1: 1, vehicle2: 1, vehicle3: 1 },
                { month: "Juin", vehicle1: 1, vehicle2: 2, vehicle3: 1 },
            ],
            config: {
                vehicle1: {
                    label: "Mercedes A45 Acedg",
                    color: "hsla(0, 84%, 60%, 1)",
                },
                vehicle2: {
                    label: "Peugeot Expert",
                    color: "hsla(38, 91%, 66%, 1)",
                },
                vehicle3: {
                    label: "Peugeot 3008",
                    color: "hsla(144, 51%, 51%, 1)",
                },
            }
        },
        barChart2: {
            title: "Problems by vehicle",
            data: [
                { month: "Mercedes A45 Acedg", vehicle1: 4, fill: '#41C174' },
                { month: "Peugeot Expert", vehicle1: 3, fill: '#F7BC58' },
                { month: "Peugeot 3008", vehicle1: 1, fill: '#09090B80' },
            ],
            config: {
                vehicle1: {
                    label: "Mercedes A45 Acedg",
                    color: "hsla(0, 84%, 60%, 1)",
                }
            }
        },
    }
    return (
        <section className="w-full !pt-10 px-6 sm:px-0">

            <div className='flex flex-col lg:flex-row items-center gap-x-16 gap-y-10'>
                <div className='flex-1'>
                    <div>
                        <H3 className='!text-[24px] lg:!text-[28px] font-[600] !text-gray-800'>{t("Smart and automated fleet reporting")}</H3>
                        <P className='!text-gray-600  !text-[16px] mt-4'>{t("Transform your raw data into strategic and profitable decisions")} </P>
                        <div className='mt-6' >
                            <div className='flex items-center gap-2'>
                                <BadgeCheckIcon fill='hsl(var(--primary))' className='text-white  w-[24px] h-[24px]' />
                                <P className='!text-gray-700 font-[600]  !text-[16px]'>{t("Library of +50 Reports")} :</P>
                            </div>
                            <P className='!text-gray-600  !text-[16px] mt-2'>{t("Access a vast library of reports to analyze every aspect of your fleet and quickly identify optimization levers")}</P>
                        </div>
                        <div className='mt-6' >
                            <div className='flex items-center gap-2'>
                                <BadgeCheckIcon fill='hsl(var(--primary))' className='text-white  w-[24px] h-[24px]' />
                                <P className='!text-gray-700 font-[600]  !text-[16px]'>{t("Analysis of Key Indicators (KPIs)")} :</P>
                            </div>
                            <P className='!text-gray-600  !text-[16px] mt-2'>{t("Easily track TCO, TCM, CO₂ emissions, utilization rate or cost per kilometer to manage the performance of your fleet")}</P>
                        </div>
                        <div className='mt-6'>
                            <Button className="w-fit bg-[#0F82EA] text-[14px] lg:text-[16px]">{t("Request a Demo")}</Button>
                        </div>
                    </div>
                </div>
                <div className='flex-1 flex flex-col gap-4'>
                    <div className='flex gap-4 flex-col lg:flex-row'>
                        <CustomCard className='flex-1' >
                            <PieChartCard content={content.pieChart} />
                        </CustomCard>
                        <CustomCard className='flex-1'>
                            <BarChartCard content={content.barChart2} barSize={24} className='!w-full !h-fit' titleCenter={false} />
                        </CustomCard>

                    </div>
                    <div className='flex gap-4 flex-col lg:flex-row'>
                        <CustomCard className='flex-1'>
                            <PieChartCard content={content.pieChartLarge} />
                        </CustomCard>
                        <CustomCard className='flex-1'>
                            <BarChartCard content={content.barChart} className='!w-full !h-fit' />
                        </CustomCard>

                    </div>
                </div>

            </div>
        </section>
    )
}

export default GestionParcReports