// Saign — shared atoms (logo, icons, primitives)

const Logo = ({ size = 18 }) => (
  <span className="saign-mark" style={{ fontSize: size }}>
    <span className="saign-mark-glyph" style={{ width: size * 1.15, height: size * 1.15 }}>
      <svg viewBox="0 0 24 24" fill="none">
        {/* stacked S — two interlocking arcs */}
        <path d="M5 7c0-1.5 1.4-3 4-3h6c2.6 0 4 1.5 4 3 0 1.5-1.4 3-4 3H9" stroke="#1a1814" strokeWidth="1.6" strokeLinecap="round"/>
        <path d="M19 17c0 1.5-1.4 3-4 3H9c-2.6 0-4-1.5-4-3 0-1.5 1.4-3 4-3h6" stroke="#1a1814" strokeWidth="1.6" strokeLinecap="round"/>
        <circle cx="12" cy="12" r="0.9" fill="#b8754a"/>
      </svg>
    </span>
    Saign
  </span>
);

const Icon = ({ name, size = 14, color = 'currentColor' }) => {
  const paths = {
    inbox: <><path d="M2 8l3-5h6l3 5M2 8v5h12V8M2 8h3l1 2h4l1-2h3"/></>,
    send: <><path d="M14 2L2 8l5 1.5M14 2L8.5 14l-1.5-4.5M14 2L7 9.5"/></>,
    archive: <><path d="M2 5h12v3H2zM3 8v6h10V8M6 11h4"/></>,
    user: <><circle cx="8" cy="6" r="2.5"/><path d="M3 14c0-2.5 2.2-4.5 5-4.5s5 2 5 4.5"/></>,
    plus: <><path d="M8 3v10M3 8h10"/></>,
    upload: <><path d="M8 11V3M5 6l3-3 3 3M3 13h10"/></>,
    file: <><path d="M3 2h7l3 3v9H3zM10 2v3h3"/></>,
    pdf: <><path d="M3 2h7l3 3v9H3z"/><text x="4.5" y="11.5" fontSize="3.5" fontFamily="ui-monospace" fontWeight="600">PDF</text></>,
    check: <><path d="M3 8l3 3 7-7"/></>,
    x: <><path d="M3 3l10 10M13 3L3 13"/></>,
    chevron: <><path d="M5 3l5 5-5 5"/></>,
    chevronDown: <><path d="M3 5l5 5 5-5"/></>,
    eye: <><path d="M1 8s2.5-5 7-5 7 5 7 5-2.5 5-7 5-7-5-7-5z"/><circle cx="8" cy="8" r="2"/></>,
    pen: <><path d="M11 2l3 3-8 8H3v-3z"/></>,
    search: <><circle cx="7" cy="7" r="4.5"/><path d="M10.5 10.5L14 14"/></>,
    settings: <><circle cx="8" cy="8" r="2.5"/><path d="M8 1v2M8 13v2M1 8h2M13 8h2M3 3l1.5 1.5M11.5 11.5L13 13M3 13l1.5-1.5M11.5 4.5L13 3"/></>,
    clock: <><circle cx="8" cy="8" r="6"/><path d="M8 4v4l3 2"/></>,
    download: <><path d="M8 2v8M5 7l3 3 3-3M3 13h10"/></>,
    lock: <><rect x="3.5" y="7" width="9" height="6.5" rx="0.5"/><path d="M5.5 7V5a2.5 2.5 0 015 0v2"/></>,
    mail: <><rect x="2" y="3" width="12" height="10" rx="0.5"/><path d="M2 4l6 5 6-5"/></>,
    ipinfo: <><circle cx="8" cy="8" r="6"/><path d="M2.5 8h11M8 2.5c1.8 2 2.7 3.7 2.7 5.5S9.8 13.5 8 13.5 5.3 9.8 5.3 8 6.2 4.5 8 2.5z"/></>,
    drag: <><circle cx="6" cy="4" r="0.8"/><circle cx="10" cy="4" r="0.8"/><circle cx="6" cy="8" r="0.8"/><circle cx="10" cy="8" r="0.8"/><circle cx="6" cy="12" r="0.8"/><circle cx="10" cy="12" r="0.8"/></>,
    type: <><path d="M3 4h10M8 4v10M5 14h6"/></>,
    draw: <><path d="M2 13s2-5 5-5 3 3 6 0M2 13h12"/></>,
    image: <><rect x="2" y="3" width="12" height="10" rx="0.5"/><circle cx="6" cy="7" r="1"/><path d="M2 11l3-3 3 3 2-2 4 4"/></>,
    activity: <><path d="M1 8h3l2-5 4 10 2-5h3"/></>,
    moreV: <><circle cx="8" cy="3" r="1"/><circle cx="8" cy="8" r="1"/><circle cx="8" cy="13" r="1"/></>,
    arrow: <><path d="M2 8h12M9 3l5 5-5 5"/></>,
    arrowL: <><path d="M14 8H2M7 3L2 8l5 5"/></>,
    shield: <><path d="M8 1L2.5 3v5c0 3.5 2.5 6 5.5 7 3-1 5.5-3.5 5.5-7V3z"/></>,
    bell: <><path d="M4 11h8s-1-1-1-3.5S10 4 8 4s-3 1-3 3.5S4 11 4 11zM6.5 13a1.5 1.5 0 003 0"/></>,
    map: <><path d="M2 4l4-2 4 2 4-2v10l-4 2-4-2-4 2zM6 2v10M10 4v10"/></>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" stroke={color} strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
      {paths[name]}
    </svg>
  );
};

