// SPDX-License-Identifier: AGPL-3.0-or-later
// Copyright (C) 2026 Karim Gabriele Varano
import { useState } from 'react'
import Icon from './Icon'
import { BarToggle, BarCombo } from './BarControls'

export default function ConfirmDeleteEbene({ ebene, otherEbenen, onConfirm, onCancel }) {
  const [target, setTarget] = useState(otherEbenen[0]?.code ?? '_delete')
  const isDelete = target === '_delete'

  return (
    <div style={{
      position: 'absolute', inset: 0, zIndex: 200,
      background: 'var(--bg-overlay)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      padding: 16,
    }}>
      <div style={{
        background: 'var(--bg-dialog)',
        border: '1px solid var(--border)',
        borderRadius: 'var(--r-lg)',
        boxShadow: 'var(--shadow-3)',
        width: 320, maxWidth: '100%',
        display: 'flex', flexDirection: 'column',
        overflow: 'hidden',
      }}>
        <div style={{ padding: '16px 18px 6px', display: 'flex', gap: 10, alignItems: 'flex-start' }}>
          <span style={{
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            width: 28, height: 28, borderRadius: '50%',
            background: 'var(--warn-dim)', color: 'var(--warn)',
            flexShrink: 0,
          }}>
            <Icon name="warning" size={18} />
          </span>
          <div>
            <div style={{ fontWeight: 600, fontSize: 13, color: 'var(--text-primary)', marginBottom: 2 }}>
              Ebene löschen
            </div>
            <div style={{ fontSize: 11, color: 'var(--text-secondary)', lineHeight: 1.5 }}>
              <b>{ebene.code}_{ebene.name}</b> wird in allen Zeichnungsebenen entfernt.
            </div>
          </div>
        </div>

        <div style={{ padding: '10px 18px 14px', display: 'flex', flexDirection: 'column', gap: 6 }}>
          <span className="label-xs">Inhalte auf der Ebene</span>
          <BarCombo stretch
            value={target}
            onChange={(v) => setTarget(v)}>
            {otherEbenen.map(e => (
              <option key={e.code} value={e.code}>→ Verschieben nach {e.code}_{e.name}</option>
            ))}
            <option value="_delete">⚠  Inhalte ebenfalls löschen</option>
          </BarCombo>
        </div>

        <div style={{
          display: 'flex', gap: 6, padding: '10px 14px',
          justifyContent: 'flex-end',
          borderTop: '1px solid var(--border-light)',
          background: 'var(--bg-section)',
        }}>
          <BarToggle label="Abbrechen" onClick={onCancel} />
          <BarToggle
            label="Löschen"
            active
            onClick={() => onConfirm(isDelete ? null : target)}
          />
        </div>
      </div>
    </div>
  )
}