import { useCallback, useEffect, useRef, useState } from 'react'
import PaperSheet, { ThemeSwitch } from './PaperSheet.jsx'
import { sound, playRoll, preload, DEFAULT_ROLL } from './sound.js'
import { MapView, MapLibrary, TokenForm, WallLayer } from './MapView.jsx'

const J = { 'Content-Type': 'application/json' }
const send = (url, method, body) => fetch(url, { method, headers: J, body: body === undefined ? undefined : JSON.stringify(body) })
const msg = (d, fallback) => (typeof d?.detail === 'string' ? d.detail : fallback)

function useMine() {
  const [mine, setMine] = useState([])
  useEffect(() => { fetch('/api/characters').then((r) => r.json()).then((d) => setMine(d.mine || [])).catch(() => {}) }, [])
  return mine
}

function CharSelect({ mine, value, onChange, label }) {
  return (
    <select value={value} onChange={(e) => onChange(e.target.value)} aria-label={label}>
      <option value="">Choose a character …</option>
      {mine.map((c) => <option key={c.id} value={c.id}>{c.name}</option>)}
    </select>
  )
}

// ---- list of lobbies: create one (you become the DM) or join one with a code
function LobbyList() {
  const mine = useMine()
  const [data, setData] = useState(null)
  const [name, setName] = useState('')
  const [code, setCode] = useState('')
  const [cid, setCid] = useState('')
  const [err, setErr] = useState('')

  const load = () => fetch('/api/lobbies').then((r) => r.json()).then(setData).catch(() => setErr('Could not load your lobbies.'))
  useEffect(() => { load() }, [])

  const create = async (e) => {
    e.preventDefault(); setErr('')
    const r = await send('/api/lobbies', 'POST', { name })
    const d = await r.json().catch(() => ({}))
    if (!r.ok) return setErr(msg(d, 'Could not create the lobby.'))
    window.location.hash = `lobbies/${d.id}`
  }
  const join = async (e) => {
    e.preventDefault(); setErr('')
    if (!cid) return setErr('Choose which of your characters joins.')
    const r = await send('/api/lobbies/join', 'POST', { code, character_id: cid })
    const d = await r.json().catch(() => ({}))
    if (!r.ok) return setErr(msg(d, 'Could not join.'))
    window.location.hash = `lobbies/${d.id}`
  }

  return (
    <section className="page narrow">
      <h1>Lobbies</h1>
      <p className="muted">
        A lobby is a group for one campaign. Whoever creates it is the DM and can look at every character in it.
        Players only see a short card of each other (name, concept, class and profession).
      </p>
      {err && <p className="warn">{err}</p>}

      <div className="card">
        <h2>Join a lobby</h2>
        <form className="row wrapform" onSubmit={join}>
          <input value={code} onChange={(e) => setCode(e.target.value)} placeholder="Join code from your DM" aria-label="Join code" autoComplete="off" />
          <CharSelect mine={mine} value={cid} onChange={setCid} label="Character that joins" />
          <button type="submit" disabled={!code.trim()}>Join</button>
        </form>
        {mine.length === 0 && <p className="small muted">You need a saved character first (Character → Summary → Save).</p>}
      </div>

      <h2>Lobbies you joined</h2>
      {data && data.joined.length === 0 && <p className="muted small">None yet.</p>}
      <ul className="charlist">
        {(data?.joined || []).map((l) => (
          <li key={l.id} className="card row">
            <div>
              <strong>{l.name}</strong>
              <div className="muted small">DM {l.dm}{l.character ? ` · playing ${l.character}` : ' · no character selected'}</div>
            </div>
            <div className="actions"><a className="button" href={`#lobbies/${l.id}`}>Open</a></div>
          </li>
        ))}
      </ul>

      <h2>Lobbies you run (as DM)</h2>
      {data && data.mine.length === 0 && <p className="muted small">None yet.</p>}
      <ul className="charlist">
        {(data?.mine || []).map((l) => (
          <li key={l.id} className="card row">
            <div>
              <strong>{l.name}</strong>
              <div className="muted small">{l.members} player{l.members === 1 ? '' : 's'}</div>
            </div>
            <div className="actions"><a className="button" href={`#lobbies/${l.id}`}>Open</a></div>
          </li>
        ))}
      </ul>
      <form className="row wrapform" onSubmit={create}>
        <input value={name} onChange={(e) => setName(e.target.value)} placeholder="Name of a new lobby" aria-label="Lobby name" maxLength={60} />
        <button type="submit" disabled={!name.trim()}>+ Create lobby</button>
      </form>
    </section>
  )
}

const clock = (t) => new Date(t * 1000).toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit' })
const DICE = [4, 6, 8, 10, 12, 20, 100]
const reduced = () => window.matchMedia?.('(prefers-reduced-motion: reduce)').matches
const sgn = (n) => (n > 0 ? `+${n}` : n < 0 ? `−${-n}` : '±0')
const store = (k, v) => { try { if (v === undefined) return localStorage.getItem(k); localStorage.setItem(k, v) } catch { /* storage may be blocked */ } return null }
const OUTCOME = { crit_success: 'Critical success!', success: 'Success', failure: 'Failure', crit_failure: 'Critical failure!' }

// One WebSocket per open lobby. It only says "something changed" ({t: 'messages' | 'lobby' | 'sheet'}), the data is loaded through
// the normal API. Without a working socket the page falls back to polling, so a proxy that blocks WebSockets does not break anything.
function useSocket(id, handlers) {
  const [up, setUp] = useState(false)
  const h = useRef(handlers)
  h.current = handlers
  useEffect(() => {
    let ws, timer, ping, tries = 0, closed = false
    const open = () => {
      ws = new WebSocket(`${window.location.protocol === 'https:' ? 'wss' : 'ws'}://${window.location.host}/api/lobbies/${id}/ws`)
      ws.onopen = () => {
        tries = 0; setUp(true); h.current.open?.()
        ping = setInterval(() => ws.readyState === 1 && ws.send('ping'), 25000)
      }
      ws.onmessage = (e) => {
        if (e.data === 'pong') return
        try { const n = JSON.parse(e.data); h.current[n.t]?.(n) } catch { /* ignore malformed notes */ }
      }
      ws.onclose = (e) => {
        clearInterval(ping); setUp(false)
        if (closed || (e.code >= 4400 && e.code < 4500)) return // refused or removed: the normal polling shows why
        timer = setTimeout(open, Math.min(10000, 1000 * 2 ** tries++))
      }
    }
    try { open() } catch { /* no WebSocket support: polling only */ }
    const wake = () => { if (!document.hidden) h.current.open?.() } // catch up after the tab was in the background
    document.addEventListener('visibilitychange', wake)
    return () => { closed = true; clearTimeout(timer); clearInterval(ping); document.removeEventListener('visibilitychange', wake); ws?.close() }
  }, [id])
  return up
}

