// TownPost screens — alerts, post detail, events, marketplace, map, profile, compose, notifs, onboarding

// ─── Radar feed (formerly Alerts) ──────────────────────────
function ScreenAlerts({ onNav = () => {}, onTap, onReport = () => {} }) {
  const [filter, setFilter] = React.useState('all');
  const filters = [
    { id: 'all', label: 'All', n: ALERTS.length },
    { id: 'urgent', label: 'Urgent', n: 1 },
    { id: 'weather', label: 'Weather', n: 2 },
    { id: 'civic', label: 'Civic', n: 1 },
    { id: 'traffic', label: 'Traffic', n: 1 },
  ];
  return (
    <div style={{ background: TP.cream, height: '100%', display: 'flex', flexDirection: 'column' }}>
      <TPTopBar
        title="Radar"
        subtitle="3 LIVE · SCANNING QUINTE WEST"
        leading={
          <div style={{
            width: 36, height: 36, borderRadius: '50%',
            background: TP.alertRed, color: '#fff',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            boxShadow: `0 0 0 4px ${TP.redTint}`,
          }}>
            <TPRadarIcon size={22} stroke={2} color="#fff" scanning={true} />
          </div>
        }
        trailing={
          <button onClick={onReport} style={{
            display: 'flex', alignItems: 'center', gap: 6,
            padding: '8px 14px 8px 11px', borderRadius: TP.r.pill,
            background: TP.alertRed, color: '#fff', border: 'none',
            fontFamily: TP.sans, fontSize: 13, fontWeight: 600, letterSpacing: 0.1,
            cursor: 'pointer',
            boxShadow: '0 4px 12px rgba(178,58,46,0.30)',
          }}>
            <TPIcon name="plus" size={14} stroke={2.6} color="#fff" />
            Post
          </button>
        }
      />
      {/* Map strip preview */}
      <div style={{ height: 100, position: 'relative', borderBottom: `1px solid ${TP.hairline}` }}>
        <MapBackdrop />
        <Pin x={50} y={20} kind="alert" />
        <Pin x={180} y={50} kind="alert" />
        <Pin x={300} y={30} kind="alert" />
        <div style={{ position: 'absolute', bottom: 8, left: 12, background: TP.paper, padding: '4px 10px', borderRadius: TP.r.pill, fontFamily: TP.mono, fontSize: 10, color: TP.inkSoft, fontWeight: 600, letterSpacing: 0.6 }}>3 ACTIVE · TAP TO EXPAND</div>
      </div>

      {/* Inline "Post to Radar" prompt — encourages community reporting */}
      <button onClick={onReport} style={{
        display: 'flex', alignItems: 'center', gap: 12,
        margin: '12px 16px 4px', padding: '12px 14px',
        background: TP.paper, border: `1px solid ${TP.hairlineStrong}`,
        borderRadius: TP.r.lg, cursor: 'pointer', textAlign: 'left',
        boxShadow: '0 1px 0 rgba(31,27,22,0.03)',
      }}>
        <div style={{
          width: 36, height: 36, borderRadius: '50%',
          background: TP.redTint, color: TP.alertRed,
          display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
        }}>
          <TPRadarIcon size={20} stroke={2} color={TP.alertRed} scanning={true} />
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontFamily: TP.sans, fontSize: 14, fontWeight: 600, color: TP.ink, lineHeight: 1.2 }}>
            See something? Post to Radar.
          </div>
          <div style={{ fontFamily: TP.sans, fontSize: 11.5, color: TP.muted, marginTop: 2 }}>
            Neighbors confirm or correct it in real time.
          </div>
        </div>
        <TPIcon name="chevronRight" size={16} color={TP.muted} stroke={2} />
      </button>

      <div style={{ display: 'flex', gap: 6, padding: '10px 16px', overflowX: 'auto', background: 'transparent' }}>
        {filters.map(f => {
          const a = f.id === filter;
          return (
            <button key={f.id} onClick={() => setFilter(f.id)} style={{
              flexShrink: 0, padding: '6px 12px', borderRadius: TP.r.pill,
              border: `1px solid ${a ? TP.alertRed : TP.hairlineStrong}`,
              background: a ? TP.alertRed : 'transparent',
              color: a ? '#fff' : TP.inkSoft,
              fontFamily: TP.sans, fontSize: 12, fontWeight: 600,
              display: 'flex', alignItems: 'center', gap: 6,
              cursor: 'pointer',
            }}>
              {f.label}
              <span style={{ fontFamily: TP.mono, fontSize: 10, opacity: a ? 0.9 : 0.5 }}>{f.n}</span>
            </button>
          );
        })}
      </div>
      <div style={{ flex: 1, overflow: 'auto' }}>
        {ALERTS.map(a => <TPAlertCard key={a.id} alert={a} onTap={() => onTap && onTap(a)} />)}
        <div style={{ padding: '16px 16px 8px', textAlign: 'center', fontFamily: TP.sans, fontSize: 11, color: TP.muted }}>
          ┄ end of live signals ┄
        </div>
      </div>
      <TPTabBar active="alerts" onChange={onNav} />
    </div>
  );
}

