// MissionChef — Unternehmens-Einstellungen (Company + Billing + Stripe + Users + Security)

function fmtDateDE(iso) {
  if (!iso) return '—';
  return new Date(iso).toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' });
}
function fmtRel(iso) {
  if (!iso) return '—';
  const mins = Math.floor((Date.now() - new Date(iso).getTime()) / 60000);
  if (mins < 1) return 'gerade eben';
  if (mins < 60) return `vor ${mins} Min.`;
  const h = Math.floor(mins / 60);
  if (h < 24) return `vor ${h} Std.`;
  const d = Math.floor(h / 24);
  return `vor ${d} T.`;
}

function SettingsScreen({ Topbar, theme, setTheme }) {
  const [tab, setTab] = React.useState('company');
  const store = useStore();

  const tabs = [
    { id: 'company',  label: 'Unternehmen',     icon: 'dashboard' },
    { id: 'billing',  label: 'Abrechnung · Stripe', icon: 'chart' },
    { id: 'users',    label: 'Nutzer & Zugänge', icon: 'team' },
    { id: 'security', label: 'Sicherheit · MFA', icon: 'settings' },
    { id: 'integrations', label: 'Integrationen', icon: 'stock' },
    { id: 'appearance', label: 'Darstellung',   icon: 'sun' },
  ];

  return (
    <>
      <Topbar title="Einstellungen" subtitle="Unternehmen · Abrechnung · Nutzer · Sicherheit" />
      <div style={{ borderBottom: '1px solid var(--mc-rule)', background: 'var(--mc-surface)', padding: '0 28px', display: 'flex', gap: 0, flexShrink: 0, overflow: 'auto' }}>
        {tabs.map(t => (
          <button key={t.id} onClick={() => setTab(t.id)} style={{
            padding: '14px 16px', background: 'transparent', border: 'none',
            borderBottom: tab === t.id ? '2px solid var(--mc-leaf)' : '2px solid transparent',
            color: tab === t.id ? 'var(--mc-ink)' : 'var(--mc-ink-muted)',
            fontSize: 13, fontWeight: tab === t.id ? 500 : 400, cursor: 'pointer',
            fontFamily: "'Space Grotesk', sans-serif", whiteSpace: 'nowrap',
            display: 'flex', alignItems: 'center', gap: 8,
          }}>
            <McIcon2 name={t.icon} size={14} />{t.label}
          </button>
        ))}
      </div>
      <div className="mc-scroll" style={{ flex: 1, overflow: 'auto', background: 'var(--mc-bg)' }}>
        {tab === 'company'      && <CompanyTab biz={store.biz} />}
        {tab === 'billing'      && <BillingTab billing={store.billing} plans={store.plans} />}
        {tab === 'users'        && <UsersTab users={store.users} />}
        {tab === 'security'     && <SecurityTab security={store.security} />}
        {tab === 'integrations' && <IntegrationsTab />}
        {tab === 'appearance'   && <AppearanceTab theme={theme} setTheme={setTheme} />}
      </div>
    </>
  );
}

// ─── Company ───────────────────────────────────────────────────────────────────
function CompanyTab({ biz }) {
  const [form, setForm] = React.useState({ ...biz });
  const [dirty, setDirty] = React.useState(false);
  React.useEffect(() => setForm({ ...biz }), [biz.id]);
  const set = (k, v) => { setForm(f => ({ ...f, [k]: v })); setDirty(true); };
  const save = () => { mcApi.patch('/biz', form); setDirty(false); };
  const days = ['Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag','Sonntag'];

  return (
    <div style={{ padding: 28, maxWidth: 960 }}>
      <Section title="Stammdaten" sub="Rechtliche Angaben, die auf Rechnungen, Berichten und Export-Dateien erscheinen.">
        <Grid cols={2}>
          <Input label="Firmenname (öffentlich)" value={form.name} onChange={v => set('name', v)} />
          <Input label="Rechtsform / Vollständiger Name" value={form.legalName} onChange={v => set('legalName', v)} />
          <Input label="Geschäftsführung" value={form.ceo} onChange={v => set('ceo', v)} />
          <Input label="Handelsregister" value={form.registry} onChange={v => set('registry', v)} />
          <Input label="USt-IdNr." value={form.vat} onChange={v => set('vat', v)} mono />
          <Input label="Steuernummer" value={form.taxNumber} onChange={v => set('taxNumber', v)} mono />
        </Grid>
      </Section>

      <Section title="Kontakt & Adresse">
        <Grid cols={2}>
          <Input label="Straße, Nr." value={form.address} onChange={v => set('address', v)} wide />
          <Input label="PLZ" value={form.zip} onChange={v => set('zip', v)} />
          <Input label="Ort" value={form.city} onChange={v => set('city', v)} />
          <Input label="Land" value={form.country} onChange={v => set('country', v)} />
          <Input label="Telefon" value={form.phone} onChange={v => set('phone', v)} />
          <Input label="E-Mail" value={form.email} onChange={v => set('email', v)} />
          <Input label="Website" value={form.website} onChange={v => set('website', v)} />
        </Grid>
      </Section>

      <Section title="Betrieb">
        <Grid cols={4}>
          <Input label="Öffnungszeit" value={form.opens} onChange={v => set('opens', v)} type="time" />
          <Input label="Schließzeit" value={form.closes} onChange={v => set('closes', v)} type="time" />
          <Input label="Sitzplätze" value={form.seats} onChange={v => set('seats', parseInt(v)||0)} type="number" />
          <div>
            <div className="mc-eyebrow" style={{ marginBottom: 6 }}>Ruhetage</div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4 }}>
              {days.map(d => {
                const on = (form.weeklyClosed || []).includes(d);
                return (
                  <button key={d} onClick={() => {
                    const cur = form.weeklyClosed || [];
                    set('weeklyClosed', on ? cur.filter(x => x !== d) : [...cur, d]);
                  }} style={{
                    padding: '6px 10px', border: '1px solid var(--mc-rule)', fontSize: 11,
                    background: on ? 'var(--mc-ink)' : 'transparent',
                    color: on ? 'var(--mc-bg)' : 'var(--mc-ink-muted)',
                    cursor: 'pointer', fontFamily: 'inherit',
                  }}>{d.slice(0,2)}</button>
                );
              })}
            </div>
          </div>
        </Grid>
      </Section>

      <Section title="Lokalisierung">
        <Grid cols={3}>
          <Select label="Währung" value={form.currency} onChange={v => set('currency', v)} options={[['EUR','Euro (€)'], ['CHF','Schweizer Franken'], ['USD','US-Dollar']]} />
          <Select label="Sprache / Format" value={form.locale} onChange={v => set('locale', v)} options={[['de-DE','Deutsch (DE)'], ['de-AT','Deutsch (AT)'], ['it-IT','Italienisch'], ['en-GB','Englisch (UK)']]} />
          <Select label="Zeitzone" value={form.timezone} onChange={v => set('timezone', v)} options={[['Europe/Berlin','Europe/Berlin (MEZ/MESZ)'], ['Europe/Vienna','Europe/Vienna'], ['Europe/Zurich','Europe/Zurich']]} />
        </Grid>
      </Section>

      <Section title="Markenidentität">
        <div style={{ display: 'flex', gap: 20, alignItems: 'center' }}>
          <div style={{ width: 80, height: 80, background: form.logoColor, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <McLogoTile size={44} />
          </div>
          <div style={{ flex: 1 }}>
            <div className="mc-eyebrow" style={{ marginBottom: 6 }}>Primärfarbe</div>
            <div style={{ display: 'flex', gap: 8 }}>
              {['#AEC854','#E97A3E','#7BB0BD','#564F47','#1B1B17'].map(c => (
                <button key={c} onClick={() => set('logoColor', c)} style={{
                  width: 32, height: 32, background: c, border: form.logoColor === c ? '2px solid var(--mc-ink)' : '1px solid var(--mc-rule)', cursor: 'pointer',
                }} />
              ))}
            </div>
          </div>
          <button className="mc-btn ghost sm">Logo hochladen</button>
        </div>
      </Section>

      {dirty && (
        <div style={{ position: 'sticky', bottom: 0, background: 'var(--mc-surface)', padding: 16, margin: '0 -28px -28px', borderTop: '1px solid var(--mc-rule)', display: 'flex', justifyContent: 'flex-end', gap: 10 }}>
          <button onClick={() => { setForm({...biz}); setDirty(false); }} className="mc-btn ghost">Zurücksetzen</button>
          <button onClick={save} className="mc-btn leaf">Änderungen speichern</button>
        </div>
      )}
    </div>
  );
}

