// sketch.jsx — shared lo-fi wireframe primitives + hi-fi tokens
// Hand-drawn aesthetic: off-white paper, ink lines, sketchy fonts, slight wobble.

const INK = '#1d1a17';
const INK_SOFT = '#5a544c';
const PAPER = '#fbf7ef';
const PAPER_LINE = 'rgba(29,26,23,0.12)';

// One-time CSS for sketch primitives + Google fonts
if (typeof document !== 'undefined' && !document.getElementById('sketch-styles')) {
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = 'https://fonts.googleapis.com/css2?family=Caveat:wght@500;700&family=Patrick+Hand&family=Kalam:wght@400;700&family=Space+Grotesk:wght@400;500;700&family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,800&family=DM+Mono:wght@400;500&display=swap';
  document.head.appendChild(link);

  const s = document.createElement('style');
  s.id = 'sketch-styles';
  s.textContent = `
    .sk { font-family: 'Patrick Hand', 'Kalam', cursive; color: ${INK}; }
    .sk-h { font-family: 'Caveat', cursive; font-weight: 700; }
    .sk-mono { font-family: 'DM Mono', ui-monospace, monospace; }
    .sk-box {
      border: 2px solid ${INK}; border-radius: 12px;
      background: ${PAPER};
      box-shadow: 2px 2px 0 rgba(29,26,23,0.15);
    }
    .sk-phone {
      width: 320px; height: 660px; background: ${PAPER};
      border: 2.5px solid ${INK}; border-radius: 38px;
      position: relative; overflow: hidden;
      box-shadow: 3px 3px 0 rgba(29,26,23,0.2);
      transform: rotate(-0.3deg);
    }
    .sk-phone::before {
      content: ''; position: absolute; top: 10px; left: 50%;
      transform: translateX(-50%); width: 90px; height: 22px;
      background: ${INK}; border-radius: 20px;
    }
    .sk-phone::after {
      content: ''; position: absolute; bottom: 8px; left: 50%;
      transform: translateX(-50%); width: 110px; height: 4px;
      background: ${INK}; border-radius: 4px;
    }
    .sk-screen { position: absolute; top: 42px; bottom: 22px; left: 0; right: 0; padding: 0 16px; overflow: hidden; }
    .sk-rect { border: 1.8px solid ${INK}; border-radius: 8px; background: transparent; }
    .sk-rect-fill { border: 1.8px solid ${INK}; border-radius: 8px; background: ${INK}; color: ${PAPER}; }
    .sk-circle { border: 1.8px solid ${INK}; border-radius: 999px; background: transparent; }
    .sk-line { background: ${INK}; height: 1.8px; border-radius: 2px; }
    .sk-line-dashed { border-top: 1.8px dashed ${INK}; }
    .sk-hatch {
      background-image: repeating-linear-gradient(45deg, ${INK} 0 1.5px, transparent 1.5px 6px);
      border: 1.8px solid ${INK}; border-radius: 8px;
    }
    .sk-img {
      border: 1.8px solid ${INK}; border-radius: 8px;
      background:
        linear-gradient(to bottom right, transparent calc(50% - 1px), ${INK} calc(50% - 1px), ${INK} calc(50% + 1px), transparent calc(50% + 1px)),
        linear-gradient(to top right, transparent calc(50% - 1px), ${INK} calc(50% - 1px), ${INK} calc(50% + 1px), transparent calc(50% + 1px));
    }
    .sk-btn {
      border: 2px solid ${INK}; border-radius: 999px; background: ${INK}; color: ${PAPER};
      font-family: 'Patrick Hand', cursive; font-size: 14px; padding: 8px 16px;
      display: inline-flex; align-items: center; justify-content: center;
      box-shadow: 2px 2px 0 rgba(29,26,23,0.18);
    }
    .sk-btn-ghost {
      border: 2px solid ${INK}; border-radius: 999px; background: transparent; color: ${INK};
      font-family: 'Patrick Hand', cursive; font-size: 14px; padding: 8px 16px;
      display: inline-flex; align-items: center; justify-content: center;
    }
    .sk-pill { border: 1.5px solid ${INK}; border-radius: 999px; padding: 4px 10px; font-family: 'Patrick Hand', cursive; font-size: 12px; display: inline-flex; align-items: center; gap: 4px; }
    .sk-note {
      font-family: 'Caveat', cursive; font-weight: 500;
      color: #c14a00; font-size: 14px; line-height: 1.1;
      position: absolute; pointer-events: none;
    }
    .sk-note::before {
      content: ''; position: absolute; width: 24px; height: 1.5px;
      background: #c14a00; transform: rotate(-15deg);
    }
    .sk-arrow {
      position: absolute; pointer-events: none; color: #c14a00;
      font-family: 'Caveat', cursive; font-weight: 500; font-size: 14px;
    }
    .sk-statusbar {
      display: flex; justify-content: space-between; align-items: center;
      padding: 4px 16px; font-family: 'Patrick Hand', cursive; font-size: 11px; color: ${INK};
    }
    .sk-tabbar {
      position: absolute; bottom: 0; left: 0; right: 0; height: 50px;
      border-top: 1.8px solid ${INK}; display: flex; align-items: center;
      justify-content: space-around; background: ${PAPER};
    }
    .sk-tab-ico {
      width: 22px; height: 22px; border: 1.8px solid ${INK}; border-radius: 4px;
      display: flex; align-items: center; justify-content: center;
      font-family: 'Patrick Hand', cursive; font-size: 11px;
    }
    /* hand-drawn slight wobble for some elements */
    .sk-wob-1 { transform: rotate(-0.4deg); }
    .sk-wob-2 { transform: rotate(0.3deg); }
    .sk-wob-3 { transform: rotate(-0.2deg); }
  `;
  document.head.appendChild(s);
}