// The map picture for this viewer. With line of sight the server sends only the visible part (position in X-Crop), so the picture
// is fetched again whenever the server's `rev` for this viewer changes; the old one stays until the new one has arrived.
function useMapImage(id, vision, as) {
  const [img, setImg] = useState(null)
  const last = useRef({ t: 0, n: 0, timer: 0 })
  const rev = vision?.rev
  useEffect(() => {
    if (!rev || vision.empty) { setImg(null); return }
    const n = ++last.current.n
    const go = () => fetch(`/api/lobbies/${id}/map/view${as ? `?as=${encodeURIComponent(as)}` : ''}`).then(async (r) => {
      if (!r.ok) throw new Error(r.status)
      const [x, y, w, h] = (r.headers.get('X-Crop') || '0,0,0,0').split(',').map(Number)
      const url = URL.createObjectURL(await r.blob())
      if (n !== last.current.n) { URL.revokeObjectURL(url); return } // a newer one was asked for meanwhile
      setImg((old) => { if (old) URL.revokeObjectURL(old.src); return { src: url, x, y, w, h } })
    }).catch(() => {})
    const wait = Math.max(0, 200 - (Date.now() - last.current.t)) // at most ~5 pictures per second while a token is dragged
    clearTimeout(last.current.timer)
    last.current.timer = setTimeout(() => { last.current.t = Date.now(); go() }, wait)
    return () => clearTimeout(last.current.timer)
  }, [id, rev, as]) // eslint-disable-line
  useEffect(() => () => setImg((old) => { old && URL.revokeObjectURL(old.src); return null }), [])
  return img
}

// Chat, whispers, event log, dice rolls and checks arrive through one feed that is polled while the page is open.
function useFeed(id, onEvent, onRoll, socketUp) {
  const [msgs, setMsgs] = useState([])
  const last = useRef(0)
  const live = useRef(false) // false until the history is loaded: old rolls are not animated again
  const cb = useRef({})
  cb.current = { onEvent, onRoll }
  const busy = useRef(false) // two overlapping polls (timer + right after a roll) would both deliver the same entries
  const poll = useCallback(async () => {
    if (document.hidden || busy.current) return
    busy.current = true
    const r = await fetch(`/api/lobbies/${id}/messages?after=${last.current}`).catch(() => null)
    busy.current = false
    if (!r || !r.ok) return
    const fresh = (await r.json()).filter((m) => m.id > last.current)
    const wasLive = live.current
    live.current = true
    if (!fresh.length) return
    last.current = fresh[fresh.length - 1].id
    setMsgs((old) => [...old, ...fresh].slice(-300))
    if (fresh.some((m) => m.kind === 'event')) cb.current.onEvent()
    if (wasLive) fresh.filter((m) => m.kind === 'roll' || m.kind === 'check').forEach((m) => cb.current.onRoll(m))
  }, [id])
  useEffect(() => {
    poll()
    const t = setInterval(poll, socketUp ? 20000 : 2500) // the socket says when something is new, the timer is only a safety net
    return () => clearInterval(t)
  }, [poll, socketUp])
  return { msgs, poll }
}

const rollText = (m) => {
  const res = m.roll.results, n = m.roll.n
  return { dice: `${n > 1 ? n : ''}d${m.roll.sides}`, list: res && res.join(' + '), sum: res && res.reduce((a, b) => a + b, 0), n }
}

// the text of a skill / attribute check; players do not see the numbers when the DM hides the difficulty
function checkLine(c) {
  const out = OUTCOME[c.outcome]
  if (c.target === undefined) return <>rolled <strong>{c.roll}</strong> → <span className={`out ${c.outcome}`}>{out}</span></>
  const parts = `${c.base}${c.mod ? ` ${sgn(c.mod)} ${c.diff}` : ''}${c.cmod ? ` ${sgn(c.cmod)} bonus` : ''}`
  return <>rolled <strong>{c.roll}</strong> vs {c.target}{parts !== String(c.target) && <span className="muted small"> ({parts})</span>} →{' '}
    <span className={`out ${c.outcome}`}>{out}</span> <span className="muted small">{c.margin >= 0 ? `by ${c.margin}` : `by ${-c.margin}`}</span></>
}