// ─── Billing / Stripe ──────────────────────────────────────────────────────────
function BillingTab({ billing, plans }) {
  const [showChange, setShowChange] = React.useState(false);
  const [showCard, setShowCard] = React.useState(false);
  const currentPlan = plans.find(p => p.id === billing.plan);
  const monthlyTotal = billing.planPrice;

  return (
    <div style={{ padding: 28, display: 'flex', flexDirection: 'column', gap: 20 }}>
      {/* Stripe status */}
      <div className="mc-card" style={{ padding: 20, display: 'flex', justifyContent: 'space-between', alignItems: 'center', background: 'linear-gradient(90deg, #635BFF08, transparent)' }}>
        <div style={{ display: 'flex', gap: 14, alignItems: 'center' }}>
          <div style={{ width: 44, height: 44, background: '#635BFF', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 18, letterSpacing: '-0.05em' }}>S</div>
          <div>
            <div style={{ fontSize: 15, fontWeight: 500 }}>Stripe verbunden · {billing.stripe.mode === 'live' ? 'Live-Modus' : 'Test-Modus'}</div>
            <div style={{ fontSize: 11, color: 'var(--mc-ink-dim)', marginTop: 2 }} className="mc-mono">
              {billing.stripe.customerId} · Webhooks {billing.stripe.webhooksOk ? 'OK' : 'Fehler'} · Letztes Ereignis vor {billing.stripe.lastEvent}
            </div>
          </div>
        </div>
        <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
          <Pill tone="leaf">● Online</Pill>
          <button className="mc-btn ghost sm">Stripe Dashboard ↗</button>
        </div>
      </div>

      {/* Plan + KPIs row */}
      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 14 }}>
        <div className="mc-card" style={{ padding: 26 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
            <div>
              <div className="mc-eyebrow">Aktueller Tarif</div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginTop: 8 }}>
                <div style={{ fontSize: 28, fontWeight: 500 }}>{billing.planLabel}</div>
                <Pill tone="leaf">Aktiv</Pill>
              </div>
              <div style={{ fontSize: 12, color: 'var(--mc-ink-dim)', marginTop: 6 }}>
                {billing.seats} Nutzer inklusive · {billing.cycle === 'monthly' ? 'Monatliche' : 'Jährliche'} Abrechnung
              </div>
            </div>
            <div style={{ textAlign: 'right' }}>
              <div className="mc-num" style={{ fontSize: 36, fontWeight: 500 }}>{fmtEUR(monthlyTotal)}</div>
              <div style={{ fontSize: 11, color: 'var(--mc-ink-dim)' }}>/ Monat netto</div>
            </div>
          </div>

          <div style={{ marginTop: 18, paddingTop: 18, borderTop: '1px solid var(--mc-rule)', display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 8 }}>
            {currentPlan?.features.map(f => (
              <div key={f} style={{ fontSize: 12, display: 'flex', alignItems: 'center', gap: 8 }}>
                <span style={{ color: 'var(--mc-leaf-700)' }}>✓</span>{f}
              </div>
            ))}
          </div>

          <div style={{ display: 'flex', gap: 10, marginTop: 20 }}>
            <button onClick={() => setShowChange(true)} className="mc-btn leaf">Tarif wechseln</button>
            <button className="mc-btn ghost">Jahresabrechnung (2 Monate gratis)</button>
            <button className="mc-btn ghost" style={{ color: 'var(--mc-ember-700)', marginLeft: 'auto' }}>Abo kündigen</button>
          </div>
        </div>

        <div className="mc-card" style={{ padding: 22 }}>
          <div className="mc-eyebrow">Nächste Abbuchung</div>
          <div style={{ marginTop: 10, fontSize: 20, fontWeight: 500 }}>{fmtDateDE(billing.nextInvoice)}</div>
          <div style={{ fontSize: 12, color: 'var(--mc-ink-dim)', marginTop: 4 }}>
            {fmtEUR(monthlyTotal * 1.19)} inkl. 19% USt
          </div>
          <div style={{ marginTop: 18, paddingTop: 14, borderTop: '1px solid var(--mc-rule)' }}>
            <div className="mc-eyebrow">Letzte 30 Tage — Nutzung</div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 10, marginTop: 10 }}>
              <div><div className="mc-num" style={{ fontSize: 20, fontWeight: 500 }}>{billing.usage.transactions30d}</div><div style={{ fontSize: 10, color: 'var(--mc-ink-dim)' }}>Kartenzahlungen</div></div>
              <div><div className="mc-num" style={{ fontSize: 20, fontWeight: 500 }}>{fmtEUR(billing.usage.transactionFees)}</div><div style={{ fontSize: 10, color: 'var(--mc-ink-dim)' }}>Stripe-Gebühren</div></div>
              <div><div className="mc-num" style={{ fontSize: 20, fontWeight: 500 }}>{billing.usage.orders30d}</div><div style={{ fontSize: 10, color: 'var(--mc-ink-dim)' }}>POS-Bestellungen</div></div>
              <div><div className="mc-num" style={{ fontSize: 20, fontWeight: 500 }}>{billing.usage.activeUsers}/{billing.seats}</div><div style={{ fontSize: 10, color: 'var(--mc-ink-dim)' }}>Aktive Nutzer</div></div>
            </div>
          </div>
        </div>
      </div>

      {/* Payment method */}
      <div className="mc-card" style={{ padding: 22 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 14 }}>
          <div>
            <div className="mc-eyebrow">Zahlungsmethode</div>
            <div style={{ fontSize: 16, fontWeight: 500, marginTop: 4 }}>Hinterlegte Zahlungsmittel</div>
          </div>
          <button onClick={() => setShowCard(true)} className="mc-btn ghost sm"><McIcon2 name="plus" size={12} />Neue Methode</button>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'auto 1fr auto', gap: 16, alignItems: 'center', padding: 16, border: '1px solid var(--mc-rule)' }}>
          <div style={{ width: 52, height: 34, background: '#1A1F71', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontStyle: 'italic', fontSize: 14, letterSpacing: '-0.03em' }}>
            {billing.paymentMethod.brand}
          </div>
          <div>
            <div className="mc-mono" style={{ fontSize: 14, fontWeight: 500 }}>•••• •••• •••• {billing.paymentMethod.last4}</div>
            <div style={{ fontSize: 11, color: 'var(--mc-ink-dim)', marginTop: 2 }}>
              {billing.paymentMethod.holder} · Gültig bis {billing.paymentMethod.exp}
            </div>
          </div>
          <div style={{ display: 'flex', gap: 6 }}>
            <Pill tone="leaf">Standard</Pill>
            <button className="mc-btn ghost sm">Bearbeiten</button>
          </div>
        </div>
      </div>

      {/* Invoice address */}
      <div className="mc-card" style={{ padding: 22 }}>
        <div className="mc-eyebrow">Rechnungsadresse</div>
        <div style={{ marginTop: 10, fontSize: 13, lineHeight: 1.7 }}>
          <strong>{billing.invoiceAddress.name}</strong><br/>
          {billing.invoiceAddress.street}<br/>
          {billing.invoiceAddress.zip} {billing.invoiceAddress.city}<br/>
          {billing.invoiceAddress.country}<br/>
          <span className="mc-mono" style={{ fontSize: 12, color: 'var(--mc-ink-dim)' }}>USt-IdNr.: {billing.invoiceAddress.vat}</span>
        </div>
        <div style={{ marginTop: 12, display: 'flex', gap: 10 }}>
          <button className="mc-btn ghost sm">Adresse bearbeiten</button>
          <button className="mc-btn ghost sm">Rechnungen an: {billing.billingEmail}</button>
        </div>
      </div>

      {/* Invoices */}
      <div className="mc-card">
        <div style={{ padding: '16px 20px', borderBottom: '1px solid var(--mc-rule)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div>
            <div className="mc-eyebrow">Rechnungen</div>
            <div style={{ fontSize: 14, fontWeight: 500, marginTop: 4 }}>{billing.invoices.length} Rechnungen · {fmtEUR(billing.invoices.reduce((s,i)=>s+i.amount,0))} Gesamt</div>
          </div>
          <button className="mc-btn ghost sm">Alle als ZIP</button>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '130px 120px 140px 1fr 120px 100px 80px', padding: '10px 20px', borderBottom: '1px solid var(--mc-rule)', background: 'var(--mc-surface-2)', fontSize: 10 }}>
          <div className="mc-eyebrow">Nummer</div>
          <div className="mc-eyebrow">Datum</div>
          <div className="mc-eyebrow">Zeitraum</div>
          <div className="mc-eyebrow">Zahlungsmethode</div>
          <div className="mc-eyebrow" style={{ textAlign: 'right' }}>Betrag</div>
          <div className="mc-eyebrow">Status</div>
          <div></div>
        </div>
        {billing.invoices.map(inv => (
          <div key={inv.id} style={{ display: 'grid', gridTemplateColumns: '130px 120px 140px 1fr 120px 100px 80px', padding: '14px 20px', borderBottom: '1px solid var(--mc-rule)', alignItems: 'center', fontSize: 13 }}>
            <div className="mc-mono" style={{ fontSize: 12 }}>{inv.no}</div>
            <div>{fmtDateDE(inv.date)}</div>
            <div style={{ color: 'var(--mc-ink-dim)' }}>{inv.period}</div>
            <div style={{ fontSize: 12 }} className="mc-mono">{inv.method}</div>
            <div className="mc-num" style={{ textAlign: 'right', fontWeight: 500 }}>{fmtEUR(inv.amount)}</div>
            <div><Pill tone={inv.status === 'paid' ? 'leaf' : inv.status === 'pending' ? 'ember' : 'default'}>{inv.status === 'paid' ? 'Bezahlt' : inv.status}</Pill></div>
            <div style={{ textAlign: 'right' }}><button className="mc-btn ghost sm" style={{ padding: '4px 10px', fontSize: 11 }}>PDF ↓</button></div>
          </div>
        ))}
      </div>

      {showChange && <PlanChangeModal plans={plans} current={billing.plan} onClose={() => setShowChange(false)} />}
      {showCard && <CardModal onClose={() => setShowCard(false)} />}
    </div>
  );
}

