// DailyPrep.jsx — wrapper that combines Prep Assignment + Prep Catalog
// under a single "Daily Prep" sidebar item with a top tab bar.

const DailyPrepShell = ({ route, onNavigate, density }) => {
  const tabs = [
    { id: 'prep',         label: 'Assignment', icon: 'clipboard',
      sub: 'Tonight\'s targets, priority and crew' },
    { id: 'prep-catalog', label: 'Catalog',    icon: 'list',
      sub: 'Master list of every prep item' },
  ];
  const active = route === 'prep-catalog' ? 'prep-catalog' : 'prep';

  return (
    <div style={{ display: 'flex', flexDirection: 'column', minHeight: '100%' }}>
      {/* Tab bar */}
      <div style={{
        background: 'var(--bg-page)',
        borderBottom: '1px solid var(--border-2)',
        padding: '0 32px',
        display: 'flex', alignItems: 'flex-end', gap: 4,
        flexShrink: 0,
      }}>
        {tabs.map(t => {
          const on = active === t.id;
          return (
            <button
              key={t.id}
              onClick={() => onNavigate(t.id)}
              style={{
                position: 'relative',
                padding: '14px 4px 12px',
                margin: '0 14px 0 0',
                background: 'transparent',
                border: 'none',
                cursor: 'pointer',
                display: 'inline-flex', alignItems: 'center', gap: 8,
                fontSize: 13.5, fontWeight: on ? 600 : 500,
                letterSpacing: '-0.005em',
                color: on ? 'var(--fg-1)' : 'var(--fg-3)',
                transition: 'color 120ms ease',
              }}
              onMouseEnter={e => { if (!on) e.currentTarget.style.color = 'var(--fg-2)'; }}
              onMouseLeave={e => { if (!on) e.currentTarget.style.color = 'var(--fg-3)'; }}
            >
              <PIcon name={t.icon} size={14} color={on ? 'var(--fg-1)' : 'var(--fg-3)'} />
              {t.label}
              {on && (
                <span style={{
                  position: 'absolute',
                  left: 0, right: 0, bottom: -1,
                  height: 2, background: 'var(--fg-1)',
                  borderRadius: 2,
                }} />
              )}
            </button>
          );
        })}
        <div style={{ flex: 1 }} />
        <div style={{
          paddingBottom: 14,
          fontSize: 11.5, color: 'var(--fg-3)', fontWeight: 500,
        }}>
          {tabs.find(t => t.id === active)?.sub}
        </div>
      </div>

      {/* Content */}
      <div style={{ flex: 1, minHeight: 0 }}>
        {active === 'prep' && <PrepEditor density={density} />}
        {active === 'prep-catalog' && <PrepCatalog />}
      </div>
    </div>
  );
};

window.DailyPrepShell = DailyPrepShell;