function Chat({ me, people, msgs, poll, id, to, setTo }) {
  const [text, setText] = useState('')
  const [events, setEvents] = useState(true)
  const [err, setErr] = useState('')
  const box = useRef(null)
  const stick = useRef(true)

  useEffect(() => { // keep the newest line in view unless the user scrolled up
    const el = box.current
    if (el && stick.current) el.scrollTop = el.scrollHeight
  }, [msgs, events])

  const submit = async (e) => {
    e.preventDefault(); setErr('')
    if (!text.trim()) return
    const r = await send(`/api/lobbies/${id}/messages`, 'POST', { text, to })
    if (!r.ok) return setErr(msg(await r.json().catch(() => ({})), 'Could not send.'))
    setText(''); stick.current = true; poll()
  }
  const shown = msgs.filter((m) => events || m.kind !== 'event')
  const who = (m) => (
    <>
      <strong style={m.color ? { color: m.color } : undefined}>{m.mine ? 'You' : m.from || '?'}</strong>
      {m.to && <em className="small whispertag"> {m.to === m.from ? '(private, only you)' : m.mine ? `to ${m.to} (private)` : 'to you (private)'}</em>}
    </>
  )

  return (
    <div className="chatwrap">
      <div className="chatbox" ref={box} onScroll={(e) => { const el = e.currentTarget; stick.current = el.scrollHeight - el.scrollTop - el.clientHeight < 40 }}
        role="log" aria-live="polite">
        {shown.length === 0 && <p className="muted small">Nothing here yet.</p>}
        {shown.map((m) => {
          if (m.kind === 'event') return <div key={m.id} className="msg event"><span className="time">{clock(m.time)}</span> {m.text}</div>
          if (m.kind === 'check') {
            return (
              <div key={m.id} className={`msg rollmsg ${m.mine ? 'mine' : ''}`}>
                <span className="time">{clock(m.time)}</span> {who(m)} – <b>{m.check.what}</b>: {checkLine(m.check)}{m.check.manual && <span className="manualtag small"> own dice</span>}
              </div>
            )
          }
          if (m.kind === 'roll') {
            const t = rollText(m)
            return (
              <div key={m.id} className={`msg rollmsg ${m.to ? 'whisper' : ''} ${m.mine ? 'mine' : ''}`}>
                <span className="time">{clock(m.time)}</span> {who(m)} rolled <strong>{t.dice}</strong>:{' '}
                {t.list === null ? <span className="rollres mystery">{Array(t.n).fill('?').join(' ')}</span>
                  : <span className="rollres">{t.n > 1 ? `${t.list} = ` : ''}<b>{t.sum}</b></span>}
                {m.roll.manual && <span className="manualtag small"> own dice</span>}
              </div>
            )
          }
          return (
            <div key={m.id} className={`msg ${m.kind} ${m.mine ? 'mine' : ''}`}>
              <span className="time">{clock(m.time)}</span> {who(m)}<span>: {m.text}</span>
            </div>
          )
        })}
      </div>
      <form className="row chatform" onSubmit={submit}>
        <select value={to} onChange={(e) => setTo(e.target.value)} aria-label="Send to" className={to ? 'whisper' : ''}>
          <option value="">Everyone</option>
          <option value={me}>Only me (private)</option>
          {people.filter((p) => p !== me).map((p) => <option key={p} value={p}>Only {p} (whisper)</option>)}
        </select>
        <input value={text} onChange={(e) => setText(e.target.value)} placeholder={to ? `Whisper to ${to} …` : 'Message …'} maxLength={500} aria-label="Message" autoComplete="off" />
        <button type="submit" disabled={!text.trim()}>Send</button>
      </form>
      {err && <p className="warn small">{err}</p>}
      <label className="small muted"><input type="checkbox" checked={events} onChange={(e) => setEvents(e.target.checked)} style={{ width: 'auto' }} /> Show events (joins, character switches …)</label>
      <p className="small muted">Whispers and private rolls are only seen by you and the person you pick, not even the DM sees other people's.</p>
    </div>
  )
}

// ---- dice: hotbar below the table, results are thrown into the middle of the table and posted in the chat
const SHAPE = { 4: '50% 4%, 96% 92%, 4% 92%', 6: '6% 6%, 94% 6%, 94% 94%, 6% 94%', 8: '50% 0, 100% 50%, 50% 100%, 0 50%', 10: '50% 0, 98% 40%, 50% 100%, 2% 40%',
  12: '50% 0, 98% 38%, 80% 96%, 20% 96%, 2% 38%', 20: '25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%', 100: '' }

function DieIcon({ sides }) {
  const pts = SHAPE[sides] && SHAPE[sides].split(', ').map((p) => p.split(' ').map((v) => parseFloat(v) * .24).join(',')).join(' ')
  return (
    <svg viewBox="0 0 24 24" width="26" height="26" aria-hidden="true">
      {pts ? <polygon points={pts} fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round" /> : <circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" strokeWidth="1.6" />}
    </svg>
  )
}

const MODES = [['mystery', 'Mystery', 'Players see grey dice, but not the result'], ['hidden', 'Hidden', 'Only you see the roll'], ['public', 'Public', 'Everybody sees the roll']]

function DiceBar({ to, me, isDm, count, setCount, mode, setMode, own, setOwn, onRoll, busy, sfx }) {
  const [snd, setSnd] = useState(sound.enabled)
  const [vol, setVol] = useState(sound.volume)
  return (
    <div className="dicebar" role="toolbar" aria-label="Dice">
      <label className="small muted dicecount">Dice
        <select value={count} onChange={(e) => setCount(+e.target.value)} aria-label="Number of dice">
          {[1, 2, 3, 4, 5, 6, 8, 10].map((n) => <option key={n} value={n}>{n}×</option>)}
        </select>
      </label>
      {DICE.map((d) => (
        <button key={d} className="ghost diebtn" onClick={() => onRoll(d)} disabled={busy} title={`Roll ${count > 1 ? count : ''}d${d}`} aria-label={`Roll ${count} d${d}`}>
          <DieIcon sides={d} /><span>d{d}</span>
        </button>
      ))}
      <label className="small ownswitch" title="You rolled real dice: type in the result instead of rolling here">
        <input type="checkbox" checked={own} onChange={(e) => setOwn(e.target.checked)} style={{ width: 'auto' }} /> Own dice
      </label>
      <span className="soundctl small" title="Dice sounds">
        <button className="ghost" aria-pressed={snd} aria-label={snd ? 'Mute dice sounds' : 'Turn dice sounds on'} onClick={() => { sound.setEnabled(!snd); setSnd(!snd); if (!snd) playRoll(20, 1, undefined, sfx) }}>{snd ? '🔊' : '🔇'}</button>
        {snd && <input type="range" min="0" max="1" step="0.05" value={vol} aria-label="Dice sound volume" onChange={(e) => { setVol(+e.target.value); sound.setVolume(+e.target.value) }} onPointerUp={() => playRoll(20, 1, undefined, sfx)} />}
      </span>
      {isDm && !to && (
        <span className="seg small" role="group" aria-label="Who sees the DM's rolls">
          {MODES.map(([k, label, tip]) => <button key={k} className={mode === k ? 'on' : 'ghost'} title={tip} onClick={() => setMode(k)}>{label}</button>)}
        </span>
      )}
      {to && <span className="small dicedest priv">{to === me ? 'Private: only you' : `Private: ${to}`}</span>}
    </div>
  )
}

