// wireframe-kit.jsx — SafePass lo-fi wireframe primitives
// Grayscale Samsung-style device frame + lo-fi atoms + annotation system.
// Exports everything to window for the screen files to consume.

const WK = {
  ink:    '#3c3c3c',  // primary text / strong lines
  ink2:   '#8d8d8d',  // secondary text
  ink3:   '#b4b4b4',  // tertiary / hints
  line:   '#cdcdcd',  // borders
  line2:  '#e0e0e0',  // light borders
  fill:   '#e8e8e8',  // box fill
  fill2:  '#f1f1f1',  // lighter fill
  fill3:  '#f7f7f6',  // lightest
  screen: '#ffffff',
  bezel:  '#262626',
  anno:   '#2f5fd0',  // annotation marker accent
  annoBg: '#eaf0fd',
  ui:   "'Archivo', system-ui, sans-serif",
  mono: "'Spline Sans Mono', ui-monospace, monospace",
  hand: "'Caveat', cursive",
};

// ── one-time CSS for hatch patterns (risk levels) ───────────────
if (typeof document !== 'undefined' && !document.getElementById('wk-styles')) {
  const s = document.createElement('style');
  s.id = 'wk-styles';
  s.textContent = `
    .wk-hatch1{background:${WK.fill2};}
    .wk-hatch2{background:repeating-linear-gradient(45deg,${WK.fill} 0 5px,${WK.fill2} 5px 10px);}
    .wk-hatch3{background:repeating-linear-gradient(45deg,${WK.ink3} 0 4px,${WK.fill} 4px 8px);}
    .wk-hatch4{background:repeating-linear-gradient(45deg,${WK.ink2} 0 3px,${WK.fill} 3px 6px);}
    .wk-dot{background-image:radial-gradient(${WK.line} 1.1px,transparent 1.2px);background-size:9px 9px;}
  `;
  document.head.appendChild(s);
}

// ─────────────────────────────────────────────────────────────
// Device frame — grayscale Samsung Galaxy S26 Ultra (squarish, flat)
// ─────────────────────────────────────────────────────────────
const PHONE_W = 320, PHONE_H = 638;

function WStatus() {
  return (
    <div style={{ height: 26, flexShrink: 0, display: 'flex', alignItems: 'center',
      justifyContent: 'space-between', padding: '0 16px', position: 'relative',
      fontFamily: WK.ui, background: WK.screen }}>
      <span style={{ fontSize: 11, fontWeight: 600, color: WK.ink }}>9:30</span>
      <div style={{ position: 'absolute', left: '50%', top: 7, transform: 'translateX(-50%)',
        width: 8, height: 8, borderRadius: 8, background: WK.bezel }} />
      <div style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
        <div style={{ width: 14, height: 9, borderRadius: 1, background: WK.ink3 }} />
        <div style={{ width: 12, height: 9, borderRadius: 1, background: WK.ink3 }} />
        <div style={{ width: 18, height: 9, borderRadius: 2, border: `1px solid ${WK.ink2}`, position: 'relative' }}>
          <div style={{ position: 'absolute', inset: 1, width: '60%', background: WK.ink2, borderRadius: 1 }} />
        </div>
      </div>
    </div>
  );
}

function WPhone({ children, tab, scroll, style }) {
  return (
    <div style={{
      width: PHONE_W, height: PHONE_H, borderRadius: 26, flexShrink: 0,
      background: WK.bezel, padding: 5, boxSizing: 'border-box',
      boxShadow: '0 18px 50px rgba(0,0,0,0.18)', ...style,
    }}>
      <div style={{
        width: '100%', height: '100%', borderRadius: 21, overflow: 'hidden',
        background: WK.screen, display: 'flex', flexDirection: 'column',
        fontFamily: WK.ui, color: WK.ink, position: 'relative',
      }}>
        <WStatus />
        <div style={{ flex: 1, minHeight: 0, overflow: 'hidden', position: 'relative',
          display: 'flex', flexDirection: 'column' }}>
          {children}
        </div>
        {tab && <WTab active={tab} />}
        <div style={{ height: 16, flexShrink: 0, display: 'flex', alignItems: 'center',
          justifyContent: 'center', background: WK.screen }}>
          <div style={{ width: 90, height: 3, borderRadius: 2, background: WK.ink3 }} />
        </div>
      </div>
    </div>
  );
}

