import { useState } from 'react'
import { useTranslation } from 'react-i18next'
import type { Flight } from '../../types'

interface Props {
  flights: Flight[]
  selectedFlight: Flight | null
  onSelect: (flight: Flight) => void
  onCreate: (name: string) => void
  onDelete: (id: string) => void
}

export default function FlightListSidebar({ flights, selectedFlight, onSelect, onCreate, onDelete }: Props) {
  const { t } = useTranslation()
  const [newName, setNewName] = useState('')
  const [creating, setCreating] = useState(false)

  const handleCreate = () => {
    const name = newName.trim()
    if (!name) { setCreating(false); return }
    onCreate(name)
    setNewName('')
    setCreating(false)
  }

  const handleCancel = () => {
    setNewName('')
    setCreating(false)
  }

  return (
    <div className="bg-az-panel border-r border-az-border flex flex-col shrink-0 w-[160px]">
      <div className="px-2 py-2 border-b border-az-border text-[10px] text-az-muted uppercase tracking-wide">
        {t('flights.title')}
      </div>
      <div className="flex-1 overflow-y-auto">
        {flights.map(f => (
          <div key={f.id} onClick={() => onSelect(f)}
            className={`px-2 py-1.5 cursor-pointer border-b border-az-border text-xs ${
              selectedFlight?.id === f.id ? 'bg-az-bg text-white' : 'text-az-text hover:bg-az-bg'
            }`}>
            <div className="flex items-center justify-between">
              <span className="truncate">{f.name}</span>
              <button onClick={e => { e.stopPropagation(); onDelete(f.id) }}
                className="text-az-muted hover:text-az-red text-xs">&#215;</button>
            </div>
            <div className="text-[10px] text-az-muted">{new Date(f.createdDate).toLocaleDateString()}</div>
          </div>
        ))}
      </div>
      {creating ? (
        <div className="flex gap-1 mx-3 my-2">
          <input autoFocus value={newName} onChange={e => setNewName(e.target.value)}
            onKeyDown={e => {
              if (e.key === 'Enter') handleCreate()
              if (e.key === 'Escape') handleCancel()
            }}
            placeholder="Flight name"
            className="flex-1 min-w-0 bg-az-bg border border-az-border rounded px-2 py-1.5 text-xs text-az-text outline-none focus:border-az-orange" />
          <button onClick={handleCreate} className="shrink-0 bg-az-blue text-white text-xs px-3 py-1.5 rounded hover:brightness-110">OK</button>
        </div>
      ) : (
        <button onClick={() => setCreating(true)}
          className="mx-3 my-2 py-1.5 bg-az-blue text-white rounded text-xs hover:brightness-110">
          + {t('flights.create')}
        </button>
      )}
      <div className="border-t border-az-border p-2">
        <label className="block text-[9px] text-az-muted uppercase tracking-wide mb-1">{t('flights.telemetry')}</label>
        <input type="date" className="w-full bg-az-bg border border-az-border rounded px-2 py-1 text-[10px] text-az-text" />
      </div>
    </div>
  )
}