function PlanChangeModal({ plans, current, onClose }) {
  const [selected, setSelected] = React.useState(current);
  const change = () => {
    const p = plans.find(x => x.id === selected);
    mcApi.patch('/billing', { plan: p.id, planLabel: 'MissionChef ' + p.name, planPrice: typeof p.price === 'number' ? p.price : 999, seats: typeof p.seats === 'number' ? p.seats : 99 });
    onClose();
  };
  return (
    <div onClick={onClose} style={{ position:'absolute',inset:0,background:'rgba(27,27,23,.55)',zIndex:500,display:'flex',alignItems:'center',justifyContent:'center' }}>
      <div onClick={e=>e.stopPropagation()} style={{ width: 900, maxHeight: '86vh', background:'var(--mc-bg)', overflow:'auto', boxShadow:'0 20px 50px rgba(0,0,0,.3)' }}>
        <div style={{ padding:24, borderBottom:'1px solid var(--mc-rule)', display:'flex', justifyContent:'space-between', alignItems:'center' }}>
          <div>
            <div className="mc-eyebrow">Tarif wechseln</div>
            <div style={{ fontSize:20, fontWeight:500, marginTop:4 }}>Passenden Plan wählen</div>
          </div>
          <button onClick={onClose} className="mc-btn ghost sm">×</button>
        </div>
        <div style={{ padding:24, display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:14 }}>
          {plans.map(p => {
            const isCurrent = p.id === current;
            const isSelected = p.id === selected;
            return (
              <div key={p.id} onClick={() => setSelected(p.id)} style={{
                padding: 22, border: isSelected ? '2px solid var(--mc-leaf)' : '1px solid var(--mc-rule)',
                cursor: 'pointer', background: isSelected ? 'var(--mc-surface-2)' : 'var(--mc-surface)',
                display:'flex', flexDirection:'column', gap:14, position:'relative',
              }}>
                {isCurrent && <div style={{ position:'absolute', top:-10, right:14, background:'var(--mc-ink)', color:'var(--mc-bg)', padding:'3px 10px', fontSize:10, letterSpacing:'.1em', textTransform:'uppercase', fontFamily:"'JetBrains Mono',monospace" }}>aktuell</div>}
                <div>
                  <div className="mc-eyebrow">MissionChef</div>
                  <div style={{ fontSize: 22, fontWeight: 500, marginTop: 4 }}>{p.name}</div>
                </div>
                <div>
                  <div style={{ fontSize: 32, fontWeight: 500, letterSpacing:'-0.02em' }}>
                    {typeof p.price === 'number' ? fmtEUR(p.price) : p.price}
                  </div>
                  <div style={{ fontSize: 11, color: 'var(--mc-ink-dim)' }}>{typeof p.price === 'number' ? '/ Monat' : 'Nach Vereinbarung'}</div>
                </div>
                <div style={{ fontSize:11, color:'var(--mc-ink-dim)' }}>{p.seats} Nutzer inkl.</div>
                <div style={{ display:'flex', flexDirection:'column', gap:6, fontSize:12 }}>
                  {p.features.map(f => (
                    <div key={f} style={{ display:'flex', gap:8 }}><span style={{ color:'var(--mc-leaf-700)' }}>✓</span>{f}</div>
                  ))}
                </div>
              </div>
            );
          })}
        </div>
        <div style={{ padding:20, borderTop:'1px solid var(--mc-rule)', display:'flex', justifyContent:'space-between', alignItems:'center' }}>
          <div style={{ fontSize:12, color:'var(--mc-ink-dim)' }}>Preisänderungen gelten zum nächsten Abrechnungszeitraum. Guthaben wird anteilig verrechnet.</div>
          <div style={{ display:'flex', gap:10 }}>
            <button onClick={onClose} className="mc-btn ghost">Abbrechen</button>
            <button onClick={change} className="mc-btn leaf" disabled={selected === current}>Tarif bestätigen</button>
          </div>
        </div>
      </div>
    </div>
  );
}

function CardModal({ onClose }) {
  const [form, setForm] = React.useState({ number: '', exp: '', cvc: '', holder: '' });
  const save = () => {
    if (!form.number || !form.holder) return;
    mcApi.patch('/billing/payment', { last4: form.number.slice(-4), exp: form.exp, holder: form.holder, brand: 'Visa' });
    onClose();
  };
  return (
    <div onClick={onClose} style={{ position:'absolute',inset:0,background:'rgba(27,27,23,.55)',zIndex:500,display:'flex',alignItems:'center',justifyContent:'center' }}>
      <div onClick={e=>e.stopPropagation()} style={{ width:480, background:'var(--mc-bg)', padding:26, boxShadow:'0 20px 50px rgba(0,0,0,.3)' }}>
        <div style={{ display:'flex', justifyContent:'space-between', marginBottom:18 }}>
          <div>
            <div className="mc-eyebrow">Neue Zahlungsmethode</div>
            <div style={{ fontSize:18, fontWeight:500, marginTop:4 }}>Karte hinzufügen</div>
          </div>
          <button onClick={onClose} className="mc-btn ghost sm">×</button>
        </div>
        <div style={{ padding:12, background:'#635BFF10', border:'1px solid #635BFF40', marginBottom:16, fontSize:11, color:'var(--mc-ink-muted)', display:'flex', gap:8, alignItems:'center' }}>
          <span style={{ fontWeight:700, color:'#635BFF' }}>Stripe</span> · Kartendaten werden verschlüsselt über Stripe Elements verarbeitet. Wir speichern keine Nummern.
        </div>
        <div style={{ display:'flex', flexDirection:'column', gap:12 }}>
          <Input label="Kartennummer" value={form.number} onChange={v => setForm({...form, number: v})} placeholder="4242 4242 4242 4242" mono />
          <Grid cols={2}>
            <Input label="Gültig bis" value={form.exp} onChange={v => setForm({...form, exp: v})} placeholder="MM/JJ" mono />
            <Input label="CVC" value={form.cvc} onChange={v => setForm({...form, cvc: v})} placeholder="123" mono />
          </Grid>
          <Input label="Karteninhaber" value={form.holder} onChange={v => setForm({...form, holder: v})} placeholder="Vor- und Nachname" />
        </div>
        <div style={{ display:'flex', gap:10, marginTop:20, justifyContent:'flex-end' }}>
          <button onClick={onClose} className="mc-btn ghost">Abbrechen</button>
          <button onClick={save} className="mc-btn leaf">Karte speichern</button>
        </div>
      </div>
    </div>
  );
}

// ─── Users & Access ────────────────────────────────────────────────────────────
function UsersTab({ users }) {
  const [selected, setSelected] = React.useState(null);
  const [showInvite, setShowInvite] = React.useState(false);

  return (
    <div style={{ padding: 28 }}>
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom: 20 }}>
        <div>
          <div className="mc-eyebrow">Nutzer & Zugänge</div>
          <div style={{ fontSize: 16, fontWeight: 500, marginTop: 4 }}>{users.length} Nutzer · {users.filter(u => u.mfa).length} mit MFA aktiviert</div>
        </div>
        <button onClick={() => setShowInvite(true)} className="mc-btn leaf sm"><McIcon2 name="plus" size={12} />Nutzer einladen</button>
      </div>

      <div className="mc-card">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 120px 110px 110px 100px 60px', padding: '12px 20px', borderBottom: '1px solid var(--mc-rule)', background: 'var(--mc-surface-2)' }}>
          {['Nutzer','App-Rolle','MFA','Passwort','Letzter Login',''].map(h => <div key={h} className="mc-eyebrow">{h}</div>)}
        </div>
        {users.map(u => {
          const pwTone = u.password.strength === 'strong' ? 'leaf' : u.password.strength === 'weak' ? 'ember' : 'default';
          const pwLabel = u.password.forceReset ? 'Reset fällig' : u.password.strength === 'strong' ? 'Stark' : u.password.strength === 'weak' ? 'Schwach' : 'Mittel';
          return (
            <div key={u.uid} className="mc-row" onClick={() => setSelected(u)} style={{
              display: 'grid', gridTemplateColumns: '1fr 120px 110px 110px 100px 60px',
              padding: '14px 20px', borderBottom: '1px solid var(--mc-rule)', alignItems: 'center', cursor: 'pointer',
            }}>
              <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
                <div style={{ width: 36, height: 36, background: u.avatar, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 13, fontWeight: 600 }}>
                  {u.name.split(' ').map(n=>n[0]).join('').slice(0,2)}
                </div>
                <div>
                  <div style={{ fontSize: 13, fontWeight: 500 }}>{u.name}</div>
                  <div style={{ fontSize: 11, color: 'var(--mc-ink-dim)' }}>{u.email}</div>
                </div>
              </div>
              <div><Pill tone={u.appRole === 'Owner' || u.appRole === 'Admin' ? 'leaf' : 'default'}>{u.appRole}</Pill></div>
              <div>{u.mfa ? <Pill tone="leaf">● {u.mfaMethod === 'authenticator' ? 'TOTP' : 'SMS'}</Pill> : <Pill tone="ember">Inaktiv</Pill>}</div>
              <div><Pill tone={pwTone}>{pwLabel}</Pill></div>
              <div style={{ fontSize: 11, color: 'var(--mc-ink-dim)' }}>{fmtRel(u.lastLogin)}</div>
              <div style={{ textAlign: 'right', color: 'var(--mc-ink-dim)', fontSize: 18 }}>›</div>
            </div>
          );
        })}
      </div>

      {selected && <UserDrawer user={selected} onClose={() => setSelected(null)} />}
      {showInvite && <InviteModal onClose={() => setShowInvite(false)} />}
    </div>
  );
}

