// TownPost screens — compose, notifications, onboarding

// ─── Compose ──────────────────────────
function ScreenCompose({ onNav = () => {} }) {
  const [kind, setKind] = React.useState('post');
  const kinds = [
    { id: 'post', label: 'Post', icon: 'chat', tone: 'forest' },
    { id: 'ask', label: 'Ask', icon: 'question', tone: 'forest' },
    { id: 'sale', label: 'Sell', icon: 'tag', tone: 'terra' },
    { id: 'event', label: 'Event', icon: 'calendar', tone: 'ochre' },
    { id: 'alert', label: 'Alert', icon: 'alert', tone: 'red' },
  ];
  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={{ background: 'none', border: 'none', fontFamily: TP.sans, fontSize: 14, color: TP.muted, fontWeight: 500 }}>Cancel</button>
        <div style={{ flex: 1, textAlign: 'center', fontFamily: TP.sans, fontSize: 14, fontWeight: 600, color: TP.ink }}>New {kind}</div>
        <button style={{ padding: '7px 14px', borderRadius: TP.r.pill, background: TP.forest, color: TP.cream, border: 'none', fontFamily: TP.sans, fontSize: 12.5, fontWeight: 600 }}>Post</button>
      </div>

      {/* Kind selector */}
      <div style={{ display: 'flex', gap: 6, padding: '12px 16px', overflowX: 'auto', background: TP.paper, borderBottom: `1px solid ${TP.hairline}` }}>
        {kinds.map(k => {
          const a = k.id === kind;
          const tones = { red: TP.alertRed, forest: TP.forest, terra: TP.terracotta, ochre: TP.ochre };
          return (
            <button key={k.id} onClick={() => setKind(k.id)} style={{
              flexShrink: 0, padding: '7px 12px', borderRadius: TP.r.pill,
              border: `1px solid ${a ? tones[k.tone] : TP.hairlineStrong}`,
              background: a ? tones[k.tone] : 'transparent',
              color: a ? '#fff' : TP.inkSoft,
              fontFamily: TP.sans, fontSize: 12.5, fontWeight: 600,
              display: 'flex', alignItems: 'center', gap: 6,
            }}>
              <TPIcon name={k.icon} size={13} stroke={2} color={a ? '#fff' : tones[k.tone]} />
              {k.label}
            </button>
          );
        })}
      </div>

      {/* Author + neighborhood */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '12px 16px', background: TP.paper, borderBottom: `1px solid ${TP.hairline}` }}>
        <TPAvatar name="Dev Krishnan" hue={2} size={36} />
        <div style={{ flex: 1 }}>
          <div style={{ fontFamily: TP.sans, fontSize: 13.5, fontWeight: 600, color: TP.ink }}>Dev Krishnan</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 5, marginTop: 2, fontFamily: TP.sans, fontSize: 11.5, color: TP.muted }}>
            <TPIcon name="location" size={11} stroke={2} />
            <span style={{ background: TP.cream, padding: '2px 8px', borderRadius: 999, color: TP.inkSoft, fontWeight: 600 }}>Belleville & Surrounding Area</span>
            <TPIcon name="chevronDown" size={12} color={TP.muted} />
          </div>
        </div>
      </div>

      {/* Body */}
      <div style={{ flex: 1, padding: 16, background: TP.paper }}>
        <div style={{ fontFamily: TP.sans, fontSize: 17, color: TP.ink, lineHeight: 1.5, minHeight: 180 }}>
          Looking for a no-nonsense plumber who shows up when they say they will. Any recommendations? Bonus points for someone who works on old houses<span style={{ background: TP.ink, width: 2, height: 20, display: 'inline-block', verticalAlign: 'middle', marginLeft: 1, animation: 'blink 1s infinite' }} />
        </div>
        <style>{`@keyframes blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }`}</style>

        {/* Tag picker */}
        <div style={{ marginTop: 14, display: 'flex', gap: 6, flexWrap: 'wrap' }}>
          <span style={{ fontFamily: TP.mono, fontSize: 10, color: TP.muted, fontWeight: 700, letterSpacing: 1, alignSelf: 'center', marginRight: 4 }}>TAG:</span>
          <TPChip tone="forest" size="sm" icon="question">Question ✓</TPChip>
          <TPChip tone="default" size="sm">Recommend</TPChip>
          <TPChip tone="default" size="sm">Lost & Found</TPChip>
          <TPChip tone="default" size="sm">Volunteer</TPChip>
        </div>
      </div>

      {/* Toolbar */}
      <div style={{ background: TP.paper, borderTop: `1px solid ${TP.hairline}` }}>
        {/* Attachments row */}
        <div style={{ display: 'flex', gap: 8, padding: '12px 16px 10px', overflowX: 'auto' }}>
          {[
            { icon: 'image', label: 'Photo' },
            { icon: 'location', label: 'Place' },
            { icon: 'calendar', label: 'Date' },
            { icon: 'tag', label: 'Tag' },
          ].map(t => (
            <button key={t.icon} style={{
              flexShrink: 0, display: 'flex', alignItems: 'center', gap: 6,
              padding: '7px 12px', borderRadius: TP.r.pill,
              border: `1px solid ${TP.hairlineStrong}`, background: 'transparent',
              color: TP.forest, fontFamily: TP.sans, fontSize: 12.5, fontWeight: 600,
              cursor: 'pointer',
            }}>
              <TPIcon name={t.icon} size={15} stroke={2} color={TP.forest} />
              {t.label}
            </button>
          ))}
        </div>
        {/* Meta row */}
        <div style={{
          display: 'flex', alignItems: 'center', gap: 10,
          padding: '8px 16px 12px',
          borderTop: `1px solid ${TP.hairline}`,
          background: TP.cream,
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 5, fontFamily: TP.mono, fontSize: 10.5, color: TP.muted, fontWeight: 600, letterSpacing: 0.6, textTransform: 'uppercase' }}>
            <TPIcon name="eye" size={12} stroke={2} color={TP.muted} />
            Visible to Belleville & Surrounding Area
          </div>
          <div style={{ flex: 1 }} />
          {/* Character counter w/ progress ring */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <svg width="20" height="20" viewBox="0 0 20 20">
              <circle cx="10" cy="10" r="8" fill="none" stroke={TP.hairlineStrong} strokeWidth="2" />
              <circle cx="10" cy="10" r="8" fill="none" stroke={TP.forest} strokeWidth="2"
                strokeDasharray={`${2 * Math.PI * 8 * (183 / 500)} ${2 * Math.PI * 8}`}
                strokeDashoffset="0" strokeLinecap="round"
                transform="rotate(-90 10 10)" />
            </svg>
            <span style={{ fontFamily: TP.mono, fontSize: 11, color: TP.muted, fontWeight: 600 }}>
              <span style={{ color: TP.ink }}>183</span> / 500
            </span>
          </div>
        </div>
      </div>
    </div>
  );
}