// ── bottom tab bar ──────────────────────────────────────────────
const TABS = [
  { k: 'home',   label: 'Home' },
  { k: 'map',    label: 'Map' },
  { k: 'alerts', label: 'Alerts' },
  { k: 'saved',  label: 'Saved' },
  { k: 'me',     label: 'Profile' },
];
function WTab({ active }) {
  return (
    <div style={{ height: 50, flexShrink: 0, borderTop: `1px solid ${WK.line2}`,
      display: 'flex', background: WK.screen }}>
      {TABS.map((t) => {
        const on = t.k === active;
        return (
          <div key={t.k} style={{ flex: 1, display: 'flex', flexDirection: 'column',
            alignItems: 'center', justifyContent: 'center', gap: 4 }}>
            <div style={{ width: 18, height: 18, borderRadius: 5,
              background: on ? WK.ink : 'transparent',
              border: on ? 'none' : `1.5px solid ${WK.ink3}` }} />
            <span style={{ fontSize: 8.5, fontWeight: on ? 700 : 500,
              color: on ? WK.ink : WK.ink2 }}>{t.label}</span>
          </div>
        );
      })}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Lo-fi atoms
// ─────────────────────────────────────────────────────────────
function WLine({ w = '100%', h = 8, mt = 0, dark }) {
  return <div style={{ width: w, height: h, borderRadius: h / 2, marginTop: mt,
    background: dark ? WK.ink2 : WK.line }} />;
}
function WLines({ n = 3, w = '100%', gap = 7, last = '70%' }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap, width: w }}>
      {Array.from({ length: n }).map((_, i) =>
        <WLine key={i} w={i === n - 1 ? last : '100%'} h={7} />)}
    </div>
  );
}
function WImg({ label = 'IMAGE', h = 120, w = '100%', r = 8 }) {
  return (
    <div style={{ width: w, height: h, borderRadius: r, border: `1px solid ${WK.line}`,
      background: `repeating-linear-gradient(135deg, ${WK.fill2} 0 9px, ${WK.fill} 9px 18px)`,
      display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative',
      overflow: 'hidden' }}>
      <span style={{ fontFamily: WK.mono, fontSize: 9, letterSpacing: 1, color: WK.ink2,
        background: WK.screen, padding: '2px 6px', borderRadius: 3, border: `1px solid ${WK.line2}` }}>{label}</span>
    </div>
  );
}
function WChip({ children, active, sm }) {
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5,
      padding: sm ? '3px 8px' : '5px 11px', borderRadius: 20, fontSize: sm ? 10 : 11.5,
      fontWeight: active ? 700 : 500, whiteSpace: 'nowrap',
      border: `1px solid ${active ? WK.ink : WK.line}`,
      background: active ? WK.ink : WK.screen, color: active ? '#fff' : WK.ink2 }}>{children}</span>
  );
}
function WBtn({ children, primary, full, sm, style }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center',
      height: sm ? 30 : 42, padding: '0 18px', borderRadius: sm ? 8 : 10,
      width: full ? '100%' : 'auto', boxSizing: 'border-box',
      fontSize: sm ? 12 : 14, fontWeight: 700, whiteSpace: 'nowrap',
      border: `1.5px solid ${WK.ink}`,
      background: primary ? WK.ink : WK.screen, color: primary ? '#fff' : WK.ink, ...style }}>{children}</div>
  );
}
function WIcon({ s = 20, r = 6, c }) {
  return <div style={{ width: s, height: s, borderRadius: r, flexShrink: 0,
    border: `1.5px solid ${c || WK.ink2}` }} />;
}
function WIconCircle({ s = 36, label }) {
  return <div style={{ width: s, height: s, borderRadius: '50%', flexShrink: 0,
    background: WK.fill, border: `1px solid ${WK.line}`, display: 'flex',
    alignItems: 'center', justifyContent: 'center', fontFamily: WK.mono,
    fontSize: 8, color: WK.ink2 }}>{label}</div>;
}
function WField({ label, value, h = 38, leading }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
      {label && <span style={{ fontSize: 10.5, fontWeight: 700, color: WK.ink2,
        textTransform: 'uppercase', letterSpacing: 0.4 }}>{label}</span>}
      <div style={{ height: h, borderRadius: 8, border: `1.5px solid ${WK.line}`,
        background: WK.fill3, display: 'flex', alignItems: 'center', gap: 8,
        padding: '0 11px' }}>
        {leading && <WIcon s={16} />}
        {value
          ? <span style={{ fontSize: 12.5, color: WK.ink }}>{value}</span>
          : <WLine w="55%" h={7} />}
      </div>
    </div>
  );
}
function WSearch({ placeholder = 'Search destinations' }) {
  return (
    <div style={{ height: 38, borderRadius: 20, border: `1.5px solid ${WK.line}`,
      background: WK.fill3, display: 'flex', alignItems: 'center', gap: 9, padding: '0 14px' }}>
      <div style={{ width: 14, height: 14, borderRadius: '50%', border: `1.5px solid ${WK.ink2}` }} />
      <span style={{ fontSize: 12.5, color: WK.ink3 }}>{placeholder}</span>
    </div>
  );
}
function WDivider({ m = 0 }) {
  return <div style={{ height: 1, background: WK.line2, margin: `${m}px 0`, flexShrink: 0 }} />;
}
function WCard({ children, style, pad = 12 }) {
  return (
    <div style={{ border: `1px solid ${WK.line}`, borderRadius: 10, background: WK.screen,
      padding: pad, boxSizing: 'border-box', ...style }}>{children}</div>
  );
}

