// Sketch primitives — hand-drawn-ish wireframe building blocks.
// Exports to window for cross-file consumption.

const sketchInk = '#1a1a1a';
const sketchInkSoft = '#5a5a5a';
const sketchPaper = '#fdfbf3';

// Slight irregularity helper — different border-radius per corner for hand-drawn feel
const hand = (seed = 1) => {
  const r = (s) => 6 + ((Math.sin(s * 99.7) + 1) * 4);
  return `${r(seed)}px ${r(seed+1)}px ${r(seed+2)}px ${r(seed+3)}px / ${r(seed+4)}px ${r(seed+5)}px ${r(seed+6)}px ${r(seed+7)}px`;
};

// Frame — outer artboard chrome (browser-window-ish)
function SkFrame({ children, title, accent = '#f4c54a', subtitle, style }) {
  return (
    <div style={{
      width: '100%', height: '100%',
      background: sketchPaper,
      fontFamily: '"Architects Daughter", "Patrick Hand", cursive',
      color: sketchInk,
      display: 'flex', flexDirection: 'column',
      overflow: 'hidden',
      ...style,
    }}>
      {/* browser-window bar */}
      <div style={{
        display: 'flex', alignItems: 'center', gap: 8,
        padding: '8px 12px',
        borderBottom: `1.5px solid ${sketchInk}`,
        background: '#fff8e1',
        flex: 'none',
      }}>
        <div style={{ display: 'flex', gap: 5 }}>
          <span style={{ width: 9, height: 9, border: `1.2px solid ${sketchInk}`, borderRadius: '50%' }}/>
          <span style={{ width: 9, height: 9, border: `1.2px solid ${sketchInk}`, borderRadius: '50%' }}/>
          <span style={{ width: 9, height: 9, border: `1.2px solid ${sketchInk}`, borderRadius: '50%' }}/>
        </div>
        <div style={{
          flex: 1, marginLeft: 8,
          fontSize: 13, fontFamily: '"Architects Daughter", cursive',
          color: sketchInkSoft,
          display: 'flex', alignItems: 'center', gap: 6,
        }}>
          <span style={{ fontWeight: 700, color: sketchInk }}>{title}</span>
          {subtitle && <><span>·</span><span>{subtitle}</span></>}
        </div>
        <div style={{
          padding: '2px 8px',
          background: accent,
          border: `1.2px solid ${sketchInk}`,
          borderRadius: hand(1),
          fontSize: 11, fontWeight: 700,
        }}>method8.app</div>
      </div>
      <div style={{ flex: 1, minHeight: 0, position: 'relative', overflow: 'hidden' }}>
        {children}
      </div>
    </div>
  );
}

// Box — generic hand-drawn box
function SkBox({ children, style, dashed, filled, seed = 1, ...rest }) {
  return (
    <div style={{
      border: `${dashed ? '1.4px dashed' : '1.5px solid'} ${sketchInk}`,
      borderRadius: hand(seed),
      background: filled || 'transparent',
      padding: 8,
      fontSize: 13,
      lineHeight: 1.15,
      ...style,
    }} {...rest}>
      {children}
    </div>
  );
}

// Pill — small label
function SkPill({ children, accent, style }) {
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center',
      padding: '1px 8px',
      border: `1.3px solid ${sketchInk}`,
      borderRadius: 99,
      background: accent || '#fff',
      fontSize: 11, fontWeight: 700,
      ...style,
    }}>{children}</span>
  );
}

// Button — sketchy button
function SkBtn({ children, primary, accent, style }) {
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      padding: '4px 10px',
      border: `1.5px solid ${sketchInk}`,
      borderRadius: hand(2),
      background: primary ? (accent || sketchInk) : '#fff',
      color: primary ? '#fff' : sketchInk,
      fontSize: 12, fontWeight: 700,
      boxShadow: primary ? `2px 2px 0 ${sketchInk}` : 'none',
      ...style,
    }}>{children}</span>
  );
}

// Wavy/squiggle line (text placeholder)
function SkLine({ width = '100%', short, style }) {
  const w = short ? '60%' : width;
  return (
    <div style={{
      width: w, height: 4,
      background: `repeating-linear-gradient(90deg, ${sketchInkSoft} 0 2px, transparent 2px 4px)`,
      borderRadius: 2,
      margin: '4px 0',
      ...style,
    }}/>
  );
}

// Multi-line placeholder text
function SkLines({ count = 3, style }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 5, ...style }}>
      {Array.from({ length: count }).map((_, i) => (
        <SkLine key={i} short={i === count - 1}/>
      ))}
    </div>
  );
}

// Avatar — circle with initial
function SkAvatar({ initial = '·', size = 22, accent, style }) {
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      width: size, height: size,
      border: `1.4px solid ${sketchInk}`,
      borderRadius: '50%',
      background: accent || '#fff',
      fontSize: size * 0.5, fontWeight: 700,
      ...style,
    }}>{initial}</span>
  );
}

// Arrow — used to draw connections
function SkArrow({ from, to, label, color }) {
  // from / to: { x, y } in % of container
  const ink = color || sketchInk;
  const dx = to.x - from.x;
  const dy = to.y - from.y;
  const len = Math.sqrt(dx*dx + dy*dy);
  const ang = Math.atan2(dy, dx) * 180 / Math.PI;
  return (
    <div style={{
      position: 'absolute',
      left: `${from.x}%`, top: `${from.y}%`,
      width: `${len}%`, height: 0,
      transform: `rotate(${ang}deg)`,
      transformOrigin: '0 0',
      pointerEvents: 'none',
    }}>
      <div style={{
        position: 'absolute', left: 0, top: -1,
        width: '100%', height: 2,
        background: `repeating-linear-gradient(90deg, ${ink} 0 4px, transparent 4px 7px)`,
      }}/>
      <div style={{
        position: 'absolute', right: 0, top: -5,
        width: 0, height: 0,
        borderLeft: `8px solid ${ink}`,
        borderTop: '4px solid transparent',
        borderBottom: '4px solid transparent',
      }}/>
      {label && (
        <span style={{
          position: 'absolute', left: '50%', top: -22,
          transform: `translateX(-50%) rotate(${-ang}deg)`,
          background: sketchPaper,
          padding: '0 6px',
          fontSize: 11, fontWeight: 700, color: ink,
        }}>{label}</span>
      )}
    </div>
  );
}