const StatusPill = ({ state, label }) => {
  const map = { draft: 'Draft', sent: 'Awaiting', signed: 'Signed', declined: 'Declined', viewed: 'Viewed' };
  return (
    <span className="pill" data-state={state}>
      <span className="pill-dot" />
      {label || map[state]}
    </span>
  );
};

const Avatar = ({ name, color }) => {
  const initials = (name || '?').split(/\s+/).map(s => s[0]).slice(0,2).join('').toUpperCase();
  return <span className="avatar" style={{ background: color || 'var(--paper-2)' }}>{initials}</span>;
};

// Stylized PDF page mock
const PdfPageMock = ({ width = 320, height = 420, withSigField = false, sigStyle = 'empty', signerName = 'Casey Morgan', sigMethod = 'draw', dense = true }) => (
  <div className="pdf-page" style={{ width, height, padding: 28, position: 'relative' }}>
    <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 16 }}>
      <div className="mono" style={{ color: 'var(--ink-3)' }}>NDA-2026-0418</div>
      <div className="mono" style={{ color: 'var(--ink-3)' }}>Page 4 / 4</div>
    </div>
    <div style={{ height: 14, width: '60%', background: 'var(--ink)', marginBottom: 14, borderRadius: 1 }} />
    {[...Array(dense ? 8 : 5)].map((_, i) => (
      <div key={i} className="pdf-line" style={{ marginBottom: 7, width: `${85 - (i % 3) * 8}%` }} />
    ))}
    <div style={{ height: 12 }} />
    <div style={{ height: 10, width: '40%', background: 'var(--ink-2)', marginBottom: 9, borderRadius: 1 }} />
    {[...Array(4)].map((_, i) => (
      <div key={i} className="pdf-line" style={{ marginBottom: 7, width: `${88 - (i % 3) * 6}%` }} />
    ))}
    {withSigField && (
      <div style={{ position: 'absolute', left: 28, right: 28, bottom: 32 }}>
        <SignatureField sigStyle={sigStyle} signerName={signerName} sigMethod={sigMethod} />
      </div>
    )}
  </div>
);