function UserDrawer({ user, onClose }) {
  const [u, setU] = React.useState(user);
  const [showMfa, setShowMfa] = React.useState(false);
  const [showPw, setShowPw] = React.useState(false);

  const update = (body) => {
    mcApi.patch('/users/' + u.uid, body);
    setU({ ...u, ...body });
  };

  return (
    <div onClick={onClose} style={{ position:'absolute',inset:0,background:'rgba(27,27,23,.55)',zIndex:500,display:'flex',justifyContent:'flex-end' }}>
      <div onClick={e=>e.stopPropagation()} style={{ width:560, background:'var(--mc-bg)', height:'100%', overflow:'auto', boxShadow:'-20px 0 50px rgba(0,0,0,.2)' }}>
        <div style={{ padding: 24, borderBottom: '1px solid var(--mc-rule)', background: 'var(--mc-surface)' }}>
          <div style={{ display:'flex', justifyContent:'space-between', marginBottom: 14 }}>
            <div className="mc-eyebrow">Nutzerkonto</div>
            <button onClick={onClose} className="mc-btn ghost sm">×</button>
          </div>
          <div style={{ display:'flex', gap:16, alignItems:'center' }}>
            <div style={{ width:56, height:56, background:u.avatar, color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontSize:20, fontWeight:600 }}>
              {u.name.split(' ').map(n=>n[0]).join('').slice(0,2)}
            </div>
            <div style={{ flex:1 }}>
              <div style={{ fontSize:20, fontWeight:500 }}>{u.name}</div>
              <div style={{ fontSize:12, color:'var(--mc-ink-dim)' }}>{u.email}</div>
            </div>
          </div>
        </div>

        <div style={{ padding: 24, display:'flex', flexDirection:'column', gap: 20 }}>
          <Section title="Rolle & Berechtigungen">
            <Select label="App-Rolle" value={u.appRole} onChange={v => update({ appRole: v })} options={[
              ['Owner','Owner — Vollzugriff'], ['Admin','Admin — Einstellungen & Abrechnung'],
              ['Manager','Manager — Dienstplan & Berichte'], ['Küchenchef','Küchenchef — KDS & Warenwirtschaft'],
              ['Personal','Personal — POS & eigene Schichten'],
            ]} />
            <div style={{ padding:14, background:'var(--mc-surface-2)', border:'1px solid var(--mc-rule)', marginTop:10, fontSize:12, color:'var(--mc-ink-muted)' }}>
              {u.appRole === 'Owner' && 'Vollzugriff auf alle Module. Kann Abrechnung & Tarif ändern.'}
              {u.appRole === 'Admin' && 'Zugriff auf alle Module inkl. Einstellungen. Kein Owner-Wechsel.'}
              {u.appRole === 'Manager' && 'Dienstplan, Personal, Berichte, POS/KDS. Keine Abrechnung.'}
              {u.appRole === 'Küchenchef' && 'KDS, Warenwirtschaft, eigenes Team. Kein POS-Abschluss.'}
              {u.appRole === 'Personal' && 'POS, eigene Schichten, Stempelzeit. Nur Lesezugriff auf Berichte.'}
            </div>
          </Section>

          <Section title="Zwei-Faktor-Authentifizierung">
            <div style={{ display:'flex', gap:14, alignItems:'center', padding:16, border:'1px solid var(--mc-rule)' }}>
              <div style={{ width:44, height:44, background: u.mfa ? 'var(--mc-leaf)' : 'var(--mc-rule)', display:'flex', alignItems:'center', justifyContent:'center' }}>
                <McIcon2 name="settings" size={20} />
              </div>
              <div style={{ flex:1 }}>
                <div style={{ fontSize:14, fontWeight:500 }}>
                  {u.mfa ? `Aktiv · ${u.mfaMethod === 'authenticator' ? 'Authenticator-App (TOTP)' : 'SMS-Code'}` : 'Nicht aktiviert'}
                </div>
                <div style={{ fontSize:11, color:'var(--mc-ink-dim)', marginTop:2 }}>
                  {u.mfa ? 'Zusätzliche Bestätigung bei jedem Login.' : 'Dringend empfohlen — besonders für Admin-Rollen.'}
                </div>
              </div>
              <button onClick={() => setShowMfa(true)} className="mc-btn leaf sm">
                {u.mfa ? 'Verwalten' : 'Aktivieren'}
              </button>
            </div>
          </Section>

          <Section title="Passwort">
            <div style={{ display:'flex', gap:14, alignItems:'center', padding:16, border:'1px solid var(--mc-rule)' }}>
              <div style={{ flex:1 }}>
                <div style={{ fontSize:14, fontWeight:500 }}>Zuletzt geändert: {fmtDateDE(u.password.lastChanged)}</div>
                <div style={{ fontSize:11, color:'var(--mc-ink-dim)', marginTop:2 }}>
                  Stärke: {u.password.strength} {u.password.forceReset && '· Reset bei nächstem Login erforderlich'}
                </div>
              </div>
              <button onClick={() => setShowPw(true)} className="mc-btn sm">Ändern</button>
              <button onClick={() => update({ password: { ...u.password, forceReset: !u.password.forceReset } })} className="mc-btn ghost sm">
                {u.password.forceReset ? 'Reset abbrechen' : 'Reset erzwingen'}
              </button>
            </div>
          </Section>

          <Section title="Sitzungen">
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', padding:14, border:'1px solid var(--mc-rule)' }}>
              <div>
                <div style={{ fontSize:13 }}><strong>{u.sessions}</strong> aktive Sitzung{u.sessions === 1 ? '' : 'en'}</div>
                <div style={{ fontSize:11, color:'var(--mc-ink-dim)' }}>Letzter Login {fmtRel(u.lastLogin)}</div>
              </div>
              <button className="mc-btn ghost sm" style={{ color:'var(--mc-ember-700)' }}>Alle Sitzungen beenden</button>
            </div>
          </Section>

          <Section title="Gefahrenzone">
            <div style={{ display:'flex', gap:10, flexWrap:'wrap' }}>
              <button onClick={() => update({ status: u.status === 'active' ? 'disabled' : 'active' })} className="mc-btn ghost sm">
                Konto {u.status === 'active' ? 'deaktivieren' : 'reaktivieren'}
              </button>
              <button className="mc-btn ghost sm" style={{ color:'var(--mc-ember-700)' }}>Löschen</button>
            </div>
          </Section>
        </div>

        {showMfa && <MfaModal user={u} onUpdate={update} onClose={() => setShowMfa(false)} />}
        {showPw && <PasswordModal user={u} onUpdate={update} onClose={() => setShowPw(false)} />}
      </div>
    </div>
  );
}

