// flows-saveshare.jsx — Saved/compare + shareable report + profile/settings
const { WK, WPhone, WLine, WLines, WImg, WChip, WBtn, WIcon, WIconCircle,
  WSearch, WDivider, WCard, WSource, WRing, WMeter, WMap, WHeatLegend, WHead, WBody } = window;

const MARCUS_S = { name: 'Marcus, 34', role: 'Comparing destinations' };
const OKAFOR_S = { name: 'The Okafors', role: 'Sharing with family' };
const PRIYA_S = { name: 'Priya, 27', role: 'Managing her profile' };

// ── SAVED + COMPARE ─────────────────────────────────────────────
function SavedCompare() {
  const metrics = [
    ['Overall', '7.8', '8.6', 0.78, 0.86],
    ['Civil', '7.8', '8.9', 0.78, 0.89],
    ['Crime', '6.2', '8.1', 0.62, 0.81],
    ['Women\u2019s', '6.6', '8.4', 0.66, 0.84],
    ['Health', '8.1', '8.8', 0.81, 0.88],
    ['Co-work', '8.4', '7.9', 0.84, 0.79],
  ];
  return (
    <window.Annotated persona={MARCUS_S} flowStep="SAVED → COMPARE"
      notes={[
        { n: 1, title: 'Compare side-by-side', body: 'Saved destinations line up in a matrix so the decision is a glance, not a tab-juggle.' },
        { n: 2, title: 'Aligned sub-scores', body: 'Same metrics, same rows — the winner per row is obvious.' },
        { n: 3, title: 'Add up to 3', body: 'Slot in another saved city to widen the comparison.' },
      ]}>
      <WPhone tab="saved">
        <WHead title="Compare" sub="2 of 3 destinations"
          action={<WChip sm active>Compare</WChip>} />
        <WBody p={0} gap={0} style={{ overflow: 'hidden' }}>
          <div style={{ padding: '0 16px', display: 'flex', flexDirection: 'column', gap: 0 }}>
            {/* column headers */}
            <div style={{ display: 'flex', gap: 8, position: 'relative' }}>
              <span style={{ position: 'absolute', top: -8, right: 0 }}><window.WPin n={1} /></span>
              <div style={{ width: 56, flexShrink: 0 }} />
              {[['Medellín', '7.8'], ['Lisbon', '8.6']].map(([c, s]) => (
                <div key={c} style={{ flex: 1, display: 'flex', flexDirection: 'column',
                  alignItems: 'center', gap: 5 }}>
                  <WImg label="" h={40} w={40} r={8} />
                  <div style={{ fontSize: 11.5, fontWeight: 800, textAlign: 'center' }}>{c}</div>
                </div>
              ))}
              <div style={{ width: 30, flexShrink: 0, display: 'flex', alignItems: 'flex-start',
                justifyContent: 'center' }}>
                <div style={{ width: 26, height: 26, borderRadius: 7, border: `1.5px dashed ${WK.line}`,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontSize: 15, color: WK.ink2 }}>＋</div>
              </div>
            </div>
            <div style={{ height: 10 }} />
            {/* matrix rows */}
            <div style={{ position: 'relative' }}>
              <span style={{ position: 'absolute', top: 24, right: -2 }}><window.WPin n={2} /></span>
              {metrics.map(([label, a, b, fa, fb], i) => (
                <div key={label} style={{ display: 'flex', gap: 8, alignItems: 'center',
                  padding: '9px 0', borderTop: i ? `1px solid ${WK.line2}` : 'none' }}>
                  <span style={{ width: 56, flexShrink: 0, fontSize: 10.5, fontWeight: i === 0 ? 800 : 600,
                    color: WK.ink2 }}>{label}</span>
                  {[[a, fa], [b, fb]].map(([v, f], k) => (
                    <div key={k} style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 4 }}>
                      <span style={{ fontSize: 13, fontWeight: 800, textAlign: 'center' }}>{v}</span>
                      <div style={{ height: 5, borderRadius: 3, background: WK.fill, border: `1px solid ${WK.line2}`,
                        overflow: 'hidden' }}>
                        <div style={{ width: `${f * 100}%`, height: '100%', background: WK.ink2, margin: '0 auto' }} />
                      </div>
                    </div>
                  ))}
                  <div style={{ width: 30, flexShrink: 0 }} />
                </div>
              ))}
            </div>
          </div>
        </WBody>
        <div style={{ flexShrink: 0, borderTop: `1px solid ${WK.line2}`, padding: '9px 14px',
          background: WK.screen, position: 'relative' }}>
          <span style={{ position: 'absolute', top: -10, right: 14 }}><window.WPin n={3} /></span>
          <WBtn primary full sm>＋ Add city</WBtn>
        </div>
      </WPhone>
    </window.Annotated>
  );
}

