function KitchenWorkerScreen({ onBack }) {
  const data = window.KITCHEN_DATA.kitchenWorker;
  const [selectedId, setSelectedId] = React.useState(data.queue[0].id);
  const [statuses, setStatuses] = React.useState(() => {
    const map = {};
    data.queue.forEach(t => { map[t.id] = t.status; });
    return map;
  });

  const selected = data.queue.find(t => t.id === selectedId) || data.queue[0];
  const selectedStatus = statuses[selected.id];

  const setStatus = (id, s) => setStatuses(prev => ({ ...prev, [id]: s }));

  const doneCount = Object.values(statuses).filter(s => s === 'done').length;
  const activeCount = Object.values(statuses).filter(s => s === 'active').length;

  const statusMeta = {
    done:   { label: 'Готово',    bg: '#DCF4E5', fg: '#065724', dot: '#0E7C3A' },
    active: { label: 'В работе',  bg: '#FFE9B8', fg: '#7a5a0f', dot: '#D99500' },
    queue:  { label: 'В очереди', bg: '#f0ece2', fg: '#666',    dot: '#999' },
  };
  const priorityMeta = {
    high: { label: 'Высокий',  fg: '#B8420F' },
    med:  { label: 'Средний',  fg: '#7a5a0f' },
    low:  { label: 'Обычный',  fg: '#555' },
  };

  return (
    <div className="screen-enter" style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column' }}>
      <RoleHeader
        color="kitchen"
        title="Заготовки"
        subtitle={`В работе ${activeCount} · готово ${doneCount} из ${data.queue.length}`}
        onBack={onBack}
      />

      <div style={{ flex: 1, display: 'grid', gridTemplateColumns: '420px 1fr', overflow: 'hidden', background: '#f8f6f2' }}>
        {/* Очередь слева */}
        <div style={{ borderRight: '1px solid #e5e0d5', background: '#fff', overflow: 'auto' }}>
          <div style={{
            padding: '16px 20px',
            fontSize: 14, fontWeight: 700, letterSpacing: 1,
            color: '#666', textTransform: 'uppercase',
            borderBottom: '1px solid #f0ece2',
            position: 'sticky', top: 0, background: '#fff', zIndex: 1,
          }}>Очередь заготовок</div>

          {data.queue.map(task => {
            const isSel = task.id === selected.id;
            const st = statusMeta[statuses[task.id]];
            return (
              <div
                key={task.id}
                onClick={() => setSelectedId(task.id)}
                style={{
                  padding: '16px 20px',
                  borderBottom: '1px solid #f0ece2',
                  borderLeft: isSel ? `6px solid ${ROLE_COLORS.kitchen.main}` : '6px solid transparent',
                  background: isSel ? ROLE_COLORS.kitchen.soft : '#fff',
                  cursor: 'pointer',
                }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 6 }}>
                  <span style={{
                    width: 10, height: 10, borderRadius: 999,
                    background: st.dot, flexShrink: 0,
                  }}></span>
                  <span style={{ fontSize: 13, fontWeight: 700, color: st.fg }}>{st.label}</span>
                  <span style={{ marginLeft: 'auto', fontSize: 13, color: '#888' }}>до {task.deadline}</span>
                </div>
                <div style={{ fontSize: 20, fontWeight: 800, color: '#111' }}>{task.title}</div>
                <div style={{ fontSize: 14, color: '#666', marginTop: 2 }}>{task.action}</div>
                <div style={{ fontSize: 14, color: '#333', marginTop: 6, fontWeight: 600 }}>
                  {task.qty} {task.unit}
                </div>
              </div>
            );
          })}
        </div>

        {/* Деталь справа */}
        <div style={{ overflow: 'auto', padding: 32 }}>
          <div style={{ maxWidth: 900 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
              <Pill bg={statusMeta[selectedStatus].bg} color={statusMeta[selectedStatus].fg} size="lg">
                ● {statusMeta[selectedStatus].label}
              </Pill>
              <Pill bg="#fff6dc" color={priorityMeta[selected.priority].fg} size="lg">
                Приоритет: {priorityMeta[selected.priority].label}
              </Pill>
              <Pill bg={ROLE_COLORS.kitchen.soft} color={ROLE_COLORS.kitchen.dark} size="lg">
                Срок до {selected.deadline}
              </Pill>
            </div>

            <h1 style={{ margin: '0 0 8px', fontSize: 48, fontWeight: 800, color: '#111', letterSpacing: -1 }}>
              {selected.title}
            </h1>
            <p style={{ fontSize: 22, color: '#333', marginTop: 0 }}>{selected.action}</p>

            {/* Цифры */}
            <div style={{
              display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
              gap: 14, margin: '28px 0',
            }}>
              <div style={{ background: '#fff', borderRadius: 14, padding: 20, border: '1px solid #e5e0d5' }}>
                <div style={{ fontSize: 13, color: '#888', fontWeight: 700, textTransform: 'uppercase', letterSpacing: 1 }}>Количество</div>
                <div style={{ fontSize: 44, fontWeight: 800, color: '#111', lineHeight: 1.1 }}>
                  {selected.qty}<span style={{ fontSize: 22, color: '#666', fontWeight: 600 }}> {selected.unit}</span>
                </div>
              </div>
              <div style={{ background: '#fff', borderRadius: 14, padding: 20, border: '1px solid #e5e0d5' }}>
                <div style={{ fontSize: 13, color: '#888', fontWeight: 700, textTransform: 'uppercase', letterSpacing: 1 }}>Размер / нарезка</div>
                <div style={{ fontSize: 22, fontWeight: 700, color: '#222', marginTop: 12 }}>{selected.cut}</div>
              </div>
              <div style={{ background: '#fff', borderRadius: 14, padding: 20, border: '1px solid #e5e0d5' }}>
                <div style={{ fontSize: 13, color: '#888', fontWeight: 700, textTransform: 'uppercase', letterSpacing: 1 }}>Идёт на блюдо</div>
                <div style={{ fontSize: 16, color: '#222', marginTop: 10, lineHeight: 1.4, fontWeight: 600 }}>{selected.forDish}</div>
              </div>
            </div>

            {/* Примечания */}
            <div style={{
              background: '#fffbea', border: '1px solid #f2e3a6',
              borderRadius: 14, padding: 20, marginBottom: 28,
            }}>
              <div style={{
                fontSize: 14, fontWeight: 700, letterSpacing: 1,
                color: '#7a5a0f', textTransform: 'uppercase', marginBottom: 10,
              }}>⚠ Важно</div>
              <ul style={{ margin: 0, paddingLeft: 22, color: '#333', fontSize: 17, lineHeight: 1.7 }}>
                {selected.notes.map((n, i) => <li key={i}>{n}</li>)}
              </ul>
            </div>

            {/* Действия */}
            <div style={{ display: 'flex', gap: 12 }}>
              {selectedStatus !== 'active' && (
                <button
                  onClick={() => setStatus(selected.id, 'active')}
                  style={{
                    padding: '16px 28px', flex: 1,
                    background: '#D99500', color: '#fff',
                    border: 'none', borderRadius: 12,
                    fontSize: 18, fontWeight: 700, cursor: 'pointer',
                    fontFamily: 'inherit',
                  }}>▶ Взять в работу</button>
              )}
              {selectedStatus !== 'done' && (
                <button
                  onClick={() => setStatus(selected.id, 'done')}
                  style={{
                    padding: '16px 28px', flex: 1,
                    background: '#0E7C3A', color: '#fff',
                    border: 'none', borderRadius: 12,
                    fontSize: 18, fontWeight: 700, cursor: 'pointer',
                    fontFamily: 'inherit',
                  }}>✓ Отметить готовым</button>
              )}
              {selectedStatus === 'done' && (
                <button
                  onClick={() => setStatus(selected.id, 'queue')}
                  style={{
                    padding: '16px 28px', flex: 1,
                    background: '#fff', color: '#666',
                    border: '2px solid #ccc', borderRadius: 12,
                    fontSize: 18, fontWeight: 700, cursor: 'pointer',
                    fontFamily: 'inherit',
                  }}>↺ Вернуть в очередь</button>
              )}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { KitchenWorkerScreen });