'use client'

import { useTranslations } from 'next-intl'
import { CROP_COLORS, type CropType } from './cropZoningTypes'
import type { Product } from '@/libs/api/services/cropZoningService'
import type { LayerType } from './cropZoningTypes'

const FALLBACK_ITEMS: { crop: CropType; label: string }[] = [
  { crop: 'wheat', label: 'گندم' },
  { crop: 'canola', label: 'کلزا' },
  { crop: 'saffron', label: 'زعفران' }
]

const WATER_NEED_ITEMS = [
  { level: 'low' as const, color: '#7dd3fc', labelKey: 'low' },
  { level: 'medium' as const, color: '#0ea5e9', labelKey: 'medium' },
  { level: 'high' as const, color: '#0369a1', labelKey: 'high' }
]

const SOIL_QUALITY_ITEMS = [
  { level: 'low' as const, color: '#f87171', labelKey: 'low' },
  { level: 'medium' as const, color: '#fbbf24', labelKey: 'medium' },
  { level: 'high' as const, color: '#22c55e', labelKey: 'high' }
]

const CULTIVATION_RISK_ITEMS = [
  { level: 'low' as const, color: '#22c55e', labelKey: 'low' },
  { level: 'medium' as const, color: '#f97316', labelKey: 'medium' },
  { level: 'high' as const, color: '#ef4444', labelKey: 'high' }
]

type ZoneLegendProps = {
  activeLayer?: LayerType
  products?: Product[]
  loading?: boolean
}

export default function ZoneLegend({ activeLayer = 'crops', products = [], loading = false }: ZoneLegendProps) {
  const t = useTranslations('cropZoning')

  const items =
    activeLayer === 'waterNeed'
      ? WATER_NEED_ITEMS.map(({ level, color, labelKey }) => ({
          key: `water-${level}`,
          label: t(`legendLevels.${labelKey}`),
          color
        }))
      : activeLayer === 'soilQuality'
        ? SOIL_QUALITY_ITEMS.map(({ level, color, labelKey }) => ({
            key: `soil-${level}`,
            label: t(`legendLevels.${labelKey}`),
            color
          }))
        : activeLayer === 'cultivationRisk'
          ? CULTIVATION_RISK_ITEMS.map(({ level, color, labelKey }) => ({
              key: `risk-${level}`,
              label: t(`legendLevels.${labelKey}`),
              color
            }))
          : (() => {
              const productItems =
                products.length > 0
                  ? products.map(p => ({ key: p.id, label: p.label, color: p.color }))
                  : FALLBACK_ITEMS.map(({ crop }) => ({
                      key: crop,
                      label: t(`crops.${crop}`),
                      color: CROP_COLORS[crop]
                    }))
              return [
                ...productItems,
                { key: 'uncultivable', label: 'غیر قابل کشت', color: '#94a3b8' }
              ]
            })()

  return (
    <div className='absolute bottom-4 start-4 z-[1000] rounded-xl border border-white/20 bg-white/70 px-4 py-3 shadow-lg backdrop-blur-md dark:bg-gray-900/70 dark:border-gray-700/50'>
      <div className='text-xs font-medium text-gray-600 dark:text-gray-400 mbe-2'>{t('legend')}</div>
      {loading ? (
        <div className='text-sm text-gray-500'>...</div>
      ) : (
        <div className='flex flex-col gap-1.5'>
          {items.map(({ key, label, color }) => (
            <div key={key} className='flex items-center gap-2'>
              <div className='h-4 w-4 rounded' style={{ backgroundColor: color, opacity: 0.8 }} />
              <span className='text-sm text-gray-700 dark:text-gray-300'>{label}</span>
            </div>
          ))}
        </div>
      )}
    </div>
  )
}
