waste-go/web/src/components/MessagePane.tsx

import { useEffect, useRef, useState } from 'react'
import { useWaste } from '../store'

const today = new Date()
today.setHours(0, 0, 0, 0)
const todayMs = today.getTime()
const yesterdayMs = todayMs - 86400000

function formatTs(ts: number): string {
  const time = new Date(ts).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', hour12: false })
  if (ts >= todayMs) return time
  if (ts >= yesterdayMs) return `Yesterday ${time}`
  return new Date(ts).toLocaleDateString([], { month: 'short', day: 'numeric' }) + ' ' + time
}

export function MessagePane() {
  const { messages, historyCutoff, activeRoom, activeNetworkId, localPeer, connectedPeers, send } = useWaste()
  const [draft, setDraft] = useState('')
  const bottomRef = useRef<HTMLDivElement>(null)
  const roomMessages = messages[activeRoom] ?? []
  const cutoff = historyCutoff[activeRoom] ?? 0

  // Find the index of the first live message (ts > cutoff).
  // The divider appears just before this index, or at the top if all are history.
  const firstLiveIdx = cutoff > 0
    ? roomMessages.findIndex(m => m.ts > cutoff)
    : -1
  // If all messages are history (no live yet), put divider at the start.
  const dividerIdx = cutoff > 0
    ? (firstLiveIdx === -1 ? 0 : firstLiveIdx)
    : -1

  useEffect(() => {
    bottomRef.current?.scrollIntoView({ behavior: 'smooth' })
  }, [roomMessages.length])

  function submit(e: React.FormEvent) {
    e.preventDefault()
    const text = draft.trim()
    if (!text || !activeNetworkId) return

    if (activeRoom.startsWith('dm:')) {
      const toPeerID = activeRoom.slice(3)
      const peer = connectedPeers.find(p => p.id.startsWith(toPeerID) || p.id === toPeerID)
      if (peer) {
        send({ type: 'send_message', network_id: activeNetworkId, room: activeRoom, body: text, to: peer.id })
      }
    } else {
      send({ type: 'send_message', network_id: activeNetworkId, room: activeRoom, body: text })
    }
    setDraft('')
  }

  function aliasFor(fromId: string) {
    if (fromId === localPeer?.id) return localPeer.alias
    return connectedPeers.find(p => p.id === fromId)?.alias ?? fromId.slice(0, 8)
  }

  const roomLabel = activeRoom.startsWith('dm:')
    ? `@ ${activeRoom.slice(3, 11)}…`
    : `# ${activeRoom}`

  return (
    <main className="message-pane">
      <div className="message-pane-header">{roomLabel}</div>

      <div className="messages">
        {dividerIdx === 0 && (
          <div className="history-divider"><span>earlier messages</span></div>
        )}
        {roomMessages.map((msg, i) => {
          const mine = msg.from === localPeer?.id
          const alias = aliasFor(String(msg.from))
          const ts = formatTs(msg.ts)
          return (
            <div key={msg.mid ?? i}>
              {i === dividerIdx && dividerIdx > 0 && (
                <div className="history-divider"><span>earlier messages</span></div>
              )}
              <div className={`message ${mine ? 'mine' : ''}`}>
                <span className="message-ts">{ts}</span>
                <span className="message-alias">{alias}</span>
                <span className="message-text">{msg.text}</span>
              </div>
            </div>
          )
        })}
        <div ref={bottomRef} />
      </div>

      <form className="compose" onSubmit={submit}>
        <input
          value={draft}
          onChange={e => setDraft(e.target.value)}
          placeholder={`Message ${roomLabel}`}
          autoComplete="off"
        />
        <button type="submit" disabled={!draft.trim()}>Send</button>
      </form>
    </main>
  )
}