// shown instead of rolling when "Own dice" is on: the player types what the real dice showed
function ManualEntry({ pending, onSubmit, onCancel, err }) {
  const n = pending.type === 'check' ? 1 : pending.count
  const sides = pending.type === 'check' ? 100 : pending.sides
  const [vals, setVals] = useState(Array(n).fill(''))
  const ok = vals.every((v) => /^\d+$/.test(v) && +v >= 1 && +v <= sides)
  return (
    <form className="manual card" onSubmit={(e) => { e.preventDefault(); if (ok) onSubmit(vals.map(Number)) }}>
      <div className="small">{pending.type === 'check' ? <>Your real d100 for <b>{pending.name}</b></> : <>Your real result{n > 1 ? 's' : ''} for <b>{n > 1 ? n : ''}d{sides}</b></>} (1–{sides})</div>
      <div className="row">
        {vals.map((v, i) => (
          <input key={i} autoFocus={i === 0} inputMode="numeric" value={v} aria-label={`Result ${i + 1}`} style={{ width: '4.2rem' }}
            onChange={(e) => setVals(vals.map((x, j) => (j === i ? e.target.value.replace(/\D/g, '').slice(0, 3) : x)))} />
        ))}
        <button type="submit" disabled={!ok}>Send</button>
        <button type="button" className="ghost" onClick={onCancel}>Cancel</button>
      </div>
      {err && <span className="warn small">{err}</span>}
    </form>
  )
}

function Die({ sides, value, delay, mystery }) {
  const [shown, setShown] = useState(reduced() ? value : null)
  useEffect(() => {
    if (reduced()) return
    const t0 = Date.now(), run = 650 + delay
    const iv = setInterval(() => {
      if (Date.now() - t0 >= run) { setShown(value); clearInterval(iv) } else setShown(1 + Math.floor(Math.random() * sides))
    }, 70)
    return () => clearInterval(iv)
  }, [sides, value, delay])
  const rolling = shown !== value
  return (
    <span className={`die d${sides} ${rolling ? 'rolling' : 'landed'}${mystery ? ' mystery' : ''}`} style={{ animationDelay: `${delay % 200}ms` }}>
      <span>{mystery && !rolling ? '?' : shown ?? '?'}</span>
    </span>
  )
}

// dice are thrown onto the table from a random side and come to rest at a random spot, in the colour of whoever threw them
const placed = [] // spots of the dice still lying on the table, so new ones do not land on top of them
function spots(n) {
  const out = []
  for (let i = 0; i < n; i++) {
    let p, tries = 0
    do { p = { x: 12 + Math.random() * 76, y: 22 + Math.random() * 58 }; tries++ } while (tries < 40 && [...placed, ...out].some((q) => Math.hypot((q.x - p.x) * 1.6, q.y - p.y) < 14))
    placed.push(p); if (placed.length > 12) placed.shift()
    const a = Math.random() * Math.PI * 2
    out.push({ ...p, sx: Math.round(Math.cos(a) * 700), sy: Math.round(Math.sin(a) * 450), sr: Math.round(Math.random() * 720 - 360), er: Math.round(Math.random() * 50 - 25) })
  }
  return out
}

function ThrownDice({ m }) {
  const sec = m.kind === 'roll' && m.roll.mystery && !m.mine
  const n = m.kind === 'check' ? 1 : m.roll.n
  const [pos] = useState(() => spots(n))
  return pos.map((p, i) => (
    <span key={i} className="thrown" style={{ left: `${p.x}%`, top: `${p.y}%`, '--sx': `${p.sx}px`, '--sy': `${p.sy}px`, '--sr': `${p.sr}deg`, '--er': `${p.er}deg`,
      '--dc': sec ? '#8b8f85' : m.color || 'var(--noxium)', animationDelay: `${i * 90}ms` }}>
      {m.kind === 'check' ? <Die sides={100} value={m.check.roll} delay={0} />
        : <Die sides={m.roll.sides} value={m.roll.results ? m.roll.results[i] : 0} delay={i * 120} mystery={!m.roll.results} />}
    </span>
  ))
}

function DiceTray({ rolls }) {
  if (!rolls.length) return null
  return (
    <div className="dicetray" aria-hidden="true">
      {rolls.map((m) => <ThrownDice key={m.key} m={m} />)}
      <div className="tablelog">
        {rolls.map((m) => {
          const who = <b style={{ color: m.color }}>{m.mine ? 'You' : m.from}</b>
          if (m.kind === 'check') {
            const c = m.check
            return <div key={m.key} className="trayroll">{who} – {c.what}{c.manual ? ' · own dice' : ''}{m.to ? ' · only you' : ''}: <span className={`out ${c.outcome}`}>{OUTCOME[c.outcome]}</span>{c.target !== undefined && <small> ({c.roll} vs {c.target})</small>}</div>
          }
          const t = rollText(m)
          return <div key={m.key} className="trayroll">{who} rolled <strong>{t.dice}</strong>{m.to ? (m.to === m.from ? ' · only you' : ` · private${m.mine ? ` to ${m.to}` : ''}`) : ''}{m.roll.manual ? ' · own dice' : ''}
            {t.sum !== null ? <> = <b>{t.sum}</b></> : ' = ?'}</div>
        })}
      </div>
    </div>
  )
}

// ---- character bar: one card per player, later also for initiative and enemies
function CharBar({ lobby, sel, onSel }) {
  return (
    <div className="charbar" role="list">
      {lobby.members.map((m) => {
        const c = m.character, can = !!m.character_id
        return (
          <div key={m.username} role="listitem" className={`pcard${sel === m.username ? ' sel' : ''}${can ? ' can' : ''}`} style={{ '--pc': m.color || 'var(--line)' }}
            onClick={() => can && onSel(m.username)} tabIndex={can ? 0 : undefined} onKeyDown={(e) => can && e.key === 'Enter' && onSel(m.username)}>
            <span className="pavatar">{c?.portrait ? <img src={`/api/lobbies/${lobby.id}/portrait/${encodeURIComponent(m.username)}?v=${c.portrait}`} alt="" /> : (c?.name || m.username).slice(0, 1).toUpperCase()}</span>
            <span className="pinfo">
              <b title={m.username}>{c ? c.name : 'No character'}</b>
            </span>
            {lobby.is_dm
              ? <input type="number" className="modin" key={`${m.username}:${m.mod}`} defaultValue={m.mod || 0} min={-100} max={100} title={`Bonus / malus for ${m.username}`} aria-label={`Modifier for ${m.username}`}
                onClick={(e) => e.stopPropagation()} onBlur={(e) => lobby.setMod(m.username, e.target.value)} onKeyDown={(e) => e.key === 'Enter' && e.currentTarget.blur()} />
              : m.mod ? <span className={`modchip ${m.mod > 0 ? 'up' : 'down'}`} title="Your personal bonus / malus">{sgn(m.mod)}</span> : null}
          </div>
        )
      })}
      {lobby.members.length === 0 && <span className="muted small">Nobody has joined yet – share the join code (⚙ Lobby).</span>}
    </div>
  )
}

