/**
 * Sichtbarkeit der Teile im Schnelleingabe-Widget (Dashboard-Lab).
 * Default: alle sichtbar (leeres config).
 */
const KEYS = [
  { key: 'show_weight', label: 'Gewicht' },
  { key: 'show_resting_hr', label: 'Ruhepuls' },
  { key: 'show_hrv', label: 'HRV' },
  { key: 'show_vo2_max', label: 'VO₂max' },
]

function mergeFromConfig(config) {
  const c = config || {}
  return {
    show_weight: c.show_weight !== false,
    show_resting_hr: c.show_resting_hr !== false,
    show_hrv: c.show_hrv !== false,
    show_vo2_max: c.show_vo2_max !== false,
  }
}

/** @param {{ config: Record<string, unknown>, onChange: (next: Record<string, boolean>) => void }} props */
export default function QuickCaptureConfigEditor({ config, onChange }) {
  const vis = mergeFromConfig(config)

  const setKey = (k, checked) => {
    const next = { ...vis, [k]: checked }
    if (!next.show_weight && !next.show_resting_hr && !next.show_hrv && !next.show_vo2_max) {
      return
    }
    const stored = {}
    for (const { key } of KEYS) {
      if (!next[key]) stored[key] = false
    }
    onChange(stored)
  }

  const resetAllVisible = () => onChange({})

  return (
    <div style={{ marginTop: 10, marginLeft: 28 }}>
      <div style={{ fontSize: 12, color: 'var(--text2)', marginBottom: 8, lineHeight: 1.5 }}>
        <strong>Schnelleingabe:</strong> welche Bereiche angezeigt werden. Ohne Eintrag = alles sichtbar.
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
        {KEYS.map(({ key, label }) => (
          <label key={key} style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, cursor: 'pointer' }}>
            <input
              type="checkbox"
              checked={vis[key]}
              onChange={(e) => setKey(key, e.target.checked)}
            />
            <span>{label}</span>
          </label>
        ))}
      </div>
      <button
        type="button"
        className="btn btn-secondary"
        style={{ marginTop: 10, fontSize: 12, padding: '6px 12px' }}
        onClick={resetAllVisible}
      >
        Alle einblenden (Standard)
      </button>
    </div>
  )
}