// MissionChef — Dienstplan + Schicht-Tausch

function RosterScreen({ Topbar }) {
  const store = useStore();
  const [weekOffset, setWeekOffset] = React.useState(0);
  const [selectedShift, setSelectedShift] = React.useState(null);

  const monday = new Date();
  monday.setDate(monday.getDate() - ((monday.getDay() + 6) % 7) + weekOffset * 7);
  monday.setHours(0,0,0,0);
  const days = Array.from({ length: 7 }, (_, i) => new Date(monday.getTime() + i * 86400000));

  const shiftsByDay = (d) => store.shifts.filter(s => new Date(s.start).toDateString() === d.toDateString());

  const tradeShift = async (sid) => {
    await mcApi.patch(`/shifts/${sid}`, { status: 'trade-open' });
  };
  const acceptTrade = async (sid, newUid) => {
    await mcApi.patch(`/shifts/${sid}`, { uid: newUid, status: 'confirmed' });
    setSelectedShift(null);
  };

  const selected = selectedShift && store.shifts.find(s => s.id === selectedShift);
  const selectedStaff = selected && store.staff.find(u => u.id === selected.uid);

  const totalHours = store.shifts.reduce((s, x) => s + (new Date(x.end) - new Date(x.start))/3600000, 0);

  return (
    <>
      <Topbar
        title="Dienstplan"
        subtitle={`Woche ${fmtDATE(days[0])} — ${fmtDATE(days[6])} · ${Math.round(totalHours)}h geplant`}
        actions={
          <div style={{ display: 'flex', gap: 8 }}>
            <button className="mc-btn ghost sm" onClick={() => setWeekOffset(o => o - 1)}><McIcon2 name="back" size={14} /></button>
            <button className="mc-btn ghost sm" onClick={() => setWeekOffset(0)}>Heute</button>
            <button className="mc-btn ghost sm" onClick={() => setWeekOffset(o => o + 1)}><McIcon2 name="arrow" size={14} /></button>
          </div>
        }
      />
      <div style={{ flex: 1, display: 'flex', overflow: 'hidden' }}>
        <div className="mc-scroll" style={{ flex: 1, overflow: 'auto', padding: 24 }}>
          <div style={{ display: 'grid', gridTemplateColumns: '120px repeat(7, 1fr)', gap: 1, background: 'var(--mc-rule)', border: '1px solid var(--mc-rule)' }}>
            <div style={{ background: 'var(--mc-surface)', padding: 12 }}>
              <div className="mc-eyebrow">Mitarbeiter</div>
            </div>
            {days.map(d => (
              <div key={d} style={{ background: 'var(--mc-surface)', padding: 12, textAlign: 'center' }}>
                <div className="mc-eyebrow">{fmtWEEKDAY(d)}</div>
                <div style={{ fontSize: 16, fontWeight: 500, marginTop: 4 }}>{d.getDate()}.</div>
              </div>
            ))}

            {store.staff.filter(u => u.area !== 'Management').map(u => (
              <React.Fragment key={u.id}>
                <div style={{ background: 'var(--mc-surface)', padding: 12, display: 'flex', alignItems: 'center', gap: 10 }}>
                  <div style={{ width: 28, height: 28, background: u.color, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, fontWeight: 600 }}>
                    {u.name.split(' ').map(n=>n[0]).join('')}
                  </div>
                  <div style={{ minWidth: 0 }}>
                    <div style={{ fontSize: 12, fontWeight: 500, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{u.name.split(' ')[0]}</div>
                    <div style={{ fontSize: 10, color: 'var(--mc-ink-dim)' }}>{u.role.slice(0, 12)}</div>
                  </div>
                </div>
                {days.map(d => {
                  const s = shiftsByDay(d).find(x => x.uid === u.id);
                  return (
                    <div key={d} style={{ background: 'var(--mc-surface)', padding: 6, minHeight: 56, position: 'relative' }}>
                      {s && (
                        <div onClick={() => setSelectedShift(s.id)} style={{
                          background: s.status === 'trade-open' ? 'color-mix(in oklab, var(--mc-ember) 20%, var(--mc-surface))' : `color-mix(in oklab, ${u.color} 22%, var(--mc-surface))`,
                          borderLeft: `3px solid ${s.status === 'trade-open' ? 'var(--mc-ember)' : u.color}`,
                          padding: '6px 8px', cursor: 'pointer',
                        }}>
                          <div className="mc-mono" style={{ fontSize: 11, fontWeight: 500 }}>
                            {fmtTIME(new Date(s.start))}–{fmtTIME(new Date(s.end))}
                          </div>
                          <div style={{ fontSize: 10, color: 'var(--mc-ink-dim)', marginTop: 2 }}>
                            {s.status === 'trade-open' ? '↔ Tausch offen' : s.area}
                          </div>
                        </div>
                      )}
                    </div>
                  );
                })}
              </React.Fragment>
            ))}
          </div>

          <div style={{ marginTop: 20, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
            <div className="mc-card" style={{ padding: 18 }}>
              <div className="mc-eyebrow">Gesamtstunden</div>
              <div className="mc-num" style={{ fontSize: 28, fontWeight: 500, marginTop: 6 }}>{Math.round(totalHours)}h</div>
            </div>
            <div className="mc-card" style={{ padding: 18 }}>
              <div className="mc-eyebrow">Lohnkosten Woche</div>
              <div className="mc-num" style={{ fontSize: 28, fontWeight: 500, marginTop: 6 }}>
                {fmtEUR(store.shifts.reduce((acc, s) => {
                  const hrs = (new Date(s.end) - new Date(s.start))/3600000;
                  const u = store.staff.find(x => x.id === s.uid);
                  return acc + hrs * (u?.wage || 0);
                }, 0))}
              </div>
            </div>
            <div className="mc-card" style={{ padding: 18 }}>
              <div className="mc-eyebrow">Offene Tauschanfragen</div>
              <div className="mc-num" style={{ fontSize: 28, fontWeight: 500, marginTop: 6, color: 'var(--mc-ember-700)' }}>
                {store.shifts.filter(s => s.status === 'trade-open').length}
              </div>
            </div>
          </div>
        </div>

        {selected && (
          <div style={{ width: 320, borderLeft: '1px solid var(--mc-rule)', background: 'var(--mc-surface)', padding: 24 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
              <div className="mc-eyebrow">Schicht</div>
              <button onClick={() => setSelectedShift(null)} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--mc-ink-dim)' }}><McIcon2 name="x" size={14} /></button>
            </div>
            <div style={{ fontSize: 20, fontWeight: 500, marginTop: 10 }}>{selectedStaff?.name}</div>
            <div className="mc-mono" style={{ fontSize: 13, color: 'var(--mc-leaf-700)', marginTop: 4 }}>
              {fmtTIME(new Date(selected.start))}–{fmtTIME(new Date(selected.end))}
            </div>
            <div style={{ fontSize: 12, color: 'var(--mc-ink-dim)', marginTop: 4 }}>
              {fmtDATE(new Date(selected.start))} · {selected.area}
            </div>

            {selected.status === 'trade-open' ? (
              <div style={{ marginTop: 20 }}>
                <div className="mc-eyebrow" style={{ marginBottom: 10 }}>Jemand der übernehmen kann</div>
                {store.staff.filter(u => u.area === selected.area && u.id !== selected.uid).slice(0,3).map(u => (
                  <div key={u.id} style={{ padding: 10, border: '1px solid var(--mc-rule)', marginBottom: 8, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                    <div>
                      <div style={{ fontSize: 13, fontWeight: 500 }}>{u.name}</div>
                      <div style={{ fontSize: 11, color: 'var(--mc-ink-dim)' }}>{u.role}</div>
                    </div>
                    <button className="mc-btn leaf sm" onClick={() => acceptTrade(selected.id, u.id)}>Annehmen</button>
                  </div>
                ))}
              </div>
            ) : (
              <button className="mc-btn ember" style={{ marginTop: 20, width: '100%' }} onClick={() => tradeShift(selected.id)}>
                <McIcon2 name="swap" size={14} />Tausch anbieten
              </button>
            )}
          </div>
        )}
      </div>
    </>
  );
}

Object.assign(window, { RosterScreen });