// ── SHAREABLE SAFETY REPORT ─────────────────────────────────────
function ShareReport() {
  return (
    <window.Annotated persona={OKAFOR_S} flowStep="SHAREABLE REPORT"
      notes={[
        { n: 1, title: 'A report, not a screenshot', body: 'A clean, branded summary relatives or an employer can read without the app.' },
        { n: 2, title: 'Lens travels with it', body: 'The report states which lens (family / accessibility) it was generated under.' },
        { n: 3, title: 'Sources stay attached', body: 'Provenance follows the report off-platform — trust doesn\u2019t break on share.' },
        { n: 4, title: 'Link or live-follow', body: 'Share a snapshot, or let family follow updates while the nomad is there.' },
      ]}>
      <WPhone tab="saved">
        <WHead title="Share report" back
          action={<span style={{ fontSize: 12, fontWeight: 700, color: WK.ink2 }}>Done</span>} />
        <WBody p={0} gap={0} style={{ overflow: 'hidden' }}>
          <div style={{ padding: '0 16px', display: 'flex', flexDirection: 'column', gap: 12 }}>
            {/* report preview card */}
            <WCard pad={0} style={{ overflow: 'hidden', position: 'relative' }}>
              <span style={{ position: 'absolute', top: -8, right: 10, zIndex: 2 }}><window.WPin n={1} /></span>
              <WImg label="CITY BANNER" h={66} r={0} />
              <div style={{ padding: 13 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 11, marginBottom: 11 }}>
                  <WRing size={48} score="8.2" label="" />
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 15, fontWeight: 800 }}>Porto, Portugal</div>
                    <div style={{ marginTop: 4, position: 'relative', display: 'inline-block' }}>
                      <WChip sm active>Family lens</WChip>
                      <span style={{ position: 'absolute', top: -6, right: -22 }}><window.WPin n={2} /></span>
                    </div>
                  </div>
                </div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 7 }}>
                  <WMeter label="Child safety" fill={0.84} tag="8.4" />
                  <WMeter label="Healthcare" fill={0.8} tag="8.0" />
                </div>
                <div style={{ display: 'flex', gap: 5, marginTop: 10, alignItems: 'center' }}>
                  <WSource kind="news" /><WSource kind="nomad" />
                  <span style={{ position: 'relative', marginLeft: 'auto' }}>
                    <WLine w={50} h={6} />
                    <span style={{ position: 'absolute', top: -10, right: -10 }}><window.WPin n={3} /></span>
                  </span>
                </div>
              </div>
            </WCard>
            {/* share targets */}
            <div style={{ position: 'relative' }}>
              <span style={{ position: 'absolute', top: -6, right: 0 }}><window.WPin n={4} /></span>
              <div style={{ display: 'flex', gap: 10, marginBottom: 11 }}>
                {['LINK', 'PDF', 'MSG', 'MAIL'].map((t) => (
                  <div key={t} style={{ flex: 1, display: 'flex', flexDirection: 'column',
                    alignItems: 'center', gap: 5 }}>
                    <WIconCircle s={42} label={t} />
                  </div>
                ))}
              </div>
              <WCard pad={11} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <WIcon s={20} />
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 12, fontWeight: 700 }}>Let family follow live</div>
                  <div style={{ fontSize: 10, color: WK.ink2 }}>Auto-updates while you\u2019re there</div>
                </div>
                <div style={{ width: 34, height: 19, borderRadius: 11, background: WK.fill,
                  border: `1px solid ${WK.line}`, padding: 2 }}>
                  <div style={{ width: 15, height: 15, borderRadius: '50%', background: '#fff' }} />
                </div>
              </WCard>
            </div>
          </div>
        </WBody>
      </WPhone>
    </window.Annotated>
  );
}

