import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react'
import { useTranslation } from 'react-i18next'
import { db } from '../services/db.js'
import { getActiveMasterKey } from '../services/auth.js'
import { getLogbookKey } from '../services/logbookKeys.js'
import { encryptJson, decryptJson } from '../services/crypto.js'
import { syncLogbook } from '../services/sync.js'
import { saveEntryDraft, clearEntryDraft } from '../services/entryDraft.js'
import { getErrorMessage } from '../utils/errors.js'
import { downloadLogbookPagePdf } from '../services/pdfExport.js'
import { FileText, Save, ChevronLeft, Check, Compass, Plus, Trash2, MapPin, CloudSun, Clock, Download, Upload, Pencil, X, ChevronDown, ChevronUp } from 'lucide-react'
import PhotoCapture from './PhotoCapture.tsx'
import SignatureSection from './SignatureSection.tsx'
import EntryCrewSection from './EntryCrewSection.tsx'
import { emptyEntryCrewFields, type EntryCrewFields } from '../types/person.js'
import { entryCrewFromPreviousEntry } from '../utils/personSnapshots.js'
import TrackMap from './TrackMap.tsx'
import { useDialog } from './ModalDialog.tsx'
import {
  normalizeSignature,
  fingerprintSignature,
  normalizedSerializedSignature,
  isPasskeySignature,
  isClassicSignature,
  createClassicSignature,
  isSignatureValidForEntry,
  hasAnySignature
} from '../utils/signatures.js'
import type { SignatureValue } from '../types/signatures.js'
import { buildLogEntryPayload, sortLogEventsByTime, normalizeLogEvent, hasUnsavedEventDraft, currentLocalTimeHHMM, isValidTimeHHMM, type LogEventPayload } from '../utils/logEntryPayload.js'
import EventTimeInput24h from './EventTimeInput24h.tsx'
import CourseDialInput from './CourseDialInput.tsx'
import { parseOwmCurrentWeather } from '../utils/openWeatherMap.js'
import { hashEntryForSigning } from '../utils/entryCanonicalHash.js'
import { signLogEntry } from '../services/entrySigning.js'
import { getLogbookAccess } from '../services/logbookAccess.js'
import { PlausibleEvents, trackPlausibleEvent } from '../services/analytics.js'
import { fetchOpenWeatherCurrent, WeatherApiError } from '../services/weather.js'
import {
  getDecryptedTrack,
  saveUploadedTrack,
  deleteTrack,
  downloadTrackFile,
  parseTrackFile,
  type SavedTrack,
  type TrackWaypoint
} from '../services/trackUpload.js'
import NmeaImportWizard from './NmeaImportWizard.tsx'
import {
  deleteNmeaArchive,
  downloadNmeaArchive,
  getNmeaArchive,
  type NmeaArchiveRecord
} from '../services/nmeaArchive.js'
import { computeTrackStats, formatTrackStats } from '../utils/trackStats.js'
import { computeFuelPerMotorHour, formatFuelPerMotorHour } from '../utils/fuelStats.js'
import { useRegisterUnsavedChanges } from '../context/UnsavedChangesContext.tsx'
import TankLiterInput from './TankLiterInput.tsx'
import {
  computeEveningTankMaxLiters,
  computeRefilledTankMaxLiters,
  extractTankCapacitiesFromYacht,
  formatTankLitersForInput,
  type VesselTankCapacities
} from '../utils/tankCapacity.js'

function emptyTankLevels() {
  return { morning: 0, refilled: 0, evening: 0, consumption: 0 }
}

function fingerprintFromStoredEntry(decrypted: Record<string, unknown>): string {
  const fw = (decrypted.freshwater as Record<string, number> | undefined) ?? emptyTankLevels()
  const fuel = (decrypted.fuel as Record<string, number> | undefined) ?? emptyTankLevels()
  const gw = decrypted.greywater as { level?: number } | undefined
  const trackDistance = decrypted.trackDistanceNm
  const trackSpeedMax = decrypted.trackSpeedMaxKn
  const trackSpeedAvg = decrypted.trackSpeedAvgKn
  const motorHoursRaw = decrypted.motorHours

  const payload = buildLogEntryPayload({
    date: String(decrypted.date || ''),
    dayOfTravel: String(decrypted.dayOfTravel || ''),
    departure: String(decrypted.departure || ''),
    destination: String(decrypted.destination || ''),
    freshwater: {
      morning: fw.morning || 0,
      refilled: fw.refilled || 0,
      evening: fw.evening || 0,
      consumption: fw.consumption ?? 0
    },
    fuel: {
      morning: fuel.morning || 0,
      refilled: fuel.refilled || 0,
      evening: fuel.evening || 0,
      consumption: fuel.consumption ?? 0
    },
    greywater: gw ? { level: gw.level || 0 } : undefined,
    trackDistanceNm:
      trackDistance != null && trackDistance !== ''
        ? parseFloat(String(trackDistance))
        : undefined,
    trackSpeedMaxKn:
      trackSpeedMax != null && trackSpeedMax !== ''
        ? parseFloat(String(trackSpeedMax))
        : undefined,
    trackSpeedAvgKn:
      trackSpeedAvg != null && trackSpeedAvg !== ''
        ? parseFloat(String(trackSpeedAvg))
        : undefined,
    motorHours:
      motorHoursRaw != null && motorHoursRaw !== ''
        ? parseFloat(String(motorHoursRaw))
        : undefined,
    events: (decrypted.events as LogEventPayload[]) || [],
    entryCrew: entryCrewFromPreviousEntry(decrypted as Record<string, unknown>)
  })

  return JSON.stringify({
    ...payload,
    signSkipper: fingerprintSignature(decrypted.signSkipper),
    signCrew: fingerprintSignature(decrypted.signCrew)
  })
}

interface LogEntryEditorProps {
  entryId: string
  logbookId: string
  onBack: () => void
  readOnly?: boolean
  preloadedEntry?: any
  preloadedPhotos?: any[]
  preloadedTrack?: any
  preloadedYacht?: any
}

interface LogEvent extends LogEventPayload {}

