// v2 — Dark-mode product shell + shared primitives
// Brand tokens for the Norami dark product surface (matches the real app screenshot)

const N2 = {
  // Background layers — very dark, warm neutral (not pure black, not pure green)
  bg:          '#0b0f0d',         // canvas
  bgRaised:    '#121815',         // panels
  bgSidebar:   '#0e1411',         // sidebar
  bgCard:      '#172019',         // raised chat bubble

  // Borders
  border:      'rgba(242,237,228,0.07)',
  borderSoft:  'rgba(242,237,228,0.04)',
  borderStrong:'rgba(242,237,228,0.15)',

  // Foreground
  fg:          '#f2ede4',          // primary text
  fgMuted:     'rgba(242,237,228,0.72)',
  fgSubtle:    'rgba(242,237,228,0.5)',
  fgFaint:     'rgba(242,237,228,0.28)',

  // Brand accents (from Norami system)
  green:       '#0e2a1f',
  greenSoft:   '#17392a',
  greenPill:   'rgba(16,124,65,0.14)',
  greenPillBorder: 'rgba(16,124,65,0.3)',
  greenAccent: '#4ade80',          // pill icon — matches the screenshot's emerald
  gold:        '#b8924a',
  goldSoft:    '#c9a25b',
  cream:       '#f2ede4',

  // Type
  serif:   "'GT Sectra Fine','Times Ten','Iowan Old Style','Times New Roman',Georgia,serif",
  sans:    "'Inter',ui-sans-serif,system-ui,-apple-system,sans-serif",
  mono:    "'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace",
};

// ── Kicker (mono-caps bracket) ─────────────────────────────────────────────
function V2Kicker({ text, x = 96, y = 72, color }) {
  const { progress } = useSprite();
  const t = Easing.easeOutCubic(Math.min(1, progress * 6));
  return (
    <div style={{
      position: 'absolute', left: x, top: y,
      opacity: t,
      transform: `translateY(${(1 - t) * 6}px)`,
      fontFamily: N2.mono,
      fontSize: 15,
      fontWeight: 500,
      letterSpacing: '0.14em',
      textTransform: 'uppercase',
      color: color || N2.fgSubtle,
    }}>
      [ {text} ]
    </div>
  );
}

// ── Product shell (sidebar + main area) ────────────────────────────────────
// Use as the frame for any "inside the app" scene.
function ProductShell({ children, recentsOpacity = 1, highlightIndex = null }) {
  const recents = [
    { group: 'Today', items: [
      'what was ebitda in september',
      'weekly mortality north center',
      'what rules does chapter 7 cite',
      'sales vs target october',
    ]},
    { group: 'Yesterday', items: [
      'avg fcr last 3 months',
      'explain the operating margin',
    ]},
    { group: 'Previous 7 days', items: [
      'farmgate price today',
      'rest period between cycles',
      'bots do u have',
      'hi do you know my name',
    ]},
  ];

  let runningIdx = 0;

  return (
    <div style={{
      position: 'absolute', inset: 0,
      background: N2.bg,
      display: 'flex',
      fontFamily: N2.sans,
    }}>
      {/* Sidebar */}
      <div style={{
        width: 260,
        background: N2.bgSidebar,
        borderRight: `1px solid ${N2.border}`,
        display: 'flex', flexDirection: 'column',
        padding: '20px 0',
        flexShrink: 0,
      }}>
        {/* New chat */}
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          padding: '0 18px', marginBottom: 24,
        }}>
          <div style={{
            display: 'flex', alignItems: 'center', gap: 10,
            fontSize: 14, color: N2.fg, fontWeight: 500,
          }}>
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
              <path d="M7 2v10M2 7h10" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
            </svg>
            New chat
          </div>
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
            <circle cx="6" cy="6" r="3.5" stroke={N2.fgSubtle} strokeWidth="1.5"/>
            <path d="M9 9l3 3" stroke={N2.fgSubtle} strokeWidth="1.5" strokeLinecap="round"/>
          </svg>
        </div>

        {/* Recents — scrollable appearance */}
        <div style={{
          flex: 1,
          overflow: 'hidden',
          opacity: recentsOpacity,
          maskImage: 'linear-gradient(to bottom, black 85%, transparent 100%)',
        }}>
          {recents.map((g) => (
            <div key={g.group} style={{ marginBottom: 18 }}>
              <div style={{
                padding: '0 18px 6px',
                fontFamily: N2.mono,
                fontSize: 10,
                letterSpacing: '0.12em',
                textTransform: 'uppercase',
                color: N2.fgFaint,
              }}>{g.group}</div>
              {g.items.map((item) => {
                const thisIdx = runningIdx++;
                const isHighlight = highlightIndex === thisIdx;
                return (
                  <div key={item} style={{
                    padding: '7px 18px',
                    fontSize: 13,
                    color: isHighlight ? N2.fg : N2.fgMuted,
                    background: isHighlight ? 'rgba(242,237,228,0.05)' : 'transparent',
                    whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
                  }}>{item}</div>
                );
              })}
            </div>
          ))}
        </div>

        {/* User footer */}
        <div style={{
          padding: '12px 14px',
          borderTop: `1px solid ${N2.border}`,
          display: 'flex', alignItems: 'center', gap: 10,
        }}>
          <div style={{
            width: 30, height: 30, borderRadius: '50%',
            background: N2.greenSoft, color: N2.cream,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 12, fontWeight: 600,
            border: `1px solid ${N2.border}`,
          }}>N</div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 12, color: N2.fg, fontWeight: 500 }}>Andres Parodi</div>
            <div style={{
              fontFamily: N2.mono, fontSize: 10, color: N2.fgFaint,
              whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
            }}>andres@earlyshift.ai</div>
          </div>
          <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
            <path d="M2 3l3 3 3-3" stroke={N2.fgSubtle} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </div>
      </div>

      {/* Main */}
      <div style={{ flex: 1, position: 'relative', overflow: 'hidden' }}>
        {children}
      </div>
    </div>
  );
}

