// Checklist.jsx — wrapper that combines Daily Checklist log + Template
// editor under a single "Daily Checklist" sidebar item, with a top tab
// bar (mirrors DailyPrepShell).

const ChecklistShell = ({ route, onNavigate, density }) => {
  const tabs = [
    { id: 'checklist',          label: 'Today',     icon: 'check',
      sub: 'What got done today + earlier dates' },
    { id: 'checklist-template', label: 'Template',  icon: 'list',
      sub: 'Groups, items, schedule, reminder cadence' },
  ];
  const active = route === 'checklist-template' ? 'checklist-template' : 'checklist';

  return (
    <div style={{ display: 'flex', flexDirection: 'column', minHeight: '100%' }}>
      {/* Tab bar — same shape as DailyPrep so the two pages feel related */}
      <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>

      <div style={{ flex: 1, minHeight: 0 }}>
        {active === 'checklist'          && <ChecklistLog density={density} />}
        {active === 'checklist-template' && <ChecklistTemplate />}
      </div>
    </div>
  );
};

window.ChecklistShell = ChecklistShell;