// ===== Planung → Materialplanung (virtuelle Auftragskiste) =====
const { useState: useMpS, useMemo: useMpM } = React;

// Bauteil-Komponenten für Stücklisten (Kaufteile/Halbzeuge)
const MP_COMPONENTS = [
  { id: 'RM', name: 'Rohmaterial / Zuschnitt' },
  { id: 'NORM', name: 'Normteile (Schrauben, Ringe)' },
  { id: 'DICHT', name: 'Dichtungssatz' },
  { id: 'LAGER', name: 'Wälzlager' },
  { id: 'ELEKT', name: 'Elektronik / Sensorik' },
  { id: 'OBER', name: 'Oberfläche / Beschichtung' },
];
const MP_STAT = {
  verfuegbar: { label: 'Verfügbar', c: 'var(--good-ink)', bg: 'color-mix(in oklch, var(--good) 55%, var(--surface))', dot: 'var(--good-ink)' },
  bereit: { label: 'Bereitgestellt', c: 'var(--accent-ink)', bg: 'color-mix(in oklch, var(--accent) 55%, var(--surface))', dot: 'var(--accent-ink)' },
  fehlt: { label: 'Nicht verfügbar', c: 'var(--bad-ink)', bg: 'color-mix(in oklch, var(--bad) 50%, var(--surface))', dot: 'var(--bad-ink)' },
  na: { label: '—', c: 'var(--muted)', bg: 'var(--surface-2)', dot: 'var(--line-2)' },
};
const MP_ORDER = { verfuegbar: 0, bereit: 1, fehlt: 2, na: 3 };

// Deterministische Materialverfügbarkeit je (Auftrag, Arbeitssystem-Schritt, Komponente)
function mpHash(s) { let h = 0; for (let i = 0; i < s.length; i++) h = (h * 31 + s.charCodeAt(i)) | 0; return Math.abs(h); }
function mpStatusFor(orderNr, wsId, compId) {
  const h = mpHash(orderNr + '|' + wsId + '|' + compId) % 100;
  if (h < 62) return 'verfuegbar';
  if (h < 84) return 'bereit';
  return 'fehlt';
}
// Welche Komponenten braucht ein Schritt (nach Schritt-Typ)
function mpCompsForStep(stepKey) {
  switch (stepKey) {
    case 'saegen': return ['RM'];
    case 'drehen': return ['RM', 'NORM'];
    case 'fraesen': return ['NORM', 'LAGER'];
    case 'waerme': return ['OBER'];
    case 'entgraten': return ['DICHT'];
    case 'pruefen': return ['ELEKT'];
    default: return ['RM', 'NORM'];
  }
}

// Aggregierter Status einer Menge von Einzelstatus (schlechtester gewinnt)
function mpAgg(list) {
  if (!list.length) return 'na';
  if (list.includes('fehlt')) return 'fehlt';
  if (list.includes('bereit')) return 'bereit';
  return 'verfuegbar';
}

// Auftragskiste aufbauen: je Auftrag alle (Arbeitssystem-Schritt × Komponente)
function buildKiste() {
  const orders = (window.ORDERS || []).filter(o => !o.released || o.bestand);
  const wsById = Object.fromEntries((window.WORK_SYSTEMS || []).map(w => [w.id, w]));
  return orders.map(o => {
    const steps = (o.arbeitsplan || []).filter(s => s.wsId);
    const cells = [];
    steps.forEach(st => {
      const comps = mpCompsForStep(st.key);
      comps.forEach(cid => cells.push({ wsId: st.wsId, wsName: (wsById[st.wsId] || {}).name || st.wsId, avo: st.avo, stepName: st.name, comp: cid, status: mpStatusFor(o.nr, st.wsId, cid) }));
    });
    return { o, cells, status: mpAgg(cells.map(c => c.status)) };
  });
}

function MpDot({ status, size = 10 }) {
  const s = MP_STAT[status] || MP_STAT.na;
  return <span title={s.label} style={{ display: 'inline-block', width: size, height: size, borderRadius: 3, background: s.dot }} />;
}
function MpPill({ status }) {
  const s = MP_STAT[status] || MP_STAT.na;
  return <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, padding: '2px 9px', borderRadius: 99, fontSize: 11.5, fontWeight: 600, background: s.bg, color: s.c }}><span style={{ width: 7, height: 7, borderRadius: 99, background: s.dot }} />{s.label}</span>;
}
function MpCell({ status }) {
  const s = MP_STAT[status] || MP_STAT.na;
  return <div title={s.label} style={{ height: 26, borderRadius: 5, background: s.bg, display: 'grid', placeItems: 'center' }}>{status !== 'na' && <span style={{ width: 8, height: 8, borderRadius: 99, background: s.dot }} />}</div>;
}