// ── Lo-fi primitives ────────────────────────────────────────────
function SkPhone({ children, label }) {
  return (
    <div style={{ position: 'relative', display: 'flex', justifyContent: 'center', paddingTop: 8 }}>
      <div className="sk-phone">
        <div className="sk-statusbar" style={{ marginTop: 4 }}>
          <span>9:41</span>
          <span style={{ marginLeft: 50 }}>●●●●●</span>
          <span>100%</span>
        </div>
        <div className="sk-screen">{children}</div>
      </div>
    </div>
  );
}

function SkRect({ h = 40, label, fill, hatch, style = {}, children, dashed }) {
  const cls = hatch ? 'sk-hatch' : (fill ? 'sk-rect-fill' : 'sk-rect');
  return (
    <div className={cls} style={{
      height: h, padding: '4px 8px', display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontFamily: "'Patrick Hand', cursive", fontSize: 12, ...(dashed ? { borderStyle: 'dashed' } : {}),
      ...style
    }}>
      {children ?? label ?? ''}
    </div>
  );
}

function SkLines({ count = 3, widths = ['90%', '70%', '50%'], gap = 6, color = INK }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap }}>
      {Array.from({ length: count }).map((_, i) => (
        <div key={i} style={{ height: 4, width: widths[i % widths.length], background: color, borderRadius: 2, opacity: 0.7 }} />
      ))}
    </div>
  );
}

function SkNote({ children, top, left, right, bottom, rotate = -3, w = 110 }) {
  return (
    <div style={{
      position: 'absolute', top, left, right, bottom,
      width: w, transform: `rotate(${rotate}deg)`,
      fontFamily: "'Caveat', cursive", fontWeight: 500,
      color: '#c14a00', fontSize: 16, lineHeight: 1.1, pointerEvents: 'none',
    }}>
      {children}
    </div>
  );
}

// arrow SVG (rough), points from (x1,y1) -> (x2,y2). Use within an absolutely-positioned svg.
function SkArrow({ x1, y1, x2, y2, color = '#c14a00' }) {
  const angle = Math.atan2(y2 - y1, x2 - x1);
  const ah = 8;
  const ax1 = x2 - ah * Math.cos(angle - 0.4);
  const ay1 = y2 - ah * Math.sin(angle - 0.4);
  const ax2 = x2 - ah * Math.cos(angle + 0.4);
  const ay2 = y2 - ah * Math.sin(angle + 0.4);
  return (
    <g stroke={color} fill="none" strokeWidth="1.6" strokeLinecap="round">
      <path d={`M ${x1} ${y1} Q ${(x1+x2)/2 + 5} ${(y1+y2)/2 - 5} ${x2} ${y2}`} />
      <path d={`M ${x2} ${y2} L ${ax1} ${ay1}`} />
      <path d={`M ${x2} ${y2} L ${ax2} ${ay2}`} />
    </g>
  );
}

// Make available globally
Object.assign(window, { SkPhone, SkRect, SkLines, SkNote, SkArrow, INK, INK_SOFT, PAPER, PAPER_LINE });