// ---- the DM sets the difficulty for all checks, from the rules table or a custom number
function DifficultyBar({ lobby, onSet }) {
  const d = lobby.difficulty
  const idx = lobby.levels.findIndex((l) => l.name === d.label && l.mod === d.mod)
  const [custom, setCustom] = useState('')
  if (!lobby.is_dm) {
    return <div className="diffbar small muted">{d.hidden ? 'The DM sets the difficulty' : <>Difficulty: <b>{d.label}</b> {sgn(d.mod)}</>}</div>
  }
  return (
    <div className="diffbar">
      <label className="small">Difficulty
        <select value={idx >= 0 ? idx : 'custom'} aria-label="Difficulty"
          onChange={(e) => { const l = lobby.levels[e.target.value]; if (l) onSet({ label: l.name, mod: l.mod, hidden: d.hidden }) }}>
          {lobby.levels.map((l, i) => <option key={l.name} value={i}>{l.name} ({sgn(l.mod)})</option>)}
          {idx < 0 && <option value="custom">{d.label} ({sgn(d.mod)})</option>}
        </select>
      </label>
      <form className="row" onSubmit={(e) => { e.preventDefault(); if (/^[-+−]?\d+$/.test(custom.trim())) { onSet({ label: 'Custom', mod: parseInt(custom.replace('−', '-'), 10), hidden: d.hidden }); setCustom('') } }}>
        <input value={custom} onChange={(e) => setCustom(e.target.value)} placeholder="custom ±N" aria-label="Custom modifier" style={{ width: '6rem' }} />
        <button type="submit" className="ghost" disabled={!custom.trim()}>Set</button>
      </form>
      <label className="small"><input type="checkbox" checked={d.hidden} onChange={(e) => onSet({ label: d.label, mod: d.mod, hidden: e.target.checked })} style={{ width: 'auto' }} /> Hide numbers from players</label>
    </div>
  )
}

// ---- sheet of one character, refreshed regularly so the DM sees changes the player saves
function CharTab({ cid, rules, onRoll, tick }) {
  const [data, setData] = useState(null)
  const [err, setErr] = useState('')
  useEffect(() => {
    setData(null); setErr('')
    const load = () => fetch(`/api/characters/${cid}`).then((r) => { if (!r.ok) throw new Error(); return r.json() }).then(setData).catch(() => setErr('Could not load this character.'))
    load()
    const t = setInterval(() => !document.hidden && load(), 15000)
    return () => clearInterval(t)
  }, [cid])
  useEffect(() => { // pushed by the server when the player saved the character
    if (tick) fetch(`/api/characters/${cid}`).then((r) => (r.ok ? r.json() : null)).then((d) => d && setData(d)).catch(() => {})
  }, [tick]) // eslint-disable-line
  return (
    <div>
      {err && <p className="warn">{err}</p>}
      {data && <PaperSheet data={data} baseRules={rules} bare onRoll={onRoll} />}
    </div>
  )
}

// lobby settings: join code, rename, colour, character switch, members, leave / delete
// DM: replace the dice sound, add sounds for critical results, switch cues on or off
function SoundSettings({ lobby, id, act, sfx }) {
  const sn = lobby.sounds
  const [err, setErr] = useState('')
  const upload = async (slot, e) => {
    const f = e.target.files?.[0]
    e.target.value = ''
    if (!f) return
    setErr('')
    const r = await fetch(`/api/lobbies/${id}/sounds/${slot}`, { method: 'POST', headers: { 'Content-Type': 'audio/mpeg' }, body: f }).catch(() => null)
    if (!r || !r.ok) return setErr(r ? ((await r.json().catch(() => ({}))).detail || 'Upload failed') : 'Upload failed')
    act()
  }
  const flag = (k, v) => act(`/api/lobbies/${id}/sounds`, 'PUT', { [k]: v })
  const row = (slot, label, defaultText, flagKey) => (
    <div className="soundrow">
      <div className="row">
        {flagKey && <label className="small chk"><input type="checkbox" checked={!!sn[flagKey]} onChange={(e) => flag(flagKey, e.target.checked)} /> {label}</label>}
        {!flagKey && <strong className="small">{label}</strong>}
      </div>
      <div className="row small">
        <span className="muted">{sn.custom[slot] ? 'Your file' : defaultText}</span>
        <span className="row">
          <button className="ghost" onClick={() => playRoll(slot === 'roll' ? 20 : 100, 1, slot === 'roll' ? undefined : slot, { ...sfx, [`${slot}_on`]: true })}>▶ Test</button>
          <label className="uploadbtn small">Upload MP3<input type="file" accept="audio/mpeg,.mp3" hidden onChange={(e) => upload(slot, e)} /></label>
          {sn.custom[slot] && <button className="ghost" onClick={() => act(`/api/lobbies/${id}/sounds/${slot}`, 'DELETE')}>Reset</button>}
        </span>
      </div>
    </div>
  )
  return (
    <div className="soundsettings">
      <h4>Sounds</h4>
      <p className="small muted">For everyone in this lobby. MP3 up to 1.5 MB; players can still mute the sounds for themselves.</p>
      {row('roll', 'Dice sound', 'Default sound', null)}
      <label className="small chk"><input type="checkbox" checked={!!sn.result} onChange={(e) => flag('result', e.target.checked)} /> Short tones for success / failure of a check</label>
      {row('crit_success', 'Critical success', 'Built-in tone', 'crit_success')}
      {row('crit_failure', 'Critical failure', 'Built-in tone', 'crit_failure')}
      {err && <p className="warn small">{err}</p>}
    </div>
  )
}

