import { useState } from 'react'
import { useTranslation } from 'react-i18next'
import WaypointList from './WaypointList'
import AltitudeChart from './AltitudeChart'
import WindEffect from './WindEffect'
import { DRAW_MODES, DRAW_MODE_ACCENT } from './drawModes'
import type { FlightPoint, CalculatedPointInfo, ActionMode, WindParams } from './types'
import type { Aircraft } from '../../types'

interface Props {
  points: FlightPoint[]
  calculatedPointInfo: CalculatedPointInfo[]
  aircrafts: Aircraft[]
  initialAltitude: number
  actionMode: ActionMode
  wind: WindParams
  locationInput: string
  currentPosition: { lat: number; lng: number }
  totalDistance: string
  totalTime: string
  batteryStatus: { label: string; color: string }
  onInitialAltitudeChange: (v: number) => void
  onActionModeChange: (mode: ActionMode) => void
  onWindChange: (w: WindParams) => void
  onLocationInputChange: (v: string) => void
  onLocationSearch: () => void
  onReorderPoints: (points: FlightPoint[]) => void
  onEditPoint: (point: FlightPoint) => void
  onRemovePoint: (id: string) => void
  onSave: () => void
  onUpload: () => void
  onEditJson: () => void
  onExport: () => void
}

export default function FlightParamsPanel({
  points, calculatedPointInfo, aircrafts, initialAltitude, actionMode, wind,
  locationInput, currentPosition, totalDistance, totalTime, batteryStatus,
  onInitialAltitudeChange, onActionModeChange, onWindChange,
  onLocationInputChange, onLocationSearch, onReorderPoints, onEditPoint, onRemovePoint,
  onSave, onUpload, onEditJson, onExport,
}: Props) {
  const { t } = useTranslation()
  const [hoveredMode, setHoveredMode] = useState<ActionMode | null>(null)

  return (
    <section className="p-4 space-y-5 flex-1 overflow-y-auto text-[12px]">

      {/* Draw-mode selector */}
      <div>
        <div className="flex items-center justify-between mb-1.5">
          <span className="micro" style={{ color: 'var(--accent-amber)' }}>// {t('flights.v2.drawMode')}</span>
          <span className="micro mono" style={{ color: 'var(--text-muted)' }}>{t('flights.v2.clickToPlot')}</span>
        </div>
        <div className="grid grid-cols-3 gap-2">
          {DRAW_MODES.map(({ mode, i18nKey, accent, icon }) => {
            const active = actionMode === mode
            const { color, tint } = DRAW_MODE_ACCENT[accent]
            return (
              <button key={mode} onClick={() => onActionModeChange(mode)} className="mono"
                onMouseEnter={() => setHoveredMode(mode)} onMouseLeave={() => setHoveredMode(null)}
                style={{
                  minHeight: 32, padding: '0 8px', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 6,
                  border: `1px solid ${color}`, color, borderRadius: 2,
                  fontSize: 10, fontWeight: 600, letterSpacing: '0.10em', textTransform: 'uppercase',
                  background: active ? tint : (hoveredMode === mode ? 'rgba(255,255,255,0.04)' : 'transparent'),
                  boxShadow: active ? `inset 0 0 0 1px ${color}` : 'none',
                  cursor: 'pointer',
                }}>
                <span style={{ flexShrink: 0, display: 'inline-flex' }}>{icon}</span>
                <span style={{ textAlign: 'center', lineHeight: 1.1 }}>{t(i18nKey)}</span>
              </button>
            )
          })}
        </div>
      </div>

      {/* Mission Config */}
      <header className="flex items-center justify-between">
        <h2 className="sect-head">{t('flights.v2.missionConfig')}</h2>
      </header>

      <div className="bracket panel p-3 space-y-3">
        <div>
          <label className="micro block mb-1.5">{t('flights.v2.aircraft')}</label>
          <select className="inp">
            {aircrafts.map(a => <option key={a.id} value={a.id}>{a.model}</option>)}
          </select>
        </div>
        <div className="grid grid-cols-2 gap-2">
          <div>
            <label className="micro block mb-1.5">{t('flights.v2.defaultHeight')}</label>
            <div className="relative">
              <input type="number" value={initialAltitude}
                onChange={e => onInitialAltitudeChange(Number(e.target.value))}
                className="inp inp-mono" style={{ paddingRight: 36 }} />
              <span className="absolute right-2.5 top-1/2 -translate-y-1/2 micro" style={{ color: 'var(--text-muted)' }}>M</span>
            </div>
          </div>
          <div>
            <label className="micro block mb-1.5">{t('flights.v2.focalLength')}</label>
            <div className="relative">
              <input type="text" placeholder={t('flights.planner.cameraFovPlaceholder')} className="inp inp-mono" style={{ paddingRight: 40 }} />
              <span className="absolute right-2.5 top-1/2 -translate-y-1/2 micro" style={{ color: 'var(--text-muted)' }}>MM</span>
            </div>
          </div>
        </div>
        <div>
          <label className="micro block mb-1.5">{t('flights.v2.commAddr')}</label>
          <input type="text" placeholder={t('flights.planner.commAddrPlaceholder')} className="inp inp-mono" />
        </div>
        <span className="br" />
      </div>

      {/* Waypoints */}
      <div className="bracket panel p-3">
        <header className="flex items-center justify-between mb-2.5">
          <span className="sect-head">{t('flights.waypoints')}</span>
          <span className="micro mono" style={{ color: 'var(--text-muted)' }}>
            {String(points.length).padStart(2, '0')} {t('flights.v2.pts')}
          </span>
        </header>
        <WaypointList
          points={points}
          calculatedPointInfo={calculatedPointInfo}
          onReorder={onReorderPoints}
          onEdit={onEditPoint}
          onRemove={onRemovePoint}
        />
        <span className="br" />
      </div>

      {/* ── Existing controls (restyled, appended below mockup blocks) ── */}

      <div>
        <label className="micro block mb-1.5">{t('flights.planner.location')}</label>
        <input
          value={locationInput}
          onChange={e => onLocationInputChange(e.target.value)}
          onKeyDown={e => e.key === 'Enter' && onLocationSearch()}
          placeholder="47.242, 35.024"
          className="inp inp-mono"
        />
        <div className="micro mt-1" style={{ color: 'var(--text-muted)' }}>
          {t('flights.planner.currentLocation')}: {currentPosition.lat.toFixed(6)}, {currentPosition.lng.toFixed(6)}
        </div>
      </div>

      {points.length > 1 && (
        <div className="flex items-center gap-2 flex-wrap">
          <span className="pill pill-muted">{totalDistance}</span>
          <span className="pill pill-muted">{totalTime}</span>
          <span className="pill" style={{ color: batteryStatus.color }}>
            <span className="dot" />{batteryStatus.label}
          </span>
        </div>
      )}

      <AltitudeChart points={points} />

      <WindEffect wind={wind} onChange={onWindChange} />

      <div className="grid grid-cols-2 gap-2">
        <button onClick={onSave} className="btn btn-secondary justify-center" style={{ color: 'var(--accent-green)', borderColor: 'var(--accent-green)' }}>
          {t('flights.planner.save')}
        </button>
        <button onClick={onUpload} className="btn btn-secondary justify-center" style={{ color: 'var(--accent-cyan)', borderColor: 'var(--accent-cyan)' }}>
          {t('flights.planner.upload')}
        </button>
        <button onClick={onEditJson} className="btn btn-ghost justify-center">{t('flights.planner.editAsJson')}</button>
        <button onClick={onExport} className="btn btn-ghost justify-center">{t('flights.planner.exportMapData')}</button>
      </div>
    </section>
  )
}