// ── PROFILE & SETTINGS ──────────────────────────────────────────
function ProfileSettings() {
  const sections = [
    { h: 'Your safety lens', rows: ['Women\u2019s safety · on', 'Healthcare priority · on', 'Civil-unrest alerts · on', 'Accessibility · off'], pin: 1 },
    { h: 'Notifications', rows: ['Near-me alerts', 'Watch-list changes', 'Weekly digest'], pin: 2 },
    { h: 'Data & sources', rows: ['About our data chain', 'Verified nomad status', 'Privacy'], pin: 3 },
  ];
  return (
    <window.Annotated persona={PRIYA_S} flowStep="PROFILE & SETTINGS"
      notes={[
        { n: 1, title: 'Lens lives here', body: 'The onboarding choices are editable forever — the app grows with the user.' },
        { n: 2, title: 'Alert control', body: 'Tune the firehose: near-me, watch-list, digest.' },
        { n: 3, title: 'Transparency, on demand', body: '"How our data works" & verified-nomad status are first-class, not buried legal text.' },
      ]}>
      <WPhone tab="me">
        <WBody p={0} gap={0} style={{ overflow: 'hidden' }}>
          <div style={{ padding: '16px 16px 8px', display: 'flex', alignItems: 'center', gap: 12 }}>
            <WIconCircle s={50} label="AVA" />
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 16, fontWeight: 800 }}>Priya Nair</div>
              <div style={{ fontSize: 11, color: WK.ink2 }}>First-timer · solo</div>
              <div style={{ marginTop: 5 }}><WChip sm>Verified nomad</WChip></div>
            </div>
          </div>
          <div style={{ padding: '0 16px 12px', display: 'flex', gap: 9 }}>
            {[['12', 'SAVED'], ['3', 'REPORTS'], ['2', 'TRIPS']].map(([n, l]) => (
              <WCard key={l} pad={9} style={{ flex: 1, textAlign: 'center' }}>
                <div style={{ fontSize: 16, fontWeight: 800 }}>{n}</div>
                <div style={{ fontFamily: WK.mono, fontSize: 7.5, color: WK.ink2 }}>{l}</div>
              </WCard>
            ))}
          </div>
          <div style={{ padding: '0 16px', display: 'flex', flexDirection: 'column', gap: 12 }}>
            {sections.map((s) => (
              <div key={s.h} style={{ position: 'relative' }}>
                <div style={{ fontSize: 10.5, fontWeight: 800, color: WK.ink2, textTransform: 'uppercase',
                  letterSpacing: 0.4, marginBottom: 7, display: 'flex', alignItems: 'center', gap: 6 }}>
                  {s.h} <window.WPin n={s.pin} /></div>
                <WCard pad={0}>
                  {s.rows.map((r, i) => (
                    <div key={r} style={{ display: 'flex', alignItems: 'center', gap: 10,
                      padding: '11px 12px', borderTop: i ? `1px solid ${WK.line2}` : 'none' }}>
                      <WIcon s={18} r={5} />
                      <span style={{ flex: 1, fontSize: 12.5, fontWeight: 600 }}>{r}</span>
                      <div style={{ width: 9, height: 9, borderTop: `2px solid ${WK.ink3}`,
                        borderRight: `2px solid ${WK.ink3}`, transform: 'rotate(45deg)' }} />
                    </div>
                  ))}
                </WCard>
              </div>
            ))}
          </div>
        </WBody>
      </WPhone>
    </window.Annotated>
  );
}

Object.assign(window, { SavedCompare, ShareReport, ProfileSettings });