// ── Unified assistant pill ────────────────────────────────────────────────
function UnifiedPill({ pulse = false }) {
  const t = useTime();
  const pulseScale = pulse ? 1 + Math.sin(t * 4) * 0.02 : 1;

  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 8,
      padding: '6px 14px',
      background: N2.greenPill,
      border: `1px solid ${N2.greenPillBorder}`,
      borderRadius: 9999,
      fontSize: 13,
      color: N2.cream,
      fontWeight: 500,
      transform: `scale(${pulseScale})`,
      transition: 'transform 200ms',
    }}>
      <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
        <circle cx="4" cy="5" r="1.6" fill={N2.greenAccent}/>
        <circle cx="8" cy="5" r="1.6" fill={N2.greenAccent}/>
        <path d="M3 9c1 1 5 1 6 0" stroke={N2.greenAccent} strokeWidth="1.2" strokeLinecap="round" fill="none"/>
      </svg>
      Unified assistant
    </div>
  );
}

// ── Composer (real product chrome) ─────────────────────────────────────────
function Composer({ text, typing = false, width = 720 }) {
  return (
    <div style={{
      width,
      padding: '16px 20px',
      background: N2.bgRaised,
      border: `1px solid ${N2.border}`,
      borderRadius: 16,
      display: 'flex', flexDirection: 'column', gap: 10,
    }}>
      <div style={{
        minHeight: 24,
        display: 'flex', alignItems: 'center',
        fontSize: 16,
        color: N2.fg,
      }}>
        {text || (
          <span style={{ color: N2.fgFaint }}>Type @ to pick a bot, or ask anything…</span>
        )}
        {typing && (
          <span style={{
            display: 'inline-block',
            width: 2, height: 18,
            background: N2.cream,
            marginLeft: 2,
            verticalAlign: 'text-bottom',
            animation: 'blink 0.8s step-end infinite',
          }} />
        )}
      </div>
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        marginTop: 4,
      }}>
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 6,
          padding: '5px 12px',
          background: 'rgba(242,237,228,0.04)',
          border: `1px solid ${N2.border}`,
          borderRadius: 9999,
          fontSize: 11,
          color: N2.fgSubtle,
        }}>
          <span style={{
            width: 7, height: 7, borderRadius: 4,
            background: N2.greenAccent, display: 'inline-block',
          }}/>
          Type or use the microphone
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <div style={{
            width: 32, height: 32, borderRadius: '50%',
            background: 'transparent',
            border: `1px solid ${N2.border}`,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: N2.fgMuted,
          }}>
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
              <rect x="5" y="2" width="4" height="7" rx="2" stroke="currentColor" strokeWidth="1.3"/>
              <path d="M3 7.5a4 4 0 008 0M7 11.5V13" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round"/>
            </svg>
          </div>
          <div style={{
            width: 32, height: 32, borderRadius: '50%',
            background: text ? N2.cream : 'rgba(242,237,228,0.15)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: text ? N2.bg : N2.fgFaint,
            transition: 'all 200ms',
          }}>
            <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
              <path d="M6 10V2M2 6l4-4 4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { N2, V2Kicker, ProductShell, UnifiedPill, Composer });