// Shared sketch primitives + tiny SVG icons used in wireframes
const { useState, useEffect, useRef } = React;

// Tiny outlined SVG icons (no emoji — wireframe vibe)
const Ico = ({ name, size = 16, ...rest }) => {
  const paths = {
    sparkle: <><path className="ico" d="M8 1 L9.5 6.5 L15 8 L9.5 9.5 L8 15 L6.5 9.5 L1 8 L6.5 6.5 Z"/></>,
    image:  <><rect className="ico" x="1.5" y="2.5" width="13" height="11" rx="1.5"/><circle className="ico-fill" cx="5" cy="6" r="1.2"/><path className="ico" d="M2 12 L6 8 L9 10 L14 5"/></>,
    text:   <><path className="ico" d="M2 4 H14 M4 4 V13 M2 8 H10"/></>,
    code:   <><path className="ico" d="M5 4 L1.5 8 L5 12 M11 4 L14.5 8 L11 12 M9.5 3 L6.5 13"/></>,
    video:  <><rect className="ico" x="1.5" y="3.5" width="10" height="9" rx="1.5"/><path className="ico-fill" d="M11.5 6 L15 4 V12 L11.5 10 Z"/></>,
    mail:   <><rect className="ico" x="1.5" y="3.5" width="13" height="9" rx="1.5"/><path className="ico" d="M2 4 L8 9 L14 4"/></>,
    chat:   <><path className="ico" d="M2 3 H14 V11 H7 L4 14 V11 H2 Z"/></>,
    music:  <><path className="ico" d="M6 12 V3 L13 2 V11"/><circle className="ico" cx="4.5" cy="12" r="1.5"/><circle className="ico" cx="11.5" cy="11" r="1.5"/></>,
    copy:   <><rect className="ico" x="4" y="4" width="10" height="10" rx="1.5"/><path className="ico" d="M11 4 V2 H2 V11 H4"/></>,
    save:   <><path className="ico" d="M3 2 H11 L13 4 V14 H3 Z M5 2 V6 H10 V2 M5 10 H11"/></>,
    share:  <><circle className="ico" cx="4" cy="8" r="2"/><circle className="ico" cx="12" cy="3.5" r="2"/><circle className="ico" cx="12" cy="12.5" r="2"/><path className="ico" d="M5.7 7 L10.3 4.5 M5.7 9 L10.3 11.5"/></>,
    star:   <><path className="ico" d="M8 1.5 L10 6 L15 6.5 L11 9.8 L12.3 14.5 L8 12 L3.7 14.5 L5 9.8 L1 6.5 L6 6 Z"/></>,
    search: <><circle className="ico" cx="7" cy="7" r="4.5"/><path className="ico" d="M10.5 10.5 L14 14"/></>,
    plus:   <><path className="ico" d="M8 2 V14 M2 8 H14"/></>,
    menu:   <><path className="ico" d="M2 4 H14 M2 8 H14 M2 12 H14"/></>,
    home:   <><path className="ico" d="M2 8 L8 2 L14 8 V14 H10 V10 H6 V14 H2 Z"/></>,
    folder: <><path className="ico" d="M1.5 4 H6 L7.5 5.5 H14.5 V13 H1.5 Z"/></>,
    cog:    <><circle className="ico" cx="8" cy="8" r="2.5"/><path className="ico" d="M8 1 V3 M8 13 V15 M1 8 H3 M13 8 H15 M3 3 L4.5 4.5 M11.5 11.5 L13 13 M3 13 L4.5 11.5 M11.5 4.5 L13 3"/></>,
    sun:    <><circle className="ico" cx="8" cy="8" r="3"/><path className="ico" d="M8 1 V3 M8 13 V15 M1 8 H3 M13 8 H15 M3 3 L4.5 4.5 M11.5 11.5 L13 13 M3 13 L4.5 11.5 M11.5 4.5 L13 3"/></>,
    moon:   <><path className="ico" d="M13 9.5 A6 6 0 1 1 6.5 3 A5 5 0 0 0 13 9.5 Z"/></>,
    bolt:   <><path className="ico" d="M9 1 L3 9 H8 L7 15 L13 7 H8 Z"/></>,
    grid:   <><rect className="ico" x="2" y="2" width="5" height="5" rx="1"/><rect className="ico" x="9" y="2" width="5" height="5" rx="1"/><rect className="ico" x="2" y="9" width="5" height="5" rx="1"/><rect className="ico" x="9" y="9" width="5" height="5" rx="1"/></>,
    drag:   <><circle className="ico-fill" cx="6" cy="4" r="1.2"/><circle className="ico-fill" cx="10" cy="4" r="1.2"/><circle className="ico-fill" cx="6" cy="8" r="1.2"/><circle className="ico-fill" cx="10" cy="8" r="1.2"/><circle className="ico-fill" cx="6" cy="12" r="1.2"/><circle className="ico-fill" cx="10" cy="12" r="1.2"/></>,
    arrow:  <><path className="ico" d="M3 8 H13 M9 4 L13 8 L9 12"/></>,
    back:   <><path className="ico" d="M13 8 H3 M7 4 L3 8 L7 12"/></>,
    history:<><path className="ico" d="M8 2 A6 6 0 1 0 14 8"/><path className="ico" d="M14 2 V5 H11 M8 5 V8 L10 10"/></>,
    bookmark:<><path className="ico" d="M3 2 H13 V14 L8 10.5 L3 14 Z"/></>,
    download:<><path className="ico" d="M8 2 V11 M4 8 L8 12 L12 8 M3 14 H13"/></>,
    globe:  <><circle className="ico" cx="8" cy="8" r="6"/><path className="ico" d="M2 8 H14 M8 2 C5 5 5 11 8 14 M8 2 C11 5 11 11 8 14"/></>,
    mic:    <><rect className="ico" x="6" y="2" width="4" height="8" rx="2"/><path className="ico" d="M3.5 8 A4.5 4.5 0 0 0 12.5 8 M8 12.5 V14.5 M5.5 14.5 H10.5"/></>,
    eye:    <><path className="ico" d="M1.5 8 C3 4 5.5 2.5 8 2.5 C10.5 2.5 13 4 14.5 8 C13 12 10.5 13.5 8 13.5 C5.5 13.5 3 12 1.5 8 Z"/><circle className="ico" cx="8" cy="8" r="2"/></>,
    edit:   <><path className="ico" d="M2 14 L4 9 L11 2 L14 5 L7 12 Z M10 3 L13 6"/></>,
    check:  <><path className="ico" d="M3 8 L7 12 L13 4"/></>,
    close:  <><path className="ico" d="M3 3 L13 13 M13 3 L3 13"/></>,
    lang:   <><path className="ico" d="M2 4 H8 M5 2 V4 M3 4 C3 8 6 10 7 11 M7 4 C7 8 4 10 3 11"/><path className="ico" d="M9 14 L12 7 L15 14 M10 11.5 H14"/></>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 16 16" style={{ display: 'inline-block', verticalAlign: 'middle', flexShrink: 0 }}>
      {paths[name]}
    </svg>
  );
};