function MaterialplanungView() {
  const [view, setView] = useMpS('auftrag'); // auftrag | material | system
  const [q, setQ] = useMpS('');
  const [statusF, setStatusF] = useMpS('alle');
  const [expand, setExpand] = useMpS(() => new Set());
  const kiste = useMpM(() => buildKiste(), []);
  const systems = (window.WORK_SYSTEMS || []);

  const toggle = (nr) => setExpand(s => { const n = new Set(s); n.has(nr) ? n.delete(nr) : n.add(nr); return n; });

  let rows = kiste;
  if (q.trim()) { const s = q.toLowerCase(); rows = rows.filter(r => (r.o.nr + ' ' + r.o.kurz + ' ' + r.o.kunde).toLowerCase().includes(s)); }
  if (statusF !== 'alle') rows = rows.filter(r => r.status === statusF);

  // Kennzahlen
  const kpi = useMpM(() => {
    const c = { verfuegbar: 0, bereit: 0, fehlt: 0 };
    kiste.forEach(r => { c[r.status] = (c[r.status] || 0) + 1; });
    return c;
  }, [kiste]);

  return (
    <React.Fragment>
      <header style={{ flex: '0 0 auto', display: 'flex', alignItems: 'center', gap: 14, padding: '0 18px', height: 56, background: 'var(--panel)', borderBottom: '1px solid var(--line-2)' }}>
        <span style={{ fontSize: 14.5, fontWeight: 600 }}>Materialplanung</span>
        <span className="label">Virtuelle Auftragskiste</span>
        <div style={{ display: 'flex', gap: 4, marginLeft: 6 }}>
          {[['auftrag', 'Fertigungsauftrag'], ['material', 'Material'], ['system', 'Arbeitssystem']].map(([id, lb]) => (
            <button key={id} onClick={() => setView(id)} style={{ height: 32, padding: '0 13px', borderRadius: 7, fontSize: 12.5, fontWeight: 600, cursor: 'pointer', border: '1px solid ' + (view === id ? 'var(--accent-ink)' : 'var(--line-2)'), background: view === id ? 'var(--accent)' : 'var(--surface)', color: view === id ? 'var(--accent-ink)' : 'var(--ink-2)' }}>{lb}</button>
          ))}
        </div>
        <div style={{ marginLeft: 'auto', display: 'flex', gap: 16 }}>
          {Object.entries(MP_STAT).filter(([k]) => k !== 'na').map(([k, s]) => (
            <span key={k} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 12 }}><span style={{ width: 9, height: 9, borderRadius: 3, background: s.dot }} /><b className="num" style={{ fontFamily: 'var(--mono)' }}>{kpi[k] || 0}</b> <span style={{ color: 'var(--muted)' }}>{s.label}</span></span>
          ))}
        </div>
      </header>
      <main style={{ flex: 1, minHeight: 0, overflow: 'auto', padding: 14 }}>
        <div style={{ display: 'flex', gap: 10, marginBottom: 12, alignItems: 'center' }}>
          <input value={q} onChange={e => setQ(e.target.value)} placeholder="Auftrag, Bauteil, Kunde …" style={{ flex: 1, maxWidth: 320, height: 36, boxSizing: 'border-box', padding: '0 12px', border: '1px solid var(--line-2)', borderRadius: 8, fontSize: 13, background: 'var(--panel)', color: 'var(--ink)' }} />
          {view === 'auftrag' && <div style={{ display: 'flex', gap: 5 }}>{[['alle', 'Alle'], ['fehlt', 'Kritisch'], ['bereit', 'Bereitgestellt'], ['verfuegbar', 'Verfügbar']].map(([s, l]) => <button key={s} onClick={() => setStatusF(s)} style={{ height: 36, padding: '0 12px', borderRadius: 8, fontSize: 12.5, fontWeight: 500, cursor: 'pointer', border: '1px solid ' + (statusF === s ? 'var(--accent-ink)' : 'var(--line-2)'), background: statusF === s ? 'var(--accent)' : 'var(--panel)', color: statusF === s ? 'var(--accent-ink)' : 'var(--ink-2)' }}>{l}</button>)}</div>}
        </div>

        {view === 'auftrag' && <MpAuftragView rows={rows} systems={systems} expand={expand} toggle={toggle} />}
        {view === 'material' && <MpMaterialView kiste={kiste} q={q} />}
        {view === 'system' && <MpSystemView kiste={kiste} systems={systems} />}
      </main>
    </React.Fragment>
  );
}