function Settings({ lobby, id, mine, act, setInfo, onClose, inline }) {
  const [rename, setRename] = useState('')
  const [pick, setPick] = useState('')
  const me = lobby.members.find((m) => m.me)
  const taken = new Set(lobby.members.filter((m) => !m.me).map((m) => m.color))
  return (
    <div className={inline ? 'settings inline' : 'settings card'}>
      {!inline && <div className="row"><h2>Lobby</h2><button className="ghost" onClick={onClose}>Close</button></div>}
      {lobby.is_dm && (
        <>
          <div className="row">
            <div>
              <div className="muted small">Join code – give it to your players</div>
              <strong className="joincode">{lobby.code}</strong>
            </div>
            <div className="actions">
              <button className="ghost" onClick={() => navigator.clipboard?.writeText(lobby.code).then(() => setInfo('Code copied.')).catch(() => {})}>Copy</button>
              <button className="ghost" onClick={() => window.confirm('The old code stops working. Current players stay in the lobby.') && act(`/api/lobbies/${id}/code`, 'POST')}>New code</button>
            </div>
          </div>
          <form className="row wrapform" onSubmit={(e) => { e.preventDefault(); if (rename.trim()) act(`/api/lobbies/${id}`, 'PUT', { name: rename }, () => { setRename(''); act() }) }}>
            <input value={rename} onChange={(e) => setRename(e.target.value)} placeholder="Rename lobby" aria-label="New lobby name" maxLength={60} />
            <button type="submit" className="ghost" disabled={!rename.trim()}>Rename</button>
          </form>
          <h3>Players</h3>
          {lobby.members.length === 0 && <p className="muted small">Nobody yet.</p>}
          {lobby.members.map((m) => (
            <div key={m.username} className="row">
              <span><span className="swatch" style={{ background: m.color }} /> {m.username} <span className="muted small">{m.character?.name}</span></span>
              <button className="ghost danger" onClick={() => window.confirm(`Remove ${m.username} from the lobby?`) && act(`/api/lobbies/${id}/members/${encodeURIComponent(m.username)}`, 'DELETE')}>Remove</button>
            </div>
          ))}
        </>
      )}
      {!lobby.is_dm && me && (
        <>
          <h3>Your colour</h3>
          <div className="swatches">
            {lobby.palette.map((p) => (
              <button key={p.id} className={`swatchbtn${me.color === p.id ? ' on' : ''}`} style={{ background: p.hex }} disabled={taken.has(p.id)} title={taken.has(p.id) ? `${p.id} (taken)` : p.id}
                aria-label={p.id} onClick={() => act(`/api/lobbies/${id}/me`, 'PUT', { color: p.id })} />
            ))}
          </div>
          <h3>Your character</h3>
          <form className="row wrapform" onSubmit={(e) => { e.preventDefault(); if (pick) act(`/api/lobbies/${id}/me`, 'PUT', { character_id: pick }, () => { setPick(''); act() }) }}>
            <CharSelect mine={mine} value={pick} onChange={setPick} label="Switch character" />
            <button type="submit" className="ghost" disabled={!pick}>Switch</button>
          </form>
          <p className="small muted">The DM always sees the current saved version of your character. Of the others you only see a short card.</p>
        </>
      )}
      <div className="actions wrap">
        {lobby.is_dm
          ? <button className="ghost danger" onClick={() => window.confirm(`Delete the lobby "${lobby.name}" for everyone? Characters are not deleted.`) && act(`/api/lobbies/${id}`, 'DELETE', undefined, () => { window.location.hash = 'lobbies' })}>Delete lobby</button>
          : <button className="ghost danger" onClick={() => window.confirm('Leave this lobby?') && act(`/api/lobbies/${id}/me`, 'DELETE', undefined, () => { window.location.hash = 'lobbies' })}>Leave lobby</button>}
      </div>
    </div>
  )
}

