"use client"
import React, { useEffect, useState } from 'react'
import CustomCard from './CustomCard'
import { IPlan, Package } from '@/models/Pricing'
import { H2, H4, H6, S } from '../typography'
import { useTranslations } from 'next-intl'
import { useLocale } from 'next-intl'
import { Button } from '../buttons/Button'
import { Check,  } from 'lucide-react'
import MenuFeatures from '../menus/MenuFeatures'
import MenuExtraPackagePlans from '../menus/MenuExtraPackagePlans '

interface IPricePlanCard {
    plan: IPlan
    isYearly?: boolean
    selectedPackage:Package
    currency: string
}
const PricePlanCard = ({selectedPackage, plan, isYearly, currency = "EUR€" }: IPricePlanCard) => {
    const t = useTranslations("")
    const locale = useLocale()
    const isFr = locale === "fr"
const [isExtraSelected, setIsExtraSelected] = useState(false)
const [selectedExtraPlan, setSelectedExtraPlan] = useState(
   plan?.extraPackagePlans &&  plan?.extraPackagePlans[0] || null
)

useEffect(() => {
    if (!selectedExtraPlan) {
       setSelectedExtraPlan(plan?.extraPackagePlans &&  plan?.extraPackagePlans[0]) 
    }
  
}, [plan?.extraPackagePlans,selectedExtraPlan])

    return (
        <div className=''>
            <CustomCard className={`p-8 rounded-md shadow-lg shadow-black/5 border-none`}>
                <div className='flex flex-col gap-4 h-full '>

                    <div className='flex flex-col gap-2   '>
                        <div className='flex items-center gap-4'>
                            <H4 className='capitalize'>{isFr ? plan.display_nameFr : plan.display_name}</H4>
                            {plan.popular &&
                                <S className='bg-primary !font-normal rounded-full px-3 p-1 text-center text-white !text-[12px]'>{t("The most Popular")}</S>
                            }
                        </div>
                        <S className='text-muted-foreground'>{isFr ? plan.descriptionFr : plan.description}</S>
                    </div>
                    <div className={`transition-all duration-500 ease-in-out `}>
                        {(!isYearly && plan.discount_percentage > 0) &&
                            <div className='flex items-center gap-2 '>
                                <H6 className='!font-medium line-through text-muted-foreground  '>{currency} {plan.original_price}</H6>
                                <div className='flex items-center justify-center p-2 gap-2 bg-primary/10 text-primary rounded-3xl'>
                                    <S> {plan.discount_percentage}%</S>
                                </div>
                            </div>
                        }
                    </div>
                    <div>
                        <div className='flex items-center gap-2'>
                            <H6 className='!font-medium'>{currency?.toLowerCase() === "eur" ? `${currency} €` : `${currency} $`}</H6>
                            <div className='flex items-end'><H2>{plan?.discounted_price || plan?.original_price}</H2><S className='mb-1'>/{t("Vehicle")}</S> <S className='text-gray-500 mb-1'>/mo</S></div>

                        </div>
                    </div>
                    <span className='w-full h-[1px] bg-gray-300'></span>
                    <ul className='flex flex-col gap-2 min-h-[400px]'>
                        {plan?.features?.length > 0 &&
                            <>
                               {plan?.includedPlan ? <S className='max-xl:!text-[12px]'>{t("Everything in")} {isFr ? plan?.includedPlanFr : plan?.includedPlan} {t("plus")}:</S> : <S className='max-xl:!text-[12px]'>{t("Included features")}:</S>}
                            {selectedPackage?.includedPackage &&
                                <MenuFeatures
                                    features={plan?.features}
                                    includedPackage={selectedPackage?.includedPackage}
                                    includedPackageFr={selectedPackage?.includedPackageFR}
                                    isFr={isFr}
                                />
                            }
                                {plan?.features?.map((feature, i) => (
                                    <li key={i} className='flex items-center gap-1 sm:gap-2'>
                                            <>
                                                <Check className='text-green-500 min-w-6 h-6' />
                                                <div className='flex items-center gap-1 flex-wrap '>
                                                <H6 className='!font-medium !text-[13px] '>{isFr ? feature.display_nameFr : feature.display_name}  </H6>
                                                {feature.access &&
                                                    <H6 className='!font-bold !text-[13px] '>{`( ${isFr ? feature.accessFr : feature.access} )`}  </H6>
                                                }
                                                </div>
                                            </>
                                    </li>
                                ))}


                            {plan?.extraPackageName && plan?.extraPackagePlans && plan?.extraPackagePlans?.length > 0 && (
                                <div className='mt-4 flex flex-col gap-2'>
                                    <label className='flex items-center gap-2'>
                                        <input
                                            type='checkbox'
                                            checked={isExtraSelected}
                                            onChange={() => setIsExtraSelected(prev => !prev)}
                                        />
                                        <H6 className='!text-[14px] text-muted-foreground'>
                                           {t("Add")} {isFr ? plan.extraPackageNameFr : plan.extraPackageName}
                                        </H6>
                                    </label>

                                    {!!isExtraSelected && !!selectedExtraPlan && (
                                        <MenuExtraPackagePlans
                                            plans={plan.extraPackagePlans}
                                            extraPackageName={isFr ? plan.extraPackageNameFr : plan.extraPackageName}
                                            isFr={isFr}
                                            selectedPlan={selectedExtraPlan}
                                            onChange={setSelectedExtraPlan}
                                        />
                                    )}
                                </div>
                            )}


                            </>
                        }
                    </ul>
                </div>
                <div className='flex flex-col gap-4 mt-8'>
                    <Button className='h-11 w-full' >{t("Select Offer")}</Button>
                    <S link='/tarifs#comparaison' className='text-muted-foreground flex items-start  justify-center  hover:text-primary duration-200 text-nowrap'>{t("See all features")}</S>
                </div>
            </CustomCard>
        </div>
    )
}

export default PricePlanCard