// Sicht 1: je Fertigungsauftrag, aufklappbar → Matrix Arbeitssystem × Komponente
function MpAuftragView({ rows, systems, expand, toggle }) {
  return (
    <div style={{ background: 'var(--panel)', border: '1px solid var(--line)', borderRadius: 8, boxShadow: 'var(--shadow)', overflow: 'hidden' }}>
      <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
        <thead><tr>{['', 'Auftrag', 'Kurztext', 'Kunde', 'Werkstoff', 'Materialstatus'].map((h, i) => <th key={i} style={mpTh}>{h}</th>)}</tr></thead>
        <tbody>
          {rows.map(r => {
            const open = expand.has(r.o.nr);
            return (
              <React.Fragment key={r.o.nr}>
                <tr onClick={() => toggle(r.o.nr)} onContextMenu={e => window.kikiMenu(e, { id: r.o.nr, label: r.o.nr + ' · ' + r.o.kurz, kind: 'Materialbedarf' })} style={{ borderBottom: open ? 'none' : '1px solid var(--line)', cursor: 'pointer' }}>
                  <td style={{ ...mpTd, width: 24 }}><Icon name="chevron" size={13} style={{ color: 'var(--muted)', transform: open ? 'rotate(90deg)' : 'none', transition: 'transform .15s' }} /></td>
                  <td style={{ ...mpTd, fontFamily: 'var(--mono)', fontWeight: 600 }}>{r.o.nr}</td>
                  <td style={mpTd}>{r.o.kurz}</td>
                  <td style={mpTd}>{r.o.kunde}</td>
                  <td style={mpTd}><MatChip mat={r.o.mat} /></td>
                  <td style={mpTd}><MpPill status={r.status} /></td>
                </tr>
                {open && (
                  <tr style={{ borderBottom: '1px solid var(--line)', background: 'var(--surface-2)' }}>
                    <td colSpan={6} style={{ padding: '10px 14px 14px 40px' }}>
                      <MpMatrix cells={r.cells} />
                    </td>
                  </tr>
                )}
              </React.Fragment>
            );
          })}
          {rows.length === 0 && <tr><td colSpan={6} style={{ padding: 28, textAlign: 'center', color: 'var(--muted)' }}>Keine Aufträge im Filter.</td></tr>}
        </tbody>
      </table>
    </div>
  );
}

// Matrix Arbeitssystem(-Schritt) × Komponente für einen Auftrag
function MpMatrix({ cells }) {
  const steps = []; const seen = {};
  cells.forEach(c => { const k = c.wsId + c.avo; if (!seen[k]) { seen[k] = { avo: c.avo, wsId: c.wsId, wsName: c.wsName, stepName: c.stepName }; steps.push(seen[k]); } });
  const comps = MP_COMPONENTS.filter(cp => cells.some(c => c.comp === cp.id));
  const at = (wsId, avo, compId) => { const c = cells.find(x => x.wsId === wsId && x.avo === avo && x.comp === compId); return c ? c.status : 'na'; };
  return (
    <div style={{ overflowX: 'auto' }}>
      <div style={{ display: 'grid', gridTemplateColumns: `180px repeat(${comps.length}, minmax(70px, 1fr))`, gap: 4, minWidth: 180 + comps.length * 74 }}>
        <div className="label" style={{ fontSize: 9.5, alignSelf: 'end', paddingBottom: 4 }}>Arbeitsvorgang \ Bauteil</div>
        {comps.map(cp => <div key={cp.id} className="label" style={{ fontSize: 9, textAlign: 'center', alignSelf: 'end', paddingBottom: 4, lineHeight: 1.2 }}>{cp.name}</div>)}
        {steps.map(st => (
          <React.Fragment key={st.wsId + st.avo}>
            <div style={{ fontSize: 12, display: 'flex', alignItems: 'center', gap: 6, whiteSpace: 'nowrap', overflow: 'hidden' }}>
              <span className="num" style={{ fontFamily: 'var(--mono)', fontSize: 10.5, color: 'var(--muted)' }}>{st.avo}</span>
              <span style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>{st.wsName}</span>
            </div>
            {comps.map(cp => <MpCell key={cp.id} status={at(st.wsId, st.avo, cp.id)} />)}
          </React.Fragment>
        ))}
      </div>
    </div>
  );
}