function MfaModal({ user, onUpdate, onClose }) {
  const [method, setMethod] = React.useState(user.mfaMethod || 'authenticator');
  const [code, setCode] = React.useState('');
  const activate = () => {
    if (code.length !== 6) return;
    onUpdate({ mfa: true, mfaMethod: method });
    onClose();
  };
  const disable = () => {
    if (confirm('2FA wirklich deaktivieren? Das Konto wird unsicherer.')) {
      onUpdate({ mfa: false, mfaMethod: null });
      onClose();
    }
  };
  // Fake TOTP QR placeholder (grid of dots)
  const qr = Array.from({ length: 25*25 }, (_, i) => ((i*7 + 11) % 3) === 0);
  return (
    <div onClick={onClose} style={{ position:'absolute',inset:0,background:'rgba(27,27,23,.6)',zIndex:600,display:'flex',alignItems:'center',justifyContent:'center' }}>
      <div onClick={e=>e.stopPropagation()} style={{ width: 480, background:'var(--mc-bg)', padding:26, boxShadow:'0 20px 50px rgba(0,0,0,.3)' }}>
        <div style={{ display:'flex', justifyContent:'space-between', marginBottom:18 }}>
          <div>
            <div className="mc-eyebrow">Zwei-Faktor-Authentifizierung</div>
            <div style={{ fontSize:18, fontWeight:500, marginTop:4 }}>{user.mfa ? 'MFA verwalten' : 'MFA einrichten'}</div>
          </div>
          <button onClick={onClose} className="mc-btn ghost sm">×</button>
        </div>

        {!user.mfa && (
          <>
            <div style={{ display:'flex', gap:10, marginBottom:20 }}>
              <button onClick={() => setMethod('authenticator')} className={method === 'authenticator' ? 'mc-btn' : 'mc-btn ghost'} style={{ flex:1, padding:14, flexDirection:'column', height:'auto' }}>
                <div style={{ fontSize:13, fontWeight:500 }}>Authenticator-App</div>
                <div style={{ fontSize:10, opacity:.7, marginTop:2 }}>Google / 1Password / Authy</div>
              </button>
              <button onClick={() => setMethod('sms')} className={method === 'sms' ? 'mc-btn' : 'mc-btn ghost'} style={{ flex:1, padding:14, flexDirection:'column', height:'auto' }}>
                <div style={{ fontSize:13, fontWeight:500 }}>SMS-Code</div>
                <div style={{ fontSize:10, opacity:.7, marginTop:2 }}>An Mobilnummer</div>
              </button>
            </div>

            {method === 'authenticator' && (
              <div style={{ textAlign:'center' }}>
                <div style={{ fontSize:12, color:'var(--mc-ink-muted)', marginBottom:14 }}>Scanne den QR-Code mit deiner Authenticator-App:</div>
                <div style={{ width:200, height:200, margin:'0 auto', background:'#fff', padding:10, display:'grid', gridTemplateColumns:'repeat(25,1fr)', gap:0 }}>
                  {qr.map((on, i) => <div key={i} style={{ width:'100%', aspectRatio:'1', background: on ? '#1B1B17' : 'transparent' }} />)}
                </div>
                <div className="mc-mono" style={{ fontSize:11, marginTop:12, color:'var(--mc-ink-dim)' }}>
                  Oder manuell: JBSWY3DPEHPK3PXP
                </div>
              </div>
            )}
            {method === 'sms' && (
              <div style={{ padding:16, background:'var(--mc-surface-2)', fontSize:12 }}>
                SMS wird an die hinterlegte Nummer gesendet. Bitte Nummer prüfen in den Kontaktdaten.
              </div>
            )}

            <div style={{ marginTop:18 }}>
              <Input label="6-stelliger Code" value={code} onChange={v => setCode(v.replace(/\D/g,'').slice(0,6))} placeholder="000000" mono />
            </div>
          </>
        )}

        {user.mfa && (
          <div style={{ padding:16, background:'var(--mc-surface-2)', border:'1px solid var(--mc-rule)' }}>
            <div style={{ fontSize:13, marginBottom:8 }}><strong>Aktiv:</strong> {user.mfaMethod === 'authenticator' ? 'Authenticator-App (TOTP)' : 'SMS-Code'}</div>
            <div style={{ fontSize:11, color:'var(--mc-ink-dim)' }}>Backup-Codes wurden beim Setup generiert. Verloren? Neue generieren.</div>
            <button className="mc-btn ghost sm" style={{ marginTop:10 }}>Backup-Codes neu generieren</button>
          </div>
        )}

        <div style={{ display:'flex', gap:10, marginTop:20, justifyContent:'space-between' }}>
          {user.mfa && <button onClick={disable} className="mc-btn ghost" style={{ color:'var(--mc-ember-700)' }}>Deaktivieren</button>}
          <div style={{ marginLeft:'auto', display:'flex', gap:10 }}>
            <button onClick={onClose} className="mc-btn ghost">Abbrechen</button>
            {!user.mfa && <button onClick={activate} className="mc-btn leaf" disabled={code.length !== 6}>Aktivieren</button>}
          </div>
        </div>
      </div>
    </div>
  );
}

function PasswordModal({ user, onUpdate, onClose }) {
  const [form, setForm] = React.useState({ current: '', next: '', confirm: '' });
  const strength = form.next.length >= 12 && /\d/.test(form.next) && /[A-Z]/.test(form.next) && /[^a-zA-Z0-9]/.test(form.next) ? 'strong' : form.next.length >= 8 ? 'medium' : form.next.length > 0 ? 'weak' : null;
  const match = form.next && form.next === form.confirm;
  const save = () => {
    if (!match || strength === 'weak') return;
    onUpdate({ password: { ...user.password, strength } });
    onClose();
  };
  return (
    <div onClick={onClose} style={{ position:'absolute',inset:0,background:'rgba(27,27,23,.6)',zIndex:600,display:'flex',alignItems:'center',justifyContent:'center' }}>
      <div onClick={e=>e.stopPropagation()} style={{ width: 440, background:'var(--mc-bg)', padding:26, boxShadow:'0 20px 50px rgba(0,0,0,.3)' }}>
        <div style={{ display:'flex', justifyContent:'space-between', marginBottom:18 }}>
          <div>
            <div className="mc-eyebrow">Sicherheit</div>
            <div style={{ fontSize:18, fontWeight:500, marginTop:4 }}>Passwort ändern</div>
          </div>
          <button onClick={onClose} className="mc-btn ghost sm">×</button>
        </div>
        <div style={{ display:'flex', flexDirection:'column', gap:14 }}>
          <Input label="Aktuelles Passwort" type="password" value={form.current} onChange={v => setForm({...form, current:v})} />
          <Input label="Neues Passwort" type="password" value={form.next} onChange={v => setForm({...form, next:v})} />
          {strength && (
            <div>
              <div style={{ display:'flex', gap:4, marginBottom:6 }}>
                <div style={{ flex:1, height:4, background: strength ? (strength==='weak'?'var(--mc-ember)':'var(--mc-leaf-700)') : 'var(--mc-rule)' }} />
                <div style={{ flex:1, height:4, background: strength==='medium'||strength==='strong' ? (strength==='medium'?'var(--mc-ember)':'var(--mc-leaf-700)') : 'var(--mc-rule)' }} />
                <div style={{ flex:1, height:4, background: strength==='strong' ? 'var(--mc-leaf-700)' : 'var(--mc-rule)' }} />
              </div>
              <div style={{ fontSize:11, color:'var(--mc-ink-dim)' }}>
                {strength === 'strong' ? 'Starkes Passwort ✓' : strength === 'medium' ? 'Mittel — mehr Sonderzeichen empfohlen' : 'Zu schwach — mindestens 8 Zeichen'}
              </div>
            </div>
          )}
          <Input label="Neues Passwort bestätigen" type="password" value={form.confirm} onChange={v => setForm({...form, confirm:v})} />
          {form.confirm && !match && <div style={{ fontSize:11, color:'var(--mc-ember-700)' }}>Passwörter stimmen nicht überein.</div>}
        </div>
        <div style={{ display:'flex', gap:10, marginTop:20, justifyContent:'flex-end' }}>
          <button onClick={onClose} className="mc-btn ghost">Abbrechen</button>
          <button onClick={save} className="mc-btn leaf" disabled={!match || strength === 'weak' || !form.current}>Passwort speichern</button>
        </div>
      </div>
    </div>
  );
}

