// SPDX-License-Identifier: AGPL-3.0-or-later
// Copyright (C) 2026 Karim Gabriele Varano
import { useEffect, useState } from 'react'
import Icon from './components/Icon'
import { onMessage, notifyReady } from './lib/rhinoBridge'
import ElementeApp, { PropertiesView } from './ElementeApp.jsx'

// Satellite-Window — zeigt nur die Properties des aktuell selektierten
// Elements in einem groesseren Fenster. Daten kommen vom ElementeBridge
// (via STATE-Forward in elemente.py).
export default function ElementePropertiesApp() {
  const [state, setState] = useState({
    elements: [], geschosse: [], selection: null,
    materials: [], hatchPatterns: [],
  })
  useEffect(() => {
    onMessage('STATE', (s) => setState(prev => ({ ...prev, ...s })))
    notifyReady()
  }, [])

  const elements = state.elements || []
  const selected = elements.find(el => el.id === state.selection)

  return (
    <div style={{
      display: 'flex', flexDirection: 'column',
      height: '100vh', overflow: 'hidden',
      background: 'var(--bg-base)', color: 'var(--text-primary)',
      fontFamily: 'var(--font)', fontSize: 11,
    }}>
      <div style={{ flex: 1, overflowY: 'auto', overflowX: 'hidden', padding: 12 }}>
        {selected ? (
          <PropertiesView
            selected={selected}
            geschosse={state.geschosse || []}
            materials={state.materials || []}
            hatchPatterns={state.hatchPatterns}
            fonts={state.fonts || []}
            oeffStyles={state.oeffStyles || []}
            wandStyles={state.wandStyles || []}
            raumStempelStile={state.raumStempelStile || []}
            stempelStile={state.stempelStile || []}
          />
        ) : (
          <div style={{
            padding: 60, textAlign: 'center',
            color: 'var(--text-muted)',
            display: 'flex', flexDirection: 'column', gap: 10, alignItems: 'center',
          }}>
            <Icon name="touch_app" size={32} style={{ color: 'var(--text-muted)', opacity: 0.5 }} />
            <div>Kein Element selektiert.</div>
            <div style={{ fontSize: 10 }}>Im Viewport ein Element wählen.</div>
          </div>
        )}
      </div>
    </div>
  )
}