import { useState } from 'react'
import { FlaskConical } from 'lucide-react'
import { Link } from 'react-router-dom'
import PilotWelcome from '../components/pilot/PilotWelcome'
import PilotQuickCapture from '../components/pilot/PilotQuickCapture'
import PilotKpiBoard from '../components/pilot/PilotKpiBoard'
import PilotBodySection from '../components/pilot/PilotBodySection'
import PilotActivitySection from '../components/pilot/PilotActivitySection'

/**
 * Pilot-Übersicht nach Product-Spec:
 * Willkommen → Schnelleingabe (Gewicht + Vitalwerte) → KPIs (Referenzen + KF% + Ø kcal, max. 9)
 * → Bereich Körper (Gewicht-Chart 30 T, Ø7/Ø14, Bewertung wie Verlauf)
 * → Bereich Aktivität (Trainingstyp 30 T, Konsistenz).
 */
export default function PilotVizPage() {
  const [refreshTick, setRefreshTick] = useState(0)
  const bump = () => setRefreshTick((t) => t + 1)

  return (
    <div style={{ paddingBottom: 96, textAlign: 'left', maxWidth: 920, margin: '0 auto' }}>
      <div style={{ marginBottom: 20 }}>
        <Link
          to="/settings"
          className="btn btn-secondary"
          style={{ display: 'inline-flex', marginBottom: 12, textDecoration: 'none' }}
        >
          ← Einstellungen
        </Link>
        <h1 className="page-title" style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <FlaskConical size={26} color="var(--accent)" />
          Pilot: Übersicht
        </h1>
        <p style={{ fontSize: 13, color: 'var(--text2)', lineHeight: 1.6, marginTop: 8 }}>
          Konfigurierbare Ziel-Übersicht (Test). Produktives Dashboard und Verlauf unverändert. Nach Speichern von
          Gewicht oder Vitalwerten werden KPIs und Körperbereich neu geladen.
        </p>
      </div>

      <PilotWelcome />
      <PilotQuickCapture onSaved={bump} />
      <PilotKpiBoard refreshTick={refreshTick} />
      <PilotBodySection refreshTick={refreshTick} />
      <PilotActivitySection refreshTick={refreshTick} />
    </div>
  )
}