function InviteModal({ onClose }) {
  const [form, setForm] = React.useState({ email: '', name: '', role: 'Personal', sendInvite: true });
  return (
    <div onClick={onClose} style={{ position:'absolute',inset:0,background:'rgba(27,27,23,.55)',zIndex:500,display:'flex',alignItems:'center',justifyContent:'center' }}>
      <div onClick={e=>e.stopPropagation()} style={{ width:480, background:'var(--mc-bg)', padding:26, boxShadow:'0 20px 50px rgba(0,0,0,.3)' }}>
        <div style={{ display:'flex', justifyContent:'space-between', marginBottom:18 }}>
          <div>
            <div className="mc-eyebrow">Neuer Zugang</div>
            <div style={{ fontSize:18, fontWeight:500, marginTop:4 }}>Nutzer einladen</div>
          </div>
          <button onClick={onClose} className="mc-btn ghost sm">×</button>
        </div>
        <div style={{ display:'flex', flexDirection:'column', gap:14 }}>
          <Input label="E-Mail" value={form.email} onChange={v => setForm({...form, email:v})} placeholder="person@firma.de" />
          <Input label="Name" value={form.name} onChange={v => setForm({...form, name:v})} />
          <Select label="App-Rolle" value={form.role} onChange={v => setForm({...form, role:v})} options={[
            ['Personal','Personal'],['Küchenchef','Küchenchef'],['Manager','Manager'],['Admin','Admin'],
          ]} />
          <label style={{ display:'flex', gap:10, alignItems:'center', fontSize:12, padding:10, background:'var(--mc-surface-2)', cursor:'pointer' }}>
            <input type="checkbox" checked={form.sendInvite} onChange={e => setForm({...form, sendInvite:e.target.checked})} style={{ accentColor:'var(--mc-leaf-700)' }} />
            Einladungs-E-Mail mit MFA-Setup automatisch versenden
          </label>
        </div>
        <div style={{ display:'flex', gap:10, marginTop:20, justifyContent:'flex-end' }}>
          <button onClick={onClose} className="mc-btn ghost">Abbrechen</button>
          <button onClick={onClose} className="mc-btn leaf" disabled={!form.email || !form.name}>Einladung senden</button>
        </div>
      </div>
    </div>
  );
}