// Visual thumbnail — a small placeholder with stylized content hint
const VizThumb = ({ kind, w = 32, h = 32, label }) => {
  const styles = { width: w, height: h };
  const inner = {
    image: <div style={{
      position: 'absolute', inset: 2,
      background: 'linear-gradient(135deg, var(--blue) 0 40%, var(--hi) 40% 70%, var(--accent) 70% 100%)',
      borderRadius: 3, opacity: 0.55,
    }}/>,
    portrait: <div style={{ position: 'absolute', inset: 2, background: 'var(--paper)', borderRadius: 3, display: 'flex', alignItems: 'flex-end', justifyContent: 'center' }}>
      <div style={{ width: '60%', height: '60%', background: 'color-mix(in srgb, var(--ink) 25%, var(--paper))', borderRadius: '50% 50% 12% 12% / 60% 60% 12% 12%' }}/>
    </div>,
    landscape: <div style={{ position: 'absolute', inset: 2, background: 'linear-gradient(180deg, color-mix(in srgb, var(--blue) 35%, var(--paper)) 0 55%, color-mix(in srgb, var(--green) 35%, var(--paper)) 55% 100%)', borderRadius: 3 }}>
      <div style={{ position: 'absolute', top: '20%', left: '15%', width: 6, height: 6, borderRadius: '50%', background: 'var(--hi)' }}/>
    </div>,
    text: <div style={{ position: 'absolute', inset: 4, display: 'flex', flexDirection: 'column', gap: 2 }}>
      <div style={{ height: 2, background: 'var(--ink)', width: '90%' }}/>
      <div style={{ height: 2, background: 'var(--ink)', width: '70%' }}/>
      <div style={{ height: 2, background: 'var(--ink-2)', width: '85%', opacity: 0.5 }}/>
      <div style={{ height: 2, background: 'var(--ink-2)', width: '50%', opacity: 0.5 }}/>
    </div>,
    code: <div style={{ position: 'absolute', inset: 3, fontFamily: 'JetBrains Mono, monospace', fontSize: Math.max(5, w*0.18), color: 'var(--ink-2)', lineHeight: 1, overflow: 'hidden' }}>
      {`{ "ok": true,`}<br/>{`  go: ()=>{} }`}
    </div>,
    cinematic: <div style={{ position: 'absolute', inset: 2, borderRadius: 3, overflow: 'hidden', background: '#000' }}>
      <div style={{ position: 'absolute', top: '15%', bottom: '15%', left: 0, right: 0, background: 'linear-gradient(180deg, #5a3a1e, #1a0e08)' }}/>
      <div style={{ position: 'absolute', top: '38%', left: '30%', width: '40%', height: '12%', background: '#ffd28a', borderRadius: '50%', filter: 'blur(2px)' }}/>
    </div>,
    anime: <div style={{ position: 'absolute', inset: 2, borderRadius: 3, background: 'linear-gradient(135deg, #ffc8e6, #b6dcff)' }}>
      <div style={{ position: 'absolute', top: '35%', left: '32%', width: 4, height: 6, background: '#1a1a1a', borderRadius: 2 }}/>
      <div style={{ position: 'absolute', top: '35%', right: '32%', width: 4, height: 6, background: '#1a1a1a', borderRadius: 2 }}/>
    </div>,
    product: <div style={{ position: 'absolute', inset: 2, borderRadius: 3, background: 'var(--paper)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
      <div style={{ width: '50%', height: '60%', background: 'color-mix(in srgb, var(--accent) 70%, var(--paper))', borderRadius: 4, boxShadow: '0 2px 0 color-mix(in srgb, var(--ink) 20%, transparent)' }}/>
    </div>,
    pixel: <div style={{ position: 'absolute', inset: 2, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 1 }}>
      {[...Array(16)].map((_,i)=>(<div key={i} style={{ background: ['var(--accent)','var(--blue)','var(--hi)','var(--paper)'][i%4], opacity: (i*7%5)/6+0.3 }}/>))}
    </div>,
    chart: <div style={{ position: 'absolute', inset: 4, display: 'flex', alignItems: 'flex-end', gap: 2 }}>
      {[40,70,50,90,60].map((h,i)=>(<div key={i} style={{ flex: 1, height: h+'%', background: i===3 ? 'var(--accent)' : 'color-mix(in srgb, var(--ink) 40%, var(--paper))' }}/>))}
    </div>,
    abstract: <div style={{ position: 'absolute', inset: 2, borderRadius: 3, background: 'conic-gradient(from 30deg, var(--accent), var(--hi), var(--blue), var(--accent))', opacity: 0.7 }}/>,
    blank: <div style={{ position: 'absolute', inset: 2, background: 'repeating-linear-gradient(45deg, transparent 0 4px, color-mix(in srgb, var(--line) 25%, transparent) 4px 5px)' }}/>,
  }[kind] || null;
  return (
    <div style={{ ...styles, position: 'relative', border: '1.4px solid var(--line)', borderRadius: 5, overflow: 'hidden', background: 'var(--paper)', flexShrink: 0 }}>
      {inner}
      {label && <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, fontSize: 8, padding: '1px 2px', background: 'color-mix(in srgb, var(--paper) 80%, transparent)', color: 'var(--ink)', textAlign: 'center', fontWeight: 600 }}>{label}</div>}
    </div>
  );
};