// ─── Notifications ──────────────────────────
function ScreenNotifs({ onNav = () => {} }) {
  return (
    <div style={{ background: TP.cream, height: '100%', display: 'flex', flexDirection: 'column' }}>
      <TPTopBar
        title="Activity"
        subtitle="7 NEW · LAST 24H"
        leading={<button style={{ width: 32, height: 32, borderRadius: '50%', background: TP.paper, border: `1px solid ${TP.hairline}`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><TPIcon name="chevronLeft" size={18} color={TP.ink} /></button>}
        trailing={<button style={{ fontFamily: TP.sans, fontSize: 12, color: TP.forest, fontWeight: 600, background: 'none', border: 'none' }}>Mark read</button>}
      />
      <div style={{ display: 'flex', borderBottom: `1px solid ${TP.hairline}`, background: TP.paper }}>
        {['All', 'Mentions', 'Replies', 'Radar'].map((l, i) => (
          <div key={l} style={{
            flex: 1, textAlign: 'center', padding: '12px 0',
            fontFamily: TP.sans, fontSize: 13, fontWeight: 600,
            color: i === 0 ? TP.ink : TP.muted,
            borderBottom: i === 0 ? `2px solid ${TP.terracotta}` : '2px solid transparent',
          }}>{l}</div>
        ))}
      </div>
      <div style={{ flex: 1, overflow: 'auto' }}>
        <div style={{ padding: '10px 16px 4px' }}>
          <div style={{ fontFamily: TP.mono, fontSize: 10, fontWeight: 700, color: TP.muted, letterSpacing: 1.4 }}>NEW</div>
        </div>
        {NOTIFS.slice(0, 3).map(n => <NotifRow key={n.id} n={n} unread />)}
        <div style={{ padding: '14px 16px 4px' }}>
          <div style={{ fontFamily: TP.mono, fontSize: 10, fontWeight: 700, color: TP.muted, letterSpacing: 1.4 }}>EARLIER</div>
        </div>
        {NOTIFS.slice(3).map(n => <NotifRow key={n.id} n={n} />)}
      </div>
      <TPTabBar active="profile" onChange={onNav} />
    </div>
  );
}

function NotifRow({ n, unread }) {
  const kindIcons = {
    reply: { icon: 'chat', tone: TP.forest, bg: TP.forestTint },
    like: { icon: 'heart', tone: TP.alertRed, bg: TP.redTint },
    mention: { icon: 'at', tone: TP.terracotta, bg: TP.terracottaTint },
    alert: { icon: 'alert', tone: TP.alertRed, bg: TP.redTint },
    follow: { icon: 'profile', tone: TP.alertBlue, bg: TP.blueTint },
    event: { icon: 'calendar', tone: TP.ochre, bg: TP.ochreTint },
  };
  const k = kindIcons[n.kind] || kindIcons.reply;
  return (
    <div style={{
      display: 'flex', gap: 12, padding: '12px 16px',
      background: unread ? TP.paper : 'transparent',
      borderBottom: `1px solid ${TP.hairline}`,
      position: 'relative',
    }}>
      {unread && <div style={{ position: 'absolute', left: 6, top: 22, width: 6, height: 6, borderRadius: '50%', background: TP.terracotta }} />}
      <div style={{ position: 'relative' }}>
        <TPAvatar name={n.actor} hue={n.hue} size={40} />
        <div style={{
          position: 'absolute', bottom: -2, right: -2,
          width: 20, height: 20, borderRadius: '50%',
          background: k.bg, display: 'flex', alignItems: 'center', justifyContent: 'center',
          border: `2px solid ${TP.paper}`,
        }}>
          <TPIcon name={k.icon} size={10} color={k.tone} stroke={2.5} />
        </div>
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontFamily: TP.sans, fontSize: 13, color: TP.inkSoft, lineHeight: 1.4 }}>
          <strong style={{ color: TP.ink, fontWeight: 600 }}>{n.actor}</strong> {n.text}
        </div>
        {n.preview && (
          <div style={{ fontFamily: TP.serif, fontSize: 13, fontStyle: 'italic', color: TP.muted, marginTop: 4, lineHeight: 1.4, paddingLeft: 8, borderLeft: `2px solid ${TP.hairlineStrong}` }}>{n.preview}</div>
        )}
        <div style={{ fontFamily: TP.sans, fontSize: 11, color: TP.mutedSoft, marginTop: 4 }}>{n.time}</div>
      </div>
    </div>
  );
}

