import { Car5Image, Car6Image, Car7Image } from '@/assets/svg'
import { metaTitles } from '@/components/metaData/metaTitles'
import { CustomCard } from '@/components/ui/cards'
import { PieChartCard } from '@/components/ui/charts'
import CustomImage from '@/components/ui/miscellaneous/CustomImage'
import { Table, TableBody , TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/tables/CustomTable'
import { S } from '@/components/ui/typography'
import { useTranslations } from 'next-intl'

import React from 'react'

const OperationalExpensePresentationGraphics = () => {
    const t = useTranslations()
    const content = {
        pieChart: {
            title: "Expenses per vehicle",
            unit: "€",
            data: [
                { service: "Mercedes A45 Acedg", value: 1200, fill: "hsla(38, 91%, 66%, 1)" },
                { service: "Peugeot 208  ", value: 300, fill: "hsla(208, 88%, 49%, 1)" },
                { service: "Peugeot Expert", value: 1300, fill: "hsla(0, 84%, 60%, 1)" },
                { service: "Others Vehicles", value: 1250, fill: "hsla(240, 4%, 46%, 1)" },
            ],
            config: {
                value: {
                    label: "Cost",
                },
            }
        },
    }
    const operations = [
        {
            vehicle: "Peugeot 208",
            image: Car5Image,
            serviceCosts: "1500 €",
            fuelCosts: "500 €",
            otherCost: "300 €",
            totalCosts: "2321 €",
            costKm: "3 €",
        },
        {
            vehicle: "Peugeot Expert",
            image: Car6Image,
            serviceCosts: "100 €",
            fuelCosts: "130 €",
            otherCost: "25 €",
            totalCosts: "1155 €",
            costKm: "2.5 €",
        },
        {
            vehicle: "Renault Grande",
            image: Car7Image,
            serviceCosts: "2000 €",
            fuelCosts: "3200 €",
            otherCost: "580 €",
            totalCosts: "5780 €",
            costKm: "0.2 €",
        },


    ]
    return (
        <div className='flex flex-col gap-3'>
            <CustomCard className='' >
                <Table className='text-[12px] max-sm:text-[10px]'>
                    <TableHeader>
                        <TableRow>
                            <TableHead className='w-44' >{t("Vehicles")}</TableHead>
                            <TableHead>{t("Service Costs")}</TableHead>
                            <TableHead>{t("Fuel Costs")}</TableHead>
                            <TableHead className='max-sm:hidden'>{t("Other Cost")}</TableHead>
                            <TableHead>{t("Total Cost")}</TableHead>
                            <TableHead className="text-right max-sm:hidden">{t("Cost/Km")}</TableHead>
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        {operations.map((operation) => (
                            <TableRow key={operation.vehicle}>
                                <TableCell className='flex items-center gap-2  text-primary underline' ><CustomImage pageTitle={metaTitles?.featuresOperationalExpenseMeta_Title} src={operation.image} className='w-7 h-7 object-contain' alt={operation.vehicle} />{operation.vehicle}</TableCell>
                                <TableCell>{operation.serviceCosts}</TableCell>
                                <TableCell>{operation.fuelCosts}</TableCell>
                                <TableCell className='max-sm:hidden'>{operation.otherCost}</TableCell>
                                <TableCell className='whitespace-nowrap'>{operation.totalCosts}</TableCell>
                                <TableCell className="text-right max-sm:hidden  ">{operation.costKm}</TableCell>
                            </TableRow>
                        ))}
                    </TableBody>
                </Table>
            </CustomCard>
            <div className='flex items-center gap-2 w-full justify-between max-sm:flex-col '>
                <CustomCard className=' w-full bg-gray-200 relative px-8 py-6'>
                    <div className='bg-lightBackground w-full h-full p-4 rounded-lg flex flex-col gap-2 mt-3'>
                        <span className='absolute h-1 w-20 bg-gray-600 rounded-lg top-[13%] right-[calc(50%-40px)]'></span>
                        <S className=''>{t("Expenses")}</S>
                        <div className='border rounded-lg p-2 flex flex-col gap-2'>
                            <div className='flex items-center justify-between '>
                                <S className='text-[12px]'>{t("Telematics")}</S>
                                <S className='text-muted-foreground text-[10px]'>16/07/2024</S>
                            </div>
                            <div className='flex items-center justify-between '>
                                <S className='text-[12px]'>156.12€</S>
                                <S className='text-muted-foreground text-[10px]'>{t("Mobility")}</S>
                            </div>
                        </div>
                        <div className='border rounded-lg p-2 flex flex-col gap-2'>
                            <div className='flex items-center justify-between '>
                                <S className='text-[12px]'>{t("Vehicle Registration")}</S>
                                <S className='text-muted-foreground text-[10px]'>16/07/2024</S>
                            </div>
                            <div className='flex items-center justify-between '>
                                <S className='text-[12px]'>156.12€</S>
                                <S className='text-muted-foreground text-[10px]'>{t("Vehicle")}</S>
                            </div>
                            <div className='flex items-center gap-2'>
                                <CustomImage pageTitle={metaTitles?.featuresOperationalExpenseMeta_Title} src={Car5Image} className='w-8 h-8 object-contain' alt="Vehicle" />
                                <div className='flex flex-col gap-0'>
                                    <S className=' text-[10px]'>Peugeot 208 A3F 2021</S>
                                    <S className='text-muted-foreground text-[10px]'>A3B1246</S>
                                </div>
                            </div>
                        </div>
                    </div>
                </CustomCard>
                <CustomCard className=' w-full'>
                    <PieChartCard content={content.pieChart} className='lg:h-[130px] ' />
                </CustomCard>
            </div>
        </div>

    )
}

export default OperationalExpensePresentationGraphics