// MissionChef — Warenwirtschaft + Food-Cost + Catering + Staff + Reports + Settings

function InventoryScreen({ Topbar }) {
  const store = useStore();
  const [cat, setCat] = React.useState('Alle');
  const CATS = ['Alle', 'Fleisch', 'Fisch', 'Milch', 'Trocken', 'Gemüse', 'Wein', 'Gewürze', 'Öle'];
  const items = cat === 'Alle' ? store.inventory : store.inventory.filter(i => i.category === cat);

  return (
    <>
      <Topbar
        title="Warenwirtschaft"
        subtitle={`${store.inventory.length} Artikel · ${store.orders.filter(o => o.status !== 'delivered').length} offene Bestellungen`}
        actions={<button className="mc-btn leaf sm"><McIcon2 name="plus" size={14} />Bestellung anlegen</button>}
      />
      <div className="mc-scroll" style={{ flex: 1, overflow: 'auto', padding: 28 }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14, marginBottom: 24 }}>
          <div className="mc-card" style={{ padding: 20 }}>
            <div className="mc-eyebrow">Lagerwert</div>
            <div className="mc-num" style={{ fontSize: 28, fontWeight: 500, marginTop: 6 }}>
              {fmtEUR(store.inventory.reduce((s, i) => s + i.stock * i.price, 0))}
            </div>
          </div>
          <div className="mc-card" style={{ padding: 20 }}>
            <div className="mc-eyebrow">Unter Par-Level</div>
            <div className="mc-num" style={{ fontSize: 28, fontWeight: 500, marginTop: 6, color: 'var(--mc-ember-700)' }}>
              {store.inventory.filter(i => i.stock < i.par).length}
            </div>
          </div>
          <div className="mc-card" style={{ padding: 20 }}>
            <div className="mc-eyebrow">Food-Cost heute</div>
            <div className="mc-num" style={{ fontSize: 28, fontWeight: 500, marginTop: 6 }}>28.4%</div>
          </div>
          <div className="mc-card" style={{ padding: 20 }}>
            <div className="mc-eyebrow">Offene POs</div>
            <div className="mc-num" style={{ fontSize: 28, fontWeight: 500, marginTop: 6 }}>
              {fmtEUR(store.orders.filter(o => o.status !== 'delivered').reduce((s, o) => s + o.total, 0))}
            </div>
          </div>
        </div>

        <div style={{ display: 'flex', gap: 8, marginBottom: 16, flexWrap: 'wrap' }}>
          {CATS.map(c => (
            <button key={c} onClick={() => setCat(c)} className={cat === c ? 'mc-btn sm' : 'mc-btn ghost sm'}>{c}</button>
          ))}
        </div>

        <div className="mc-card">
          <div style={{ display: 'grid', gridTemplateColumns: '140px 1fr 120px 120px 1fr 100px', padding: '14px 20px', borderBottom: '1px solid var(--mc-rule)', background: 'var(--mc-surface-2)' }}>
            {['SKU', 'Artikel', 'Bestand', 'Par', 'Lieferant', 'EK'].map(h => <div key={h} className="mc-eyebrow">{h}</div>)}
          </div>
          {items.map(i => {
            const low = i.stock < i.par;
            const pct = Math.min(100, (i.stock / i.par) * 100);
            return (
              <div key={i.id} className="mc-row" style={{ display: 'grid', gridTemplateColumns: '140px 1fr 120px 120px 1fr 100px', padding: '14px 20px', borderBottom: '1px solid var(--mc-rule)', alignItems: 'center' }}>
                <div className="mc-mono" style={{ fontSize: 11, color: 'var(--mc-ink-dim)' }}>{i.sku}</div>
                <div>
                  <div style={{ fontSize: 13, fontWeight: 500 }}>{i.name}</div>
                  <div style={{ fontSize: 11, color: 'var(--mc-ink-dim)' }}>{i.category}</div>
                </div>
                <div className="mc-num" style={{ fontSize: 14, fontWeight: 500, color: low ? 'var(--mc-ember-700)' : 'var(--mc-ink)' }}>{i.stock}</div>
                <div>
                  <div className="mc-num" style={{ fontSize: 12, color: 'var(--mc-ink-dim)' }}>{i.par}</div>
                  <div style={{ height: 4, background: 'var(--mc-rule)', marginTop: 4, width: 80 }}>
                    <div style={{ height: '100%', width: pct + '%', background: low ? 'var(--mc-ember)' : 'var(--mc-leaf-700)' }} />
                  </div>
                </div>
                <div style={{ fontSize: 12 }}>{i.supplier}</div>
                <div className="mc-num" style={{ fontSize: 13 }}>{fmtEUR(i.price)}</div>
              </div>
            );
          })}
        </div>

        <div style={{ marginTop: 24 }}>
          <div className="mc-eyebrow" style={{ marginBottom: 12 }}>Offene Bestellungen</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 14 }}>
            {store.orders.map(o => (
              <div key={o.id} className="mc-card" style={{ padding: 18, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <div>
                  <div className="mc-mono" style={{ fontSize: 11, color: 'var(--mc-ink-dim)' }}>{o.id.toUpperCase()}</div>
                  <div style={{ fontSize: 15, fontWeight: 500, marginTop: 4 }}>{o.supplier}</div>
                  <div style={{ fontSize: 11, color: 'var(--mc-ink-dim)', marginTop: 2 }}>{o.items} Artikel · ETA {o.eta.slice(5)}</div>
                </div>
                <div style={{ textAlign: 'right' }}>
                  <Pill tone={o.status === 'delivered' ? 'leaf' : o.status === 'in-transit' ? 'ember' : 'default'}>{o.status}</Pill>
                  <div className="mc-num" style={{ fontSize: 18, fontWeight: 500, marginTop: 6 }}>{fmtEUR(o.total)}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </>
  );
}

// Legacy CateringScreen stub — replaced by CateringScreenV2 in mc-catering.jsx.
// Kept here only as a fallback if mc-catering.jsx fails to load.
function CateringScreenLegacy({ Topbar }) {
  const store = useStore();
  return (
    <>
      <Topbar
        title="Catering"
        subtitle={`${store.events.length} Events geplant · Next 8 Wochen`}
        actions={<button className="mc-btn ember sm"><McIcon2 name="truck" size={14} />Neues Event</button>}
      />
      <div className="mc-scroll" style={{ flex: 1, overflow: 'auto', padding: 28 }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14, marginBottom: 24 }}>
          <div className="mc-card" style={{ padding: 20 }}>
            <div className="mc-eyebrow">Events Q2</div>
            <div className="mc-num" style={{ fontSize: 28, fontWeight: 500, marginTop: 6 }}>{store.events.length}</div>
          </div>
          <div className="mc-card" style={{ padding: 20 }}>
            <div className="mc-eyebrow">Gäste gesamt</div>
            <div className="mc-num" style={{ fontSize: 28, fontWeight: 500, marginTop: 6 }}>{fmtINT(store.events.reduce((s, e) => s + e.guests, 0))}</div>
          </div>
          <div className="mc-card" style={{ padding: 20 }}>
            <div className="mc-eyebrow">Umsatz geplant</div>
            <div className="mc-num" style={{ fontSize: 28, fontWeight: 500, marginTop: 6, color: 'var(--mc-leaf-700)' }}>{fmtEUR(store.events.reduce((s, e) => s + e.total, 0))}</div>
          </div>
          <div className="mc-card" style={{ padding: 20 }}>
            <div className="mc-eyebrow">Angebote offen</div>
            <div className="mc-num" style={{ fontSize: 28, fontWeight: 500, marginTop: 6, color: 'var(--mc-ember-700)' }}>{store.events.filter(e => e.state === 'offer').length}</div>
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16 }}>
          {store.events.map(e => {
            const lead = store.staff.find(s => s.id === e.lead);
            const stateTone = { offer: 'ember', confirmed: 'leaf', production: 'ink', planning: 'default' }[e.state];
            return (
              <div key={e.id} className="mc-card" style={{ padding: 24 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                  <div>
                    <Pill tone={stateTone}>{e.state}</Pill>
                    <div style={{ fontSize: 20, fontWeight: 500, letterSpacing: '-0.015em', marginTop: 10 }}>{e.name}</div>
                    <div style={{ fontSize: 12, color: 'var(--mc-ink-dim)', marginTop: 4 }}>{e.venue}</div>
                  </div>
                  <div className="mc-mono" style={{ fontSize: 13, color: 'var(--mc-leaf-700)' }}>{e.date}</div>
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10, marginTop: 20 }}>
                  <div>
                    <div className="mc-eyebrow">Gäste</div>
                    <div className="mc-num" style={{ fontSize: 20, fontWeight: 500, marginTop: 4 }}>{e.guests}</div>
                  </div>
                  <div>
                    <div className="mc-eyebrow">Format</div>
                    <div style={{ fontSize: 13, marginTop: 6 }}>{e.type}</div>
                  </div>
                  <div>
                    <div className="mc-eyebrow">Lead</div>
                    <div style={{ fontSize: 13, marginTop: 6 }}>{lead?.name.split(' ')[0]}</div>
                  </div>
                </div>
                <div style={{ marginTop: 20, paddingTop: 16, borderTop: '1px solid var(--mc-rule)', display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                  <div style={{ fontSize: 12, color: 'var(--mc-ink-dim)' }}>Gäste</div>
                  <div className="mc-num" style={{ fontSize: 22, fontWeight: 500 }}>{e.guests}</div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </>
  );
}

// StaffScreen is now defined in mc-staff.jsx (+ mc-staff-detail.jsx)

function ReportsScreen({ Topbar }) {
  const store = useStore();
  const max = Math.max(...store.txn.map(d => d.revenue));
  return (
    <>
      <Topbar title="Berichte" subtitle="14 Tage Rollend · Alle Kanäle" actions={<button className="mc-btn ghost sm"><McIcon2 name="arrow" size={14} />Export CSV</button>} />
      <div className="mc-scroll" style={{ flex: 1, overflow: 'auto', padding: 28 }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14, marginBottom: 24 }}>
          <div className="mc-card" style={{ padding: 22 }}>
            <div className="mc-eyebrow">Ø Umsatz/Tag</div>
            <div className="mc-num" style={{ fontSize: 34, fontWeight: 500, marginTop: 8 }}>{fmtEUR(store.txn.reduce((s,d)=>s+d.revenue,0)/store.txn.length)}</div>
            <Pill tone="leaf">+8.4% vs. Vormonat</Pill>
          </div>
          <div className="mc-card" style={{ padding: 22 }}>
            <div className="mc-eyebrow">Ø Bon</div>
            <div className="mc-num" style={{ fontSize: 34, fontWeight: 500, marginTop: 8 }}>
              {fmtEUR(store.txn.reduce((s,d)=>s+d.revenue,0)/store.txn.reduce((s,d)=>s+d.covers,0))}
            </div>
            <Pill tone="leaf">+3.1%</Pill>
          </div>
          <div className="mc-card" style={{ padding: 22 }}>
            <div className="mc-eyebrow">Deckungsbeitrag</div>
            <div className="mc-num" style={{ fontSize: 34, fontWeight: 500, marginTop: 8 }}>46.6%</div>
            <Pill tone="ember">−1.2%</Pill>
          </div>
        </div>

        <div className="mc-card" style={{ padding: 26 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 20 }}>
            <div>
              <div className="mc-eyebrow">Umsatz nach Tag</div>
              <div style={{ fontSize: 18, fontWeight: 500, marginTop: 4 }}>Letzte 14 Tage</div>
            </div>
          </div>
          <div style={{ display: 'flex', alignItems: 'flex-end', gap: 8, height: 240 }}>
            {store.txn.map((d, i) => (
              <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
                <div className="mc-num" style={{ fontSize: 10, color: 'var(--mc-ink-dim)' }}>{Math.round(d.revenue/1000)}k</div>
                <div style={{ width: '100%', height: (d.revenue/max)*200, background: i === store.txn.length-1 ? 'var(--mc-leaf-700)' : 'var(--mc-leaf)', opacity: 0.85 }} />
                <div style={{ fontSize: 10, color: 'var(--mc-ink-dim)' }}>{d.date.slice(8)}.</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </>
  );
}

// Legacy SettingsScreen stub — replaced by full SettingsScreen in mc-settings.jsx.
function SettingsScreenLegacy({ Topbar, theme, setTheme }) {
  const store = useStore();
  return (
    <>
      <Topbar title="Einstellungen" subtitle="Betrieb · Team · Integrationen" />
      <div className="mc-scroll" style={{ flex: 1, overflow: 'auto', padding: 28 }}>
        <div style={{ maxWidth: 720, display: 'flex', flexDirection: 'column', gap: 18 }}>
          <div className="mc-card" style={{ padding: 26 }}>
            <div className="mc-eyebrow">Betrieb</div>
            <div style={{ fontSize: 22, fontWeight: 500, marginTop: 8 }}>{store.biz.name}</div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, marginTop: 20 }}>
              {[['Adresse', store.biz.address], ['USt-ID', store.biz.vat], ['Telefon', store.biz.phone], ['Öffnungszeiten', `${store.biz.opens} — ${store.biz.closes}`]].map(([k, v]) => (
                <div key={k}>
                  <div className="mc-eyebrow">{k}</div>
                  <div style={{ fontSize: 14, marginTop: 4 }}>{v}</div>
                </div>
              ))}
            </div>
          </div>

          <div className="mc-card" style={{ padding: 26 }}>
            <div className="mc-eyebrow">Darstellung</div>
            <div style={{ fontSize: 18, fontWeight: 500, marginTop: 6, 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">Integrationen</div>
            <div style={{ fontSize: 18, fontWeight: 500, marginTop: 6, marginBottom: 14 }}>Verbundene Dienste</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {[
                ['DATEV Unternehmen online', 'Buchhaltung', true],
                ['resmio', 'Online-Reservierungen', true],
                ['Lieferando', 'Delivery', false],
                ['Stripe', 'Kartenzahlung', true],
              ].map(([n, d, on]) => (
                <div key={n} style={{ display: 'flex', justifyContent: 'space-between', padding: 12, border: '1px solid var(--mc-rule)', alignItems: 'center' }}>
                  <div>
                    <div style={{ fontSize: 13, fontWeight: 500 }}>{n}</div>
                    <div style={{ fontSize: 11, color: 'var(--mc-ink-dim)' }}>{d}</div>
                  </div>
                  <Pill tone={on ? 'leaf' : 'default'}>{on ? 'verbunden' : 'nicht verbunden'}</Pill>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

Object.assign(window, { InventoryScreen, ReportsScreen });