import { useTranslation } from 'react-i18next'
import { COORDINATE_PRECISION, PURPOSES } from './types'

interface Props {
  open: boolean
  isEditMode?: boolean
  latitude: number
  longitude: number
  altitude: number
  meta: string[]
  onLatitudeChange: (v: number) => void
  onLongitudeChange: (v: number) => void
  onAltitudeChange: (v: number) => void
  onMetaChange: (v: string[]) => void
  onSubmit: () => void
  onClose: () => void
}

export default function AltitudeDialog({
  open, isEditMode, latitude, longitude, altitude, meta,
  onLatitudeChange, onLongitudeChange, onAltitudeChange, onMetaChange,
  onSubmit, onClose,
}: Props) {
  const { t } = useTranslation()
  if (!open) return null

  const handleCoord = (value: string, setter: (v: number) => void) => {
    const n = parseFloat(value)
    if (!isNaN(n)) setter(parseFloat(n.toFixed(COORDINATE_PRECISION)))
  }

  const toggleMeta = (value: string) => {
    onMetaChange(meta.includes(value) ? meta.filter(m => m !== value) : [...meta, value])
  }

  return (
    <div className="fixed inset-0 bg-black/60 flex items-center justify-center z-[2000]">
      <div className="bg-az-panel border border-az-border rounded-lg p-4 w-96 shadow-xl">
        <h3 className="text-white font-semibold mb-1">
          {isEditMode ? t('flights.planner.titleEdit') : t('flights.planner.titleAdd')}
        </h3>
        <p className="text-az-muted text-xs mb-3">{t('flights.planner.description')}</p>

        <div className="space-y-2 text-xs">
          <div>
            <label className="text-az-muted block mb-0.5">{t('flights.planner.latitude')}</label>
            <input type="number" step="any"
              value={latitude.toFixed(COORDINATE_PRECISION)}
              onChange={e => handleCoord(e.target.value, onLatitudeChange)}
              className="w-full bg-az-bg border border-az-border rounded px-2 py-1.5 text-az-text outline-none focus:border-az-orange"
            />
          </div>
          <div>
            <label className="text-az-muted block mb-0.5">{t('flights.planner.longitude')}</label>
            <input type="number" step="any"
              value={longitude.toFixed(COORDINATE_PRECISION)}
              onChange={e => handleCoord(e.target.value, onLongitudeChange)}
              className="w-full bg-az-bg border border-az-border rounded px-2 py-1.5 text-az-text outline-none focus:border-az-orange"
            />
          </div>
          <div>
            <label className="text-az-muted block mb-0.5">{t('flights.planner.altitude')}</label>
            <input type="number"
              value={altitude}
              onChange={e => onAltitudeChange(Number(e.target.value))}
              className="w-full bg-az-bg border border-az-border rounded px-2 py-1.5 text-az-text outline-none focus:border-az-orange"
            />
          </div>
          <div>
            <label className="text-az-muted block mb-1">{t('flights.planner.purpose')}</label>
            <div className="flex gap-3">
              {PURPOSES.map(p => (
                <label key={p.value} className="flex items-center gap-1.5 cursor-pointer text-az-text">
                  <input type="checkbox" checked={meta.includes(p.value)}
                    onChange={() => toggleMeta(p.value)}
                    className="rounded border-az-border bg-az-bg accent-az-orange" />
                  {t(`flights.planner.${p.label}`)}
                </label>
              ))}
            </div>
          </div>
        </div>

        <div className="flex justify-end gap-2 mt-4">
          <button onClick={onClose}
            className="px-3 py-1 text-sm border border-az-border rounded hover:bg-az-bg text-az-text">
            {t('flights.planner.cancel')}
          </button>
          <button onClick={onSubmit}
            className="px-3 py-1 text-sm bg-az-orange rounded hover:bg-orange-600 text-white">
            {isEditMode ? t('flights.planner.submitEdit') : t('flights.planner.submitAdd')}
          </button>
        </div>
      </div>
    </div>
  )
}
