function StorekeeperScreen({ onBack }) {
  useKitchenStore();
  const data = window.KITCHEN_DATA.storekeeper;
  const [activeDay, setActiveDay] = React.useState("d0");
  const [issued, setIssued] = React.useState(() => new Set());

  const toggle = (key) => setIssued(prev => {
    const next = new Set(prev);
    if (next.has(key)) next.delete(key); else next.add(key);
    return next;
  });

  const allKeys = data.groups.flatMap(g => g.items.map(i => `${activeDay}-${g.id}-${i.name}`));
  const doneCount = allKeys.filter(k => issued.has(k)).length;

  return (
    <div className="screen-enter" style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column' }}>
      <RoleHeader
        color="store"
        title="Выдача продуктов"
        subtitle={`Выдано ${doneCount} из ${allKeys.length} позиций`}
        onBack={onBack}
      />

      {/* Дни недели */}
      <div style={{
        display: 'flex', gap: 6, padding: '16px 32px',
        background: '#fff', borderBottom: '1px solid #e5e5e5', flexShrink: 0,
      }}>
        {data.days.map(day => {
          const isActive = activeDay === day.id;
          return (
            <button
              key={day.id}
              onClick={() => setActiveDay(day.id)}
              style={{
                flex: 1,
                padding: '14px 8px',
                background: isActive ? ROLE_COLORS.store.main : day.active ? ROLE_COLORS.store.soft : '#f5f7fa',
                color: isActive ? '#fff' : day.active ? ROLE_COLORS.store.dark : '#444',
                border: isActive ? 'none' : `2px solid ${day.active ? ROLE_COLORS.store.main : 'transparent'}`,
                borderRadius: 12,
                fontSize: 16, fontWeight: 700, cursor: 'pointer',
                fontFamily: 'inherit',
                display: 'flex', flexDirection: 'column', gap: 2, alignItems: 'center',
              }}>
              <span style={{ fontSize: 13, fontWeight: 600, opacity: 0.8 }}>{day.short}</span>
              <span style={{ fontSize: 18 }}>{day.label}</span>
              <span style={{ fontSize: 13, opacity: 0.7 }}>{day.date}</span>
            </button>
          );
        })}
      </div>

      {/* Продукты */}
      <div style={{ flex: 1, overflow: 'auto', padding: 24, background: '#f8f6f2' }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(2, 1fr)',
          gap: 20,
        }}>
          {data.groups.map(g => (
            <div key={g.id} style={{
              background: '#fff', borderRadius: 16,
              border: '1px solid #e5e0d5',
              overflow: 'hidden',
            }}>
              <div style={{
                padding: '14px 20px',
                background: g.color, color: '#fff',
                fontSize: 18, fontWeight: 700,
                display: 'flex', justifyContent: 'space-between', alignItems: 'center',
              }}>
                <span>{g.label}</span>
                <span style={{ fontSize: 14, opacity: 0.85 }}>{g.items.length} поз.</span>
              </div>
              <div>
                {g.items.map((item, i) => {
                  const key = `${activeDay}-${g.id}-${item.name}`;
                  const isDone = issued.has(key);
                  const hl = window.KITCHEN_STORE.getHighlight(`store:${g.id}:${item.name}`);
                  return (
                    <div
                      key={i}
                      onClick={() => toggle(key)}
                      className={hl ? 'flash-cell' : ''}
                      style={{
                        display: 'flex', alignItems: 'center', gap: 14,
                        padding: '12px 20px',
                        borderTop: i === 0 ? 'none' : '1px solid #f0ece2',
                        cursor: 'pointer',
                        background: isDone ? '#f3f7f0' : '#fff',
                        position: 'relative',
                      }}>
                      <ChangeBadge highlight={hl} />
                      <div style={{
                        width: 28, height: 28, borderRadius: 8,
                        border: `2px solid ${isDone ? '#0E7C3A' : '#ccc'}`,
                        background: isDone ? '#0E7C3A' : '#fff',
                        display: 'grid', placeItems: 'center',
                        color: '#fff', fontSize: 18, fontWeight: 800,
                        flexShrink: 0,
                      }}>{isDone && '✓'}</div>
                      <div style={{ flex: 1, minWidth: 0 }}>
                        <div style={{
                          fontSize: 17, fontWeight: 600, color: '#111',
                          textDecoration: isDone ? 'line-through' : 'none',
                        }}>{item.name}</div>
                        {item.note && <div style={{ fontSize: 13, color: '#888', marginTop: 2 }}>{item.note}</div>}
                      </div>
                      <div style={{ textAlign: 'right' }}>
                        <div style={{ fontSize: 22, fontWeight: 800, color: '#111' }}>{item.qty}</div>
                        <div style={{ fontSize: 13, color: '#888' }}>{item.unit}</div>
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { StorekeeperScreen });