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 flex items-center justify-center z-[2000]" style={{ background: 'rgba(0,0,0,0.6)' }}>
      <div className="bracket panel w-96 shadow-xl" style={{ background: 'var(--surface-1)', padding: '20px' }}>
        <h3 className="sect-head mb-1">
          {isEditMode ? t('flights.planner.titleEdit') : t('flights.planner.titleAdd')}
        </h3>
        <p className="micro mb-4" style={{ textTransform: 'none', letterSpacing: 'normal', color: 'var(--text-secondary)' }}>
          {t('flights.planner.description')}
        </p>

        <div className="space-y-3">
          <div>
            <label className="micro block mb-1">{t('flights.planner.latitude')}</label>
            <input
              type="number"
              step="any"
              value={latitude.toFixed(COORDINATE_PRECISION)}
              onChange={e => handleCoord(e.target.value, onLatitudeChange)}
              className="inp inp-mono"
            />
          </div>
          <div>
            <label className="micro block mb-1">{t('flights.planner.longitude')}</label>
            <input
              type="number"
              step="any"
              value={longitude.toFixed(COORDINATE_PRECISION)}
              onChange={e => handleCoord(e.target.value, onLongitudeChange)}
              className="inp inp-mono"
            />
          </div>
          <div>
            <label className="micro block mb-1">{t('flights.planner.altitude')}</label>
            <input
              type="number"
              value={altitude}
              onChange={e => onAltitudeChange(Number(e.target.value))}
              className="inp inp-mono"
            />
          </div>
          <div>
            <label className="micro block mb-2">{t('flights.planner.purpose')}</label>
            <div className="flex gap-4">
              {PURPOSES.map(p => (
                <label key={p.value} className="flex items-center gap-1.5 cursor-pointer text-text-primary text-[12px]">
                  <input
                    type="checkbox"
                    checked={meta.includes(p.value)}
                    onChange={() => toggleMeta(p.value)}
                    style={{ accentColor: 'var(--accent-amber)' }}
                  />
                  {t(`flights.planner.${p.label}`)}
                </label>
              ))}
            </div>
          </div>
        </div>

        <div className="flex justify-end gap-2 mt-5">
          <button onClick={onClose} className="btn btn-ghost">
            {t('flights.planner.cancel')}
          </button>
          <button onClick={onSubmit} className="btn btn-primary">
            {isEditMode ? t('flights.planner.submitEdit') : t('flights.planner.submitAdd')}
          </button>
        </div>

        <span className="br" />
      </div>
    </div>
  )
}
