"use client"

import React from 'react'
import { Button } from '@/components/ui/buttons/Button'
import { ArrowLeftSVG, StickSVG2, TagSVG } from '@/assets/svg/index'
import { H1, H2, P } from '@/components/ui/typography'
import { useLocale, useTranslations } from 'next-intl'
import { useRouter } from 'next/navigation'

interface Props {
    item: {
        id: number
        name_en: string
        name_fr: string
        slug_en: string
        slug_fr: string
        category_en: string
        category_fr: string
        innovation: boolean
        priority: string
        summary_en: string
        summary_fr: string
        question_en: string
        question_fr: string
        content_en: string
        content_fr: string
        keywords: {
            keyword_en: string
            keyword_fr: string
        }[]
        relatedTerms: {
            name_en: string
            name_fr: string
            slug_en: string
            slug_fr: string
        }[]
    }
}

const GlossaireDetails: React.FC<Props> = ({ item }) => {
    const locale = useLocale()
    const t = useTranslations()
    const router = useRouter()

    const goToOtherGlossaireDetails = (slug_en: string, slug_fr: string) => {
        if (locale === "en") {
            router.push(`/en/glossary/${slug_en}`)
        } else {
            router.push(`/glossaire/${slug_fr}`)
        }
    }

    const content = locale === "en" ? item?.content_en?.split(".") : item?.content_fr?.split(".")
    
    return (
        <div className='flex-1 bg-white border-[1px] border-[#E4E4E7] rounded-[16px] pt-[24px] px-[24px] pb-[56px] h-fit'>
            <div className='flex items-center gap-2'>
                <Button 
                    link={locale === "en" ? '/en/glossary' : '/glossaire'} 
                    variant={"outline"} 
                    className='h-[36px] !px-[16px]'
                >
                    <ArrowLeftSVG />
                    <P className='mt-1 !text-[14px] !text-[#09090B] !font-[500]'>{t("Back")}</P>
                </Button>
                {item?.innovation && (
                    <div className='px-[9px] py-[5px] bg-[#07D0C133] border-[1px] border-[#07D0C133] rounded-[6px] w-fit'>
                        <P className='!text-[12px] text-[#00776E] font-[500]'>{t("Innovation")}</P>
                    </div>
                )}
            </div>
            
            <H1 className='!text-[28px] !font-[600] !text-[#27272A] mt-6 leading-[32px]'>
                {locale === "en" ? item?.question_en : item?.question_fr}
            </H1>
            
            <div className='flex flex-col items-start gap-4 mt-4'>
                {content?.map((paragraph, index) => (
                    index !== content?.length - 1 && (
                        <P key={index} className='!text-[16px] !text-[#27272A] !font-[400]'>
                            {paragraph}.
                        </P>
                    )
                ))}
            </div>
            
            <div className='w-full h-[2px] bg-[#E2E8F0] mt-8 mb-6' />
            
            <div className='flex items-center gap-2'>
                <div>
                    <TagSVG />
                </div>
                <P className='!text-[22px] !font-[600] !text-[#27272A] mt-0.5'>TAGS</P>
            </div>
            
            <div className='flex items-center gap-2 flex-wrap mt-5'>
                {item?.keywords?.map((keyword: { keyword_en: string, keyword_fr: string }, index: number) => (
                    <div 
                        key={index} 
                        className='bg-[#EFF3F7] rounded-[8px] pt-[6px] pb-[7px] px-[13px] border-[1px] border-[#E4E4E7]'
                    >
                        <P className='!text-[14px] !font-[500] !text-[#27272A]'>
                            {locale === "en" ? keyword?.keyword_en : keyword?.keyword_fr}
                        </P>
                    </div>
                ))}
            </div>
            
            <div className='w-full h-[2px] bg-[#E2E8F0] mt-8 mb-6' />
            
            <div className='flex items-center gap-2'>
                <div>
                    <StickSVG2 />
                </div>
                <P className='!text-[22px] !font-[600] !text-[#27272A] mt-0.5'>
                    {locale === "en" ? "Related Terms" : "Termes connexes"}
                </P>
            </div>
            
            <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-6'>
                {item?.relatedTerms?.map((term: { 
                    name_en: string
                    name_fr: string
                    slug_en: string
                    slug_fr: string 
                }, index: number) => (
                    <div 
                        key={index} 
                        className='bg-white border-[1px] border-[#E2E8F0] rounded-[12px] p-[16px] cursor-pointer hover:border-[#07D0C1] transition-colors' 
                        onClick={() => goToOtherGlossaireDetails(term?.slug_en, term?.slug_fr)}
                    >
                        <H2 className='!text-[20px] !text-[#27272A] !font-[600] !leading-[35px]'>
                            {locale === "en" ? term?.name_en : term?.name_fr}
                        </H2>
                    </div>
                ))}
            </div>
        </div>
    )
}

export default GlossaireDetails