// ── source-provenance tag (Trust Through Transparency) ──────────
function WSource({ kind }) {
  // kind: 'news' | 'nomad' | 'both'
  const map = {
    news:  { t: 'NEWS-VERIFIED', d: false },
    nomad: { t: 'NOMAD REPORT',  d: true },
    both:  { t: 'NEWS + NOMAD',  d: false },
  };
  const m = map[kind] || map.news;
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4,
      padding: '2px 7px', borderRadius: 4, fontFamily: WK.mono, fontSize: 8.5,
      letterSpacing: 0.3, fontWeight: 500, color: WK.ink2,
      border: `1px ${m.d ? 'dashed' : 'solid'} ${WK.ink3}`, background: WK.fill3 }}>
      <span style={{ width: 6, height: 6, borderRadius: m.d ? 1 : '50%',
        background: WK.ink2 }} />{m.t}
    </span>
  );
}

// ── score ring (grayscale gauge) ────────────────────────────────
function WRing({ size = 64, score = '7.8', label = 'SAFETY' }) {
  return (
    <div style={{ width: size, height: size, borderRadius: '50%', flexShrink: 0,
      border: `3px solid ${WK.line}`, borderTopColor: WK.ink, borderRightColor: WK.ink,
      display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
      transform: 'rotate(35deg)' }}>
      <div style={{ transform: 'rotate(-35deg)', textAlign: 'center' }}>
        <div style={{ fontSize: size * 0.30, fontWeight: 800, lineHeight: 1, color: WK.ink }}>{score}</div>
        <div style={{ fontFamily: WK.mono, fontSize: 6.5, letterSpacing: 0.5, color: WK.ink2 }}>{label}</div>
      </div>
    </div>
  );
}

// ── sub-score bar ───────────────────────────────────────────────
function WMeter({ label, fill = 0.7, tag }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
      <span style={{ fontSize: 11, color: WK.ink, width: 78, flexShrink: 0 }}>{label}</span>
      <div style={{ flex: 1, height: 7, borderRadius: 4, background: WK.fill,
        border: `1px solid ${WK.line2}`, overflow: 'hidden' }}>
        <div style={{ width: `${fill * 100}%`, height: '100%', background: WK.ink2 }} />
      </div>
      {tag && <span style={{ fontFamily: WK.mono, fontSize: 9, color: WK.ink2, width: 22,
        textAlign: 'right' }}>{tag}</span>}
    </div>
  );
}

// ── heat-map placeholder (grayscale, hatch = risk) ──────────────
// blobs: [{top,left,w,h,risk(1-4),r}]
function WMap({ h = 200, blobs = [], pin, label = 'INTERACTIVE MAP' }) {
  return (
    <div className="wk-dot" style={{ position: 'relative', width: '100%', height: h,
      background: WK.fill3, overflow: 'hidden' }}>
      <span style={{ position: 'absolute', top: 8, left: 8, fontFamily: WK.mono,
        fontSize: 8.5, letterSpacing: 0.5, color: WK.ink3,
        background: WK.screen, padding: '2px 6px', borderRadius: 3, border: `1px solid ${WK.line2}` }}>{label}</span>
      {blobs.map((b, i) => (
        <div key={i} className={`wk-hatch${b.risk || 2}`} style={{ position: 'absolute',
          top: b.top, left: b.left, width: b.w, height: b.h,
          borderRadius: b.r != null ? b.r : '46% 54% 50% 50% / 52% 48% 52% 48%',
          border: `1px solid ${WK.line}` }} />
      ))}
      {pin && <div style={{ position: 'absolute', top: pin.top, left: pin.left,
        width: 16, height: 16, borderRadius: '50% 50% 50% 0', transform: 'rotate(-45deg)',
        background: WK.ink, border: '2px solid #fff', boxShadow: '0 1px 3px rgba(0,0,0,.3)' }} />}
    </div>
  );
}
function WHeatLegend({ items = ['Low', 'Moderate', 'Elevated', 'High'] }) {
  return (
    <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
      {items.map((t, i) => (
        <div key={t} style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
          <span className={`wk-hatch${i + 1}`} style={{ width: 14, height: 10, borderRadius: 2,
            border: `1px solid ${WK.line}` }} />
          <span style={{ fontSize: 9.5, color: WK.ink2 }}>{t}</span>
        </div>
      ))}
    </div>
  );
}

