'use client'

import { useState } from 'react'
import { useRouter, usePathname } from 'next/navigation'
import { useLocale, useTranslations } from 'next-intl'
import {
  IconButton,
  Menu,
  MenuItem,
  Box,
  Typography,
  ListItemIcon,
} from '@mui/material'
import { Language, Check } from '@mui/icons-material'

const languages = [
  { code: 'en', name: 'English', flag: '🇺🇸' },
  { code: 'ro', name: 'Română', flag: '🇷🇴' },
  { code: 'es', name: 'Español', flag: '🇪🇸' },
  { code: 'it', name: 'Italiano', flag: '🇮🇹' },
]

export function LanguageSwitcher() {
  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
  const router = useRouter()
  const pathname = usePathname()
  const locale = useLocale()
  const t = useTranslations('navigation')

  const handleOpen = (event: React.MouseEvent<HTMLElement>) => {
    setAnchorEl(event.currentTarget)
  }

  const handleClose = () => {
    setAnchorEl(null)
  }

  const handleLanguageChange = async (newLocale: string) => {
    // Check if we're on a Bible page
    const isBiblePage = pathname.includes('/bible/')

    if (isBiblePage) {
      // For Bible pages, redirect to Bible reader without specific version
      // Let the reader component select appropriate version for the new language
      const newPath = `/${newLocale}/bible`
      router.push(newPath)
    } else {
      // For other pages, just change the locale in the URL
      const pathWithoutLocale = pathname.replace(`/${locale}`, '') || '/'
      const newPath = `/${newLocale}${pathWithoutLocale === '/' ? '' : pathWithoutLocale}`
      router.push(newPath)
    }

    handleClose()
  }

  const currentLanguage = languages.find(lang => lang.code === locale)

  return (
    <>
      <IconButton
        onClick={handleOpen}
        sx={{ color: 'white' }}
        aria-label={t('language')}
      >
        <Language />
      </IconButton>

      <Menu
        anchorEl={anchorEl}
        open={Boolean(anchorEl)}
        onClose={handleClose}
        transformOrigin={{ horizontal: 'right', vertical: 'top' }}
        anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
      >
        {languages.map((language) => (
          <MenuItem
            key={language.code}
            onClick={() => handleLanguageChange(language.code)}
            selected={language.code === locale}
          >
            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, minWidth: 120 }}>
              <Typography component="span" sx={{ fontSize: '1.2rem' }}>
                {language.flag}
              </Typography>
              <Typography sx={{ flexGrow: 1 }}>
                {language.name}
              </Typography>
              {language.code === locale && (
                <ListItemIcon sx={{ minWidth: 'auto' }}>
                  <Check fontSize="small" />
                </ListItemIcon>
              )}
            </Box>
          </MenuItem>
        ))}
      </Menu>
    </>
  )
}