import { useEffect } from 'react'
import Icon from './components/Icon'
import { notifyReady, runRhinoCommand } from './lib/rhinoBridge'

// Tool-Definitionen: [icon, label, rhino-command, tooltip]
// Material-Symbol-Namen siehe https://fonts.google.com/icons
const TOOLS = {
  '2D Zeichnen': [
    ['horizontal_rule',         'Line',      '_Line',       'Linie zwischen zwei Punkten'],
    ['polyline',                'Polyline',  '_Polyline',   'Polylinie'],
    ['rectangle',               'Rect',      '_Rectangle',  'Rechteck'],
    ['radio_button_unchecked',  'Circle',    '_Circle',     'Kreis'],
    ['network_intelligence',    'Arc',       '_Arc',        'Bogen'],
    ['gesture',                 'Curve',     '_Curve',      'Freie Kurve (Spline)'],
    ['text_fields',             'Text',      '_Text',       'Text'],
    ['grid_view',               'Hatch',     '_Hatch',      'Schraffur'],
    ['straighten',              'Dim',       '_Dim',        'Linearbemassung'],
  ],
  '2D Editieren': [
    ['open_with',         'Move',     '_Move',      'Verschieben'],
    ['content_copy',      'Copy',     '_Copy',      'Kopieren'],
    ['rotate_right',      'Rotate',   '_Rotate',    'Drehen'],
    ['aspect_ratio',      'Scale',    '_Scale',     'Skalieren'],
    ['flip',              'Mirror',   '_Mirror',    'Spiegeln'],
    ['padding',           'Offset',   '_Offset',    'Parallelversatz'],
    ['content_cut',       'Trim',     '_Trim',      'Stutzen'],
    ['swipe_right_alt',   'Extend',   '_Extend',    'Verlängern'],
    ['link',              'Join',     '_Join',      'Verbinden'],
    ['scatter_plot',      'Explode',  '_Explode',   'Auflösen'],
    ['rounded_corner',    'Fillet',   '_Fillet',    'Verrunden (Ecke abrunden)'],
    ['apps',              'Array',    '_ArrayPolar','Polar-Array'],
  ],
  '3D Modellieren': [
    ['vertical_align_top','Extrude',  '_ExtrudeCrv',         'Kurve zu 3D extrudieren'],
    ['square',            'Box',      '_Box',                'Quader'],
    ['join_inner',        'Union',    '_BooleanUnion',       'Boolean-Vereinigung'],
    ['remove',            'Diff',     '_BooleanDifference',  'Boolean-Differenz'],
    ['gradient',          'Intersect','_BooleanIntersection','Boolean-Schnittmenge'],
    ['roofing',           'Cap',      '_Cap',                'Planare Loecher schliessen'],
    ['cut',               'Section',  '_Section',            'Schnittlinien erzeugen'],
    ['unfold_more',       'Loft',     '_Loft',               'Loft (Kurven verbinden)'],
  ],
  'Auswahl': [
    ['add_link',         'Chain',     '_SelChain',     'Tangentiale Kurvenkette wählen'],
    ['filter_alt',       'Dup',       '_SelDup',       'Doppelte Objekte wählen'],
    ['loop',             'Closed',    '_SelClosedCrv', 'Geschlossene Kurven wählen'],
    ['compare_arrows',   'Invert',    '_Invert',       'Auswahl invertieren'],
    ['select_all',       'All',       '_SelAll',       'Alle auswählen'],
    ['deselect',         'None',      '_SelNone',      'Auswahl aufheben'],
  ],
}

// ---------------------------------------------------------------------------

function ToolButton({ icon, label, cmd, tip }) {
  return (
    <button
      onClick={() => runRhinoCommand(cmd)}
      title={`${tip} (${cmd})`}
      style={{
        width: '100%',
        padding: '6px 8px',
        display: 'flex', alignItems: 'center', gap: 8,
        background: 'var(--bg-item)', border: '1px solid var(--border)',
        borderRadius: 'var(--r)', color: 'var(--text-primary)',
        cursor: 'pointer', textAlign: 'left',
      }}
    >
      <Icon name={icon} size={16} style={{ flexShrink: 0 }} />
      <span style={{ fontSize: 11, fontWeight: 500 }}>{label}</span>
    </button>
  )
}

function GroupLabel({ children }) {
  return (
    <div style={{
      fontSize: 9, color: 'var(--text-muted)', textTransform: 'uppercase',
      letterSpacing: '0.05em',
      padding: '8px 4px 4px',
      borderTop: '1px solid var(--border)',
    }}>{children}</div>
  )
}

// ---------------------------------------------------------------------------

export default function WerkzeugeApp() {
  useEffect(() => { notifyReady() }, [])

  const groups = Object.entries(TOOLS)

  return (
    <div style={{
      width: '100%', height: '100%',
      display: 'flex', flexDirection: 'column', gap: 0,
      padding: 6,
      fontFamily: 'var(--font)', color: 'var(--text-primary)',
      background: 'var(--bg-base)',
      boxSizing: 'border-box',
      overflowY: 'auto', overflowX: 'hidden',
    }}>
      {groups.map(([title, items], gi) => (
        <div key={title} style={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
          <GroupLabel>{title}</GroupLabel>
          {items.map(([icon, label, cmd, tip]) => (
            <ToolButton key={cmd} icon={icon} label={label} cmd={cmd} tip={tip} />
          ))}
        </div>
      ))}
    </div>
  )
}