// ===== Rüstzeitmatrix: editierbare Rüstzeiten Werkstoff → Werkstoff =====

function RuestMatrix({ matrix, onCell, onErst, onReset }) {
  const ids = Object.keys(window.MATERIALS);
  const cell = (from, to) => {
    const v = (matrix[from] && matrix[from][to] != null) ? matrix[from][to] : window.baseSetupMinutes(from, to);
    const same = from === to;
    const heavy = v >= 40;
    return (
      <td key={to} style={{ padding: 2, textAlign: 'center', background: same ? 'color-mix(in oklch, var(--frozen) 40%, transparent)' : 'transparent' }}>
        <input type="number" min="0" step="1" value={v}
          onChange={e => onCell(from, to, Math.max(0, +e.target.value || 0))}
          style={{
            width: 46, height: 28, textAlign: 'center', fontFamily: 'var(--mono)', fontSize: 12,
            border: '1px solid', borderColor: same ? 'var(--line-2)' : (heavy ? 'color-mix(in oklch, var(--bad) 60%, var(--line))' : 'var(--line-2)'),
            borderRadius: 5, background: heavy ? 'color-mix(in oklch, var(--bad) 18%, var(--surface))' : 'var(--surface)',
            color: heavy ? 'var(--bad-ink)' : 'var(--ink)',
          }} />
      </td>
    );
  };
  return (
    <div>
      <div style={{ display: 'flex', alignItems: 'flex-start', gap: 20, flexWrap: 'wrap', marginBottom: 18 }}>
        <div style={{ fontSize: 12.5, color: 'var(--ink-2)', maxWidth: 440, lineHeight: 1.5 }}>
          Rüstzeit in <b>Minuten</b> für den Übergang vom Werkstoff der Zeile (<i>von</i>) auf den Werkstoff der Spalte (<i>nach</i>).
          Die Diagonale ist der Werkzeug-/Kontrollaufwand bei gleichem Werkstoff. Werte ≥ 40 min werden als aufwändiger Wechsel markiert.
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div>
            <L>Erstrüsten</L>
            <div style={{ marginTop: 4 }}>
              <input type="number" min="0" value={matrix.erst ?? 25} onChange={e => onErst(Math.max(0, +e.target.value || 0))}
                style={{ width: 64, height: 30, textAlign: 'center', fontFamily: 'var(--mono)', fontSize: 13, border: '1px solid var(--line-2)', borderRadius: 6, background: 'var(--surface)', color: 'var(--ink)' }} />
              <span style={{ fontSize: 11, color: 'var(--muted)', marginLeft: 6 }}>min</span>
            </div>
          </div>
          <button onClick={onReset} style={{ alignSelf: 'flex-end', height: 30, padding: '0 12px', borderRadius: 6, border: '1px solid var(--line-2)', background: 'var(--surface)', color: 'var(--ink-2)', fontSize: 12 }}>Auf Standard</button>
        </div>
      </div>

      <div style={{ overflowX: 'auto' }}>
        <table style={{ borderCollapse: 'collapse' }}>
          <thead>
            <tr>
              <th style={{ ...mhdr, textAlign: 'left', minWidth: 120 }}>
                <span style={{ color: 'var(--muted)' }}>von ↓ / nach →</span>
              </th>
              {ids.map(id => {
                const m = window.MATERIALS[id];
                return (
                  <th key={id} style={{ ...mhdr, minWidth: 50 }}>
                    <div style={{ display: 'inline-flex', flexDirection: 'column', alignItems: 'center', gap: 3 }}>
                      <span style={{ width: 10, height: 10, borderRadius: 2, background: m.color, boxShadow: 'inset 0 0 0 1px rgba(0,0,0,.08)' }} />
                      <span className="num" style={{ fontFamily: 'var(--mono)', fontSize: 10.5, color: 'var(--ink-2)' }}>{m.id}</span>
                    </div>
                  </th>
                );
              })}
            </tr>
          </thead>
          <tbody>
            {ids.map(from => {
              const m = window.MATERIALS[from];
              return (
                <tr key={from}>
                  <th style={{ ...mhdr, textAlign: 'left', whiteSpace: 'nowrap' }}>
                    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                      <span style={{ width: 10, height: 10, borderRadius: 2, background: m.color, boxShadow: 'inset 0 0 0 1px rgba(0,0,0,.08)' }} />
                      <span className="num" style={{ fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--ink-2)' }}>{m.id}</span>
                      <span style={{ fontSize: 11, color: 'var(--muted)' }}>{m.name}</span>
                    </span>
                  </th>
                  {ids.map(to => cell(from, to))}
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}

const mhdr = { fontFamily: 'var(--mono)', fontSize: 10.5, letterSpacing: '.06em', textTransform: 'uppercase', color: 'var(--muted)', fontWeight: 500, padding: '6px 8px', textAlign: 'center', borderBottom: '1px solid var(--line)' };

// Default-Matrix aus der Basislogik erzeugen
function buildDefaultMatrix() {
  const ids = Object.keys(window.MATERIALS);
  const m = { erst: 25 };
  ids.forEach(a => { m[a] = {}; ids.forEach(b => { m[a][b] = window.baseSetupMinutes(a, b); }); });
  return m;
}

Object.assign(window, { RuestMatrix, buildDefaultMatrix });