// Annotation callout with optional leader line
const Annotation = ({ x, y, text, show, leader, anchor = 'tl', width = 170 }) => {
  if (!show) return null;
  // leader: { dx, dy } pointing FROM annotation TO target
  const style = { left: x, top: y, width };
  if (anchor === 'tr') { style.right = x; delete style.left; }
  if (anchor === 'bl') { style.bottom = y; delete style.top; }
  if (anchor === 'br') { style.right = x; style.bottom = y; delete style.left; delete style.top; }
  return (
    <div className="annot" style={style}>
      <div className="note">{text}</div>
      {leader && (
        <svg width={Math.abs(leader.dx)+20} height={Math.abs(leader.dy)+20} style={{
          left: leader.dx >= 0 ? width - 10 : leader.dx - 10,
          top: leader.dy >= 0 ? 20 : leader.dy - 10,
        }}>
          <path d={`M 10 10 Q ${leader.dx/2} ${leader.dy/2 + (leader.dy>0?-12:12)} ${leader.dx + 10} ${leader.dy + 10}`}
            fill="none" stroke="var(--accent)" strokeWidth="1.4" strokeDasharray="3 3"/>
          <circle cx={leader.dx + 10} cy={leader.dy + 10} r="3" fill="var(--accent)"/>
        </svg>
      )}
    </div>
  );
};

