import { FlaskConical } from 'lucide-react'
import { Link } from 'react-router-dom'
import { getPilotWidgetsInOrder } from '../pilot/widgetRegistry'

/**
 * Pilot: Widget-Schicht (Layer 3b) parallel zum produktiven Dashboard.
 * Daten für Referenzwerte: Layer 1 (backend/data_layer/reference_values.py) → API.
 */
export default function PilotVizPage() {
  const widgets = getPilotWidgetsInOrder()

  return (
    <div style={{ paddingBottom: 96, textAlign: 'left', maxWidth: 900, 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: Visualisierungs-Module
        </h1>
        <p style={{ fontSize: 14, color: 'var(--text2)', lineHeight: 1.6, marginTop: 8 }}>
          Testumgebung für die zukünftige Widget-Registry. Die produktive Übersicht und der Verlauf bleiben
          unverändert. Referenzwerte-Summary wird über die gleiche API geladen wie in der Erfassungs-UI, angeboten
          durch den Data Layer (Layer 1).
        </p>
      </div>

      {widgets.map((def) => {
        const { Component } = def
        return (
          <section key={def.id} className="card section-gap" style={{ overflow: 'hidden' }}>
            <div className="card-title">{def.title}</div>
            {def.description && (
              <p style={{ fontSize: 13, color: 'var(--text2)', marginTop: 4, marginBottom: 14, lineHeight: 1.5 }}>
                {def.description}
              </p>
            )}
            <Component />
          </section>
        )
      })}
    </div>
  )
}