export default function LogEntryEditor({
  entryId,
  logbookId,
  onBack,
  readOnly = false,
  preloadedEntry,
  preloadedPhotos,
  preloadedTrack,
  preloadedYacht
}: LogEntryEditorProps) {
  const { t, i18n } = useTranslation()
  const { showAlert, showConfirm } = useDialog()
  const showAlertRef = useRef(showAlert)
  showAlertRef.current = showAlert

  // General details state
  const [date, setDate] = useState('')
  const [dayOfTravel, setDayOfTravel] = useState('')
  const [yachtSails, setYachtSails] = useState<string[]>([])
  const [departure, setDeparture] = useState('')
  const [destination, setDestination] = useState('')

  // Freshwater state
  const [fwMorning, setFwMorning] = useState('0')
  const [fwRefilled, setFwRefilled] = useState('0')
  const [fwEvening, setFwEvening] = useState('0')
  const [fwConsumption, setFwConsumption] = useState('0')

  // Fuel state
  const [fuelMorning, setFuelMorning] = useState('0')
  const [fuelRefilled, setFuelRefilled] = useState('0')
  const [fuelEvening, setFuelEvening] = useState('0')
  const [fuelConsumption, setFuelConsumption] = useState('0')

  const [greywaterLevel, setGreywaterLevel] = useState('0')
  const [tankCapacities, setTankCapacities] = useState<VesselTankCapacities>({})

  const [entryCrew, setEntryCrew] = useState<EntryCrewFields>(emptyEntryCrewFields())

  // Signatures
  const [signSkipper, setSignSkipper] = useState<SignatureValue | ''>('')
  const [signCrew, setSignCrew] = useState<SignatureValue | ''>('')
  const [canSignSkipper, setCanSignSkipper] = useState(false)
  const [canSignCrew, setCanSignCrew] = useState(false)
  const [isOnline, setIsOnline] = useState(navigator.onLine)
  const [entryHash, setEntryHash] = useState('')

  // GPS track stats (from uploaded track)
  const [trackDistanceNm, setTrackDistanceNm] = useState('')
  const [trackSpeedMaxKn, setTrackSpeedMaxKn] = useState('')
  const [trackSpeedAvgKn, setTrackSpeedAvgKn] = useState('')

  // Motor hours under engine propulsion (per travel day)
  const [motorHours, setMotorHours] = useState('')

  // Events list state
  const [events, setEvents] = useState<LogEvent[]>([])

  // Add Event Form State
  const [evTime, setEvTime] = useState(() => currentLocalTimeHHMM())
  const [evMgk, setEvMgk] = useState('')
  const [evRwk, setEvRwk] = useState('')
  const [evWindPressure, setEvWindPressure] = useState('')
  const [evWindDirection, setEvWindDirection] = useState('')
  const [evWindStrength, setEvWindStrength] = useState('')
  const [evSeaState, setEvSeaState] = useState('')
  const [evWeatherIcon, setEvWeatherIcon] = useState('')
  const [evCurrent, setEvCurrent] = useState('')
  const [evHeel, setEvHeel] = useState('')
  const [evSailsOrMotor, setEvSailsOrMotor] = useState('')
  const [sailsPickerExpanded, setSailsPickerExpanded] = useState(false)
  const [evLogReading, setEvLogReading] = useState('')
  const [evDistance, setEvDistance] = useState('')
  const [evGpsLat, setEvGpsLat] = useState('')
  const [evGpsLng, setEvGpsLng] = useState('')
  const [evRemarks, setEvRemarks] = useState('')
  const [evLocationName, setEvLocationName] = useState('')
  const [activeCourseTab, setActiveCourseTab] = useState<'mgk' | 'rwk'>('mgk')

  const [loading, setLoading] = useState(false)
  const [saving, setSaving] = useState(false)
  const [exporting, setExporting] = useState(false)
  const [success, setSuccess] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [weatherLoading, setWeatherLoading] = useState(false)
  const [savedFingerprint, setSavedFingerprint] = useState<string | null>(null)

  // Track file upload
  const [savedTrack, setSavedTrack] = useState<SavedTrack | null>(null)
  const [dragOver, setDragOver] = useState(false)
  const [uploadError, setUploadError] = useState<string | null>(null)
  const [nmeaWizardOpen, setNmeaWizardOpen] = useState(false)
  const [nmeaArchive, setNmeaArchive] = useState<NmeaArchiveRecord | null>(null)
  const fileInputRef = useRef<HTMLInputElement | null>(null)
  const lockedContentHashRef = useRef<string | null>(null)
  const contentReadyRef = useRef(false)
  const lastSignatureAlertHashRef = useRef<string | null>(null)
  const skipCrewSignClearRef = useRef(false)
  const entryHashSeqRef = useRef(0)
  const [editingEventIndex, setEditingEventIndex] = useState<number | null>(null)

  const applyTrackStats = (waypoints: SavedTrack['waypoints']) => {
    const stats = computeTrackStats(waypoints)
    if (!stats) return
    const formatted = formatTrackStats(stats)
    setTrackDistanceNm(formatted.distanceNm)
    setTrackSpeedMaxKn(formatted.speedMaxKn)
    setTrackSpeedAvgKn(formatted.speedAvgKn)
  }

  const loadTrackStatsFromEntry = (entry: any) => {
    if (entry?.trackDistanceNm != null && entry.trackDistanceNm !== '') {
      setTrackDistanceNm(String(entry.trackDistanceNm))
    }
    if (entry?.trackSpeedMaxKn != null && entry.trackSpeedMaxKn !== '') {
      setTrackSpeedMaxKn(String(entry.trackSpeedMaxKn))
    }
    if (entry?.trackSpeedAvgKn != null && entry.trackSpeedAvgKn !== '') {
      setTrackSpeedAvgKn(String(entry.trackSpeedAvgKn))
    }
    if (entry?.motorHours != null && entry.motorHours !== '') {
      setMotorHours(String(entry.motorHours))
    } else {
      setMotorHours('')
    }
  }

  const buildPayloadForSigning = useCallback((eventsOverride?: LogEvent[]) => {
    return buildLogEntryPayload({
      date,
      dayOfTravel,
      departure,
      destination,
      freshwater: {
        morning: parseFloat(fwMorning) || 0,
        refilled: parseFloat(fwRefilled) || 0,
        evening: parseFloat(fwEvening) || 0,
        consumption: parseFloat(fwConsumption) || 0
      },
      fuel: {
        morning: parseFloat(fuelMorning) || 0,
        refilled: parseFloat(fuelRefilled) || 0,
        evening: parseFloat(fuelEvening) || 0,
        consumption: parseFloat(fuelConsumption) || 0
      },
      greywater: { level: parseFloat(greywaterLevel) || 0 },
      trackDistanceNm: trackDistanceNm.trim() ? parseFloat(trackDistanceNm) : undefined,
      trackSpeedMaxKn: trackSpeedMaxKn.trim() ? parseFloat(trackSpeedMaxKn) : undefined,
      trackSpeedAvgKn: trackSpeedAvgKn.trim() ? parseFloat(trackSpeedAvgKn) : undefined,
      motorHours: motorHours.trim() ? parseFloat(motorHours) : undefined,
      events: eventsOverride ?? events,
      entryCrew
    })
  }, [
    date, dayOfTravel, departure, destination,
    fwMorning, fwRefilled, fwEvening, fwConsumption,
    fuelMorning, fuelRefilled, fuelEvening, fuelConsumption,
    greywaterLevel,
    trackDistanceNm, trackSpeedMaxKn, trackSpeedAvgKn, motorHours,
    events,
    entryCrew
  ])

  useEffect(() => {
    if (readOnly || loading || !date) return
    const timer = window.setTimeout(() => {
      void saveEntryDraft(logbookId, entryId, buildPayloadForSigning())
    }, 4000)
    return () => window.clearTimeout(timer)
  }, [readOnly, loading, logbookId, entryId, buildPayloadForSigning, date])

  const fuelPerMotorHour = useMemo(
    () => computeFuelPerMotorHour(parseFloat(fuelConsumption) || 0, parseFloat(motorHours) || 0),
    [fuelConsumption, motorHours]
  )

  const tankCapacityTooltip = t('logs.tank_capacity_tooltip')

  const fwRefilledMax = useMemo(
    () => computeRefilledTankMaxLiters(fwMorning, tankCapacities.freshwaterCapacityL),
    [fwMorning, tankCapacities.freshwaterCapacityL]
  )

  const fwEveningMax = useMemo(
    () =>
      computeEveningTankMaxLiters(
        fwMorning,
        fwRefilled,
        tankCapacities.freshwaterCapacityL
      ),
    [fwMorning, fwRefilled, tankCapacities.freshwaterCapacityL]
  )

  const fuelRefilledMax = useMemo(
    () => computeRefilledTankMaxLiters(fuelMorning, tankCapacities.fuelCapacityL),
    [fuelMorning, tankCapacities.fuelCapacityL]
  )

  const fuelEveningMax = useMemo(
    () =>
      computeEveningTankMaxLiters(
        fuelMorning,
        fuelRefilled,
        tankCapacities.fuelCapacityL
      ),
    [fuelMorning, fuelRefilled, tankCapacities.fuelCapacityL]
  )

  const currentFingerprint = useMemo(() => {
    const payload = buildPayloadForSigning()
    return JSON.stringify({
      ...payload,
      signSkipper: fingerprintSignature(signSkipper),
      signCrew: fingerprintSignature(signCrew)
    })
  }, [buildPayloadForSigning, signSkipper, signCrew])

  const buildEventFromForm = (): LogEvent =>
    normalizeLogEvent({
      time: evTime,
      mgk: evMgk,
      rwk: evRwk,
      windPressure: evWindPressure,
      windDirection: evWindDirection,
      windStrength: evWindStrength,
      seaState: evSeaState,
      weatherIcon: evWeatherIcon,
      current: evCurrent,
      heel: evHeel,
      sailsOrMotor: evSailsOrMotor,
      logReading: evLogReading,
      distance: evDistance,
      gpsLat: evGpsLat,
      gpsLng: evGpsLng,
      remarks: evRemarks
    })

  const applyEventFormToEvents = (eventData: LogEvent): LogEvent[] => {
    if (editingEventIndex !== null) {
      return sortLogEventsByTime(events.map((ev, idx) => (idx === editingEventIndex ? eventData : ev)))
    }
    return sortLogEventsByTime([...events, eventData])
  }

  const hasPendingEventForm = useMemo(() => {
    return hasUnsavedEventDraft(buildEventFromForm(), editingEventIndex, events)
  }, [
    evTime, evMgk, evRwk, evWindPressure, evWindDirection, evWindStrength, evSeaState,
    evWeatherIcon, evCurrent, evHeel, evSailsOrMotor, evLogReading, evDistance,
    evGpsLat, evGpsLng, evRemarks, editingEventIndex, events
  ])

  const isDirty = savedFingerprint !== null && (
    currentFingerprint !== savedFingerprint || hasPendingEventForm
  )

  const { confirmLeave } = useRegisterUnsavedChanges(
    `log-entry-${entryId}`,
    !readOnly && !loading && isDirty
  )

  const handleBack = async () => {
    if (!(await confirmLeave())) return
    onBack()
  }

  const persistEntryToDb = useCallback(async (
    options?: LogEvent[] | {
      eventsOverride?: LogEvent[]
      signSkipper?: SignatureValue | ''
      signCrew?: SignatureValue | ''
    }
  ) => {
    if (readOnly) return

    const normalized = Array.isArray(options) ? { eventsOverride: options } : (options ?? {})
    const eventsOverride = normalized.eventsOverride
    const skipperToSave = normalized.signSkipper !== undefined ? normalized.signSkipper : signSkipper
    const crewToSave = normalized.signCrew !== undefined ? normalized.signCrew : signCrew

    const masterKey = await getLogbookKey(logbookId) || getActiveMasterKey()
    if (!masterKey) throw new Error('Encryption key not found. Please log in.')

    const entryData = {
      ...buildPayloadForSigning(eventsOverride),
      signSkipper: normalizedSerializedSignature(skipperToSave),
      signCrew: normalizedSerializedSignature(crewToSave)
    }

    const encrypted = await encryptJson(entryData, masterKey)
    const now = new Date().toISOString()

    await db.entries.put({
      payloadId: entryId,
      logbookId,
      encryptedData: encrypted.ciphertext,
      iv: encrypted.iv,
      tag: encrypted.tag,
      updatedAt: now
    })

    await db.syncQueue.put({
      action: 'update',
      type: 'entry',
      payloadId: entryId,
      logbookId,
      data: JSON.stringify(encrypted),
      updatedAt: now
    })

    syncLogbook(logbookId).catch((err) => console.warn('Background sync failed:', err))

    setSavedFingerprint(JSON.stringify({
      ...buildPayloadForSigning(eventsOverride),
      signSkipper: fingerprintSignature(skipperToSave),
      signCrew: fingerprintSignature(crewToSave)
    }))

    const hash = await hashEntryForSigning(buildPayloadForSigning(eventsOverride))
    entryHashSeqRef.current += 1
    setEntryHash(hash)
    lockedContentHashRef.current = hasAnySignature(skipperToSave, crewToSave) ? hash : null
  }, [
    readOnly, logbookId, entryId, events, buildPayloadForSigning, signSkipper, signCrew
  ])

  useEffect(() => {
    const handleOnline = () => setIsOnline(true)
    const handleOffline = () => setIsOnline(false)
    window.addEventListener('online', handleOnline)
    window.addEventListener('offline', handleOffline)
    return () => {
      window.removeEventListener('online', handleOnline)
      window.removeEventListener('offline', handleOffline)
    }
  }, [])

  useEffect(() => {
    getLogbookAccess(logbookId).then((access) => {
      if (!access) return
      setCanSignSkipper(access.isOwner)
      setCanSignCrew(
        access.role === 'WRITE' ||
        (access.isOwner && access.writeCollaboratorCount === 0)
      )
    })
  }, [logbookId])

  useEffect(() => {
    const seq = ++entryHashSeqRef.current
    let cancelled = false
    hashEntryForSigning(buildPayloadForSigning()).then((hash) => {
      if (cancelled || seq !== entryHashSeqRef.current) return
      setEntryHash(hash)
    })
    return () => { cancelled = true }
  }, [buildPayloadForSigning])

  useEffect(() => {
    contentReadyRef.current = false
    if (loading) return
    const timer = window.setTimeout(() => {
      contentReadyRef.current = true
    }, 0)
    return () => window.clearTimeout(timer)
  }, [loading])

  useEffect(() => {
    if (!entryHash || !contentReadyRef.current || readOnly) return

    const hasSig = hasAnySignature(signSkipper, signCrew)
    if (!hasSig) {
      lockedContentHashRef.current = null
      return
    }

    if (!lockedContentHashRef.current) {
      lockedContentHashRef.current = entryHash
      return
    }

    if (entryHash !== lockedContentHashRef.current) {
      lockedContentHashRef.current = null
      const hadSkipper = !!signSkipper
      const hadCrew = !!signCrew
      const skipperOnly = skipCrewSignClearRef.current
      skipCrewSignClearRef.current = false
      if (hadSkipper) setSignSkipper('')
      if (hadCrew && !skipperOnly) setSignCrew('')
      if (lastSignatureAlertHashRef.current !== entryHash && (hadSkipper || (hadCrew && !skipperOnly))) {
        lastSignatureAlertHashRef.current = entryHash
        void showAlertRef.current(
          skipperOnly ? t('logs.sign_cleared_skipper_re_sign') : t('logs.sign_cleared_re_sign'),
          skipperOnly ? t('logs.sign_cleared_skipper_re_sign_title') : t('logs.sign_cleared_re_sign_title')
        )
      }
    }
  }, [entryHash, signSkipper, signCrew, readOnly, t])

  const confirmSignWarning = useCallback(async (): Promise<boolean> => {
    return showConfirm(
      t('logs.sign_lock_warning'),
      t('logs.sign_lock_warning_title'),
      t('logs.sign_proceed'),
      t('logs.sign_cancel')
    )
  }, [showConfirm, t])

  const skipperSignatureValid = !isPasskeySignature(signSkipper) || isSignatureValidForEntry(signSkipper, entryHash)
  const crewSignatureValid = !isPasskeySignature(signCrew) || isSignatureValidForEntry(signCrew, entryHash)

  const handlePasskeySignSkipper = async () => {
    if (!canSignSkipper) return
    const confirmed = await confirmSignWarning()
    if (!confirmed) return

    const hash = await hashEntryForSigning(buildPayloadForSigning())
    const signature = await signLogEntry({
      logbookId,
      entryId,
      entryHash: hash,
      role: 'skipper'
    })
    setSignSkipper(signature)
    entryHashSeqRef.current += 1
    setEntryHash(hash)
    lockedContentHashRef.current = hash
    trackPlausibleEvent(PlausibleEvents.ENTRY_SIGNED, { role: 'skipper' })
  }

  const handlePasskeySignCrew = async () => {
    if (!canSignCrew) return
    const confirmed = await confirmSignWarning()
    if (!confirmed) return

    const hash = await hashEntryForSigning(buildPayloadForSigning())
    const signature = await signLogEntry({
      logbookId,
      entryId,
      entryHash: hash,
      role: 'crew'
    })
    setSignCrew(signature)
    entryHashSeqRef.current += 1
    setEntryHash(hash)
    lockedContentHashRef.current = hash
    trackPlausibleEvent(PlausibleEvents.ENTRY_SIGNED, { role: 'crew' })
  }

  // Auto-calculate Freshwater Consumption
  useEffect(() => {
    const morning = parseFloat(fwMorning) || 0
    const refilled = parseFloat(fwRefilled) || 0
    const evening = parseFloat(fwEvening) || 0
    const cons = morning + refilled - evening
    setFwConsumption(cons >= 0 ? String(cons) : '0')
  }, [fwMorning, fwRefilled, fwEvening])

  // Auto-calculate Fuel Consumption
  useEffect(() => {
    const morning = parseFloat(fuelMorning) || 0
    const refilled = parseFloat(fuelRefilled) || 0
    const evening = parseFloat(fuelEvening) || 0
    const cons = morning + refilled - evening
    setFuelConsumption(cons >= 0 ? String(cons) : '0')
  }, [fuelMorning, fuelRefilled, fuelEvening])

  const fwRefilledNoCapacity =
    (tankCapacities.freshwaterCapacityL ?? 0) > 0 && fwRefilledMax == null
  const fuelRefilledNoCapacity =
    (tankCapacities.fuelCapacityL ?? 0) > 0 && fuelRefilledMax == null

  useEffect(() => {
    const refilled = parseFloat(fwRefilled) || 0
    if (fwRefilledMax == null) {
      if (fwRefilledNoCapacity && refilled > 0) {
        setFwRefilled(formatTankLitersForInput(0))
      }
      return
    }
    if (refilled > fwRefilledMax) {
      setFwRefilled(formatTankLitersForInput(fwRefilledMax))
    }
  }, [fwRefilledMax, fwRefilled, fwRefilledNoCapacity])

  useEffect(() => {
    if (fwEveningMax == null) return
    const evening = parseFloat(fwEvening) || 0
    if (evening > fwEveningMax) {
      setFwEvening(formatTankLitersForInput(fwEveningMax))
    }
  }, [fwEveningMax, fwEvening])

  useEffect(() => {
    const refilled = parseFloat(fuelRefilled) || 0
    if (fuelRefilledMax == null) {
      if (fuelRefilledNoCapacity && refilled > 0) {
        setFuelRefilled(formatTankLitersForInput(0))
      }
      return
    }
    if (refilled > fuelRefilledMax) {
      setFuelRefilled(formatTankLitersForInput(fuelRefilledMax))
    }
  }, [fuelRefilledMax, fuelRefilled, fuelRefilledNoCapacity])

  useEffect(() => {
    if (fuelEveningMax == null) return
    const evening = parseFloat(fuelEvening) || 0
    if (evening > fuelEveningMax) {
      setFuelEvening(formatTankLitersForInput(fuelEveningMax))
    }
  }, [fuelEveningMax, fuelEvening])

  // Load yacht sails and tank capacities
  useEffect(() => {
    async function loadYachtMeta() {
      if (readOnly && preloadedYacht) {
        if (preloadedYacht.sails) setYachtSails(preloadedYacht.sails)
        setTankCapacities(extractTankCapacitiesFromYacht(preloadedYacht))
        return
      }
      try {
        const masterKey = await getLogbookKey(logbookId) || getActiveMasterKey()
        if (!masterKey) return

        const yacht = await db.yachts.get(logbookId)
        if (yacht) {
          const decrypted = await decryptJson(yacht.encryptedData, yacht.iv, yacht.tag, masterKey)
          if (decrypted) {
            if (decrypted.sails && Array.isArray(decrypted.sails)) {
              setYachtSails(decrypted.sails)
            }
            setTankCapacities(extractTankCapacitiesFromYacht(decrypted))
          }
        }
      } catch (err) {
        console.error('Failed to load yacht meta in editor:', err)
      }
    }
    loadYachtMeta()
  }, [logbookId, preloadedYacht, readOnly])

  // Load entry details
  useEffect(() => {
    async function loadEntry() {
      setLoading(true)
      setError(null)
      setSavedFingerprint(null)
      lockedContentHashRef.current = null
      contentReadyRef.current = false
      lastSignatureAlertHashRef.current = null
      try {
        if (readOnly && preloadedEntry) {
          setDate(preloadedEntry.date || '')
          setDayOfTravel(preloadedEntry.dayOfTravel || '')
          setDeparture(preloadedEntry.departure || '')
          setDestination(preloadedEntry.destination || '')
          
          if (preloadedEntry.freshwater) {
            setFwMorning(String(preloadedEntry.freshwater.morning || 0))
            setFwRefilled(String(preloadedEntry.freshwater.refilled || 0))
            setFwEvening(String(preloadedEntry.freshwater.evening || 0))
            setFwConsumption(String(preloadedEntry.freshwater.consumption ?? 0))
          }
          if (preloadedEntry.fuel) {
            setFuelMorning(String(preloadedEntry.fuel.morning || 0))
            setFuelRefilled(String(preloadedEntry.fuel.refilled || 0))
            setFuelEvening(String(preloadedEntry.fuel.evening || 0))
            setFuelConsumption(String(preloadedEntry.fuel.consumption ?? 0))
          }
          if (preloadedEntry.greywater) {
            setGreywaterLevel(String(preloadedEntry.greywater.level || 0))
          } else {
            setGreywaterLevel('0')
          }

          setSignSkipper(normalizeSignature(preloadedEntry.signSkipper) || '')
          setSignCrew(normalizeSignature(preloadedEntry.signCrew) || '')
          setEntryCrew(entryCrewFromPreviousEntry(preloadedEntry as Record<string, unknown>))
          loadTrackStatsFromEntry(preloadedEntry)
          setEvents(sortLogEventsByTime((preloadedEntry.events || []).map(normalizeLogEvent)))
          setSavedFingerprint(fingerprintFromStoredEntry(preloadedEntry))
          return
        }

        const masterKey = await getLogbookKey(logbookId) || getActiveMasterKey()
        if (!masterKey) throw new Error('Encryption key not found. Please log in.')

        const local = await db.entries.get(entryId)
        if (local) {
          const decrypted = await decryptJson(local.encryptedData, local.iv, local.tag, masterKey)
          if (decrypted) {
            setDate(decrypted.date || '')
            setDayOfTravel(decrypted.dayOfTravel || '')
            setDeparture(decrypted.departure || '')
            setDestination(decrypted.destination || '')
            
            if (decrypted.freshwater) {
              setFwMorning(String(decrypted.freshwater.morning || 0))
              setFwRefilled(String(decrypted.freshwater.refilled || 0))
              setFwEvening(String(decrypted.freshwater.evening || 0))
              setFwConsumption(String(decrypted.freshwater.consumption ?? 0))
            }
            if (decrypted.fuel) {
              setFuelMorning(String(decrypted.fuel.morning || 0))
              setFuelRefilled(String(decrypted.fuel.refilled || 0))
              setFuelEvening(String(decrypted.fuel.evening || 0))
              setFuelConsumption(String(decrypted.fuel.consumption ?? 0))
            }
            if (decrypted.greywater) {
              setGreywaterLevel(String(decrypted.greywater.level || 0))
            } else {
              setGreywaterLevel('0')
            }

            setSignSkipper(normalizeSignature(decrypted.signSkipper) || '')
            setSignCrew(normalizeSignature(decrypted.signCrew) || '')
            setEntryCrew(entryCrewFromPreviousEntry(decrypted as Record<string, unknown>))
            loadTrackStatsFromEntry(decrypted)
            setEvents(sortLogEventsByTime((decrypted.events || []).map(normalizeLogEvent)))
            setSavedFingerprint(fingerprintFromStoredEntry(decrypted))
          }
        }
      } catch (err: any) {
        console.error('Failed to load entry details:', err)
        setError(err.message || 'Decryption failed. Could not load entry details.')
      } finally {
        setLoading(false)
      }
    }

    loadEntry()
  }, [entryId, preloadedEntry])

  const loadTrack = async () => {
    if (readOnly && preloadedTrack) {
      setSavedTrack({
        waypoints: preloadedTrack.waypoints ?? [],
        gpxContent: preloadedTrack.gpxContent ?? '',
        filename: preloadedTrack.filename ?? 'track.gpx',
        fileType: preloadedTrack.fileType ?? 'gpx'
      })
      return
    }
    try {
      const track = await getDecryptedTrack(entryId)
      setSavedTrack(track)
    } catch (e) {
      console.warn('Failed to load track file:', e)
    }
  }

  useEffect(() => {
    loadTrack()
  }, [entryId, preloadedTrack])

  const loadNmeaArchive = async () => {
    if (readOnly) return
    try {
      const archive = await getNmeaArchive(entryId)
      setNmeaArchive(archive)
    } catch {
      setNmeaArchive(null)
    }
  }

  useEffect(() => {
    loadNmeaArchive()
  }, [entryId, readOnly])

  const handleNmeaImport = async (importedEvents: LogEventPayload[], waypoints?: TrackWaypoint[]) => {
    setEvents((prev) => sortLogEventsByTime([...prev, ...importedEvents]))
    if (waypoints && waypoints.length > 0) {
      try {
        const gpxLike = waypoints
          .map((wp) => `        <trkpt lat="${wp.lat}" lon="${wp.lng}"><time>${new Date(wp.timestamp).toISOString()}</time></trkpt>`)
          .join('\n')
        const content = `<?xml version="1.0"?><gpx><trk><trkseg>\n${gpxLike}\n</trkseg></trk></gpx>`
        await saveUploadedTrack(logbookId, entryId, content, waypoints, 'imported-from-nmea.nmea', 'nmea')
        applyTrackStats(waypoints)
        await loadTrack()
        trackPlausibleEvent(PlausibleEvents.GPS_TRACK_UPLOADED)
      } catch (err: unknown) {
        console.warn('Failed to save NMEA track:', err)
      }
    }
    await loadNmeaArchive()
  }

  const handleDeleteNmeaArchive = async () => {
    if (!window.confirm(t('logs.nmea_archive_delete_confirm'))) return
    await deleteNmeaArchive(entryId)
    setNmeaArchive(null)
  }

  useEffect(() => {
    if (!savedTrack || savedTrack.waypoints.length < 2) return
    if (trackDistanceNm || trackSpeedMaxKn || trackSpeedAvgKn) return
    applyTrackStats(savedTrack.waypoints)
  }, [savedTrack, trackDistanceNm, trackSpeedMaxKn, trackSpeedAvgKn])

  // Track file upload handlers
  const handleFileUpload = async (file: File) => {
    if (readOnly) return
    setUploadError(null)
    const reader = new FileReader()
    reader.onload = async (e) => {
      try {
        const text = e.target?.result as string
        if (!text) {
          throw new Error('File is empty')
        }

        const { waypoints: parsedWps, type: fileType } = parseTrackFile(text, file.name)
        
        if (parsedWps.length === 0) {
          throw new Error('No coordinates found in file. Supported formats: GPX, KML, GeoJSON.')
        }

        await saveUploadedTrack(logbookId, entryId, text, parsedWps, file.name, fileType)
        applyTrackStats(parsedWps)
        await loadTrack()
        trackPlausibleEvent(PlausibleEvents.GPS_TRACK_UPLOADED)
      } catch (err: any) {
        console.error('File parsing failed:', err)
        setUploadError(err.message || 'Failed to parse track file.')
      }
    }
    reader.onerror = () => {
      setUploadError('Failed to read file.')
    }
    reader.readAsText(file)
  }

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files.length > 0) {
      handleFileUpload(e.target.files[0])
    }
  }

  const handleDragOver = (e: React.DragEvent) => {
    e.preventDefault()
    setDragOver(true)
  }

  const handleDragLeave = () => {
    setDragOver(false)
  }

  const handleDrop = (e: React.DragEvent) => {
    e.preventDefault()
    setDragOver(false)
    if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
      handleFileUpload(e.dataTransfer.files[0])
    }
  }

  const handleDeleteTrack = async () => {
    if (readOnly) return
    if (!window.confirm(t('logs.gps_track_delete_confirm'))) {
      return
    }
    try {
      await deleteTrack(logbookId, entryId)
      setSavedTrack(null)
      setTrackDistanceNm('')
      setTrackSpeedMaxKn('')
      setTrackSpeedAvgKn('')
      setUploadError(null)
    } catch (err: any) {
      showAlert(err.message || 'Failed to delete track')
    }
  }

  const handleGetGps = () => {
    if (readOnly) return
    const lookupFallback = async () => {
      const locationQuery = evLocationName.trim() || departure.trim() || destination.trim()
      if (!locationQuery) {
        showAlert('GPS capturing failed, and no location name is entered in "Ort / Hafen" or "Start-Hafen" to look up coordinates.')
        return
      }

      try {
        const data = await fetchOpenWeatherCurrent(
          { q: locationQuery },
          { analyticsSource: 'entry_editor_gps_lookup' }
        )
        const coord = data.coord as { lat?: number; lon?: number } | undefined
        if (coord?.lat !== undefined && coord?.lon !== undefined) {
          setEvGpsLat(Number(coord.lat).toFixed(6))
          setEvGpsLng(Number(coord.lon).toFixed(6))
          showAlert(`Coordinates loaded for "${locationQuery}" via OpenWeatherMap.`)
        }
      } catch (e) {
        if (e instanceof WeatherApiError && e.code === 'NO_KEY') {
          showAlert(t('settings.no_key'))
          return
        }
        showAlert('Failed to retrieve GPS location or look up coordinates by location name.')
      }
    }

    if (!navigator.geolocation) {
      lookupFallback()
      return
    }

    navigator.geolocation.getCurrentPosition(
      (pos) => {
        setEvGpsLat(pos.coords.latitude.toFixed(6))
        setEvGpsLng(pos.coords.longitude.toFixed(6))
      },
      (err) => {
        console.warn('GPS capturing failed, trying fallback:', err)
        lookupFallback()
      }
    )
  }

  const handleFetchWeather = async () => {
    const localToday = new Date()
    const todayStr = `${localToday.getFullYear()}-${String(localToday.getMonth() + 1).padStart(2, '0')}-${String(localToday.getDate()).padStart(2, '0')}`

    if (date && date !== todayStr) {
      showAlert(t('settings.weather_date_mismatch', { date, today: todayStr }))
      return
    }

    const hasGps = evGpsLat && evGpsLng
    const fallbackLocation = evLocationName.trim() || departure.trim() || destination.trim()

    if (!hasGps && !fallbackLocation) {
      showAlert(t('settings.gps_error'))
      return
    }

    setWeatherLoading(true)
    try {
      const data = await fetchOpenWeatherCurrent(
        hasGps
          ? { lat: evGpsLat, lon: evGpsLng }
          : { q: fallbackLocation },
        { analyticsSource: 'entry_editor' }
      )

      const coord = data.coord as { lat?: number; lon?: number } | undefined
      // If fetched by location, automatically pre-fill GPS coordinates
      if (!hasGps && coord?.lat !== undefined && coord?.lon !== undefined) {
        setEvGpsLat(Number(coord.lat).toFixed(6))
        setEvGpsLng(Number(coord.lon).toFixed(6))
      }

      const parsed = parseOwmCurrentWeather(data)
      setEvWindStrength(parsed.windStrength)
      setEvWindPressure(parsed.windPressure)
      if (parsed.windDirection) setEvWindDirection(parsed.windDirection)
      if (parsed.weatherIcon) setEvWeatherIcon(parsed.weatherIcon)

      showAlert(t('settings.weather_success'))
    } catch (err) {
      if (err instanceof WeatherApiError && err.code === 'NO_KEY') {
        showAlert(t('settings.no_key'))
        return
      }
      console.error('Weather prefilling failed:', err)
      showAlert(t('settings.weather_error'))
    } finally {
      setWeatherLoading(false)
    }
  }

  const defaultSails = i18n.language === 'de'
    ? ['Großsegel', 'Genua', 'Fock', 'Spinnaker', 'Gennaker']
    : ['Mainsail', 'Genoa', 'Jib', 'Spinnaker', 'Gennaker']

  const eventSailOptions = yachtSails.length > 0 ? yachtSails : defaultSails
  const showSailsPickerToggle = eventSailOptions.length + 1 > 6

  const toggleSailOrMotor = (item: string) => {
    let currentItems = evSailsOrMotor
      .split(/\s*(?:\+|\bplus\b|,)\s*/i)
      .map(s => s.trim())
      .filter(Boolean)

    if (currentItems.some(s => s.toLowerCase() === item.toLowerCase())) {
      currentItems = currentItems.filter(s => s.toLowerCase() !== item.toLowerCase())
    } else {
      currentItems.push(item)
    }

    setEvSailsOrMotor(currentItems.join(' + '))
  }

  const isItemActive = (item: string) => {
    const currentItems = evSailsOrMotor
      .split(/\s*(?:\+|\bplus\b|,)\s*/i)
      .map(s => s.trim().toLowerCase())
      .filter(Boolean)
    return currentItems.includes(item.toLowerCase())
  }

  const motorPropulsionLabel = t('logs.motor_propulsion')
  const sortedEventSailOptions = [...eventSailOptions].sort((a, b) => {
    const aActive = isItemActive(a)
    const bActive = isItemActive(b)
    if (aActive === bActive) return 0
    return aActive ? -1 : 1
  })
  const isMotorActive = isItemActive(motorPropulsionLabel)

  const clearEventForm = () => {
    setEvTime(currentLocalTimeHHMM())
    setEvMgk('')
    setEvRwk('')
    setEvWindPressure('')
    setEvWindDirection('')
    setEvWindStrength('')
    setEvSeaState('')
    setEvWeatherIcon('')
    setEvCurrent('')
    setEvHeel('')
    setEvSailsOrMotor('')
    setEvLogReading('')
    setEvDistance('')
    setEvGpsLat('')
    setEvGpsLng('')
    setEvRemarks('')
    setEvLocationName('')
    setEditingEventIndex(null)
    setSailsPickerExpanded(false)
  }

  const fillEventForm = (ev: LogEvent) => {
    const normalized = normalizeLogEvent(ev)
    setEvTime(normalized.time)
    setEvMgk(normalized.mgk)
    setEvRwk(normalized.rwk)
    setEvWindPressure(normalized.windPressure)
    setEvWindDirection(normalized.windDirection)
    setEvWindStrength(normalized.windStrength)
    setEvSeaState(normalized.seaState)
    setEvWeatherIcon(normalized.weatherIcon)
    setEvCurrent(normalized.current)
    setEvHeel(normalized.heel)
    setEvSailsOrMotor(normalized.sailsOrMotor)
    setEvLogReading(normalized.logReading)
    setEvDistance(normalized.distance)
    setEvGpsLat(normalized.gpsLat)
    setEvGpsLng(normalized.gpsLng)
    setEvRemarks(normalized.remarks)
    setEvLocationName('')
  }

  const resolveSignaturesAfterContentChange = (skipperOnly = false) => {
    const hadSkipper = !!signSkipper
    const hadCrew = !!signCrew
    const cleared = hadSkipper || (hadCrew && !skipperOnly)
    skipCrewSignClearRef.current = skipperOnly
    const nextSkipper: SignatureValue | '' = hadSkipper ? '' : signSkipper
    const nextCrew: SignatureValue | '' = hadCrew && !skipperOnly ? '' : signCrew
    if (cleared) {
      if (hadSkipper) setSignSkipper('')
      if (hadCrew && !skipperOnly) setSignCrew('')
      lockedContentHashRef.current = null
    }
    return { signSkipper: nextSkipper, signCrew: nextCrew, cleared }
  }

  const markSkipperSignatureClearedForEventChange = () => {
    resolveSignaturesAfterContentChange(true)
  }

  const handleEditEvent = (index: number) => {
    if (readOnly) return
    const ev = events[index]
    if (!ev) return
    fillEventForm(ev)
    setEditingEventIndex(index)
  }

  const handleCancelEventEdit = () => {
    clearEventForm()
  }

  const handleSaveEvent = async (e: React.FormEvent) => {
    e.preventDefault()
    if (readOnly || !isValidTimeHHMM(evTime)) return

    const eventData = buildEventFromForm()
    const isEdit = editingEventIndex !== null
    const hadSkipperSignature = isEdit && !!signSkipper

    if (hadSkipperSignature) {
      markSkipperSignatureClearedForEventChange()
    }

    const nextEvents = applyEventFormToEvents(eventData)

    try {
      await persistEntryToDb(nextEvents)
      setEvents(nextEvents)
      clearEventForm()
      if (hadSkipperSignature) {
        void showAlertRef.current(
          t('logs.sign_cleared_skipper_re_sign'),
          t('logs.sign_cleared_skipper_re_sign_title')
        )
      }
    } catch (err: any) {
      console.error('Failed to auto-save event:', err)
      setError(err.message || 'Failed to save event.')
    }
  }

  const handleDeleteEvent = async (index: number) => {
    if (readOnly) return
    const hadSkipperSignature = !!signSkipper
    markSkipperSignatureClearedForEventChange()
    const nextEvents = events.filter((_, idx) => idx !== index)
    setEvents(nextEvents)
    if (hadSkipperSignature) {
      void showAlertRef.current(
        t('logs.sign_cleared_skipper_re_sign'),
        t('logs.sign_cleared_skipper_re_sign_title')
      )
    }
    if (editingEventIndex === index) {
      clearEventForm()
    } else if (editingEventIndex !== null && index < editingEventIndex) {
      setEditingEventIndex(editingEventIndex - 1)
    }

    try {
      await persistEntryToDb(nextEvents)
    } catch (err: any) {
      console.error('Failed to auto-save after event delete:', err)
      setError(err.message || 'Failed to save event deletion.')
    }
  }

  const handleDownloadPdf = async () => {
    setExporting(true)
    setError(null)
    try {
      await downloadLogbookPagePdf(logbookId, entryId, date)
      trackPlausibleEvent(PlausibleEvents.PDF_EXPORTED, { scope: 'entry' })
    } catch (err: any) {
      console.error('Failed to download PDF:', err)
      setError(err.message || 'Failed to generate PDF export.')
    } finally {
      setExporting(false)
    }
  }

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (readOnly) return

    let eventsToSave = events
    let signaturesForSave: { signSkipper: SignatureValue | ''; signCrew: SignatureValue | '' } | undefined

    if (hasPendingEventForm) {
      const isEdit = editingEventIndex !== null
      const resolved = resolveSignaturesAfterContentChange(isEdit)
      signaturesForSave = {
        signSkipper: resolved.signSkipper,
        signCrew: resolved.signCrew
      }
      if (resolved.cleared) {
        void showAlertRef.current(
          isEdit ? t('logs.sign_cleared_skipper_re_sign') : t('logs.sign_cleared_re_sign'),
          isEdit ? t('logs.sign_cleared_skipper_re_sign_title') : t('logs.sign_cleared_re_sign_title')
        )
      }
      eventsToSave = applyEventFormToEvents(buildEventFromForm())
      setEvents(eventsToSave)
      clearEventForm()
    } else if (!isDirty) {
      return
    }

    setSaving(true)
    setError(null)
    setSuccess(false)

    try {
      await persistEntryToDb({
        eventsOverride: eventsToSave,
        ...signaturesForSave
      })

      await clearEntryDraft(logbookId, entryId)

      setSuccess(true)
      trackPlausibleEvent(PlausibleEvents.TRAVEL_DAY_SAVED)
      setTimeout(() => {
        setSuccess(false)
        onBack()
      }, 1500)
    } catch (err: unknown) {
      console.error('Failed to save entry details:', err)
      setError(getErrorMessage(err, t('errors.save_failed')))
    } finally {
      setSaving(false)
    }
  }

  if (loading) {
    return (
      <div className="tab-placeholder">
        <FileText className="header-logo spin" size={48} />
        <p>{t('logs.loading')}</p>
      </div>
    )
  }

  return (
    <div className="crew-dashboard-layout">
      {/* Top Header Controls */}
      <div className="form-card" style={{ paddingBottom: '20px' }}>
        <div className="section-title-bar">
          <div className="section-title-left">
            <button className="btn-back" onClick={() => void handleBack()} style={{ padding: '6px 12px' }}>
              <ChevronLeft size={16} />
              {t('logs.back_to_list')}
            </button>
            <div className="form-header" style={{ margin: 0 }}>
              <FileText size={24} className="form-icon" />
              <h2>
                {t('logs.route')}: {departure || '...'} → {destination || '...'} (Tag {dayOfTravel})
              </h2>
            </div>
          </div>
          
          <button 
            type="button" 
            className="btn secondary" 
            onClick={handleDownloadPdf} 
            disabled={saving || exporting} 
            style={{ width: 'auto', padding: '8px 16px' }}
          >
            <Download size={16} />
            <span className="hide-mobile">{exporting ? t('logs.exporting_pdf') : t('logs.export_pdf')}</span>
          </button>
        </div>
      </div>

      {error && <div className="auth-error">{error}</div>}

      {/* Main Journal Data Forms */}
      <form onSubmit={handleSubmit} className="vessel-form">
        {/* Section 1: Travel Day Headers */}
        <div className="form-card">
          <div className="form-header">
            <FileText size={20} className="form-icon" />
            <h3>{t('logs.travel_details')}</h3>
          </div>
          <div className="form-grid">
            <div className="input-group">
              <label>{t('logs.date')}</label>
              <input
                type="date"
                className="input-text"
                value={date}
                onChange={(e) => setDate(e.target.value)}
                disabled={saving || readOnly}
                required
              />
            </div>

            <div className="input-group">
              <label>{t('logs.day_of_travel')}</label>
              <input
                type="text"
                className="input-text"
                value={dayOfTravel}
                onChange={(e) => setDayOfTravel(e.target.value)}
                disabled={saving || readOnly}
                required
              />
            </div>

            <div className="input-group">
              <label>{t('logs.departure')}</label>
              <input
                type="text"
                className="input-text"
                value={departure}
                onChange={(e) => setDeparture(e.target.value)}
                disabled={saving || readOnly}
              />
            </div>

            <div className="input-group">
              <label>{t('logs.destination')}</label>
              <input
                type="text"
                className="input-text"
                value={destination}
                onChange={(e) => setDestination(e.target.value)}
                disabled={saving || readOnly}
              />
            </div>

            <div className="input-group">
              <label>{t('logs.motor_hours')}</label>
              <input
                type="number"
                className="input-text"
                value={motorHours}
                onChange={(e) => setMotorHours(e.target.value)}
                disabled={saving || readOnly}
                min="0"
                step="0.1"
                placeholder="0"
              />
            </div>
          </div>
        </div>

        {/* Section 2: Freshwater and Fuel Consumption */}
        <div className="form-grid">
          {/* Freshwater card */}
          <div className="form-card">
            <div className="form-header">
              <Compass size={20} className="form-icon" />
              <h3>{t('logs.freshwater')}</h3>
            </div>
            <div className="consumption-grid">
              <TankLiterInput
                id="fw-morning"
                label={t('logs.morning')}
                value={fwMorning}
                onChange={setFwMorning}
                maxLiters={tankCapacities.freshwaterCapacityL}
                disabled={saving || readOnly}
                titleTooltip={tankCapacityTooltip}
              />
              <TankLiterInput
                id="fw-refilled"
                label={t('logs.refilled')}
                value={fwRefilled}
                onChange={setFwRefilled}
                maxLiters={fwRefilledMax}
                disabled={saving || readOnly || fwRefilledNoCapacity}
                titleTooltip={tankCapacityTooltip}
              />
              <TankLiterInput
                id="fw-evening"
                label={t('logs.evening')}
                value={fwEvening}
                onChange={setFwEvening}
                maxLiters={fwEveningMax}
                disabled={saving || readOnly}
                titleTooltip={tankCapacityTooltip}
              />
              <div className="input-group">
                <label title={tankCapacityTooltip}>{t('logs.consumption')} (L)</label>
                <input
                  type="number"
                  className="input-text consumption-value"
                  value={fwConsumption}
                  readOnly
                  tabIndex={-1}
                  aria-readonly="true"
                  title={tankCapacityTooltip}
                />
              </div>
            </div>
          </div>

          {/* Fuel card */}
          <div className="form-card">
            <div className="form-header">
              <Compass size={20} className="form-icon" />
              <h3>{t('logs.fuel')}</h3>
            </div>
            <div className="consumption-grid">
              <TankLiterInput
                id="fuel-morning"
                label={t('logs.morning')}
                value={fuelMorning}
                onChange={setFuelMorning}
                maxLiters={tankCapacities.fuelCapacityL}
                disabled={saving || readOnly}
                titleTooltip={tankCapacityTooltip}
              />
              <TankLiterInput
                id="fuel-refilled"
                label={t('logs.refilled')}
                value={fuelRefilled}
                onChange={setFuelRefilled}
                maxLiters={fuelRefilledMax}
                disabled={saving || readOnly || fuelRefilledNoCapacity}
                titleTooltip={tankCapacityTooltip}
              />
              <TankLiterInput
                id="fuel-evening"
                label={t('logs.evening')}
                value={fuelEvening}
                onChange={setFuelEvening}
                maxLiters={fuelEveningMax}
                disabled={saving || readOnly}
                titleTooltip={tankCapacityTooltip}
              />
              <div className="input-group">
                <label title={tankCapacityTooltip}>{t('logs.consumption')} (L)</label>
                <input
                  type="number"
                  className="input-text consumption-value"
                  value={fuelConsumption}
                  readOnly
                  tabIndex={-1}
                  aria-readonly="true"
                  title={tankCapacityTooltip}
                />
              </div>

              <div className="input-group">
                <label title={tankCapacityTooltip}>{t('logs.fuel_per_motor_hour')}</label>
                <input
                  type="text"
                  className="input-text consumption-value"
                  value={
                    fuelPerMotorHour != null
                      ? `${formatFuelPerMotorHour(fuelPerMotorHour)} L/h`
                      : '—'
                  }
                  readOnly
                  tabIndex={-1}
                  aria-readonly="true"
                  title={tankCapacityTooltip}
                />
              </div>
            </div>
          </div>

          {/* Greywater card */}
          <div className="form-card">
            <div className="form-header">
              <Compass size={20} className="form-icon" />
              <h3>{t('logs.greywater')}</h3>
            </div>
            <div className="consumption-grid">
              <TankLiterInput
                id="greywater-level"
                label={t('logs.greywater_level')}
                value={greywaterLevel}
                onChange={setGreywaterLevel}
                maxLiters={tankCapacities.greywaterCapacityL}
                disabled={saving || readOnly}
                titleTooltip={tankCapacityTooltip}
              />
            </div>
          </div>
        </div>

        {/* Section 3: Event Journal Entries */}
        <div className="form-card">
          <div className="form-header mb-4">
            <Compass size={20} className="form-icon" />
            <h3>{t('logs.event_title')}</h3>
          </div>

          {/* List existing events */}
          {events.length === 0 ? (
            <div className="dashboard-status-msg mb-6">{t('logs.no_events')}</div>
          ) : (
            <div className="events-scroll-container mb-6">
              <table className="events-table">
                <thead>
                  <tr>
                    <th>{t('logs.event_time')}</th>
                    <th>{t('logs.event_mgk')}</th>
                    <th>{t('logs.event_rwk')}</th>
                    <th>{t('logs.event_wind_direction')}</th>
                    <th>{t('logs.event_wind_strength')}</th>
                    <th>{t('logs.event_sea_state')}</th>
                    <th>{t('logs.event_weather')}</th>
                    <th>{t('logs.event_log')}</th>
                    <th>{t('logs.event_gps')}</th>
                    <th>{t('logs.event_remarks')}</th>
                    {!readOnly && <th></th>}
                  </tr>
                </thead>
                <tbody>
                  {events.map((ev, idx) => (
                    <tr key={idx}>
                      <td className="font-mono">{ev.time}</td>
                      <td>{ev.mgk ? `${ev.mgk}°` : '—'}</td>
                      <td>{ev.rwk ? `${ev.rwk}°` : '—'}</td>
                      <td>{ev.windDirection || '—'}</td>
                      <td>{ev.windStrength || '—'}</td>
                      <td>{ev.seaState || '—'}</td>
                      <td>
                        {ev.weatherIcon ? (
                          <img
                            src={`https://openweathermap.org/img/wn/${ev.weatherIcon}.png`}
                            alt="Weather"
                            title="Weather Icon"
                            className="table-weather-img"
                          />
                        ) : (
                          '—'
                        )}
                      </td>
                      <td>{ev.logReading ? `${ev.logReading} nm` : '—'}</td>
                      <td className="font-mono text-sm">
                        {ev.gpsLat && ev.gpsLng ? `${ev.gpsLat}, ${ev.gpsLng}` : '—'}
                      </td>
                      <td className="remarks-td">{ev.remarks}</td>
                      {!readOnly && (
                        <td className="events-actions-td">
                          <button
                            type="button"
                            className="btn-icon"
                            onClick={() => handleEditEvent(idx)}
                            title={t('logs.edit_event')}
                            disabled={editingEventIndex !== null && editingEventIndex !== idx}
                          >
                            <Pencil size={14} />
                          </button>
                          <button
                            type="button"
                            className="btn-icon logout"
                            onClick={() => handleDeleteEvent(idx)}
                            title={t('logs.delete_event')}
                          >
                            <Trash2 size={14} />
                          </button>
                        </td>
                      )}
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}

          {/* Add New Event Form Sub-Card */}
          {!readOnly && (
            <div className="member-editor-card glass">
              <h4 style={{ margin: '0 0 16px 0', color: '#fbbf24' }}>
                {editingEventIndex !== null ? t('logs.edit_event') : t('logs.add_event')}
              </h4>
            
            <div className="form-grid mb-4">
              <div className="input-group">
                <label>
                  <Clock size={12} style={{ display: 'inline', marginRight: 4 }} />
                  {t('logs.event_time')} *
                </label>
                <EventTimeInput24h
                  value={evTime}
                  onChange={setEvTime}
                  disabled={saving}
                  aria-label={t('logs.event_time')}
                />
              </div>

              <div className="input-group course-dial-section">
                <label>
                  <Compass size={12} style={{ display: 'inline', marginRight: 4 }} />
                  {t('logs.event_course_section')}
                </label>
                <div className="course-dial-tabs" role="tablist" aria-label={t('logs.event_course_section')}>
                  <button
                    type="button"
                    role="tab"
                    aria-selected={activeCourseTab === 'mgk'}
                    className={`course-dial-tab${activeCourseTab === 'mgk' ? ' is-active' : ''}`}
                    onClick={() => setActiveCourseTab('mgk')}
                    disabled={saving}
                  >
                    {t('logs.course_tab_mgk')}
                  </button>
                  <button
                    type="button"
                    role="tab"
                    aria-selected={activeCourseTab === 'rwk'}
                    className={`course-dial-tab${activeCourseTab === 'rwk' ? ' is-active' : ''}`}
                    onClick={() => setActiveCourseTab('rwk')}
                    disabled={saving}
                  >
                    {t('logs.course_tab_rwk')}
                  </button>
                </div>
                <CourseDialInput
                  value={activeCourseTab === 'mgk' ? evMgk : evRwk}
                  onChange={activeCourseTab === 'mgk' ? setEvMgk : setEvRwk}
                  disabled={saving}
                  aria-label={activeCourseTab === 'mgk' ? t('logs.event_mgk') : t('logs.event_rwk')}
                />
              </div>

              <div className="input-group">
                <label>{t('logs.event_log')}</label>
                <input
                  type="text"
                  placeholder="e.g. 124.5"
                  className="input-text"
                  value={evLogReading}
                  onChange={(e) => setEvLogReading(e.target.value)}
                  disabled={saving}
                />
              </div>
            </div>

            <div className="form-grid mb-4">
              <div className="input-group">
                <label>{t('logs.event_location')}</label>
                <input
                  type="text"
                  placeholder={t('logs.event_location_placeholder')}
                  className="input-text"
                  value={evLocationName}
                  onChange={(e) => setEvLocationName(e.target.value)}
                  disabled={saving}
                />
              </div>

              <div className="input-group">
                <label>{t('logs.event_gps')} (Lat, Lng)</label>
                <div className="gps-input-row">
                  <input
                    type="text"
                    placeholder="Lat"
                    className="input-text"
                    value={evGpsLat}
                    onChange={(e) => setEvGpsLat(e.target.value)}
                    disabled={saving}
                  />
                  <input
                    type="text"
                    placeholder="Lng"
                    className="input-text"
                    value={evGpsLng}
                    onChange={(e) => setEvGpsLng(e.target.value)}
                    disabled={saving}
                  />
                  <button
                    type="button"
                    className="btn secondary"
                    onClick={handleGetGps}
                    title={t('logs.gps_btn')}
                    style={{ width: 'auto', padding: '12px' }}
                    disabled={saving}
                  >
                    <MapPin size={16} />
                  </button>
                  <button
                    type="button"
                    className="btn secondary"
                    onClick={handleFetchWeather}
                    title={t('logs.weather_btn')}
                    style={{ width: 'auto', padding: '12px' }}
                    disabled={
                      saving ||
                      weatherLoading ||
                      (!evGpsLat && !evLocationName.trim() && !departure.trim() && !destination.trim()) ||
                      (!!evGpsLat && !evGpsLng)
                    }
                  >
                    <CloudSun size={16} />
                  </button>
                </div>
              </div>
            </div>

            <div className="form-grid mb-4">
              <div className="input-group course-dial-section">
                <label>{t('logs.event_wind_direction')}</label>
                <CourseDialInput
                  value={evWindDirection}
                  onChange={setEvWindDirection}
                  disabled={saving || weatherLoading}
                  allowCardinal
                  displayMode="auto"
                  aria-label={t('logs.event_wind_direction')}
                />
              </div>

              <div className="input-group">
                <label>{t('logs.event_wind_strength')}</label>
                <input
                  type="text"
                  placeholder="e.g. 4 Bft"
                  className="input-text"
                  value={evWindStrength}
                  onChange={(e) => setEvWindStrength(e.target.value)}
                  disabled={saving || weatherLoading}
                />
              </div>

              <div className="input-group">
                <label>{t('logs.event_wind_pressure')}</label>
                <input
                  type="text"
                  placeholder="e.g. 1013 hPa"
                  className="input-text"
                  value={evWindPressure}
                  onChange={(e) => setEvWindPressure(e.target.value)}
                  disabled={saving || weatherLoading}
                />
              </div>

              <div className="input-group">
                <label>{t('logs.event_sea_state')}</label>
                <input
                  type="text"
                  placeholder="e.g. 3"
                  className="input-text"
                  value={evSeaState}
                  onChange={(e) => setEvSeaState(e.target.value)}
                  disabled={saving}
                />
              </div>

              <div className="input-group">
                <label>{t('logs.event_heel')}</label>
                <input
                  type="text"
                  placeholder="e.g. 5"
                  className="input-text"
                  value={evHeel}
                  onChange={(e) => setEvHeel(e.target.value)}
                  disabled={saving}
                />
              </div>
            </div>

            <div className="form-grid mb-4">
              <div className="input-group">
                <label>{t('logs.event_sails')}</label>
                <input
                  type="text"
                  placeholder="e.g. Mainsail + Jib"
                  className="input-text"
                  value={evSailsOrMotor}
                  onChange={(e) => setEvSailsOrMotor(e.target.value)}
                  disabled={saving}
                />
              </div>

              <div className="input-group">
                <label>{t('logs.event_distance')}</label>
                <input
                  type="text"
                  placeholder="e.g. 12 nm"
                  className="input-text"
                  value={evDistance}
                  onChange={(e) => setEvDistance(e.target.value)}
                  disabled={saving}
                />
              </div>

              <div
                className={[
                  'sails-picker-container grid-span-2',
                  showSailsPickerToggle ? 'is-collapsible' : '',
                  showSailsPickerToggle && !sailsPickerExpanded ? 'is-collapsed' : '',
                ].filter(Boolean).join(' ')}
              >
                <div className="sails-picker-pills">
                  {isMotorActive && (
                    <span
                      className={`sail-pill motor-pill active`}
                      onClick={() => toggleSailOrMotor(motorPropulsionLabel)}
                    >
                      {motorPropulsionLabel}
                    </span>
                  )}
                  {sortedEventSailOptions.map((sail) => (
                    <span
                      key={sail}
                      className={`sail-pill ${isItemActive(sail) ? 'active' : ''}`}
                      onClick={() => toggleSailOrMotor(sail)}
                    >
                      {sail}
                    </span>
                  ))}
                  {!isMotorActive && (
                    <span
                      className="sail-pill motor-pill"
                      onClick={() => toggleSailOrMotor(motorPropulsionLabel)}
                    >
                      {motorPropulsionLabel}
                    </span>
                  )}
                </div>
                {showSailsPickerToggle && (
                  <button
                    type="button"
                    className="sails-picker-toggle"
                    onClick={() => setSailsPickerExpanded((prev) => !prev)}
                    aria-expanded={sailsPickerExpanded}
                  >
                    {sailsPickerExpanded ? (
                      <>
                        <ChevronUp size={14} aria-hidden="true" />
                        {t('logs.sails_picker_show_less')}
                      </>
                    ) : (
                      <>
                        <ChevronDown size={14} aria-hidden="true" />
                        {t('logs.sails_picker_show_more')}
                      </>
                    )}
                  </button>
                )}
              </div>

              <div className="input-group grid-span-2">
                <label>{t('logs.event_remarks')}</label>
                <input
                  type="text"
                  placeholder="Remarks"
                  className="input-text"
                  value={evRemarks}
                  onChange={(e) => setEvRemarks(e.target.value)}
                  disabled={saving}
                />
              </div>
            </div>

            <div style={{ display: 'flex', gap: '8px', marginLeft: 'auto', flexWrap: 'wrap' }}>
              {editingEventIndex !== null && (
                <button
                  type="button"
                  className="btn secondary"
                  onClick={handleCancelEventEdit}
                  disabled={saving}
                  style={{ width: 'auto', padding: '10px 20px', display: 'flex' }}
                >
                  <X size={16} />
                  {t('logs.cancel_event_edit')}
                </button>
              )}
              <button
                type="button"
                className="btn secondary"
                onClick={handleSaveEvent}
                disabled={saving || !isValidTimeHHMM(evTime)}
                style={{ width: 'auto', padding: '10px 20px', display: 'flex' }}
              >
                {editingEventIndex !== null ? <Save size={16} /> : <Plus size={16} />}
                {editingEventIndex !== null ? t('logs.save_event_btn') : t('logs.add_event_btn')}
              </button>
            </div>
          </div>
          )}
        </div>

        {/* Track file upload */}
        <div className="form-card" data-tour="entry-track">
          <div className="form-header">
            <Upload size={20} className="form-icon" />
            <h3>{t('logs.track_upload_title')}</h3>
          </div>

          {uploadError && <div className="track-error-msg">{uploadError}</div>}

          {!savedTrack ? (
            <div
              className={`track-upload-zone ${dragOver ? 'dragover' : ''}`}
              onDragOver={handleDragOver}
              onDragLeave={handleDragLeave}
              onDrop={handleDrop}
              onClick={() => fileInputRef.current?.click()}
            >
              <input
                type="file"
                ref={fileInputRef}
                style={{ display: 'none' }}
                accept=".gpx,.kml,.json,.geojson"
                onChange={handleFileChange}
                disabled={saving}
              />
              <Upload size={36} className="track-upload-icon" />
              <div className="track-upload-text">{t('logs.gps_track_upload_btn')}</div>
              <div className="track-upload-subtext">{t('logs.gps_track_upload_help')}</div>
            </div>
          ) : (
            <>
              <div className="track-info-header">
                <div className="track-info-left">
                  <Upload size={16} style={{ color: '#fbbf24' }} />
                  <span className="track-info-name">{savedTrack.filename || 'track'}</span>
                  <span className="track-info-stats">
                    {(savedTrack.fileType ?? 'gpx').toUpperCase()}
                    {savedTrack.waypoints.length > 0 && (
                      <> · {savedTrack.waypoints.length} {t('logs.track_upload_points')}</>
                    )}
                    {trackDistanceNm && (
                      <> · {trackDistanceNm} sm</>
                    )}
                    {trackSpeedMaxKn && (
                      <> · max {trackSpeedMaxKn} kn</>
                    )}
                    {trackSpeedAvgKn && (
                      <> · Ø {trackSpeedAvgKn} kn</>
                    )}
                  </span>
                </div>
                <div className="track-actions">
                  <button
                    type="button"
                    className="btn secondary"
                    onClick={() => downloadTrackFile(savedTrack)}
                    style={{ width: 'auto', padding: '6px 12px', fontSize: '13px', display: 'flex', alignItems: 'center', gap: '4px' }}
                    title={t('logs.gps_tracking_btn_gpx')}
                  >
                    <Download size={14} />
                    <span className="hide-mobile">{t('logs.gps_tracking_btn_gpx')}</span>
                  </button>
                  {!readOnly && (
                    <button
                      type="button"
                      className="btn secondary"
                      onClick={handleDeleteTrack}
                      style={{ width: 'auto', padding: '6px 12px', fontSize: '13px', display: 'flex', alignItems: 'center', gap: '4px', background: 'rgba(239, 68, 68, 0.1)', color: '#ef4444', borderColor: 'rgba(239, 68, 68, 0.2)' }}
                      title={t('logs.gps_track_delete')}
                    >
                      <Trash2 size={14} />
                      <span className="hide-mobile">{t('logs.gps_track_delete')}</span>
                    </button>
                  )}
                </div>
              </div>

              {savedTrack.waypoints.length > 0 && (
                <TrackMap waypoints={savedTrack.waypoints} />
              )}
            </>
          )}

          {!readOnly && (
            <div className="nmea-import-section" style={{ marginTop: '12px' }}>
              <button
                type="button"
                className="btn secondary"
                onClick={() => setNmeaWizardOpen(true)}
                style={{ width: 'auto', padding: '8px 14px', display: 'inline-flex', alignItems: 'center', gap: '6px' }}
              >
                <FileText size={16} />
                {t('logs.nmea_import_btn')}
              </button>
              {nmeaArchive && (
                <div className="nmea-archive-info" style={{ marginTop: '8px', display: 'flex', gap: '8px', flexWrap: 'wrap', alignItems: 'center' }}>
                  <span>{t('logs.nmea_archive_stored', { name: nmeaArchive.filename })}</span>
                  <button type="button" className="btn secondary" style={{ width: 'auto', padding: '4px 10px', fontSize: '13px' }} onClick={() => downloadNmeaArchive(nmeaArchive)}>
                    <Download size={14} />
                  </button>
                  <button type="button" className="btn secondary" style={{ width: 'auto', padding: '4px 10px', fontSize: '13px' }} onClick={handleDeleteNmeaArchive}>
                    <Trash2 size={14} />
                  </button>
                </div>
              )}
            </div>
          )}

          {(savedTrack || trackDistanceNm || trackSpeedMaxKn || trackSpeedAvgKn) && (
            <div className="form-grid track-stats-grid">
              <div className="input-group">
                <label>{t('logs.track_distance')}</label>
                <input
                  type="text"
                  inputMode="decimal"
                  placeholder="e.g. 5.0"
                  className="input-text"
                  value={trackDistanceNm}
                  onChange={(e) => setTrackDistanceNm(e.target.value)}
                  disabled={saving || readOnly}
                />
              </div>
              <div className="input-group">
                <label>{t('logs.track_speed_max')}</label>
                <input
                  type="text"
                  inputMode="decimal"
                  placeholder="e.g. 7.8"
                  className="input-text"
                  value={trackSpeedMaxKn}
                  onChange={(e) => setTrackSpeedMaxKn(e.target.value)}
                  disabled={saving || readOnly}
                />
              </div>
              <div className="input-group">
                <label>{t('logs.track_speed_avg')}</label>
                <input
                  type="text"
                  inputMode="decimal"
                  placeholder="e.g. 4.6"
                  className="input-text"
                  value={trackSpeedAvgKn}
                  onChange={(e) => setTrackSpeedAvgKn(e.target.value)}
                  disabled={saving || readOnly}
                />
              </div>
            </div>
          )}
        </div>

        <PhotoCapture entryId={entryId} logbookId={logbookId} readOnly={readOnly} preloadedPhotos={preloadedPhotos} />

        <EntryCrewSection
          logbookId={logbookId}
          readOnly={readOnly}
          value={entryCrew}
          onChange={setEntryCrew}
        />

        <SignatureSection
          readOnly={readOnly}
          disabled={saving}
          isOnline={isOnline}
          canSignSkipper={canSignSkipper}
          canSignCrew={canSignCrew}
          signSkipper={signSkipper}
          signCrew={signCrew}
          skipperSignatureValid={skipperSignatureValid}
          crewSignatureValid={crewSignatureValid}
          onSignSkipperChange={(value) => {
            if (canSignSkipper && !readOnly) setSignSkipper(value)
          }}
          onSignCrewChange={(value) => {
            if (!canSignCrew || readOnly) return
            if (!value) {
              setSignCrew('')
              return
            }
            if (isPasskeySignature(value) || isClassicSignature(value)) {
              setSignCrew(value)
              return
            }
            if (!canSignSkipper) {
              const userId = localStorage.getItem('active_userid') || ''
              const username = localStorage.getItem('active_username') || ''
              if (userId && username) {
                setSignCrew(createClassicSignature({
                  role: 'crew',
                  userId,
                  username,
                  signedAt: new Date().toISOString(),
                  payload: value
                }))
                return
              }
            }
            setSignCrew(value)
          }}
          onPasskeySignSkipper={handlePasskeySignSkipper}
          onPasskeySignCrew={handlePasskeySignCrew}
          onBeforeSign={confirmSignWarning}
        />

        {/* Save Controls */}
        {!readOnly && (
          <div className="form-actions mt-4">
            {success && (
              <div className="success-toast">
                <Check size={16} />
                <span>{t('logs.saved')}</span>
              </div>
            )}
            
            <button type="submit" className="btn primary" disabled={saving || !date || !dayOfTravel.trim() || !isDirty}>
              <Save size={18} />
              {saving ? t('logs.saving') : t('logs.save')}
            </button>
          </div>
        )}
      </form>

      <NmeaImportWizard
        open={nmeaWizardOpen}
        onClose={() => {
          setNmeaWizardOpen(false)
          void loadNmeaArchive()
        }}
        logbookId={logbookId}
        entryId={entryId}
        entryDate={date}
        nmeaArchive={nmeaArchive}
        onImport={handleNmeaImport}
      />
    </div>
  )
}