// Generic device frames
const MobileFrame = ({ children, label }) => (
  <div>
    <h3 className="frame-cap">📱 Mobile <span className="sub">375 × 740</span></h3>
    <div className="mobile-frame">
      <div className="mobile-screen">{children}</div>
    </div>
    {label && <p style={{ textAlign: 'center', fontFamily: 'Caveat, cursive', fontSize: 16, color: 'var(--muted)', marginTop: 10 }}>{label}</p>}
  </div>
);
const DesktopFrame = ({ children, url = 'autoprompt.app', label }) => (
  <div>
    <h3 className="frame-cap">🖥️ Desktop <span className="sub">≥ 1024px</span></h3>
    <div className="desktop-frame">
      <div className="desktop-chrome">
        <div className="dot" style={{ background: '#ff6b5b' }}/>
        <div className="dot" style={{ background: '#ffe45c' }}/>
        <div className="dot" style={{ background: '#4caf50' }}/>
        <div className="url">{url}</div>
        <Ico name="cog" size={14}/>
      </div>
      <div className="desktop-body">{children}</div>
    </div>
    {label && <p style={{ textAlign: 'center', fontFamily: 'Caveat, cursive', fontSize: 16, color: 'var(--muted)', marginTop: 10 }}>{label}</p>}
  </div>
);

// Common header bar inside mobile screen
const MStatusBar = () => (
  <div style={{ height: 0 }}/>
);

const MNav = ({ title, left, right }) => (
  <div style={{
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    padding: '8px 14px', borderBottom: '1.5px solid var(--line)',
  }}>
    <div style={{ width: 24 }}>{left ?? <Ico name="menu" size={18}/>}</div>
    <div style={{ fontFamily: 'Caveat, cursive', fontSize: 20 }}>{title}</div>
    <div style={{ width: 24, display: 'flex', justifyContent: 'flex-end' }}>{right ?? <Ico name="cog" size={18}/>}</div>
  </div>
);

const MTabBar = ({ active = 'build' }) => {
  const tabs = [
    { id: 'build', ico: 'sparkle', label: 'Build' },
    { id: 'lib', ico: 'grid', label: 'Library' },
    { id: 'hist', ico: 'history', label: 'History' },
    { id: 'me', ico: 'star', label: 'Saved' },
  ];
  return (
    <div style={{ display: 'flex', borderTop: '1.5px solid var(--line)', background: 'var(--paper)' }}>
      {tabs.map(t => (
        <div key={t.id} style={{
          flex: 1, padding: '8px 0', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2,
          fontSize: 9, color: active === t.id ? 'var(--ink)' : 'var(--muted)',
          fontWeight: active === t.id ? 700 : 500,
          borderTop: active === t.id ? '2px solid var(--accent)' : '2px solid transparent',
        }}>
          <Ico name={t.ico} size={16}/>{t.label}
        </div>
      ))}
    </div>
  );
};

Object.assign(window, { Ico, VizThumb, Annotation, MobileFrame, DesktopFrame, MNav, MTabBar, MStatusBar });