import { useCallback, useEffect, useState } from 'react'
import { Link, useNavigate } from 'react-router-dom'
import { Loading, ErrorState } from '../../components/PageState.jsx'
import { api } from '../../api/client.js'
import { useAuth } from '../../contexts/AuthContext.jsx'
import { notificationSettingsPath, inboxPath } from '../../lib/notificationPaths.js'

// The in-app inbox (ENGAGEMENT.md Phase 7), at `/account/notifications`.
//
// **It took that path from the preferences screen, which moved to
// `/account/notifications/settings`.** The two are different kinds of thing —
// one is content addressed to this person, the other is how they would like to
// be reached — and the word "notifications" belongs to the first: it is what a
// person means when they say it, and what the bell in the header opens. The
// server's routes make the same split at the same place.
//
// Everything a row can carry is TEXT. `body` is stored as the text part of the
// in-app template's blocks and rendered with `white-space: pre-line`, never as
// markup; `url` is site-relative by the time it is stored, checked against the
// same character class `pageUrlTemplate` uses. So there is no sanitizing to do
// here — there is nothing on this screen that could be markup.

const PAGE = 30

function ago(iso) {
  const then = new Date(iso).getTime()
  if (!Number.isFinite(then)) return ''
  const secs = Math.max(0, Math.round((Date.now() - then) / 1000))
  if (secs < 60) return 'just now'
  if (secs < 3600) return `${Math.floor(secs / 60)} min ago`
  if (secs < 86400) return `${Math.floor(secs / 3600)} h ago`
  if (secs < 30 * 86400) return `${Math.floor(secs / 86400)} d ago`
  return new Date(iso).toLocaleDateString()
}

function Item({ item, onOpen, onMark }) {
  const body = (
    <>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, flexWrap: 'wrap' }}>
        <strong
          className="sans"
          style={{
            fontSize: '0.95rem',
            color: item.read ? 'var(--muted)' : 'var(--head)',
            fontWeight: item.read ? 500 : 700,
          }}
        >
          {item.title}
        </strong>
        <span className="sans dim" style={{ fontSize: '0.76rem' }}>{ago(item.createdAt)}</span>
      </div>
      {item.body && (
        <p
          className="sans dim"
          style={{ margin: '6px 0 0', fontSize: '0.86rem', whiteSpace: 'pre-line' }}
        >
          {item.body}
        </p>
      )}
    </>
  )

  return (
    <li
      style={{
        display: 'flex',
        alignItems: 'flex-start',
        gap: 12,
        padding: '14px 16px',
        borderRadius: 'var(--radius-card)',
        border: '1px solid var(--line-soft)',
        // The one visual difference between read and unread, plus the weight
        // above. A dot alone is easy to miss on a long list.
        background: item.read ? 'transparent' : 'var(--panel)',
      }}
    >
      <div style={{ flex: 1, minWidth: 0 }}>
        {item.url ? (
          <button
            type="button"
            onClick={() => onOpen(item)}
            style={{
              display: 'block',
              width: '100%',
              textAlign: 'left',
              background: 'none',
              border: 'none',
              padding: 0,
              cursor: 'pointer',
            }}
          >
            {body}
          </button>
        ) : (
          body
        )}
      </div>
      {!item.read && (
        <button
          type="button"
          onClick={() => onMark(item)}
          className="sans"
          style={{
            background: 'none',
            border: 'none',
            padding: 0,
            cursor: 'pointer',
            color: 'var(--accent)',
            fontSize: '0.78rem',
            whiteSpace: 'nowrap',
          }}
        >
          Mark read
        </button>
      )}
    </li>
  )
}

