// Shared tokens and tiny primitives reused across module pages.
// Keeps each page file small and consistent.

const C = {
  // V2 Copilot Console palette (cool, dense)
  bg: '#f6f7f9',
  panel: '#ffffff',
  ink: '#0f172a',
  ink2: '#475569',
  ink3: '#94a3b8',
  ink4: '#cbd5e1',
  line: '#e4e8ee',
  line2: '#f0f2f6',
  blue: '#2563eb',
  blueDeep: '#1d4ed8',
  blueSoft: '#eef3ff',
  indigo: '#4f46e5',
  mint: '#059669',
  mintSoft: '#ecfdf5',
  amber: '#d97706',
  amberSoft: '#fef3c7',
  red: '#dc2626',
  redSoft: '#fee2e2',
  sans: '"Inter Tight", -apple-system, BlinkMacSystemFont, sans-serif',
  mono: '"JetBrains Mono", ui-monospace, monospace',
  serif: '"Instrument Serif", Georgia, serif',
};

// Shared sidebar used by V2-style module pages.
function CSidebar({ active }) {
  const items = [
    { g: null, rows: [
      ['Home', '◈'], ['Projects', '▤'], ['Schedule', '◷'], ['Inbox', '✉'],
    ]},
    { g: 'Operate', rows: [
      ['Accounting', '$'], ['Invoices', '▦'], ['Budgets', '◧'], ['Purchasing', '⌘'],
    ]},
    { g: 'Field', rows: [
      ['Crew', '⚇'], ['Materials', '▢'], ['Daily logs', '◉'], ['Safety', '◐'],
    ]},
    { g: 'Records', rows: [
      ['Documents', '▭'], ['RFIs', '◇'], ['Contracts', '⎔'], ['Client portal', '☗'],
    ]},
  ];
  return (
    <div style={{
      background: C.panel, borderRight: `1px solid ${C.line}`,
      display: 'flex', flexDirection: 'column', padding: '14px 10px 12px',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '6px 8px 14px' }}>
        <div style={{
          width: 26, height: 26, background: C.ink, color: '#fff', borderRadius: 6,
          display: 'grid', placeItems: 'center', fontFamily: C.mono, fontSize: 13, fontWeight: 600,
        }}>C</div>
        <div>
          <div style={{ fontWeight: 600, fontSize: 13 }}>Ridgeline Dev.</div>
          <div style={{ fontSize: 11, color: C.ink3 }}>GC · Portland ME</div>
        </div>
      </div>
      <div style={{
        margin: '0 4px 14px', padding: '8px 10px', border: `1px solid ${C.line}`,
        borderRadius: 6, display: 'flex', alignItems: 'center', gap: 8,
        fontSize: 12, color: C.ink3,
      }}>
        <span>⌕</span> Search…
        <span style={{ marginLeft: 'auto', fontFamily: C.mono, fontSize: 10, background: C.line2, padding: '1px 4px', borderRadius: 3 }}>⌘K</span>
      </div>
      {items.map((s, si) => (
        <div key={si} style={{ marginBottom: 4 }}>
          {s.g && (
            <div style={{ fontSize: 10, letterSpacing: '0.08em', color: C.ink3, textTransform: 'uppercase', padding: '10px 12px 6px', fontWeight: 500 }}>
              {s.g}
            </div>
          )}
          {s.rows.map(([n, icn]) => {
            const on = n === active;
            return (
              <div key={n} style={{
                display: 'flex', alignItems: 'center', gap: 10, padding: '6px 10px',
                margin: '1px 0', borderRadius: 5,
                background: on ? C.blueSoft : 'transparent',
                color: on ? C.blueDeep : C.ink2,
                fontWeight: on ? 500 : 400, fontSize: 13,
              }}>
                <span style={{ width: 18, textAlign: 'center', color: on ? C.blue : C.ink3 }}>{icn}</span>
                <span>{n}</span>
              </div>
            );
          })}
        </div>
      ))}
      <div style={{ marginTop: 'auto', padding: '8px 10px', fontSize: 11, color: C.ink3, display: 'flex', alignItems: 'center', gap: 8 }}>
        <div style={{ width: 20, height: 20, borderRadius: '50%', background: '#cbb79a', color: C.ink, display: 'grid', placeItems: 'center', fontSize: 10, fontWeight: 600 }}>MR</div>
        Marcus Reyes
      </div>
    </div>
  );
}

// Page header: crumb + title + actions
function CHead({ crumb, title, sub, right }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'flex-end', gap: 16, padding: '20px 24px 16px',
      borderBottom: `1px solid ${C.line}`, background: C.panel,
    }}>
      <div style={{ flex: 1 }}>
        <div style={{ fontSize: 11, color: C.ink3, letterSpacing: '0.04em', textTransform: 'uppercase', fontWeight: 500, marginBottom: 4 }}>
          {crumb}
        </div>
        <div style={{ fontSize: 22, fontWeight: 600, letterSpacing: '-0.02em' }}>{title}</div>
        {sub && <div style={{ fontSize: 12, color: C.ink2, marginTop: 4 }}>{sub}</div>}
      </div>
      {right}
    </div>
  );
}

function CPill({ children, tone = 'default' }) {
  const toneMap = {
    default: { bg: C.line2, fg: C.ink2 },
    mint:    { bg: C.mintSoft, fg: C.mint },
    amber:   { bg: C.amberSoft, fg: C.amber },
    red:     { bg: C.redSoft, fg: C.red },
    blue:    { bg: C.blueSoft, fg: C.blueDeep },
  };
  const t = toneMap[tone];
  return (
    <span style={{
      padding: '2px 8px', borderRadius: 10, fontSize: 10, fontWeight: 500,
      background: t.bg, color: t.fg, whiteSpace: 'nowrap',
    }}>{children}</span>
  );
}

function CButton({ children, primary, icon }) {
  return (
    <div style={{
      padding: '6px 12px', borderRadius: 6, fontSize: 12, fontWeight: 500,
      background: primary ? C.ink : C.panel,
      color: primary ? '#fff' : C.ink,
      border: primary ? 'none' : `1px solid ${C.line}`,
      display: 'inline-flex', alignItems: 'center', gap: 6, cursor: 'default',
    }}>
      {icon && <span style={{ fontSize: 13 }}>{icon}</span>}
      {children}
    </div>
  );
}

Object.assign(window, { C, CSidebar, CHead, CPill, CButton });