// ---- one lobby: sheet on the left, player area (character bar, difficulty, dice table) in the middle, chat on the right
function LobbyView({ id, rules, user }) {
  const mine = useMine()
  const [lobby, setLobby] = useState(null)
  const [err, setErr] = useState('')
  const [info, setInfo] = useState('')
  const [sel, setSel] = useState('')
  const [to, setTo] = useState('') // whisper recipient, used for chat messages and dice rolls
  const [tray, setTray] = useState([])
  const [count, setCount] = useState(1)
  const [mode, setMode] = useState('mystery')
  const [own, setOwnState] = useState(() => store('aw_owndice') === '1')
  const [pending, setPending] = useState(null)
  const [busy, setBusy] = useState(false)
  const [mErr, setMErr] = useState('')
  const [showSettings, setShowSettings] = useState(false)
  const [leftTab, setLeftTab] = useState('sheet') // the DM's left column: character sheet or lobby actions
  const [sheetOpen, setSheetOpen] = useState(() => store('aw_sheetopen') !== '0')
  const setOwn = (v) => { setOwnState(v); store('aw_owndice', v ? '1' : '0') }

  const load = useCallback(() => fetch(`/api/lobbies/${id}`).then(async (r) => {
    if (!r.ok) throw new Error(r.status)
    setLobby(await r.json())
  }).catch((e) => { if (String(e.message) === '404') setErr('This lobby does not exist or you are not part of it.') }), [id])
  const [mapState, setMapState] = useState({ map: null, tokens: [] })
  const [mapSel, setMapSel] = useState(null)
  const [viewAs, setViewAs] = useState('') // the DM can look at the table through one player's eyes
  const [showGrid, setShowGrid] = useState(false)
  const [showWalls, setShowWalls] = useState(true)
  const loadMap = useCallback(() => fetch(`/api/lobbies/${id}/map${viewAs ? `?as=${encodeURIComponent(viewAs)}` : ''}`).then((r) => (r.ok ? r.json() : null)).then((d) => d && setMapState(d)).catch(() => {}), [id, viewAs])
  const mapImg = useMapImage(id, mapState.vision, viewAs)
  const sock = useRef({})
  const [sheetTick, setSheetTick] = useState({ cid: '', n: 0 })
  const up = useSocket(id, {
    open: () => { sock.current.load?.(); sock.current.poll?.(); sock.current.loadMap?.() },
    map: () => sock.current.loadMap?.(),
    messages: () => sock.current.poll?.(),
    lobby: () => sock.current.load?.(),
    sheet: (n) => { setSheetTick((t) => ({ cid: n.cid, n: t.n + 1 })); sock.current.load?.(); sock.current.loadMap?.() }, // a saved character can bring a new name or portrait
  })
  useEffect(() => {
    load(); loadMap()
    const t = setInterval(() => { if (!document.hidden) { load(); loadMap() } }, up ? 30000 : 5000) // joins, colours, difficulty: pushed, with a timer as safety net
    return () => clearInterval(t)
  }, [load, loadMap, up])

  const sfx = useRef({})
  const sn = lobby?.sounds
  sfx.current = sn ? { roll: sn.custom.roll ? `/api/lobbies/${id}/sounds/roll?v=${sn.v}` : DEFAULT_ROLL,
    crit_success: sn.custom.crit_success ? `/api/lobbies/${id}/sounds/crit_success?v=${sn.v}` : null,
    crit_failure: sn.custom.crit_failure ? `/api/lobbies/${id}/sounds/crit_failure?v=${sn.v}` : null,
    result: sn.result, crit_success_on: sn.crit_success, crit_failure_on: sn.crit_failure } : { roll: DEFAULT_ROLL }
  useEffect(() => { preload(sfx.current) }, [sn?.v]) // eslint-disable-line
  const onRoll = useCallback((m) => {
    const key = `${m.id}`
    if (m.kind === 'check') playRoll(100, 1, m.check.outcome, sfx.current)
    else if (m.kind === 'roll') playRoll(m.roll.sides, m.roll.n, undefined, sfx.current)
    setTray((t) => [...t.slice(-2), { ...m, key }])
    setTimeout(() => setTray((t) => t.filter((x) => x.key !== key)), 20000)
  }, [])
  const feed = useFeed(id, load, onRoll, up)
  sock.current = { load, poll: feed.poll, loadMap }

  const act = async (url, method, body, done) => {
    if (!url) return load()
    setErr(''); setInfo('')
    const r = await send(url, method, body).catch(() => null)
    const d = r ? await r.json().catch(() => ({})) : {}
    if (!r || !r.ok) return setErr(msg(d, 'That did not work.'))
    done ? done(d) : load()
  }

  const moveToken = (tid, x, y) => {
    setMapState((m) => ({ ...m, tokens: m.tokens.map((t) => (t.id === tid ? { ...t, x, y } : t)) }))
    return send(`/api/lobbies/${id}/tokens/${tid}`, 'PUT', { x, y }).catch(() => null)
  }
  const patchToken = (tid, p) => {
    setMapState((m) => ({ ...m, tokens: m.tokens.map((t) => (t.id === tid ? { ...t, ...p } : t)) }))
    return send(`/api/lobbies/${id}/tokens/${tid}`, 'PUT', p).catch(() => null)
  }
  const addToken = () => {
    const m = mapState.map, n = mapState.tokens.filter((t) => t.kind === 'npc').length + 1
    send(`/api/lobbies/${id}/tokens`, 'POST', { name: `Enemy ${n}`, x: m.w / 2, y: m.h / 2, size: 1, color: '#c0392b' }).then((r) => r.json()).then((d) => d.id && setMapSel(d.id)).catch(() => {})
  }

  if (err && !lobby) return <section className="page lobbypage"><p className="warn">{err}</p><a href="#lobbies">Back to all lobbies</a></section>
  if (!lobby) return <section className="page lobbypage"><p className="muted">Loading …</p></section>

  const me = lobby.members.find((m) => m.me)
  const people = [lobby.dm, ...lobby.members.map((m) => m.username)]
  const sheets = lobby.members.filter((m) => m.character_id) // the server only gives out ids the viewer may open
  const cur = sheets.find((m) => m.username === sel) || sheets.find((m) => m.me) || sheets[0]
  const dest = people.includes(to) ? to : ''
  const canCheck = !!(me && me.character_id)
  lobby.setMod = (u, v) => act(`/api/lobbies/${id}/members/${encodeURIComponent(u)}/mod`, 'PUT', { mod: parseInt(v, 10) || 0 })

  const post = async (url, body, after) => {
    setBusy(true); setMErr('')
    const r = await send(url, 'POST', body).catch(() => null)
    if (!r || !r.ok) setMErr(msg(r ? await r.json().catch(() => ({})) : {}, 'That did not work.'))
    else { after?.(); feed.poll() }
    setTimeout(() => setBusy(false), 350)
  }
  const throwDice = (sides) => {
    if (busy) return
    if (own) return setPending({ type: 'dice', sides, count })
    post(`/api/lobbies/${id}/rolls`, { sides, count, to: dest, ...(lobby.is_dm ? { mode } : {}) })
  }
  const check = (kind, cid, name) => {
    if (busy) return
    if (own) return setPending({ type: 'check', kind, id: cid, name })
    post(`/api/lobbies/${id}/checks`, { kind, id: cid, to: dest === user ? user : '' })
  }
  const submitManual = (vals) => {
    if (pending.type === 'check') post(`/api/lobbies/${id}/checks`, { kind: pending.kind, id: pending.id, manual: vals[0], to: dest === user ? user : '' }, () => setPending(null))
    else post(`/api/lobbies/${id}/rolls`, { sides: pending.sides, count: pending.count, to: dest, manual: vals, ...(lobby.is_dm ? { mode } : {}) }, () => setPending(null))
  }

  return (
    <section className="page lobbypage">
      <div className="lobbyhead">
        <a className="small" href="#lobbies">← Lobbies</a>
        <h1>{lobby.name}</h1>
        <span className="muted small">DM: {lobby.dm}{lobby.is_dm ? ' (you)' : ''}</span>
        <span className="tabright">
          <button className="ghost" onClick={() => (lobby.is_dm ? (setSheetOpen(true), setLeftTab('lobby')) : setShowSettings((v) => !v))} aria-expanded={lobby.is_dm ? sheetOpen && leftTab === 'lobby' : showSettings}>⚙ Lobby</button>
        </span>
      </div>
      {err && <p className="warn">{err}</p>}
      {info && <p className="small">{info}</p>}

      <div className={`lobbygrid${sheetOpen ? '' : ' nosheet'}`}>
        {sheetOpen && (
          <div className="sheetcol">
            <div className="sheetbar">
              {lobby.is_dm ? (
                <span className="seg" role="tablist">
                  <button role="tab" className={leftTab === 'sheet' ? 'on' : 'ghost'} aria-selected={leftTab === 'sheet'} onClick={() => setLeftTab('sheet')}>Sheet{cur ? `: ${cur.character.name}` : ''}</button>
                  <button role="tab" className={leftTab === 'lobby' ? 'on' : 'ghost'} aria-selected={leftTab === 'lobby'} onClick={() => setLeftTab('lobby')}>Lobby actions</button>
                </span>
              ) : <b>{cur ? cur.character.name : 'Character sheet'}</b>}
              <span className="tabright">{(!lobby.is_dm || leftTab === 'sheet') && <ThemeSwitch />} <button className="ghost" onClick={() => { setSheetOpen(false); store('aw_sheetopen', '0') }} title="Hide this column">◀</button></span>
            </div>
            {lobby.is_dm && leftTab === 'lobby'
              ? <><MapLibrary activeId={mapState.map?.id} lobbyId={id} act={act} /><SoundSettings lobby={lobby} id={id} act={act} sfx={sfx.current} /><Settings inline lobby={lobby} id={id} mine={mine} act={act} setInfo={setInfo} /></>
              : cur ? <CharTab key={cur.character_id} cid={cur.character_id} rules={rules} tick={sheetTick.cid === cur.character_id ? sheetTick.n : 0} onRoll={cur.me && canCheck ? check : undefined} />
                : <p className="muted small">{lobby.is_dm ? 'Pick a character in the bar to look at its sheet.' : 'You have no character in this lobby.'}</p>}
          </div>
        )}

        <div className="playarea">
          {!sheetOpen && <button className="ghost showsheet" onClick={() => { setSheetOpen(true); store('aw_sheetopen', '1') }}>▶ Sheet</button>}
          <CharBar lobby={lobby} sel={cur?.username} onSel={(u) => { setSel(u); setLeftTab('sheet') }} />
          <DifficultyBar lobby={lobby} onSet={(b) => act(`/api/lobbies/${id}/difficulty`, 'PUT', b)} />
          <div className="table">
            {showSettings && !lobby.is_dm && <Settings lobby={lobby} id={id} mine={mine} act={act} setInfo={setInfo} onClose={() => setShowSettings(false)} />}
            {mapState.map && (() => {
              const full = lobby.is_dm && !viewAs
              const selTok = lobby.is_dm ? mapState.tokens.find((t) => t.id === mapSel && t.kind === 'npc') : null
              const walls = full && showWalls ? mapState.walls || [] : []
              return (
                <MapView map={mapState.map} image={mapImg} portraitUrl={(t) => t.portrait ? `/api/lobbies/${id}/portrait/${encodeURIComponent(t.username)}?v=${t.portrait}` : null} tokens={mapState.tokens} grid={showGrid}
                  onMove={moveToken} selected={mapSel} onSelect={setMapSel}
                  overlay={walls.length ? <WallLayer map={mapState.map} walls={walls} onDoor={(w) => act(`/api/lobbies/${id}/doors/${w.id}`, 'PUT', { open: !w.open }, () => loadMap())} /> : null}>
                  {mapState.vision?.empty && <div className="mapempty">{lobby.is_dm ? 'This player is not on the map yet. Switch to the full view and drag their token onto it.' : 'Waiting for the DM to put your token on the map.'}</div>}
                  <div className="maptools mapui">
                    {lobby.is_dm && (
                      <select value={viewAs} onChange={(e) => { setViewAs(e.target.value); setMapSel(null) }} aria-label="View the table as" title="Look at the table through a player's eyes">
                        <option value="">Full view</option>
                        {lobby.members.map((m) => <option key={m.username} value={m.username}>View as {m.character?.name || m.username}</option>)}
                      </select>
                    )}
                    {lobby.is_dm && mapState.walls?.length > 0 && <button className={mapState.los_on ? 'on' : 'ghost'} aria-pressed={!!mapState.los_on} onClick={() => act(`/api/lobbies/${id}/sight`, 'PUT', { on: !mapState.los_on }, () => loadMap())} title="Line of sight: players only see what their character can see">Sight {mapState.los_on ? 'on' : 'off'}</button>}
                    {full && mapState.walls?.length > 0 && <button className={showWalls ? 'on' : 'ghost'} aria-pressed={showWalls} onClick={() => setShowWalls(!showWalls)} title="Show walls and doors (click a door to open or close it)">Walls</button>}
                    <button className={showGrid ? 'on' : 'ghost'} aria-pressed={showGrid} onClick={() => setShowGrid(!showGrid)}>Grid</button>
                    {full && <button className="ghost" onClick={addToken}>+ NPC</button>}
                  </div>
                  {selTok && <div className="tokenpanel mapui"><TokenForm t={selTok} onChange={(p) => patchToken(selTok.id, p)} onDelete={() => { send(`/api/lobbies/${id}/tokens/${selTok.id}`, 'DELETE'); setMapSel(null) }} /></div>}
                </MapView>
              )
            })()}
            <DiceTray rolls={tray} />
            {canCheck && !pending && <p className="tablehint small muted">Click an attribute or skill on your sheet to roll it.</p>}
            {pending && <ManualEntry key={JSON.stringify(pending)} pending={pending} onSubmit={submitManual} onCancel={() => { setPending(null); setMErr('') }} err={mErr} />}
            {!pending && mErr && <p className="warn small tableerr">{mErr}</p>}
          </div>
          <DiceBar to={dest} me={user} isDm={lobby.is_dm} count={count} setCount={setCount} mode={mode} setMode={setMode} own={own} setOwn={setOwn} onRoll={throwDice} busy={busy} sfx={sfx.current} />
        </div>

        <aside className="lobbychat card" aria-label="Chat">
          <Chat id={id} me={user} people={people} msgs={feed.msgs} poll={feed.poll} to={dest} setTo={setTo} />
        </aside>
      </div>
    </section>
  )
}

export default function Lobbies({ section, rules, user, onOpen }) {
  return section ? <LobbyView key={section} id={section} rules={rules} user={user} onOpen={onOpen} /> : <LobbyList />
}