import { Car4Image, LeafSVG, Car6Image, Car5Image, CriticalIssueImage } from "@/assets/svg";
import { metaTitles } from "@/components/metaData/metaTitles";
import { CustomCard } from "@/components/ui/cards";
import CustomImage from "@/components/ui/miscellaneous/CustomImage";
import { TableBody, TableCell, TableHead, TableHeader, TableRow, Table } from "@/components/ui/tables/CustomTable";
import { H4, H5, S } from "@/components/ui/typography";
import { useTranslations } from "next-intl";


const ConducteurPresentationGraphics1 = () => {
    const t = useTranslations()
    const content = {
        lineChart1: {
            data: [
                { month: "Jan", millage: 0 },
                { month: "Mars", millage: 30 },
                { month: "Mars", millage: 28 },
                { month: "Juin", millage: 45 },
            ],
            config: {
                millage: {
                    label: "Millage",
                    color: "hsla(144, 51%, 51%, 1)",
                },
            },
        },
        lineChart2: {
            data: [
                { month: "Jan", fuelConsumption: 10 },
                { month: "Mars", fuelConsumption: 40 },
                { month: "Mars", fuelConsumption: 46 },
                { month: "Juin", fuelConsumption: 35 },
                { month: "Juin", fuelConsumption: 35 },
                { month: "Juin", fuelConsumption: 32 },
                { month: "Juin", fuelConsumption: 5 },
            ],
            config: {
                fuelConsumption: {
                    label: "Fuel",
                    color: "hsla(var(--destructive))",
                },
            },
        },
        lineChart3: {
            data: [
                { month: "Jan", tripsTaken: 0 },
                { month: "Mars", tripsTaken: 30 },
                { month: "Mars", tripsTaken: 28 },
                { month: "Juin", tripsTaken: 45 },
            ],
            config: {
                tripsTaken: {
                    label: "Trips Taken",
                    color: "hsla(144, 51%, 51%, 1)",
                },
            },
        },
        issues: [
            {
                issue: "Tire rotation",
                image: Car5Image,
                priority: "Critical",
                vehicles: "Peugeot 208",
                status: "Inactive",
                statusColor: "#EF4444CC",
                licensePlate: "A3B1246",
                odometer: 10000,
                operator: "Jules Lambert"
            },
            {
                issue: "Break pad change",
                image: Car5Image,
                priority: "High",
                vehicles: "Peugeot Expert",
                status: "Active",
                statusColor: "#EF4444CC",
                licensePlate: "A3B1346",
                odometer: 10000,
                operator: "Hugo Martin"
            },
            {
                issue: "Windshield",
                image: Car6Image,
                priority: "Low",
                vehicles: "Renault Grande",
                status: "Inactive",
                statusColor: "#41C174",
                licensePlate: "A3B1226",
                odometer: 5000,
                operator: "Paul Garnier"
            },


        ],
    };

    return (
        <div className="flex flex-col justify-center gap-4  w-full">
            <CustomCard className='flex items-center gap-4 w-full'>
                <S className=' max-sm:min-w-14 max-sm:h-14 sm:min-w-20 sm:h-20 bg-primary/20 text-primary flex items-center justify-center rounded-full'>JPD</S>
                <div className='flex flex-col gap-4 w-full'>
                    <div className='flex items-center gap-4'>
                        <H5 className='max-sm:text-sm'>Jean Pierre DuBois</H5>
                        <S className='bg-green-400 p-1 px-3 text-center rounded-2xl text-white max-sm:text-[10px]'>Active</S>
                    </div>
                    <div className='flex items-center flex-wrap gap-x-8 gap-y-4 max-sm:!text-[10px] h'>
                        <div className='flex flex-col '>
                            <S className='text-muted-foreground !font-medium max-sm:!text-[10px]'>{t("Role")}</S>
                            <S className='max-sm:!text-[10px]'>{"Driver"}</S>
                        </div>
                        <div className='flex flex-col '>
                            <S className='text-muted-foreground !font-medium max-sm:!text-[10px]'>{t("Email")}</S>
                            <S className='text-primary underline max-sm:!text-[10px]'>{"JPdubois@gmail,com"}</S>
                        </div>
                        <div className='flex flex-col '>
                            <S className='text-muted-foreground !font-medium max-sm:!text-[10px]'>{t("Driving Score")}</S>
                            <S className='text-primary max-sm:!text-[10px]'>{"89%"}</S>
                        </div>
                    </div>
                </div>
            </CustomCard>
            <CustomCard className='' >
                <H4>{t("Issues")}</H4>
                <Table className='text-[12px] max-sm:text-[10px]'>
                    <TableHeader>
                        <TableRow>
                            <TableHead className={""}>{t("Issue")}</TableHead>
                            <TableHead className={""}>{t("Priority")}</TableHead>
                            <TableHead className={""}>{t("Vehicle")}</TableHead>
                            <TableHead className={""}>{t("Odometer")}</TableHead>
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        {content.issues.map((site, i) => (
                            <TableRow key={i}>
                                <TableCell className=''>{site.issue}</TableCell>
                                <TableCell className="" ><div className="flex items-center gap-1">{site.priority === 'Critical' ? <CustomImage pageTitle={metaTitles?.featuresConducteurMeta_Title} className="w-4 h-4" src={CriticalIssueImage} alt="driver alerte issue" /> : <div className={`w-4 h-4 rounded-[100%] bg-[${site.statusColor}]`}></div>}<p className="mt-[2px]">{site.priority}</p></div></TableCell>
                                <TableCell className='text-primary underline flex items-center gap-2'><CustomImage pageTitle={metaTitles?.featuresConducteurMeta_Title} src={site?.image} alt='' className='hidden sm:block w-9 h-9 object-contain' />{site.vehicles}</TableCell>
                                <TableCell className=''>{site.odometer}</TableCell>
                            </TableRow>
                        ))}
                    </TableBody>
                </Table>
            </CustomCard>
            <CustomCard className="flex items-center flex-wrap p-6 gap-6 w-full">
                <div className="flex items-center gap-2">
                    <CustomImage pageTitle={metaTitles?.featuresConducteurMeta_Title} src={Car4Image} alt="driver vehicle" className="w-[52px] h-[41px] object-cover p-[1px]" />
                    <div className="flex flex-col">
                        <S>Mercedes</S>
                        <S className="text-muted-foreground font-normal">Mercedes Benz</S>
                    </div>
                </div>
                <div className="flex flex-col gap-2">
                    <S className="max-sm:!text-[11px] text-muted-foreground font-normal">{t("Score")}</S>
                    <S className="max-sm:!text-[11px]  font-normal bg-[#42c275] px-1 text-white rounded">90%</S>
                </div>
                <div className="flex flex-col gap-2">
                    <S className="max-sm:!text-[11px] text-muted-foreground font-normal">{t("Fuel")}</S>
                    <S className="max-sm:!text-[11px]  font-normal ">8 L</S>
                </div>
                <div className="flex flex-col gap-2">
                    <S className="max-sm:!text-[11px] text-muted-foreground font-normal">{t("Cost")}</S>
                    <S className="max-sm:!text-[11px]  font-normal ">250 €</S>

                </div>
                <div className="flex flex-col gap-2">
                    <S className="max-sm:!text-[11px] text-muted-foreground font-normal">{t("CO2Emission")}</S>
                    <S className="max-sm:!text-[11px]  font-normal flex items-center gap-1 ">3 g/km <LeafSVG /></S>

                </div>
                <div className="flex flex-col gap-2 max-sm:hidden">
                    <S className="max-sm:!text-[11px] text-muted-foreground font-normal">{t("Duration")}</S>
                    <S className="max-sm:!text-[11px]  font-normal ">3 h</S>
                </div>
            </CustomCard>
        </div>

    );
};

export default ConducteurPresentationGraphics1;