// Sicht 2: je Material/Bauteil — über alle Aufträge, wo wird es gebraucht & Status
function MpMaterialView({ kiste, q }) {
  const byComp = MP_COMPONENTS.map(cp => {
    const items = [];
    kiste.forEach(r => { const st = r.cells.filter(c => c.comp === cp.id); if (st.length) items.push({ o: r.o, status: mpAgg(st.map(c => c.status)) }); });
    return { cp, items, fehlt: items.filter(i => i.status === 'fehlt').length };
  }).filter(x => x.items.length);
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: 14 }}>
      {byComp.map(({ cp, items, fehlt }) => (
        <div key={cp.id} style={{ background: 'var(--panel)', border: '1px solid var(--line)', borderRadius: 8, boxShadow: 'var(--shadow)', overflow: 'hidden' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '10px 12px', borderBottom: '1px solid var(--line)' }}>
            <Icon name="box" size={15} style={{ color: 'var(--ink-2)' }} />
            <span style={{ fontWeight: 600, fontSize: 13.5 }}>{cp.name}</span>
            <span className="label" style={{ marginLeft: 'auto' }}>{items.length} Aufträge{fehlt ? ` · ${fehlt} kritisch` : ''}</span>
          </div>
          <div style={{ maxHeight: 220, overflow: 'auto' }}>
            <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 12.5 }}>
              <tbody>
                {items.sort((a, b) => MP_ORDER[b.status] - MP_ORDER[a.status]).map(it => (
                  <tr key={it.o.nr} style={{ borderBottom: '1px solid var(--line)' }}>
                    <td style={{ padding: '7px 12px', fontFamily: 'var(--mono)', fontWeight: 600 }}>{it.o.nr}</td>
                    <td style={{ padding: '7px 12px', color: 'var(--ink-2)' }}>{it.o.kurz}</td>
                    <td style={{ padding: '7px 12px', textAlign: 'right' }}><MpPill status={it.status} /></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      ))}
    </div>
  );
}

// Sicht 3: je Arbeitssystem — Auftrag × Materialstatus an diesem System
function MpSystemView({ kiste, systems }) {
  const bySys = systems.map(w => {
    const items = [];
    kiste.forEach(r => { const st = r.cells.filter(c => c.wsId === w.id); if (st.length) items.push({ o: r.o, status: mpAgg(st.map(c => c.status)), cells: st }); });
    return { w, items, fehlt: items.filter(i => i.status === 'fehlt').length, bereit: items.filter(i => i.status === 'bereit').length };
  }).filter(x => x.items.length);
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
      {bySys.map(({ w, items, fehlt, bereit }) => (
        <div key={w.id} style={{ background: 'var(--panel)', border: '1px solid var(--line)', borderRadius: 8, boxShadow: 'var(--shadow)', overflow: 'hidden' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '10px 12px', borderBottom: '1px solid var(--line)' }}>
            <Icon name="layers" size={15} style={{ color: 'var(--ink-2)' }} />
            <span style={{ fontWeight: 600, fontSize: 13.5 }}>{w.name}</span>
            <span className="num" style={{ fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--muted)' }}>{w.id}</span>
            <span className="label" style={{ marginLeft: 'auto' }}>{items.length} Aufträge{fehlt ? ` · ${fehlt} kritisch` : ''}{bereit ? ` · ${bereit} bereit` : ''}</span>
          </div>
          <div style={{ padding: 12, display: 'flex', flexWrap: 'wrap', gap: 8 }}>
            {items.sort((a, b) => MP_ORDER[b.status] - MP_ORDER[a.status]).map(it => {
              const s = MP_STAT[it.status];
              return <div key={it.o.nr} onContextMenu={e => window.kikiMenu(e, { id: it.o.nr, label: it.o.nr + ' @ ' + w.name, kind: 'Materialbedarf' })} title={`${it.o.nr} · ${it.o.kurz} — ${s.label}`} style={{ display: 'inline-flex', alignItems: 'center', gap: 7, padding: '6px 10px', borderRadius: 7, border: '1px solid ' + s.dot, background: s.bg }}>
                <MpDot status={it.status} />
                <span className="num" style={{ fontFamily: 'var(--mono)', fontSize: 11.5, fontWeight: 600, color: 'var(--ink)' }}>{it.o.nr.replace('FA-', '')}</span>
                <span style={{ fontSize: 11.5, color: 'var(--ink-2)', maxWidth: 130, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{it.o.kurz}</span>
              </div>;
            })}
          </div>
        </div>
      ))}
    </div>
  );
}

const mpTh = { padding: '8px 12px', textAlign: 'left', fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '.06em', textTransform: 'uppercase', color: 'var(--muted)', borderBottom: '1px solid var(--line-2)', whiteSpace: 'nowrap' };
const mpTd = { padding: '8px 12px', color: 'var(--ink)', verticalAlign: 'middle' };

Object.assign(window, { MaterialplanungView });