// ── persona / context pin used inline near an element ───────────
function WPin({ n }) {
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      width: 17, height: 17, borderRadius: '50%', background: WK.anno, color: '#fff',
      fontFamily: WK.ui, fontSize: 10, fontWeight: 800, flexShrink: 0,
      boxShadow: '0 0 0 2px #fff', verticalAlign: 'middle' }}>{n}</span>
  );
}

// ─────────────────────────────────────────────────────────────
// Section header inside a screen
// ─────────────────────────────────────────────────────────────
function WHead({ title, sub, back, action }) {
  return (
    <div style={{ padding: '12px 16px 10px', flexShrink: 0 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        {back && <div style={{ width: 16, height: 16, borderLeft: `2px solid ${WK.ink}`,
          borderBottom: `2px solid ${WK.ink}`, transform: 'rotate(45deg)', flexShrink: 0 }} />}
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 17, fontWeight: 800, letterSpacing: -0.3, color: WK.ink }}>{title}</div>
          {sub && <div style={{ fontSize: 11, color: WK.ink2, marginTop: 1 }}>{sub}</div>}
        </div>
        {action}
      </div>
    </div>
  );
}

// padded scroll body
function WBody({ children, p = 16, gap = 14, style }) {
  return (
    <div style={{ flex: 1, minHeight: 0, padding: p, display: 'flex',
      flexDirection: 'column', gap, boxSizing: 'border-box', ...style }}>{children}</div>
  );
}

// ─────────────────────────────────────────────────────────────
// Annotated screen wrapper: phone + notes column on a canvas card
// notes: [{n, title, body}]
// ─────────────────────────────────────────────────────────────
function Annotated({ children, notes = [], persona, flowStep }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center',
      padding: 22, gap: 20, fontFamily: WK.ui }}>
      <div style={{ position: 'relative' }}>
        {flowStep && (
          <div style={{ fontFamily: WK.mono, fontSize: 9, letterSpacing: 0.8, color: WK.ink3,
            marginBottom: 8, textTransform: 'uppercase' }}>{flowStep}</div>
        )}
        {children}
      </div>
      {(persona || notes.length > 0) && (
        <div style={{ width: PHONE_W }}>
          {persona && (
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12,
              paddingBottom: 12, borderBottom: `1px solid ${WK.line2}` }}>
              <div style={{ width: 30, height: 30, borderRadius: '50%', background: WK.fill,
                border: `1px solid ${WK.line}`, flexShrink: 0 }} />
              <div style={{ minWidth: 0 }}>
                <div style={{ fontFamily: WK.hand, fontSize: 18, lineHeight: 1.05, color: WK.anno,
                  whiteSpace: 'nowrap' }}>{persona.name}</div>
                <div style={{ fontSize: 10, color: WK.ink2, lineHeight: 1.2, marginTop: 1 }}>{persona.role}</div>
              </div>
            </div>
          )}
          <div style={{ fontFamily: WK.mono, fontSize: 10, letterSpacing: 1, color: WK.ink3,
            textTransform: 'uppercase', marginBottom: 10 }}>Annotations</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            {notes.map((nt) => (
              <div key={nt.n} style={{ display: 'flex', gap: 9 }}>
                <WPin n={nt.n} />
                <div style={{ flex: 1 }}>
                  {nt.title && <div style={{ fontFamily: WK.ui, fontSize: 12, fontWeight: 700,
                    color: WK.ink, marginBottom: 3, lineHeight: 1.3, textTransform: 'uppercase',
                    letterSpacing: 0.4 }}>{nt.title}</div>}
                  <div style={{ fontFamily: WK.ui, fontSize: 14, lineHeight: 1.5,
                    color: WK.ink2 }}>{nt.body}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

const ARTBOARD_W = 22 * 2 + PHONE_W; // padding + phone (notes go below)
const ARTBOARD_H = PHONE_H + 44;

Object.assign(window, {
  WK, WPhone, WStatus, WTab, TABS,
  WLine, WLines, WImg, WChip, WBtn, WIcon, WIconCircle, WField, WSearch,
  WDivider, WCard, WSource, WRing, WMeter, WMap, WHeatLegend, WPin,
  WHead, WBody, Annotated, PHONE_W, PHONE_H, ARTBOARD_W, ARTBOARD_H,
});