import { useEffect, useState } from 'react'
import Icon from './components/Icon'
import { onMessage, notifyReady,
         masseSetActive as setActive,
         masseSavePreset as savePreset,
         masseDeletePreset as deletePreset } from './lib/rhinoBridge'

const RAUM_RUNDUNGS_LABELS = {
  'exakt': 'Exakt (2 Nachk.)',
  '0.01':  'auf 0.01 m²',
  '0.1':   'auf 0.1 m²',
  '0.5':   'auf 0.5 m²',
  '1':     'auf 1 m²',
}

const labelXs = {
  fontSize: 9, color: 'var(--text-muted)',
  textTransform: 'uppercase', letterSpacing: '0.06em',
  fontWeight: 600,
}

function Row({ label, children }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
      <span style={{ ...labelXs, width: 130, flexShrink: 0 }}>{label}</span>
      <div style={{ flex: 1 }}>{children}</div>
    </div>
  )
}

export default function MasseSettingsApp() {
  const [presets, setPresets] = useState([])
  const [activeId, setActiveId] = useState(null)

  useEffect(() => {
    onMessage('STATE', (s) => {
      setPresets(s.presets || [])
      setActiveId(s.activeId || null)
    })
    notifyReady()
  }, [])

  const active = presets.find(p => p.id === activeId) || presets[0]
  const update = (patch) => {
    if (!active) return
    savePreset({ ...active, ...patch })
  }
  const addNew = () => {
    const name = (window.prompt('Name für neues Mass:') || '').trim()
    if (!name) return
    const tmpl = active || { raumRundung: '0.1', dimDezimalstellen: 2, dimEinheit: 'm' }
    savePreset({
      name,
      raumRundung:       tmpl.raumRundung,
      dimDezimalstellen: tmpl.dimDezimalstellen,
      dimEinheit:        tmpl.dimEinheit,
    })
  }
  const remove = () => {
    if (!active) return
    if (presets.length <= 1) {
      window.alert('Mindestens ein Mass muss erhalten bleiben.')
      return
    }
    if (!window.confirm(`Mass "${active.name}" löschen?`)) return
    deletePreset(active.id)
  }

  return (
    <div style={{
      padding: 16,
      display: 'flex', flexDirection: 'column', gap: 14,
      fontFamily: 'var(--font)', color: 'var(--text-primary)',
      background: 'var(--bg-panel)', minHeight: '100vh',
      boxSizing: 'border-box',
    }}>
      {/* Header */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
        <Icon name="straighten" size={14} style={{ color: 'var(--accent)' }} />
        <span style={{ fontSize: 13, fontWeight: 600 }}>Masse</span>
        <span style={{ fontSize: 10, color: 'var(--text-muted)', flex: 1 }}>
          Globale Vorgaben für Raum-Rundung und Mass-Linien
        </span>
      </div>

      {/* Picker + Aktionen */}
      <Row label="Aktiv">
        <div style={{ display: 'flex', gap: 4 }}>
          <select
            value={activeId || (active?.id || '')}
            onChange={(e) => setActive(e.target.value)}
            style={{ flex: 1, fontSize: 12 }}
          >
            {presets.map(p => (
              <option key={p.id} value={p.id}>{p.name}</option>
            ))}
          </select>
          <button
            onClick={addNew}
            className="btn-outlined"
            style={{ padding: '4px 8px' }}
            title="Neues Mass anlegen (mit aktuellen Werten als Vorlage)"
          ><Icon name="add" size={13} /></button>
          <button
            onClick={remove}
            className="btn-outlined"
            style={{ padding: '4px 8px' }}
            title="Aktives Mass löschen"
            disabled={presets.length <= 1}
          ><Icon name="delete" size={13} /></button>
        </div>
      </Row>

      {active && (
        <div style={{
          display: 'flex', flexDirection: 'column', gap: 10,
          padding: 12, borderRadius: 6,
          background: 'var(--bg-section)',
          border: '1px solid var(--border-light)',
        }}>
          <Row label="Name">
            <input
              type="text"
              value={active.name}
              onChange={(e) => update({ name: e.target.value })}
              style={{ width: '100%', fontSize: 12, padding: '4px 8px' }}
            />
          </Row>

          <Row label="Raum-Rundung">
            <select
              value={active.raumRundung}
              onChange={(e) => update({ raumRundung: e.target.value })}
              style={{ width: '100%', fontSize: 12 }}
            >
              {Object.entries(RAUM_RUNDUNGS_LABELS).map(([v, l]) => (
                <option key={v} value={v}>{l}</option>
              ))}
            </select>
          </Row>

          <Row label="Mass-Dezimalstellen">
            <select
              value={active.dimDezimalstellen}
              onChange={(e) => update({ dimDezimalstellen: parseInt(e.target.value, 10) })}
              style={{ width: '100%', fontSize: 12 }}
            >
              {[0, 1, 2, 3, 4].map(n => (
                <option key={n} value={n}>{n} {n === 1 ? 'Stelle' : 'Stellen'}</option>
              ))}
            </select>
          </Row>

          <Row label="Mass-Einheit">
            <select
              value={active.dimEinheit}
              onChange={(e) => update({ dimEinheit: e.target.value })}
              style={{ width: '100%', fontSize: 12 }}
            >
              <option value="m">m (Meter)</option>
              <option value="cm">cm (Zentimeter)</option>
              <option value="mm">mm (Millimeter)</option>
            </select>
          </Row>
        </div>
      )}

      <div style={{ fontSize: 10, color: 'var(--text-muted)',
                     padding: '6px 8px',
                     background: 'var(--bg-section)',
                     borderRadius: 4, lineHeight: 1.5 }}>
        Änderungen werden sofort auf alle Räume angewendet. Pro-Raum gesetzte
        Rundungen (im Element-Panel) haben Vorrang vor dem aktiven Mass.
        Mass-Linien-Anwendung kommt im nächsten Schritt.
      </div>
    </div>
  )
}