// ─── Alert detail with map ──────────────────────────
function ScreenAlertDetail({ onNav = () => {}, alert: alertProp }) {
  const a = alertProp || ALERTS[0];
  return (
    <div style={{ background: TP.cream, height: '100%', display: 'flex', flexDirection: 'column' }}>
      {/* Top bar */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '12px 16px', background: TP.paper, borderBottom: `1px solid ${TP.hairline}` }}>
        <button style={{ width: 32, height: 32, borderRadius: '50%', background: 'transparent', border: `1px solid ${TP.hairlineStrong}`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <TPIcon name="chevronLeft" size={18} color={TP.ink} />
        </button>
        <div style={{ flex: 1, fontFamily: TP.sans, fontSize: 14, fontWeight: 600, color: TP.ink }}>Alert</div>
        <button style={{ width: 32, height: 32, borderRadius: '50%', background: 'transparent', border: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <TPIcon name="bell" size={18} color={TP.ink} stroke={2} />
        </button>
        <button style={{ width: 32, height: 32, borderRadius: '50%', background: 'transparent', border: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <TPIcon name="share" size={18} color={TP.ink} />
        </button>
      </div>

      <div style={{ flex: 1, overflow: 'auto' }}>
        {/* HERO: red banner over map. The status banner is the visual anchor. */}
        <div style={{ position: 'relative', background: TP.alertRed, color: TP.cream }}>
          {/* Status banner */}
          <div style={{ padding: '14px 16px 12px', display: 'flex', alignItems: 'center', gap: 10 }}>
            <TPTrustBadge official compact />
            <span style={{ fontFamily: TP.mono, fontSize: 10, fontWeight: 700, letterSpacing: 1.2, opacity: 0.92 }}>
              URGENT · UPDATED {a.time?.toUpperCase() || '4 MIN AGO'}
            </span>
            <span style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 4, fontFamily: TP.sans, fontSize: 11.5, opacity: 0.92, fontWeight: 500 }}>
              <TPIcon name="eye" size={12} stroke={2} color={TP.cream} /> {a.views || '3.4k'}
            </span>
          </div>

          {/* Title + source on red */}
          <div style={{ padding: '0 16px 16px' }}>
            <div style={{
              fontFamily: TP.serif, fontSize: 26, color: TP.cream,
              lineHeight: 1.18, letterSpacing: -0.4, marginBottom: 10,
            }}>
              {a.title || 'Water main break — Beckett Ave between 3rd and 7th'}
            </div>
            <div style={{
              display: 'flex', alignItems: 'center', gap: 8,
              fontFamily: TP.sans, fontSize: 12, color: TP.cream, opacity: 0.88,
              flexWrap: 'wrap',
            }}>
              <span style={{ display: 'flex', alignItems: 'center', gap: 4, whiteSpace: 'nowrap' }}>
                <TPIcon name="location" size={12} stroke={2} color={TP.cream} /> {a.area || 'Old Mill'}
              </span>
              <span>·</span>
              <span style={{ whiteSpace: 'nowrap' }}>{a.source || 'Quinte West Public Works'}</span>
            </div>
          </div>
        </div>

        {/* Map strip */}
        <div style={{ height: 180, position: 'relative', background: TP.cream, borderBottom: `1px solid ${TP.hairline}` }}>
          <MapBackdrop />
          <div style={{
            position: 'absolute', left: '20%', top: '24%', width: '50%', height: '44%',
            background: 'rgba(178,58,46,0.18)', border: `2px dashed ${TP.alertRed}`, borderRadius: 12,
          }} />
          <Pin x={150} y={72} kind="alert" />
          <button style={{
            position: 'absolute', bottom: 12, right: 12,
            background: TP.paper, border: `1px solid ${TP.hairlineStrong}`,
            padding: '6px 12px', borderRadius: TP.r.pill, cursor: 'pointer',
            display: 'flex', alignItems: 'center', gap: 5,
            fontFamily: TP.sans, fontSize: 12, color: TP.ink, fontWeight: 600,
          }}>
            <TPIcon name="map" size={13} color={TP.ink} stroke={2} />
            Open map
          </button>
        </div>

        {/* Body */}
        <div style={{ padding: '16px 16px 14px', background: TP.paper, borderBottom: `1px solid ${TP.hairline}` }}>
          <div style={{ fontFamily: TP.sans, fontSize: 14.5, color: TP.inkSoft, lineHeight: 1.6 }}>
            {a.body || 'Crews are on scene at the intersection of Beckett and 5th. Expect low pressure or temporary outage in Old Mill west of the river. Estimated repair time is 4–6 hours. Boil-water advisory is NOT in effect.'} Please avoid the area; one lane is closed and emergency vehicles need access.
          </div>
        </div>

        {/* Key facts — 2-column with bigger spacing */}
        <div style={{
          padding: '14px 16px',
          background: TP.paper,
          display: 'grid', gridTemplateColumns: '1fr 1fr',
          gap: 1, background: TP.hairline,
          border: `1px solid ${TP.hairline}`,
          borderLeft: 'none', borderRight: 'none',
        }}>
          <FactBlock label="Affected" value="~840 homes" icon="home" />
          <FactBlock label="ETA" value="4–6 hrs" icon="alert" tone="amber" />
          <FactBlock label="Detour" value="Maple St" icon="car" />
          <FactBlock label="Hotline" value="(440) 555-WATER" icon="bell" link />
        </div>

        {/* Primary action — pinned visually */}
        <div style={{ padding: '16px 16px 8px', background: TP.paper }}>
          <button style={{
            width: '100%', padding: '14px 16px', borderRadius: TP.r.lg,
            background: TP.forest, color: TP.cream, border: 'none',
            fontFamily: TP.sans, fontSize: 14, fontWeight: 600,
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
            cursor: 'pointer',
          }}>
            <TPIcon name="bell" size={16} color={TP.cream} stroke={2.2} />
            Notify me of updates
          </button>
          <div style={{ display: 'flex', gap: 10, marginTop: 8 }}>
            <button style={{
              flex: 1, padding: '10px 12px', borderRadius: TP.r.md,
              background: 'transparent', color: TP.ink,
              border: `1px solid ${TP.hairlineStrong}`,
              fontFamily: TP.sans, fontSize: 12.5, fontWeight: 600,
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
              cursor: 'pointer',
            }}>
              <TPIcon name="flag" size={13} color={TP.ink} stroke={2} />
              Add info
            </button>
            <button style={{
              flex: 1, padding: '10px 12px', borderRadius: TP.r.md,
              background: 'transparent', color: TP.ink,
              border: `1px solid ${TP.hairlineStrong}`,
              fontFamily: TP.sans, fontSize: 12.5, fontWeight: 600,
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
              cursor: 'pointer',
            }}>
              <TPIcon name="share" size={13} color={TP.ink} stroke={2} />
              Share
            </button>
          </div>
        </div>

        {/* Timeline */}
        <div style={{ background: TP.paper, paddingTop: 18, paddingBottom: 4, marginTop: 8, borderTop: `1px solid ${TP.hairline}` }}>
          <div style={{ padding: '0 16px 12px', fontFamily: TP.mono, fontSize: 10, fontWeight: 700, color: TP.muted, letterSpacing: 1.4, textTransform: 'uppercase' }}>
            Timeline · 3 updates
          </div>
          <Timeline />
        </div>

        <div style={{ height: 32 }} />
      </div>
    </div>
  );
}

function FactBlock({ label, value, icon, tone, link }) {
  const accents = { default: TP.forest, amber: TP.alertAmber, red: TP.alertRed };
  const accent = accents[tone] || accents.default;
  return (
    <div style={{
      background: TP.paper, padding: '14px 14px',
      display: 'flex', alignItems: 'center', gap: 12, minWidth: 0,
    }}>
      <div style={{
        width: 36, height: 36, borderRadius: 10,
        background: tone === 'amber' ? TP.amberTint : TP.forestTint,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        flexShrink: 0,
      }}>
        <TPIcon name={icon} size={17} color={accent} stroke={2} />
      </div>
      <div style={{ minWidth: 0, flex: 1 }}>
        <div style={{ fontFamily: TP.mono, fontSize: 9, color: TP.muted, letterSpacing: 0.8, textTransform: 'uppercase', marginBottom: 2 }}>{label}</div>
        <div style={{
          fontFamily: TP.sans, fontSize: 13.5, fontWeight: 600,
          color: link ? TP.forest : TP.ink,
          whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
        }}>{value}</div>
      </div>
    </div>
  );
}

function Timeline() {
  const events = [
    { time: '9:42 AM', text: 'Crews arrived on scene. Excavation started.', live: true },
    { time: '9:31 AM', text: 'Reported by Beckett Ave resident. Water visible in street.' },
    { time: '9:28 AM', text: 'Pressure drop detected by central sensor.' },
  ];
  return (
    <div style={{ padding: '0 16px 6px' }}>
      {events.map((e, i) => (
        <div key={i} style={{ display: 'flex', gap: 12, position: 'relative', paddingBottom: 14 }}>
          <div style={{ position: 'relative', width: 12, paddingTop: 4 }}>
            <div style={{
              width: 10, height: 10, borderRadius: '50%',
              background: e.live ? TP.alertRed : TP.mutedSoft,
              border: '2px solid ' + TP.cream,
              boxShadow: e.live ? `0 0 0 3px ${TP.redTint}` : 'none',
            }} />
            {i !== events.length - 1 && (
              <div style={{ position: 'absolute', top: 18, left: 4, bottom: -14, width: 2, background: TP.hairline }} />
            )}
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontFamily: TP.mono, fontSize: 10, color: TP.muted, letterSpacing: 0.6, marginBottom: 2 }}>{e.time}</div>
            <div style={{ fontFamily: TP.sans, fontSize: 13, color: TP.inkSoft, lineHeight: 1.4 }}>{e.text}</div>
          </div>
        </div>
      ))}
    </div>
  );
}

// ─── Single post detail with comments ──────────────────────────
function ScreenPostDetail({ onNav = () => {} }) {
  const post = FEED[3]; // Dev's plumber question
  return (
    <div style={{ background: TP.cream, height: '100%', display: 'flex', flexDirection: 'column' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '12px 16px', background: TP.paper, borderBottom: `1px solid ${TP.hairline}` }}>
        <button style={{ width: 32, height: 32, borderRadius: '50%', background: 'transparent', border: `1px solid ${TP.hairlineStrong}`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <TPIcon name="chevronLeft" size={18} color={TP.ink} />
        </button>
        <div style={{ flex: 1, fontFamily: TP.sans, fontSize: 14, fontWeight: 600, color: TP.ink }}>Post</div>
        <TPIcon name="share" size={18} color={TP.ink} />
      </div>
      <div style={{ flex: 1, overflow: 'auto' }}>
        {/* Main post */}
        <div style={{ background: TP.paper, padding: '16px', borderBottom: `1px solid ${TP.hairline}` }}>
          <div style={{ display: 'flex', gap: 10, marginBottom: 12, alignItems: 'center' }}>
            <TPAvatar name={post.author} hue={post.hue} size={44} />
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <span style={{ fontFamily: TP.sans, fontWeight: 600, fontSize: 14.5, color: TP.ink }}>{post.author}</span>
                {post.verified && (
                  <span style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 13, height: 13, borderRadius: '50%', background: TP.forest, flexShrink: 0 }}>
                    <TPIcon name="check" size={7.5} color="#fff" stroke={3.5} />
                  </span>
                )}
                {post.rating && (
                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 2, fontFamily: TP.mono, fontSize: 11.5, fontWeight: 600, color: TP.inkSoft, marginLeft: 2 }}>
                    <span style={{ color: TP.ochre }}>★</span>
                    {post.rating.toFixed(1)}
                  </span>
                )}
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontFamily: TP.sans, fontSize: 11.5, color: TP.muted, marginTop: 2 }}>
                <span>Belleville & Surrounding Area · 47 min</span>
              </div>
            </div>
            {post.trending && <TPTrendingBadge compact />}
          </div>
          <div style={{
            fontFamily: TP.sans, fontSize: 16.5, color: TP.ink,
            lineHeight: 1.5, marginBottom: 14,
          }}><TPRichText text={post.text} /></div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 16, padding: '10px 0', borderTop: `1px solid ${TP.hairline}`, borderBottom: `1px solid ${TP.hairline}`, fontFamily: TP.sans, fontSize: 12, color: TP.muted }}>
            <span><strong style={{ color: TP.ink }}>31</strong> replies</span>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
              <TPIcon name="helpful" size={13} color={TP.terracotta} stroke={2} />
              <strong style={{ color: TP.ink }}>14</strong> helpful
            </span>
            <span><strong style={{ color: TP.ink }}>18</strong> likes</span>
            <span style={{ marginLeft: 'auto', display: 'inline-flex', alignItems: 'center', gap: 4 }}>
              <TPIcon name="eye" size={12} color={TP.mutedSoft} stroke={1.8} />
              2.1K
            </span>
          </div>
          <div style={{ paddingTop: 10 }}>
            <TPPostActions stats={{ replies: 31, shares: 4, likes: 18, views: 2104 }} detail helpfulCount={14} />
          </div>
          {/* Post-level more menu — report option */}
          <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 6 }}>
            <TPMoreMenu items={[
              { icon: 'flag', label: 'Report post', tone: 'danger', onClick: () => {} },
              { icon: 'bell', label: 'Mute this thread', onClick: () => {} },
            ]} />
          </div>
        </div>

        {/* Top reply badge */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '12px 16px 6px' }}>
          <TPIcon name="helpful" size={13} color={TP.terracotta} stroke={2} />
          <span style={{ fontFamily: TP.mono, fontSize: 10, fontWeight: 700, color: TP.terracotta, letterSpacing: 1 }}>TOP REPLY · MARKED HELPFUL BY @DEV</span>
        </div>

        {/* Threaded comments */}
        {COMMENTS.map((c, i) => (
          <TPCommentThread key={c.id} comment={c} isTopReply={i === 0} postAuthorIsViewer />
        ))}
        <div style={{ height: 70 }} />
      </div>
      {/* Reply bar */}
      <div style={{
        padding: '10px 12px 12px',
        background: TP.paper,
        borderTop: `1px solid ${TP.hairline}`,
        boxShadow: '0 -2px 12px rgba(0,0,0,0.03)',
      }}>
        {/* Reply context — who you're replying to */}
        <div style={{
          display: 'flex', alignItems: 'center', gap: 6,
          padding: '0 4px 8px',
          fontFamily: TP.sans, fontSize: 11, color: TP.muted,
        }}>
          <TPIcon name="chat" size={11} color={TP.muted} stroke={2} />
          <span>Replying to</span>
          <span style={{ color: TP.terracotta, fontWeight: 600 }}>@MarisolHayes</span>
        </div>
        {/* Input row */}
        <div style={{
          display: 'flex', alignItems: 'center', gap: 10,
          padding: '6px 6px 6px 10px',
          background: TP.cream,
          border: `1px solid ${TP.hairline}`,
          borderRadius: 22,
        }}>
          <TPAvatar name="Dev Krishnan" hue={2} size={28} />
          <input
            type="text"
            placeholder="Share your thoughts…"
            style={{
              flex: 1, minWidth: 0, background: 'transparent', border: 'none', outline: 'none',
              fontFamily: TP.sans, fontSize: 13.5, color: TP.ink,
              padding: '6px 0',
            }}
          />
          {/* Inline affordances — quiet, single-color icons */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 2 }}>
            <button style={{
              width: 30, height: 30, borderRadius: '50%',
              background: 'transparent', border: 'none', cursor: 'pointer',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              color: TP.muted,
            }} aria-label="Add photo">
              <TPIcon name="image" size={16} stroke={1.8} />
            </button>
            <button style={{
              width: 30, height: 30, borderRadius: '50%',
              background: 'transparent', border: 'none', cursor: 'pointer',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              color: TP.muted, fontFamily: TP.sans, fontSize: 14, fontWeight: 600,
            }} aria-label="Mention">@</button>
          </div>
          <button style={{
            width: 34, height: 34, borderRadius: '50%',
            background: TP.forest, border: 'none', cursor: 'pointer',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            boxShadow: '0 1px 3px rgba(45,80,22,0.25)',
            flexShrink: 0,
          }} aria-label="Post reply">
            <TPIcon name="arrowUp" size={15} color="#fff" stroke={2.6} />
          </button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ScreenAlerts, ScreenAlertDetail, ScreenPostDetail });