// ===== Untere Ansicht: Arbeitsvorgänge (links) + Fertigungsaufträge (rechts) =====

function fmtEuro(v) { return '€ ' + v.toLocaleString('de-DE'); }
function fmtH(h) { return h.toFixed(1).replace('.', ',') + ' h'; }

// Plan-Termin relativ -> Schicht-Label
function shiftLabel(h) {
  const idx = Math.round(h / window.SHIFT_HOURS);
  const sh = window.SHIFTS[idx];
  return sh ? `${sh.day} ${sh.name}` : `+${idx} Sch.`;
}

// ---------- Arbeitsvorgänge (links) ----------
function OperationsTable({ candidates, selected, onSelect, posMap, onDragRow }) {
  const offen = candidates.filter(o => posMap[o.nr] == null).length;
  const [sort, toggleSort] = window.useSort();
  const acc = (o, key) => {
    switch (key) {
      case 'pos': return posMap[o.nr] ?? 9999;
      case 'avo': return o.avo;
      case 'nr': return o.nr;
      case 'kurz': return o.kurz;
      case 'mat': return window.MATERIALS[o.mat].group + window.MATERIALS[o.mat].id;
      case 'dauer': return o.dauerH;
      case 'bestand': return { direkt: 0, indirekt: 1, route: 2 }[o.bestand];
      default: return '';
    }
  };
  const rows = window.sortRows(candidates, sort, acc);
  return (
    <PanelShell title="Arbeitsvorgänge" sub={`${offen} offen · ${candidates.length - offen} eingeplant`} icon="layers">
      <div style={{ overflow: 'auto', flex: 1 }}>
        <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 12.5 }}>
          <thead>
            <tr>
              <SortTh label="#" sortKey="pos" sort={sort} onSort={toggleSort} align="right" />
              <SortTh label="AVO" sortKey="avo" sort={sort} onSort={toggleSort} />
              <SortTh label="Auftrag" sortKey="nr" sort={sort} onSort={toggleSort} />
              <SortTh label="Kurztext" sortKey="kurz" sort={sort} onSort={toggleSort} />
              <SortTh label="Werkstoff" sortKey="mat" sort={sort} onSort={toggleSort} />
              <SortTh label="Dauer" sortKey="dauer" sort={sort} onSort={toggleSort} align="right" />
              <SortTh label="Bestand" sortKey="bestand" sort={sort} onSort={toggleSort} />
            </tr>
          </thead>
          <tbody>
            {rows.map(o => {
              const sel = selected === o.nr;
              const pos = posMap[o.nr];
              const placed = pos != null;
              return (
                <tr key={o.nr} onClick={() => onSelect(sel ? null : o.nr)}
                  draggable onDragStart={e => { e.dataTransfer.setData('text/plain', o.nr); e.dataTransfer.effectAllowed = 'move'; }}
                  title={placed ? 'Eingeplant · klicken zum Hervorheben' : 'Hochziehen, um in der Reihenfolge zu fixieren'}
                  style={{ borderBottom: '1px solid var(--line)', cursor: 'grab',
                    background: sel ? 'var(--accent)' : placed ? 'color-mix(in oklch, var(--frozen) 22%, transparent)' : 'transparent',
                    boxShadow: sel ? 'inset 3px 0 0 var(--accent-ink)' : 'none', transition: 'background .1s' }}>
                  <td style={{ ...window.tdNum, width: 26, paddingRight: 0 }}>
                    {placed ? <span style={posPill}>{pos}</span> : <span style={{ color: 'var(--line-2)' }}>·</span>}
                  </td>
                  <td style={{ ...window.td, fontFamily: 'var(--mono)', fontSize: 11.5, color: 'var(--ink-2)' }}>{o.avo}</td>
                  <td style={{ ...window.td }}><span className="num" style={{ fontFamily: 'var(--mono)', fontWeight: 600, opacity: placed ? .7 : 1 }}>{o.nr}</span></td>
                  <td style={{ ...window.td, opacity: placed ? .7 : 1 }}>{o.kurz}</td>
                  <td style={window.td}><MatChip mat={o.mat} /></td>
                  <td style={window.tdNum}>{fmtH(o.dauerH)}</td>
                  <td style={window.td}><StatusPill kind={o.bestand} /></td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </PanelShell>
  );
}

// ---------- Fertigungsaufträge (rechts) ----------
function OrdersTable({ candidates, selected, onSelect, posMap, expanded, onToggleExpand, onDragRow, currentWs }) {
  const NCOL = 11;
  const placedN = candidates.filter(o => posMap[o.nr] != null).length;
  const [sort, toggleSort] = window.useSort();
  const acc = (o, key) => {
    switch (key) {
      case 'nr': return (posMap[o.nr] ?? 9999) === 9999 ? o.nr : String(posMap[o.nr]).padStart(3, '0');
      case 'kunde': return o.kunde;
      case 'mat': return window.MATERIALS[o.mat].group + window.MATERIALS[o.mat].id;
      case 'wert': return o.wert;
      case 'planStart': return o.planStart;
      case 'planEnde': return o.planEnde;
      case 'rest': return o.restGesamtH ?? o.restH;
      case 'slack': return window.slackHours(o);
      case 'status': return { direkt: 0, indirekt: 1, route: 2 }[o.bestand];
      case 'score': return window.__score(o);
      default: return '';
    }
  };
  const rows = window.sortRows(candidates, sort, acc);
  return (
    <PanelShell title="Fertigungsaufträge" sub={`${candidates.length} gesamt · ${placedN} eingeplant · aufklappbar`} icon="box">
      <div style={{ overflow: 'auto', flex: 1 }}>
        <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 12.5 }}>
          <thead>
            <tr>
              <th style={{ ...window.thStyle }}></th>
              <SortTh label="Auftrag" sortKey="nr" sort={sort} onSort={toggleSort} />
              <SortTh label="Kunde" sortKey="kunde" sort={sort} onSort={toggleSort} />
              <SortTh label="Werkstoff" sortKey="mat" sort={sort} onSort={toggleSort} />
              <SortTh label="Wert" sortKey="wert" sort={sort} onSort={toggleSort} align="right" />
              <SortTh label="Plan-Start" sortKey="planStart" sort={sort} onSort={toggleSort} />
              <SortTh label="Plan-Ende" sortKey="planEnde" sort={sort} onSort={toggleSort} />
              <SortTh label="Rest" sortKey="rest" sort={sort} onSort={toggleSort} align="right" />
              <SortTh label="Schlupf" sortKey="slack" sort={sort} onSort={toggleSort} align="right" />
              <SortTh label="Status / Route" sortKey="status" sort={sort} onSort={toggleSort} />
              <SortTh label="Score" sortKey="score" sort={sort} onSort={toggleSort} align="right" />
            </tr>
          </thead>
          <tbody>
            {rows.map(o => {
              const sel = selected === o.nr;
              const seg = window.CUSTOMERS[o.kunde] || 'C';
              const sc = window.__score(o);
              const slack = window.slackHours(o);
              const pos = posMap[o.nr];
              const placed = pos != null;
              const isOpen = expanded && expanded.has(o.nr);
              return (
                <React.Fragment key={o.nr}>
                <tr onClick={() => onSelect(sel ? null : o.nr)}
                  draggable onDragStart={e => { e.dataTransfer.setData('text/plain', o.nr); e.dataTransfer.effectAllowed = 'move'; }}
                  title={placed ? 'Eingeplant · klicken zum Hervorheben' : 'Hochziehen, um in der Reihenfolge zu fixieren'}
                  style={{ borderBottom: isOpen ? 'none' : '1px solid var(--line)', cursor: 'grab',
                    background: sel ? 'var(--accent)' : placed ? 'color-mix(in oklch, var(--frozen) 22%, transparent)' : 'transparent',
                    boxShadow: sel ? 'inset 3px 0 0 var(--accent-ink)' : 'none', transition: 'background .1s' }}>
                  <td style={{ ...window.td, width: 24, paddingRight: 0, paddingLeft: 8 }}>
                    <button onClick={e => { e.stopPropagation(); onToggleExpand(o.nr); }} title="Arbeitsplan ein-/ausklappen"
                      style={{ width: 18, height: 18, display: 'grid', placeItems: 'center', border: 'none', background: 'transparent', color: 'var(--muted)', cursor: 'pointer' }}>
                      <Icon name="chevron" size={13} style={{ transform: isOpen ? 'rotate(90deg)' : 'none', transition: 'transform .15s' }} />
                    </button>
                  </td>
                  <td style={window.td}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                      {placed && <span style={posPill}>{pos}</span>}
                      <span className="num" style={{ fontFamily: 'var(--mono)', fontWeight: 600 }}>{o.nr}</span>
                    </div>
                  </td>
                  <td style={window.td}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                      <SegBadge seg={seg} />
                      <span style={{ whiteSpace: 'nowrap' }}>{o.kunde}</span>
                    </div>
                  </td>
                  <td style={window.td}><MatChip mat={o.mat} /></td>
                  <td style={window.tdNum}>{fmtEuro(o.wert)}</td>
                  <td style={window.tdNum}>{window.fmtDate(o.planStart, true)}</td>
                  <td style={window.tdNum}>{window.fmtDate(o.planEnde, true)}</td>
                  <td style={window.tdNum} title={`Restarbeit gesamt im Arbeitsplan (${o.arbeitsplan.filter(s => s.status !== 'erledigt').length} offene Vorgänge)`}>{fmtH(o.restGesamtH ?? o.restH)}</td>
                  <td style={{ ...window.tdNum, color: slack <= 2 ? 'var(--bad-ink)' : slack <= 4 ? 'var(--warn-ink)' : 'var(--ink-2)' }}>{fmtH(slack)}</td>
                  <td style={window.td}>
                    {o.bestand === 'route'
                      ? (() => {
                          const transH = window.__transitionH || 0;
                          const arrivalH = o.eta * window.SHIFT_HOURS + transH;
                          return (
                            <span title={`Fertig Vorstufe: ${window.fmtDate(o.eta * window.SHIFT_HOURS, true)}\n+ Min-Übergangszeit: ${transH} h\n= Ankunft am System: ${window.fmtDate(arrivalH, true)}`}
                              style={{ display: 'inline-flex', alignItems: 'center', gap: 5, fontSize: 11.5, color: 'var(--accent-ink)' }}>
                              <Icon name="truck" size={12} /> {o.step}
                              <span style={{ color: 'var(--muted)', fontFamily: 'var(--mono)', fontSize: 10.5 }}>ETA {window.fmtDate(arrivalH, false)}</span>
                              {transH > 0 && <span title="inkl. Min-Übergangszeit" style={{ fontFamily: 'var(--mono)', fontSize: 9, color: 'var(--muted)', border: '1px solid var(--line-2)', borderRadius: 3, padding: '0 3px' }}>+{transH}h</span>}
                            </span>
                          );
                        })()
                      : <StatusPill kind={o.bestand} />}
                  </td>
                  <td style={window.td}><ScoreBadge value={sc} /></td>
                </tr>
                {isOpen && (
                  <tr style={{ borderBottom: '1px solid var(--line)', background: 'var(--surface-2)' }}>
                    <td colSpan={NCOL} style={{ padding: '4px 14px 12px 30px' }}>
                      <Arbeitsplan steps={o.arbeitsplan} currentWs={currentWs} />
                    </td>
                  </tr>
                )}
                </React.Fragment>
              );
            })}
          </tbody>
        </table>
      </div>
    </PanelShell>
  );
}