export default function PlayerInbox() {
  const [items, setItems] = useState([])
  const [unread, setUnread] = useState(0)
  const [hasMore, setHasMore] = useState(false)
  const [unreadOnly, setUnreadOnly] = useState(false)
  const [loading, setLoading] = useState(true)
  const [busy, setBusy] = useState(false)
  const [error, setError] = useState('')
  const navigate = useNavigate()
  const { user } = useAuth()

  const load = useCallback(async (only) => {
    setLoading(true)
    setError('')
    try {
      const res = await api.notifications({ limit: PAGE, unread: only })
      setItems(res.items || [])
      setHasMore(!!res.hasMore)
      setUnread(res.unread || 0)
    } catch (err) {
      setError(err.message || 'Could not load your notifications')
    } finally {
      setLoading(false)
    }
  }, [])

  useEffect(() => { load(unreadOnly) }, [load, unreadOnly])

  // The cursor is the last item's id, not a page number: the list gains rows at
  // the top while it is being read, and an offset under those conditions repeats
  // or skips items.
  const more = async () => {
    if (!items.length) return
    setBusy(true)
    try {
      const res = await api.notifications({
        limit: PAGE,
        before: items[items.length - 1].id,
        unread: unreadOnly,
      })
      setItems((list) => [...list, ...(res.items || [])])
      setHasMore(!!res.hasMore)
    } catch (err) {
      setError(err.message || 'Could not load more')
    } finally {
      setBusy(false)
    }
  }

  const mark = async (item) => {
    try {
      const res = await api.markNotificationRead(item.id)
      setUnread(res.unread ?? Math.max(0, unread - 1))
      // Filtered to unread, a marked item leaves the list; unfiltered it stays
      // and goes quiet. Either way the list matches what it says it is showing.
      setItems((list) =>
        unreadOnly
          ? list.filter((i) => i.id !== item.id)
          : list.map((i) => (i.id === item.id ? { ...i, read: true } : i)),
      )
    } catch (err) {
      setError(err.message || 'Could not mark it read')
    }
  }

  const open = async (item) => {
    if (!item.read) await mark(item)
    if (item.url) navigate(item.url)
  }

  const markAll = async () => {
    setBusy(true)
    try {
      await api.markAllNotificationsRead()
      setUnread(0)
      setItems((list) => (unreadOnly ? [] : list.map((i) => ({ ...i, read: true }))))
    } catch (err) {
      setError(err.message || 'Could not mark them read')
    } finally {
      setBusy(false)
    }
  }

  if (loading) return <Loading label="Loading your notifications…" />
  if (error && !items.length) return <ErrorState message={error} />

  return (
    <div>
      <div
        style={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          gap: 12,
          flexWrap: 'wrap',
          marginBottom: 18,
        }}
      >
        <p className="sans dim" style={{ margin: 0, fontSize: '0.88rem' }}>
          {unread > 0 ? `${unread} unread` : 'Everything is read.'}{' '}
          <Link to={notificationSettingsPath(user)} className="dim">
            Notification settings
          </Link>
        </p>
        <div style={{ display: 'flex', gap: 8 }}>
          <button
            type="button"
            className="pill"
            onClick={() => setUnreadOnly((v) => !v)}
            style={unreadOnly ? { background: 'var(--accent)', color: 'var(--bg-deep)', borderColor: 'var(--accent)' } : {}}
          >
            {unreadOnly ? 'Showing unread' : 'Show unread only'}
          </button>
          <button type="button" className="pill" onClick={markAll} disabled={busy || unread === 0}>
            Mark all read
          </button>
        </div>
      </div>

      {error && (
        <p className="sans" style={{ margin: '0 0 12px', color: '#d98b84', fontSize: '0.85rem' }}>{error}</p>
      )}

      {items.length === 0 ? (
        <p className="sans dim" style={{ fontSize: '0.9rem' }}>
          {unreadOnly
            ? 'Nothing unread.'
            : 'Nothing here yet. Anything the shard or your guilds want to tell you will show up on this page.'}
        </p>
      ) : (
        <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
          {items.map((item) => (
            <Item key={item.id} item={item} onOpen={open} onMark={mark} />
          ))}
        </ul>
      )}

      {hasMore && (
        <button type="button" className="pill" onClick={more} disabled={busy} style={{ marginTop: 16 }}>
          {busy ? 'Loading…' : 'Load older'}
        </button>
      )}
    </div>
  )
}