// Direction header — sticky title block per row
function SkDirHeader({ letter, title, summary, accent, principle }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'flex-start', gap: 18,
      padding: '0 8px 4px',
    }}>
      <div style={{
        width: 64, height: 64,
        border: `2px solid ${sketchInk}`,
        borderRadius: hand(letter.charCodeAt(0)),
        background: accent,
        display: 'grid', placeItems: 'center',
        fontFamily: '"Caveat", cursive',
        fontSize: 44, fontWeight: 700,
        flex: 'none',
        boxShadow: `3px 3px 0 ${sketchInk}`,
      }}>{letter}</div>
      <div style={{ flex: 1 }}>
        <div style={{
          fontFamily: '"Caveat", cursive',
          fontSize: 30, lineHeight: 1, fontWeight: 700, letterSpacing: 0.2,
        }}>{title}</div>
        <div style={{
          fontFamily: '"Architects Daughter", cursive',
          fontSize: 14, color: sketchInkSoft, marginTop: 4, maxWidth: 720,
        }}>{summary}</div>
      </div>
      {principle && (
        <div style={{
          padding: '6px 12px',
          border: `1.5px dashed ${sketchInk}`,
          borderRadius: hand(11),
          fontFamily: '"Caveat", cursive',
          fontSize: 19, lineHeight: 1.1,
          maxWidth: 280,
          background: '#fff',
        }}>
          <div style={{ fontSize: 11, fontFamily: '"Architects Daughter", cursive', fontWeight: 700, textTransform: 'uppercase', letterSpacing: 1, color: sketchInkSoft }}>Hypothesis</div>
          {principle}
        </div>
      )}
    </div>
  );
}

// Annotation — handwritten note with arrow
function SkAnnot({ children, style }) {
  return (
    <div style={{
      fontFamily: '"Caveat", cursive',
      fontSize: 16, lineHeight: 1.1,
      color: '#b54708',
      ...style,
    }}>{children}</div>
  );
}

// Sidebar nav primitive
function SkNav({ items, current, accent, brand = 'M8', style }) {
  return (
    <div style={{
      display: 'flex', flexDirection: 'column',
      gap: 4,
      padding: 10,
      borderRight: `1.5px solid ${sketchInk}`,
      background: '#fff',
      width: 130,
      ...style,
    }}>
      <div style={{
        display: 'flex', alignItems: 'center', gap: 6, marginBottom: 8,
      }}>
        <span style={{
          width: 22, height: 22,
          border: `1.5px solid ${sketchInk}`,
          background: accent || '#f4c54a',
          borderRadius: hand(3),
          display: 'grid', placeItems: 'center',
          fontFamily: '"Caveat", cursive', fontSize: 16, fontWeight: 700,
        }}>{brand}</span>
        <span style={{ fontFamily: '"Caveat", cursive', fontSize: 18, fontWeight: 700 }}>Method 8</span>
      </div>
      {items.map((it, i) => (
        <div key={i} style={{
          padding: '4px 7px',
          border: i === current ? `1.4px solid ${sketchInk}` : '1.4px solid transparent',
          borderRadius: hand(i + 5),
          background: i === current ? (accent || '#fff5d6') : 'transparent',
          fontSize: 12,
          fontWeight: i === current ? 700 : 500,
          display: 'flex', alignItems: 'center', gap: 6,
        }}>
          <span style={{
            width: 11, height: 11, border: `1.2px solid ${sketchInk}`,
            borderRadius: i % 2 ? '50%' : 2,
            flex: 'none',
          }}/>
          {it}
        </div>
      ))}
    </div>
  );
}

// Module card — shows a module tile (used in suite + connecting tissue)
function SkModuleTile({ label, icon, accent, dimmed, style }) {
  return (
    <div style={{
      border: `1.5px solid ${sketchInk}`,
      borderRadius: hand(label.length),
      background: dimmed ? '#f3f0e6' : '#fff',
      padding: '8px 10px',
      display: 'flex', flexDirection: 'column', gap: 6,
      minWidth: 110,
      boxShadow: dimmed ? 'none' : `2px 2px 0 ${sketchInk}`,
      opacity: dimmed ? 0.65 : 1,
      ...style,
    }}>
      <div style={{
        width: 26, height: 26,
        border: `1.4px solid ${sketchInk}`,
        borderRadius: hand(label.length + 1),
        background: accent || '#fff5d6',
        display: 'grid', placeItems: 'center',
        fontFamily: '"Caveat", cursive', fontSize: 18, fontWeight: 700,
      }}>{icon}</div>
      <div style={{ fontSize: 12, fontWeight: 700, lineHeight: 1.1 }}>{label}</div>
    </div>
  );
}

Object.assign(window, {
  SkFrame, SkBox, SkPill, SkBtn, SkLine, SkLines,
  SkAvatar, SkArrow, SkDirHeader, SkAnnot, SkNav, SkModuleTile,
  sketchInk, sketchInkSoft, sketchPaper, hand,
});