// Arbeitsplan-Stepper (horizontale Vorgangskette)
const APLAN_STATUS = {
  erledigt: { label: 'erledigt', c: 'var(--good-ink)', bg: 'var(--good)', icon: 'check' },
  'läuft':  { label: 'in Arbeit', c: 'var(--accent-ink)', bg: 'var(--accent)', icon: 'truck' },
  bereit:   { label: 'bereit',   c: 'var(--warn-ink)', bg: 'var(--warn)', icon: 'flag' },
  offen:    { label: 'offen',    c: 'var(--muted)', bg: 'var(--line)', icon: 'clock' },
};
function Arbeitsplan({ steps, currentWs }) {
  return (
    <div>
      <div className="label" style={{ marginBottom: 7 }}>Arbeitsplan · Routing</div>
      <div style={{ display: 'flex', alignItems: 'stretch', gap: 0, flexWrap: 'wrap' }}>
        {steps.map((s, i) => {
          const st = APLAN_STATUS[s.status] || APLAN_STATUS.offen;
          const here = s.wsId && s.wsId === currentWs;
          return (
            <React.Fragment key={i}>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 3, padding: '7px 10px', borderRadius: 7, minWidth: 132,
                background: here ? 'color-mix(in oklch, var(--accent) 24%, var(--surface))' : 'var(--surface)',
                border: '1px solid ' + (here ? 'var(--accent-ink)' : 'var(--line)'),
                boxShadow: here ? 'inset 0 0 0 1px var(--accent-ink)' : 'none' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                  <span className="num" style={{ fontFamily: 'var(--mono)', fontSize: 10.5, fontWeight: 600, color: 'var(--ink-2)' }}>{s.avo}</span>
                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 3, marginLeft: 'auto', fontSize: 9.5, fontWeight: 600,
                    padding: '1px 6px', borderRadius: 99, color: st.c,
                    background: `color-mix(in oklch, ${st.bg} 50%, var(--surface))`, border: `1px solid color-mix(in oklch, ${st.bg} 70%, var(--line))` }}>
                    <Icon name={st.icon} size={9} /> {st.label}
                  </span>
                </div>
                <div style={{ fontSize: 12, fontWeight: 500, color: 'var(--ink)' }}>{s.name}</div>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                  <span style={{ fontSize: 10.5, color: here ? 'var(--accent-ink)' : 'var(--muted)', fontWeight: here ? 600 : 400, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{here ? '» dieses System' : s.wsLabel}</span>
                  <span className="num" style={{ fontFamily: 'var(--mono)', fontSize: 10.5, color: 'var(--muted)' }}>{fmtH(s.dauerH)}</span>
                </div>
              </div>
              {i < steps.length - 1 && <div style={{ alignSelf: 'center', color: 'var(--line-2)', padding: '0 2px' }}><Icon name="chevron" size={13} /></div>}
            </React.Fragment>
          );
        })}
      </div>
    </div>
  );
}