const SignatureField = ({ sigStyle = 'empty', signerName, sigMethod }) => {
  return (
    <div style={{ display: 'flex', gap: 16, alignItems: 'flex-end' }}>
      <div style={{ flex: 1 }}>
        <div style={{
          height: 56, position: 'relative',
          borderBottom: sigStyle === 'empty' ? '1.5px dashed var(--accent-2)' : '1px solid var(--ink)',
          background: sigStyle === 'empty' ? 'rgba(184,117,74,0.05)' : 'transparent',
          display: 'flex', alignItems: 'flex-end', justifyContent: 'flex-start',
          paddingBottom: 4, paddingLeft: sigStyle === 'empty' ? 8 : 0,
        }}>
          {sigStyle === 'empty' && (
            <span style={{ font: '500 10px/1 var(--sans)', textTransform: 'uppercase', letterSpacing: '0.08em', color: 'var(--accent-2)' }}>Sign here</span>
          )}
          {sigStyle === 'signed' && sigMethod === 'type' && (
            <span style={{ fontFamily: '"Caveat", "Snell Roundhand", cursive', fontSize: 32, color: 'var(--accent)', lineHeight: 1, paddingBottom: 2 }}>{signerName}</span>
          )}
          {sigStyle === 'signed' && sigMethod === 'draw' && (
            <svg width="160" height="44" viewBox="0 0 160 44" style={{ marginBottom: -2 }}>
              <path d="M5 30 Q 18 5, 30 25 T 55 22 Q 70 8, 85 28 T 120 18 Q 138 32, 155 22" stroke="var(--accent)" strokeWidth="1.8" fill="none" strokeLinecap="round"/>
            </svg>
          )}
          {sigStyle === 'signed' && sigMethod === 'image' && (
            <svg width="140" height="40" viewBox="0 0 140 40">
              <path d="M3 28 Q 12 8, 22 24 Q 30 36, 40 18 Q 50 2, 62 26 L 70 14 Q 80 30, 92 16 L 102 28 Q 115 8, 135 24" stroke="var(--accent)" strokeWidth="2.2" fill="none" strokeLinecap="round" opacity="0.85"/>
            </svg>
          )}
        </div>
        <div style={{ font: '500 9px/1 var(--sans)', textTransform: 'uppercase', letterSpacing: '0.08em', color: 'var(--ink-3)', marginTop: 6 }}>Signature</div>
        <div style={{ font: '400 11px/1.3 var(--sans)', color: 'var(--ink-2)', marginTop: 2 }}>{signerName}</div>
      </div>
      <div style={{ width: 110 }}>
        <div style={{
          height: 56,
          borderBottom: '1px solid var(--ink)',
          display: 'flex', alignItems: 'flex-end',
          paddingBottom: 6,
          fontFamily: 'var(--mono)', fontSize: 10, color: sigStyle === 'signed' ? 'var(--ink)' : 'var(--ink-3)',
        }}>
          {sigStyle === 'signed' ? 'Apr 27, 2026' : ''}
        </div>
        <div style={{ font: '500 9px/1 var(--sans)', textTransform: 'uppercase', letterSpacing: '0.08em', color: 'var(--ink-3)', marginTop: 6 }}>Date</div>
      </div>
    </div>
  );
};

// Doc thumbnail (mini PDF)
const DocThumb = ({ size = 32, signed = false }) => (
  <div style={{
    width: size * 0.78, height: size, background: 'var(--card)',
    border: '1px solid var(--line)', display: 'flex', flexDirection: 'column',
    padding: '4px 5px', position: 'relative', flexShrink: 0,
  }}>
    {[...Array(5)].map((_,i) => (
      <div key={i} style={{ height: 1.5, background: 'var(--line-2)', marginBottom: 2.5, width: `${80 - i * 8}%` }} />
    ))}
    {signed && (
      <svg width="14" height="6" viewBox="0 0 14 6" style={{ position: 'absolute', bottom: 4, right: 4 }}>
        <path d="M1 4 Q 3 1, 5 3 Q 8 5, 13 2" stroke="var(--accent)" strokeWidth="0.8" fill="none"/>
      </svg>
    )}
  </div>
);

Object.assign(window, { Logo, Icon, StatusPill, Avatar, PdfPageMock, SignatureField, DocThumb });