import { useState, useEffect } from 'react'
import { Link } from 'react-router-dom'
import { Check } from 'lucide-react'
import dayjs from 'dayjs'
import { api } from '../../utils/api'

/**
 * Schnelleingabe: Gewicht + Baseline Vitals (Ruhepuls, HRV, VO₂max) für heute.
 * @param {{ onSaved?: () => void, captureConfig?: Record<string, unknown> }} props
 * captureConfig: show_weight, show_resting_hr, show_hrv, show_vo2_max (false = ausblenden; fehlend = true)
 */
export default function PilotQuickCapture({ onSaved, captureConfig }) {
  const cfgRaw = captureConfig && typeof captureConfig === 'object' ? captureConfig : {}
  const showWeight = cfgRaw.show_weight !== false
  const showRestingHr = cfgRaw.show_resting_hr !== false
  const showHrv = cfgRaw.show_hrv !== false
  const showVo2 = cfgRaw.show_vo2_max !== false
  const showVitalsBlock = showRestingHr || showHrv || showVo2
  const today = dayjs().format('YYYY-MM-DD')
  const [weightInput, setWeightInput] = useState('')
  const [weightSaving, setWeightSaving] = useState(false)
  const [weightSaved, setWeightSaved] = useState(false)
  const [weightErr, setWeightErr] = useState(null)

  const [vForm, setVForm] = useState({
    id: null,
    resting_hr: '',
    hrv: '',
    vo2_max: '',
  })
  const [vSaving, setVSaving] = useState(false)
  const [vErr, setVErr] = useState(null)
  const [vOk, setVOk] = useState(false)

  useEffect(() => {
    api.weightStats().then((s) => {
      if (s?.latest?.date === today) setWeightInput(String(s.latest.weight))
    }).catch(() => {})
  }, [today])

  useEffect(() => {
    let cancelled = false
    ;(async () => {
      try {
        const existing = await api.getBaselineByDate(today)
        if (cancelled || !existing?.id) return
        setVForm({
          id: existing.id,
          resting_hr: existing.resting_hr != null ? String(existing.resting_hr) : '',
          hrv: existing.hrv != null ? String(existing.hrv) : '',
          vo2_max: existing.vo2_max != null ? String(existing.vo2_max) : '',
        })
      } catch (err) {
        const msg = String(err?.message || '')
        if (msg.includes('404') || msg.toLowerCase().includes('nicht gefunden')) {
          setVForm((f) => ({ ...f, id: null, resting_hr: '', hrv: '', vo2_max: '' }))
        }
      }
    })()
    return () => {
      cancelled = true
    }
  }, [today])

  const saveWeight = async () => {
    const w = parseFloat(weightInput)
    if (!w || w < 20 || w > 300) return
    setWeightSaving(true)
    setWeightErr(null)
    try {
      await api.upsertWeight(today, w)
      setWeightSaved(true)
      onSaved?.()
      setTimeout(() => setWeightSaved(false), 2000)
    } catch (e) {
      setWeightErr(e.message || 'Fehler')
    } finally {
      setWeightSaving(false)
    }
  }

  const saveVitals = async () => {
    setVSaving(true)
    setVErr(null)
    setVOk(false)
    try {
      const payload = { date: today }
      if (showRestingHr && vForm.resting_hr) payload.resting_hr = parseInt(vForm.resting_hr, 10)
      if (showHrv && vForm.hrv) payload.hrv = parseInt(vForm.hrv, 10)
      if (showVo2 && vForm.vo2_max) payload.vo2_max = parseFloat(vForm.vo2_max)

      if (!payload.resting_hr && !payload.hrv && !payload.vo2_max) {
        const hint = [showRestingHr && 'Ruhepuls', showHrv && 'HRV', showVo2 && 'VO₂max'].filter(Boolean).join(', ')
        setVErr(
          hint
            ? `Mindestens einen sichtbaren Wert angeben (${hint}).`
            : 'Keine Vitalfelder sichtbar.'
        )
        setVSaving(false)
        return
      }

      if (vForm.id) {
        await api.updateBaseline(vForm.id, payload)
      } else {
        const created = await api.createBaseline(payload)
        if (created?.id) setVForm((f) => ({ ...f, id: created.id }))
      }
      setVOk(true)
      onSaved?.()
      setTimeout(() => setVOk(false), 2000)
    } catch (e) {
      setVErr(e.message || 'Speichern fehlgeschlagen')
    } finally {
      setVSaving(false)
    }
  }

  const cellStyle = {
    flex: '1 1 140px',
    minWidth: 0,
    padding: 12,
    borderRadius: 10,
    border: '1px solid var(--border)',
    background: 'var(--surface2)',
  }

  if (!showWeight && !showVitalsBlock) {
    return (
      <div className="card section-gap">
        <div className="card-title">Schnelleingabe (heute)</div>
        <p style={{ fontSize: 13, color: 'var(--text3)', margin: 0 }}>
          Für dieses Widget sind keine Eingabebereiche aktiviert. Im Dashboard-Lab die Sichtbarkeit prüfen
          oder <Link to="/vitals">Vitalwerte-Seite</Link> nutzen.
        </p>
      </div>
    )
  }

  return (
    <div className="card section-gap">
      <div className="card-title">Schnelleingabe (heute)</div>
      {(showWeight || showVitalsBlock) && (
        <p style={{ fontSize: 12, color: 'var(--text2)', marginBottom: 12, lineHeight: 1.5 }}>
          {showWeight && showVitalsBlock && 'Gewicht separat; Vitalwerte typischerweise gemeinsam. '}
          {showWeight && !showVitalsBlock && 'Gewicht für heute. '}
          {!showWeight && showVitalsBlock && 'Baseline-Vitalwerte für heute. '}
          <Link to="/vitals" style={{ color: 'var(--accent)', fontSize: 12 }}>
            Volle Vitalwerte-Seite →
          </Link>
        </p>
      )}

      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12 }}>
        {showWeight && (
        <div style={cellStyle}>
          <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--text3)', marginBottom: 6 }}>Gewicht</div>
          {weightErr && (
            <div style={{ fontSize: 11, color: 'var(--danger)', marginBottom: 6 }}>{weightErr}</div>
          )}
          <div style={{ display: 'flex', gap: 6, alignItems: 'center', flexWrap: 'wrap' }}>
            <input
              type="number"
              className="form-input"
              min={20}
              max={300}
              step={0.1}
              style={{ flex: 1, minWidth: 72 }}
              placeholder="kg"
              value={weightInput}
              onChange={(e) => setWeightInput(e.target.value)}
              onKeyDown={(e) => e.key === 'Enter' && saveWeight()}
            />
            <button
              type="button"
              className="btn btn-primary"
              style={{ padding: '6px 12px' }}
              disabled={weightSaving}
              onClick={saveWeight}
            >
              {weightSaved ? <Check size={15} /> : weightSaving ? <div className="spinner" style={{ width: 14, height: 14 }} /> : 'OK'}
            </button>
          </div>
        </div>
        )}

        {showVitalsBlock && (
        <div style={{ ...cellStyle, flex: showWeight ? '2 1 280px' : '1 1 280px' }}>
          <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--text3)', marginBottom: 6 }}>
            Vitalwerte (Baseline)
          </div>
          {vErr && <div style={{ fontSize: 11, color: 'var(--danger)', marginBottom: 6 }}>{vErr}</div>}
          <div
            style={{
              display: 'grid',
              gridTemplateColumns: 'repeat(auto-fit, minmax(120px, 1fr))',
              gap: '12px 10px',
            }}
          >
            {showRestingHr && (
            <div>
              <label
                htmlFor="pqc-resting-hr"
                className="form-label"
                style={{ display: 'block', marginBottom: 4, fontSize: 11, fontWeight: 600, color: 'var(--text2)' }}
              >
                Ruhepuls
                <span style={{ fontWeight: 400, color: 'var(--text3)' }}> (bpm)</span>
              </label>
              <input
                id="pqc-resting-hr"
                type="number"
                className="form-input"
                style={{ width: '100%' }}
                inputMode="numeric"
                value={vForm.resting_hr}
                onChange={(e) => setVForm((f) => ({ ...f, resting_hr: e.target.value }))}
              />
            </div>
            )}
            {showHrv && (
            <div>
              <label
                htmlFor="pqc-hrv"
                className="form-label"
                style={{ display: 'block', marginBottom: 4, fontSize: 11, fontWeight: 600, color: 'var(--text2)' }}
              >
                HRV
                <span style={{ fontWeight: 400, color: 'var(--text3)' }}> (ms)</span>
              </label>
              <input
                id="pqc-hrv"
                type="number"
                className="form-input"
                style={{ width: '100%' }}
                inputMode="numeric"
                value={vForm.hrv}
                onChange={(e) => setVForm((f) => ({ ...f, hrv: e.target.value }))}
              />
            </div>
            )}
            {showVo2 && (
            <div>
              <label
                htmlFor="pqc-vo2"
                className="form-label"
                style={{ display: 'block', marginBottom: 4, fontSize: 11, fontWeight: 600, color: 'var(--text2)' }}
              >
                VO₂max
              </label>
              <input
                id="pqc-vo2"
                type="number"
                className="form-input"
                style={{ width: '100%' }}
                step={0.1}
                inputMode="decimal"
                value={vForm.vo2_max}
                onChange={(e) => setVForm((f) => ({ ...f, vo2_max: e.target.value }))}
              />
            </div>
            )}
          </div>
          <button
            type="button"
            className="btn btn-primary btn-full"
            style={{ marginTop: 10 }}
            disabled={vSaving}
            onClick={saveVitals}
          >
            {vOk ? '✓ Gespeichert' : vSaving ? '…' : 'Vitalwerte speichern'}
          </button>
        </div>
        )}
      </div>
    </div>
  )
}