function SegBadge({ seg }) {
  const map = { A: { c: 'var(--good-ink)', b: 'var(--good)' }, B: { c: 'var(--warn-ink)', b: 'var(--warn)' }, C: { c: 'var(--muted)', b: 'var(--line)' } };
  const s = map[seg];
  return <span className="num" style={{ width: 17, height: 17, borderRadius: 4, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 10.5, fontWeight: 700, fontFamily: 'var(--mono)', background: `color-mix(in oklch, ${s.b} 55%, var(--surface))`, color: s.c, border: `1px solid color-mix(in oklch, ${s.b} 70%, var(--line))` }}>{seg}</span>;
}

const posPill = { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', minWidth: 17, height: 17, padding: '0 4px', borderRadius: 4, fontFamily: 'var(--mono)', fontSize: 10.5, fontWeight: 700, background: 'var(--accent-ink)', color: '#fff' };

function PanelShell({ title, sub, icon, children, right }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', minWidth: 0, background: 'var(--panel)', border: '1px solid var(--line)', borderRadius: 8, overflow: 'hidden', boxShadow: 'var(--shadow)' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '10px 14px', borderBottom: '1px solid var(--line)', flex: '0 0 auto' }}>
        <Icon name={icon} size={15} style={{ color: 'var(--ink-2)' }} />
        <span style={{ fontWeight: 600, fontSize: 13.5 }}>{title}</span>
        <span className="label" style={{ marginLeft: 2 }}>{sub}</span>
        <div style={{ marginLeft: 'auto' }}>{right}</div>
      </div>
      {children}
    </div>
  );
}

Object.assign(window, { OperationsTable, OrdersTable, PanelShell, SegBadge, fmtEuro, fmtH, shiftLabel });