import { Button } from '@/components/ui/buttons/Button';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/tables/CustomTable';
import { H3, H4, H6, S } from '@/components/ui/typography';
import { IComparisons, IPlan } from '@/models/Pricing';
import { Check, Minus } from 'lucide-react';
import { useLocale, useTranslations } from 'next-intl';
import React from 'react'

interface IPricingComparisons {
    comparisons: IComparisons[]
    plansList: IPlan[]
}
const PricingComparisons = ({ comparisons, plansList }: IPricingComparisons) => {
    const plans = comparisons?.flatMap((category) =>
        category.features?.flatMap((feature) => Object.keys(feature.included))
    );
    const uniquePlans = Array.from(new Set(plans));
    const locale = useLocale()
    const isFr = locale === "fr"
    const t = useTranslations()
    return (
        <div id="comparaison" className='flex flex-col justify-center items-center gap-20'>
            <Table   >
                <TableHeader className=' bg-white '>
                    <TableRow className='border-none '>
                        <TableHead className='flex flex-col gap-2 my-4'>
                            <H4 className='text-foreground'>{t("Pricing Comparison")}</H4>
                            <H6 className='!font-normal w-72'>{t("Find the subscription that makes the most sense for you or your team")}</H6>
                        </TableHead>
                        {plansList?.map((plan, i) => (
                            <TableHead
                                key={i}
                                className='pt-3'
                            >
                                <div className='  mb-6 flex flex-col justify-center items-start gap-4'>
                                    <H3 className='text-foreground sm:w-[200px] max-sm:text-sm'>{isFr ? plan.display_nameFr : plan?.display_name}</H3>
                                    <div className='flex items-center'>
                                        <H4>{plan.discounted_price}</H4>
                                        <S className='text-muted-foreground'>{t("/Vehicle/mo")}</S>
                                    </div>
                                    <Button className=' mt-2  sm:w-[200px] max-sm:!text-sm'><S className='max-sm:text-[10px]'>{t("Begin Plan")}</S></Button>
                                </div>
                            </TableHead>
                        ))}
                    </TableRow>
                </TableHeader>
                {comparisons?.map((category, i) => (
                    <TableBody key={i} className=' bg-white  '>
                        <React.Fragment key={i}>
                            <TableRow className='border-none '>
                                <TableCell
                                    colSpan={uniquePlans.length + 1}
                                    className='font-bold rounded-t-md  '
                                >
                                    <H6 className='max-sm:text-[12px]'>{isFr ? category.categoryFr : category.category}</H6>
                                </TableCell>
                            </TableRow>
                            {category.features?.map((feature, i) => (
                                <TableRow className='border-none' key={i}>
                                    <TableCell className={`${category?.features?.length == i + 1 && "rounded-b-md"}`}>  <H6 className='!font-normal max-sm:text-[12px]'>{isFr ? feature.featureNameFr : feature.featureName}</H6></TableCell>
                                    {uniquePlans?.map((plan) => {
                                        const inclusion = feature.included[plan];
                                        return (
                                            <TableCell
                                                key={plan}
                                            >
                                                {inclusion.included ?
                                                    <Check className='text-green-500 w-[100px]  h-6  sm:w-[200px]' />
                                                    :
                                                    <Minus className=' h-6 w-[100px]  sm:w-[200px]' />
                                                }
                                            </TableCell>
                                        );
                                    })}
                                </TableRow>
                            ))}
                            <TableRow className='border-none ' >
                                <TableCell className='bg-background rounded-md'></TableCell>
                            </TableRow>
                        </React.Fragment>
                    </TableBody>
                ))}
            </Table>
        </div>
    )
}

export default PricingComparisons