// Week Shape — 6 fixed weekly blocks, today highlighted.
// Collapses/expands on click. State in sessionStorage only. No Supabase.

const WEEK_BLOCKS = [
  { id: 'mon',    label: 'MON',     name: 'CEO Hour',         duration: '60 min',        rule: 'Numbers. Pipeline. One structural fix. No clients.',          dayIdx: [1]       },
  { id: 'tth',    label: 'TUE–THU', name: 'Delivery',         duration: '3–4 hrs/day',   rule: 'Deep client work. Email off. Phone silent.',                  dayIdx: [2, 3, 4] },
  { id: 'fri',    label: 'FRI',     name: 'Outreach + Sales', duration: '90 min',        rule: '3 touches. 1 published piece. Follow-ups.',                  dayIdx: [5]       },
  { id: 'sat',    label: 'SAT',     name: 'Simplify',         duration: '30 min',        rule: 'What broke this week? Kill one distraction.',                 dayIdx: [6]       },
  { id: 'sun',    label: 'SUN',     name: 'Numbers + Plan',   duration: '20 min',        rule: 'Money in/out. Runway. Top 3 priorities for the week.',        dayIdx: [0]       },
  { id: 'daily',  label: 'DAILY',   name: 'Shutdown',         duration: '10 min by 6pm', rule: "Tomorrow's 3 tasks. Inbox zero. Close the laptop.",           dayIdx: []        },
];

// Returns 0-4 for the primary segment (matching WEEK_BLOCKS index), -1 for none.
function getTodaySegment() {
  const d = new Date().getDay();
  if (d === 1) return 0;
  if (d >= 2 && d <= 4) return 1;
  if (d === 5) return 2;
  if (d === 6) return 3;
  if (d === 0) return 4;
  return -1;
}

function WeekShape() {
  const initOpen = (() => { try { return sessionStorage.getItem('weekshape-open') === '1'; } catch (e) { return false; } })();
  const [open, setOpen] = React.useState(initOpen);
  const todayIdx = getTodaySegment();

  const toggle = () => {
    const next = !open;
    setOpen(next);
    try { sessionStorage.setItem('weekshape-open', next ? '1' : '0'); } catch (e) {}
  };

  return (
    <div
      role="button"
      tabIndex={0}
      aria-expanded={open}
      aria-label="Week shape — click to expand block details"
      onClick={toggle}
      onKeyDown={e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); toggle(); } }}
      style={{
        background: 'var(--bg-elev)',
        border: '1px solid var(--border)',
        borderRadius: 10,
        cursor: 'pointer',
        userSelect: 'none',
        outline: 'none',
        overflow: 'hidden',
      }}
      onFocus={e => { e.currentTarget.style.boxShadow = 'var(--focus-ring)'; }}
      onBlur={e => { e.currentTarget.style.boxShadow = 'none'; }}
    >
      {/* — collapsed row — */}
      <div style={{
        display: 'flex',
        alignItems: 'stretch',
        minHeight: 36,
        overflowX: 'auto',
      }}>
        {WEEK_BLOCKS.map((b, i) => {
          const isToday = i === todayIdx;
          const isDaily = b.id === 'daily';
          const isPast = !isDaily && i < todayIdx;
          return (
            <div key={b.id} style={{
              flex: 1,
              minWidth: 72,
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
              justifyContent: 'center',
              padding: '5px 8px',
              borderLeft: i > 0 ? '1px solid var(--border)' : 'none',
              opacity: isPast ? 0.4 : 1,
              background: isToday ? 'rgba(122,38,234,0.09)' : 'transparent',
            }}>
              <span style={{
                fontFamily: 'var(--font-mono)',
                fontSize: 9,
                fontWeight: 700,
                letterSpacing: '0.09em',
                textTransform: 'uppercase',
                color: isToday ? '#7c3aed' : 'var(--fg-3)',
                lineHeight: 1.3,
              }}>
                {b.label}
              </span>
              <span style={{
                fontFamily: 'var(--font-mono)',
                fontSize: 10,
                fontWeight: isToday ? 700 : 400,
                color: isToday ? '#7c3aed' : 'var(--fg-2)',
                whiteSpace: 'nowrap',
                overflow: 'hidden',
                textOverflow: 'ellipsis',
                maxWidth: '100%',
                lineHeight: 1.3,
              }}>
                {b.name}
              </span>
            </div>
          );
        })}
        {/* chevron */}
        <div style={{
          display: 'flex',
          alignItems: 'center',
          padding: '0 10px',
          color: 'var(--fg-3)',
          fontSize: 11,
          flexShrink: 0,
          transition: 'transform 200ms var(--ease-standard)',
          transform: open ? 'rotate(180deg)' : 'rotate(0deg)',
        }}>
          ▾
        </div>
      </div>

      {/* — expanded rules row — */}
      {open && (
        <div style={{
          display: 'flex',
          borderTop: '1px solid var(--border)',
          overflowX: 'auto',
        }}>
          {WEEK_BLOCKS.map((b, i) => (
            <div key={b.id} style={{
              flex: 1,
              minWidth: 72,
              padding: '6px 8px 8px',
              borderLeft: i > 0 ? '1px solid var(--border)' : 'none',
            }}>
              <span style={{
                fontFamily: 'var(--font-mono)',
                fontSize: 10,
                fontStyle: 'italic',
                color: 'var(--fg-2)',
                lineHeight: 1.45,
                display: 'block',
              }}>
                {b.rule}
              </span>
              <span style={{
                fontFamily: 'var(--font-mono)',
                fontSize: 9,
                color: 'var(--fg-muted)',
                marginTop: 3,
                display: 'block',
              }}>
                {b.duration}
              </span>
            </div>
          ))}
          <div style={{ width: 30, flexShrink: 0 }} />
        </div>
      )}
    </div>
  );
}

Object.assign(window, { WeekShape });