import { useState } from 'react'
import { FlaskConical } from 'lucide-react'
import { Link } from 'react-router-dom'
import { WidgetRenderer } from '../widgetSystem/dashboardWidgetRegistry'
import { ensurePilotLabWidgetsRegistered } from '../widgetSystem/registerPilotLabWidgets'
import { DEFAULT_LAB_LAYOUT } from '../widgetSystem/defaultLabLayout'

/**
 * Pilot-Übersicht nach Product-Spec (festes Standard-Layout).
 * Nutzt dasselbe Widget-Rendering wie /app/dashboard-lab.
 */
export default function PilotVizPage() {
  ensurePilotLabWidgetsRegistered()

  const [refreshTick, setRefreshTick] = useState(0)
  const requestRefresh = () => 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>

      <WidgetRenderer
        layout={DEFAULT_LAB_LAYOUT}
        refreshTick={refreshTick}
        requestRefresh={requestRefresh}
      />
    </div>
  )
}