// ─── Security (org-wide) ───────────────────────────────────────────────────────
function SecurityTab({ security }) {
  const [s, setS] = React.useState(security);
  React.useEffect(() => setS(security), [security]);
  const patch = (body) => { setS(prev => ({...prev, ...body})); mcApi.patch('/security', body); };

  return (
    <div style={{ padding: 28, maxWidth: 1000, display:'flex', flexDirection:'column', gap: 20 }}>
      <div className="mc-card" style={{ padding: 24 }}>
        <Section title="Organisations-weite 2FA-Richtlinie">
          <div style={{ display:'flex', gap:12, alignItems:'center', justifyContent:'space-between', padding:16, border:'1px solid var(--mc-rule)' }}>
            <div>
              <div style={{ fontSize:14, fontWeight:500 }}>MFA für alle Nutzer erzwingen</div>
              <div style={{ fontSize:11, color:'var(--mc-ink-dim)', marginTop:2 }}>Nutzer ohne MFA werden beim nächsten Login zum Setup gezwungen.</div>
            </div>
            <Toggle on={s.orgMfaRequired} onChange={v => patch({ orgMfaRequired: v })} />
          </div>
          {!s.orgMfaRequired && (
            <div style={{ marginTop:10, padding:14, border:'1px solid var(--mc-rule)' }}>
              <div className="mc-eyebrow" style={{ marginBottom:8 }}>Pflicht-Rollen (auch ohne globale Pflicht)</div>
              <div style={{ display:'flex', gap:6, flexWrap:'wrap' }}>
                {['Owner','Admin','Manager','Küchenchef','Personal'].map(r => {
                  const on = s.orgMfaForRoles.includes(r);
                  return (
                    <button key={r} onClick={() => patch({ orgMfaForRoles: on ? s.orgMfaForRoles.filter(x=>x!==r) : [...s.orgMfaForRoles, r] })} style={{
                      padding:'6px 12px', border: '1px solid var(--mc-rule)', fontSize:11,
                      background: on ? 'var(--mc-leaf)' : 'transparent',
                      color: on ? '#1B1B17' : 'var(--mc-ink-muted)',
                      cursor:'pointer', fontFamily:'inherit',
                    }}>{r}</button>
                  );
                })}
              </div>
            </div>
          )}
        </Section>
      </div>

      <div className="mc-card" style={{ padding: 24 }}>
        <Section title="Passwort-Richtlinien">
          <Grid cols={2}>
            <div>
              <div className="mc-eyebrow" style={{ marginBottom:6 }}>Mindestlänge</div>
              <input type="number" min="6" max="32" value={s.passwordMinLen} onChange={e => patch({ passwordMinLen: parseInt(e.target.value)||10 })} style={inputStyle} />
            </div>
            <div>
              <div className="mc-eyebrow" style={{ marginBottom:6 }}>Ablaufen nach (Tage · 0 = nie)</div>
              <input type="number" min="0" max="365" value={s.passwordRotationDays} onChange={e => patch({ passwordRotationDays: parseInt(e.target.value)||0 })} style={inputStyle} />
            </div>
          </Grid>
        </Section>
      </div>

      <div className="mc-card" style={{ padding: 24 }}>
        <Section title="Sitzungen">
          <div>
            <div className="mc-eyebrow" style={{ marginBottom:6 }}>Auto-Abmeldung nach Inaktivität (Minuten)</div>
            <input type="number" min="15" max="1440" step="15" value={s.sessionTimeoutMin} onChange={e => patch({ sessionTimeoutMin: parseInt(e.target.value)||480 })} style={{ ...inputStyle, width: 180 }} />
          </div>
        </Section>
      </div>

      <div className="mc-card">
        <div style={{ padding: '16px 20px', borderBottom:'1px solid var(--mc-rule)' }}>
          <div className="mc-eyebrow">Audit-Log</div>
          <div style={{ fontSize:14, fontWeight:500, marginTop:4 }}>Sicherheits-Ereignisse</div>
        </div>
        {s.auditLog.map(e => (
          <div key={e.id} style={{ display:'grid', gridTemplateColumns:'1fr 1fr 120px 100px', padding:'12px 20px', borderBottom:'1px solid var(--mc-rule)', fontSize:12, alignItems:'center' }}>
            <div style={{ fontWeight:500 }}>{e.actor}</div>
            <div style={{ color:'var(--mc-ink-muted)' }}>{e.action}</div>
            <div className="mc-mono" style={{ fontSize:11, color:'var(--mc-ink-dim)' }}>{e.ip}</div>
            <div style={{ textAlign:'right' }}>
              <Pill tone={e.tone}>{fmtRel(e.at)}</Pill>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─── Integrations ─────────────────────────────────────────────────────────────
function IntegrationsTab() {
  const items = [
    { n: 'DATEV Unternehmen online', d: 'Lohn-Export direkt in DATEV',       on: true,  icon: '📊', cat: 'Buchhaltung' },
    { n: 'resmio',                  d: 'Online-Reservierungen',              on: true,  icon: '📅', cat: 'Reservierung' },
    { n: 'Lieferando',              d: 'Delivery-Bestellungen',              on: false, icon: '🛵', cat: 'Delivery' },
    { n: 'Stripe',                  d: 'Kartenzahlung & Abo-Abrechnung',     on: true,  icon: '💳', cat: 'Payments' },
    { n: 'Mailchimp',               d: 'Newsletter an Gäste',                on: false, icon: '✉️', cat: 'Marketing' },
    { n: 'Google Business',         d: 'Bewertungen & Öffnungszeiten',       on: true,  icon: 'G',  cat: 'Präsenz' },
  ];
  return (
    <div style={{ padding: 28, display:'grid', gridTemplateColumns:'repeat(2,1fr)', gap: 14 }}>
      {items.map(i => (
        <div key={i.n} className="mc-card" style={{ padding: 22, display: 'flex', gap: 14, alignItems: 'center' }}>
          <div style={{ width: 44, height: 44, background: 'var(--mc-surface-2)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 20 }}>{i.icon}</div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 14, fontWeight: 500 }}>{i.n}</div>
            <div style={{ fontSize: 11, color: 'var(--mc-ink-dim)', marginTop: 2 }}>{i.cat} · {i.d}</div>
          </div>
          <div style={{ display:'flex', gap:8, alignItems:'center' }}>
            <Pill tone={i.on ? 'leaf' : 'default'}>{i.on ? 'Verbunden' : 'Inaktiv'}</Pill>
            <button className="mc-btn ghost sm">{i.on ? 'Verwalten' : 'Verbinden'}</button>
          </div>
        </div>
      ))}
    </div>
  );
}

function AppearanceTab({ theme, setTheme }) {
  return (
    <div style={{ padding: 28, maxWidth: 720, display:'flex', flexDirection:'column', gap: 16 }}>
      <div className="mc-card" style={{ padding: 26 }}>
        <div className="mc-eyebrow">Darstellung</div>
        <div style={{ fontSize: 16, fontWeight: 500, marginTop: 4, marginBottom: 14 }}>Theme</div>
        <div style={{ display: 'flex', gap: 10 }}>
          <button onClick={() => setTheme('light')} className={theme === 'light' ? 'mc-btn' : 'mc-btn ghost'}><McIcon2 name="sun" size={14} />Hell</button>
          <button onClick={() => setTheme('dark')} className={theme === 'dark' ? 'mc-btn' : 'mc-btn ghost'}><McIcon2 name="moon" size={14} />Dunkel</button>
        </div>
      </div>
      <div className="mc-card" style={{ padding: 26 }}>
        <div className="mc-eyebrow">Seitenleiste</div>
        <div style={{ fontSize: 13, marginTop: 6, color: 'var(--mc-ink-muted)' }}>
          Über das Menü-Icon unten links einklappbar.
        </div>
      </div>
    </div>
  );
}

// ─── Shared primitives ────────────────────────────────────────────────────────
function Section({ title, sub, children }) {
  return (
    <div style={{ marginBottom: 28 }}>
      <div className="mc-eyebrow" style={{ marginBottom: 4 }}>{title}</div>
      {sub && <div style={{ fontSize: 12, color: 'var(--mc-ink-dim)', marginBottom: 14 }}>{sub}</div>}
      {!sub && <div style={{ height: 10 }} />}
      {children}
    </div>
  );
}
function Grid({ cols = 2, children }) {
  return <div style={{ display:'grid', gridTemplateColumns:`repeat(${cols}, 1fr)`, gap: 14 }}>{children}</div>;
}
const inputStyle = {
  width: '100%', padding: '9px 11px', border: '1px solid var(--mc-rule)',
  background: 'var(--mc-surface)', color: 'var(--mc-ink)',
  fontFamily: "'Space Grotesk', sans-serif", fontSize: 13,
};
function Input({ label, value, onChange, type = 'text', placeholder, mono, wide }) {
  return (
    <div style={{ gridColumn: wide ? '1 / -1' : 'auto' }}>
      <div className="mc-eyebrow" style={{ marginBottom: 6 }}>{label}</div>
      <input
        type={type} value={value || ''} onChange={e => onChange(e.target.value)}
        placeholder={placeholder}
        style={{ ...inputStyle, fontFamily: mono ? "'JetBrains Mono', monospace" : inputStyle.fontFamily }}
      />
    </div>
  );
}
function Select({ label, value, onChange, options }) {
  return (
    <div>
      <div className="mc-eyebrow" style={{ marginBottom: 6 }}>{label}</div>
      <select value={value} onChange={e => onChange(e.target.value)} style={inputStyle}>
        {options.map(([v, l]) => <option key={v} value={v}>{l}</option>)}
      </select>
    </div>
  );
}
function Toggle({ on, onChange }) {
  return (
    <button onClick={() => onChange(!on)} style={{
      width:48, height:26, borderRadius:13, border:'none', cursor:'pointer',
      background: on ? 'var(--mc-leaf)' : 'var(--mc-rule)', position:'relative', transition:'background .2s',
    }}>
      <div style={{ position:'absolute', top:2, left: on ? 24 : 2, width:22, height:22, borderRadius:'50%', background:'#fff', transition:'left .2s', boxShadow:'0 2px 4px rgba(0,0,0,.2)' }} />
    </button>
  );
}

Object.assign(window, { SettingsScreen });