"use client"

import React from 'react'
import { P, S } from '@/components/ui/typography'
import { useRouter, useSearchParams } from 'next/navigation'
import { useLocale } from 'next-intl'

interface Props {
  letters: string[]
}

const GlossaireNavigation: React.FC<Props> = ({ letters }) => {
  const searchParams = useSearchParams()
  const router = useRouter()
  const locale = useLocale()
  
  const letterParams = searchParams.get('letter')

  const handleLetter = (letter: { letter: string, isShow: boolean }) => {
    if (letter?.isShow) {
      const params = new URLSearchParams(searchParams.toString())
      
      if (letterParams === letter?.letter) {
        params.delete("letter")
      } else {
        params.set("letter", letter?.letter)
      }
      
      const basePath = locale === 'en' ? '/en/glossary' : '/glossaire'
      router.replace(`${basePath}?${params.toString()}`, { scroll: false })
    }
  }

  // Generate all letters A-Z and check if they exist in the glossary
  const theLetters = Array.from({ length: 26 }, (_, i) => ({
    letter: String.fromCharCode(65 + i),
    isShow: letters?.some((l) => l?.toUpperCase() === String.fromCharCode(65 + i)) ? true : false
  }))

  return (
    <div className='bg-white rounded-[12px] border-[1px] border-[#E2E8F0] mt-6'>
      <div className='flex items-center gap-2 py-[16px] px-[24px]'>
        <P className='text-[18px] font-[600] text-[#27272A] mt-[2px]'>Navigation A-Z</P>
      </div>
      <div className='w-full h-[1px] bg-[#E2E8F0]' />
      <div className='pt-[16px] pb-[24px] px-[24px] grid grid-cols-6 gap-2'>
        {theLetters?.map((letter, index) => (
          <div 
            key={index} 
            className={`border-[1px] ${letter?.isShow ? "border-[#E2E8F0]" : "border-[#f4f6f9]"} w-[38px] h-[34px] flex items-center justify-center rounded-[6px] ${letterParams === letter?.letter ? "bg-[#52A5EF]" : "bg-[#FFFFFF]"} ${letter?.isShow && "cursor-pointer"}`} 
            onClick={() => handleLetter(letter)}
          >
            <S className={`${letterParams === letter?.letter ? "text-white" : letter?.isShow ? "text-[#000000]" : "text-[#e3e3e3]"} !text-[13px] ${letterParams === letter?.letter ? "!font-[500]" : "!font-[300]"}`}>
              {letter?.letter}
            </S>
          </div>
        ))}
      </div>
    </div>
  )
}

export default GlossaireNavigation