// Compass — shows today's active work block + decision rules from MC Operating Manual.
// Collapses to a thin strip. Keeps MC anchored to her own operating system.

const WEEKLY_BLOCKS = {
  1: { day: 'Monday',    name: 'CEO Hour',         duration: '60 min',  focus: 'Numbers. Pipeline. One structural fix. No clients.',    accent: '#6366f1' },
  2: { day: 'Tuesday',   name: 'Delivery Block',   duration: '3–4 hrs', focus: 'Deep client work. Email off. Phone silent.',            accent: '#059669' },
  3: { day: 'Wednesday', name: 'Delivery Block',   duration: '3–4 hrs', focus: 'Deep client work. Email off. Phone silent.',            accent: '#059669' },
  4: { day: 'Thursday',  name: 'Delivery Block',   duration: '3–4 hrs', focus: 'Deep client work. Email off. Phone silent.',            accent: '#059669' },
  5: { day: 'Friday',    name: 'Outreach + Sales', duration: '90 min',  focus: '3 touches. 1 published piece. Follow-ups.',            accent: '#d97706' },
  6: { day: 'Saturday',  name: 'Simplify',         duration: '30 min',  focus: 'What broke this week? Kill one distraction.',          accent: '#7c3aed' },
  0: { day: 'Sunday',    name: 'Numbers + Plan',   duration: '20 min',  focus: 'Money in/out. Runway. Top 3 priorities for next week.', accent: '#2563eb' },
};

const DECISION_RULES = [
  "If it isn't structured, it doesn't scale — refuse the work.",
  "If a client wants symptoms fixed without diagnosis — decline or re-scope.",
  "If saying yes breaks the 8-week pipeline buffer — say no.",
  "If it can be templated, automated, or delegated — it must be, before next quarter.",
  "If the answer isn't in the data — get the data before deciding.",
  "If chaos feels productive, the structure has failed — stop and rebuild.",
];

const NON_NEGOTIABLES = [
  "optimer is always lowercase. optimerAcademy is one word, capital A.",
  "Diagnostic before deliverable. Always.",
  "No invented information — if unknown, say so.",
  "Direct communication, even when uncomfortable. Diplomacy is not dilution.",
  "5 full days off, twice a year minimum. Business must run without me.",
  '"Not now" is a complete sentence.',
];

function Compass() {
  const [open, setOpen] = React.useState(false);
  const [tab, setTab] = React.useState('block');
  const day = new Date().getDay();
  const block = WEEKLY_BLOCKS[day];

  const stripStyle = {
    display: 'flex', alignItems: 'center', gap: 12,
    padding: '8px 20px', cursor: 'pointer',
    background: 'var(--surface)', borderBottom: '1px solid var(--border)',
    fontFamily: 'var(--font-mono)', fontSize: 12,
    userSelect: 'none',
  };

  const bodyStyle = {
    background: 'var(--surface)', borderBottom: '1px solid var(--border)',
    padding: '0 20px 16px',
    fontFamily: 'var(--font-mono)', fontSize: 12,
  };

  const tabsStyle = {
    display: 'flex', gap: 2, marginBottom: 14, paddingTop: 12,
    borderBottom: '1px solid var(--border)', paddingBottom: 10,
  };

  const tabBtn = (k, label) => ({
    padding: '4px 12px', borderRadius: 6, border: 'none', cursor: 'pointer',
    fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 600,
    background: tab === k ? block.accent : 'transparent',
    color: tab === k ? '#fff' : 'var(--fg-muted)',
    transition: 'all .15s',
  });

  return (
    <div style={{ margin: '0 0 12px', borderRadius: 12, overflow: 'hidden', border: '1px solid var(--border)' }}>
      {/* Strip — always visible */}
      <div style={stripStyle} onClick={() => setOpen(o => !o)}>
        <span style={{
          width: 8, height: 8, borderRadius: '50%', flexShrink: 0,
          background: block.accent, boxShadow: `0 0 6px ${block.accent}88`,
        }}/>
        <span style={{ fontWeight: 700, color: 'var(--fg)', whiteSpace: 'nowrap' }}>
          {block.day} · {block.name}
        </span>
        <span style={{ color: 'var(--fg-muted)', flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
          {block.focus}
        </span>
        <span style={{ color: 'var(--fg-muted)', fontSize: 10, marginLeft: 8 }}>
          {block.duration}
        </span>
        <span style={{ color: 'var(--fg-muted)', fontSize: 10, marginLeft: 12, flexShrink: 0 }}>
          {open ? '▲ compass' : '▼ compass'}
        </span>
      </div>

      {/* Expandable body */}
      {open && (
        <div style={bodyStyle}>
          <div style={tabsStyle}>
            {[['block', "Today's block"], ['rules', 'Decision rules'], ['nonneg', 'Non-negotiables']].map(([k, lbl]) => (
              <button key={k} style={tabBtn(k, lbl)} onClick={() => setTab(k)}>{lbl}</button>
            ))}
          </div>

          {tab === 'block' && (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 12 }}>
                <span style={{ fontSize: 18, fontFamily: 'var(--font-serif)', fontWeight: 700, color: block.accent }}>
                  {block.name}
                </span>
                <span style={{ color: 'var(--fg-muted)', fontSize: 11 }}>{block.duration}</span>
              </div>
              <div style={{ color: 'var(--fg)', lineHeight: 1.7, fontSize: 13 }}>{block.focus}</div>
              {day === 0 && (
                <div style={{ marginTop: 4, padding: '8px 12px', borderRadius: 8,
                  background: `${block.accent}18`, color: block.accent, fontSize: 11, fontWeight: 600 }}>
                  📊 Sunday planning mode — use Forward Queue to park next week's items, then activate them.
                </div>
              )}
              {day === 1 && (
                <div style={{ marginTop: 4, padding: '8px 12px', borderRadius: 8,
                  background: `${block.accent}18`, color: block.accent, fontSize: 11, fontWeight: 600 }}>
                  🎯 CEO Hour: check money, pipeline, and fix one structural thing before any client contact.
                </div>
              )}
            </div>
          )}

          {tab === 'rules' && (
            <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 8 }}>
              {DECISION_RULES.map((r, i) => (
                <li key={i} style={{ display: 'flex', gap: 10, alignItems: 'flex-start', lineHeight: 1.6, color: 'var(--fg)' }}>
                  <span style={{
                    flexShrink: 0, marginTop: 2, padding: '1px 6px', borderRadius: 4,
                    background: `${block.accent}22`, color: block.accent,
                    fontSize: 10, fontWeight: 700, textTransform: 'uppercase',
                  }}>if</span>
                  <span>{r}</span>
                </li>
              ))}
            </ul>
          )}

          {tab === 'nonneg' && (
            <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 8 }}>
              {NON_NEGOTIABLES.map((n, i) => (
                <li key={i} style={{ display: 'flex', gap: 10, alignItems: 'flex-start', lineHeight: 1.6, color: 'var(--fg)' }}>
                  <span style={{ color: block.accent, fontWeight: 700, flexShrink: 0 }}>—</span>
                  <span>{n}</span>
                </li>
              ))}
            </ul>
          )}
        </div>
      )}
    </div>
  );
}

Object.assign(window, { Compass });