// ─── Onboarding (set neighborhood) ──────────────────────────
function ScreenOnboarding({ onNav = () => {} }) {
  return (
    <div style={{ background: TP.cream, height: '100%', display: 'flex', flexDirection: 'column' }}>
      {/* Top */}
      <div style={{ padding: '20px 16px 12px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <TPLogo size={36} showWordmark />
        <div style={{ display: 'flex', gap: 4 }}>
          {[1,2,3,4].map(i => <div key={i} style={{ width: 24, height: 3, borderRadius: 2, background: i <= 3 ? TP.forest : TP.hairlineStrong }} />)}
        </div>
        <button style={{ fontFamily: TP.sans, fontSize: 12, color: TP.muted, fontWeight: 500, background: 'none', border: 'none' }}>Skip</button>
      </div>

      <div style={{ padding: '20px 24px 14px' }}>
        <div style={{ fontFamily: TP.mono, fontSize: 10, color: TP.terracotta, fontWeight: 700, letterSpacing: 1.4, marginBottom: 8 }}>STEP 3 OF 4 · YOUR BLOCK</div>
        <div style={{ fontFamily: TP.serif, fontSize: 32, color: TP.ink, lineHeight: 1.05, letterSpacing: -0.5, marginBottom: 10 }}>Where do you call home?</div>
        <div style={{ fontFamily: TP.sans, fontSize: 14, color: TP.inkSoft, lineHeight: 1.5 }}>We use this to show you what's happening on your block. We'll never reveal your exact address — just your neighborhood.</div>
      </div>

      {/* Mini map */}
      <div style={{ margin: '4px 16px 14px', height: 180, borderRadius: TP.r.lg, overflow: 'hidden', position: 'relative', border: `1px solid ${TP.hairline}` }}>
        <MapBackdrop />
        <div style={{
          position: 'absolute', left: '20%', top: '20%', width: '60%', height: '60%',
          background: 'rgba(45,80,22,0.18)', border: `2px solid ${TP.forest}`, borderRadius: 14,
        }} />
        <div style={{ position: 'absolute', left: 'calc(50% - 14px)', top: 'calc(50% - 14px)' }}>
          <div style={{ width: 28, height: 28, borderRadius: '50%', background: TP.forest, border: '3px solid #fff', boxShadow: '0 4px 12px rgba(0,0,0,0.25)' }} />
        </div>
        <div style={{ position: 'absolute', bottom: 10, left: 10, right: 10, background: TP.paper, padding: '8px 12px', borderRadius: TP.r.md, display: 'flex', alignItems: 'center', gap: 8, boxShadow: '0 2px 10px rgba(0,0,0,0.08)' }}>
          <TPIcon name="location" size={16} color={TP.forest} />
          <div style={{ flex: 1 }}>
            <div style={{ fontFamily: TP.sans, fontSize: 13, fontWeight: 600, color: TP.ink }}>Belleville & Surrounding Area, Quinte West</div>
            <div style={{ fontFamily: TP.sans, fontSize: 11, color: TP.muted }}>~1,400 neighbors here</div>
          </div>
          <span style={{ fontFamily: TP.sans, fontSize: 11, fontWeight: 600, color: TP.forest }}>Change</span>
        </div>
      </div>

      {/* Nearby suggestions */}
      <div style={{ flex: 1, padding: '0 16px', overflowY: 'auto' }}>
        <div style={{ fontFamily: TP.mono, fontSize: 10, color: TP.muted, fontWeight: 700, letterSpacing: 1.4, marginBottom: 8 }}>ALSO FOLLOW NEARBY</div>
        {NEIGHBORHOODS.slice(0, 4).map((n, i) => (
          <div key={n} style={{
            display: 'flex', alignItems: 'center', gap: 10,
            padding: '11px 0', borderBottom: `1px solid ${TP.hairline}`,
          }}>
            <div style={{ width: 28, height: 28, borderRadius: '50%', background: TP.cream, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <TPIcon name="location" size={13} color={TP.forest} stroke={2} />
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: TP.sans, fontSize: 13.5, fontWeight: 600, color: TP.ink }}>{n}</div>
              <div style={{ fontFamily: TP.sans, fontSize: 11, color: TP.muted }}>{0.3 + i * 0.2} mi · {(2200 - i * 300)} neighbors</div>
            </div>
            <button style={{
              padding: '5px 12px', borderRadius: TP.r.pill,
              border: i < 2 ? 'none' : `1px solid ${TP.hairlineStrong}`,
              background: i < 2 ? TP.forestTint : 'transparent',
              color: i < 2 ? TP.forest : TP.inkSoft,
              fontFamily: TP.sans, fontSize: 11.5, fontWeight: 600,
            }}>{i < 2 ? '✓ Following' : 'Follow'}</button>
          </div>
        ))}
      </div>

      {/* CTA */}
      <div style={{ padding: '14px 16px', background: TP.paper, borderTop: `1px solid ${TP.hairline}` }}>
        <button style={{
          width: '100%', padding: '14px', borderRadius: TP.r.lg,
          background: TP.forest, color: TP.cream, border: 'none',
          fontFamily: TP.sans, fontSize: 15, fontWeight: 600,
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
        }}>
          Continue <TPIcon name="arrowRight" size={16} color={TP.cream} stroke={2.4} />
        </button>
      </div>
    </div>
  );
}

Object.assign(window, { ScreenCompose, ScreenNotifs, ScreenOnboarding });