'use client'

import { useTranslations } from 'next-intl'
import IconButton from '@mui/material/IconButton'
import { useTheme, alpha } from '@mui/material/styles'
import type { LayerType } from './cropZoningTypes'

const LAYER_ICONS: Record<LayerType, string> = {
  crops: 'tabler-plant-2',
  waterNeed: 'tabler-droplet',
  soilQuality: 'tabler-seedling',
  cultivationRisk: 'tabler-alert-triangle'
}

type LayerControlProps = {
  activeLayer: LayerType
  onLayerChange: (layer: LayerType) => void
}

const LAYER_ORDER: LayerType[] = ['crops', 'waterNeed', 'soilQuality', 'cultivationRisk']

export default function LayerControl({ activeLayer, onLayerChange }: LayerControlProps) {
  const t = useTranslations('cropZoning')
  const theme = useTheme()
  const primaryMain = theme.palette.primary.main

  return (
    <div className='absolute bottom-4 end-4 z-[1000] flex flex-col gap-1 rounded-xl border border-white/20 bg-white/70 py-2 shadow-lg backdrop-blur-md dark:bg-gray-900/70 dark:border-gray-700/50'>
      {LAYER_ORDER.map(layer => {
        const isActive = activeLayer === layer
        return (
          <IconButton
            key={layer}
            size='small'
            onClick={() => onLayerChange(layer)}
            title={t(`layers.${layer}`)}
            sx={{
              mx: 0.5,
              bgcolor: isActive ? alpha(primaryMain, 0.2) : 'transparent',
              color: isActive ? primaryMain : 'text.secondary',
              border: isActive ? `1px solid ${alpha(primaryMain, 0.5)}` : '1px solid transparent',
              '&:hover': {
                bgcolor: isActive ? alpha(primaryMain, 0.25) : 'action.hover',
                color: isActive ? primaryMain : undefined
              }
            }}
          >
            <i className={`${LAYER_ICONS[layer]} text-lg`} />
          </IconButton>
        )
      })}
    </div>
  )
}
