'use client'

import { useEffect, useRef, useState } from 'react'
import './latest-activity.css'
import { lockBodyScroll } from '../../lib/scrollLock'

type Event = { id: string; service: string; state: string; message: string; started_at?: string; finished_at?: string }
type Operation = { id: string; label: string; status: string; events: Event[] }

export default function LatestActivity({ operation, besideDownload, onDismiss }: {
  operation: Operation; besideDownload: boolean; onDismiss: () => void
}) {
  const dialog = useRef<HTMLDialogElement>(null)
  const trigger = useRef<HTMLButtonElement>(null)
  const [open, setOpen] = useState(true)
  useEffect(() => { setOpen(true) }, [operation.id])
  const latest = [...operation.events].sort((a, b) =>
    (a.finished_at ?? a.started_at ?? '').localeCompare(b.finished_at ?? b.started_at ?? '')
  ).at(-1)
  const status = operation.status === 'running' ? 'Working' : operation.status === 'complete' ? 'Finished' : operation.status === 'searching' ? 'Search still running' : 'Needs attention'

  useEffect(() => {
    if (!open) return
    const element = dialog.current
    element?.showModal()
    const unlock = lockBodyScroll()
    return () => {
      element?.close()
      unlock()
      trigger.current?.focus()
    }
  }, [open])

  return (
    <div className={`request-overview-block latest-activity ${besideDownload ? 'beside-download' : 'full-row'}`}>
      <button ref={trigger} type="button" className="latest-activity-trigger" onClick={() => setOpen(true)} aria-haspopup="dialog" aria-expanded={open}>
        <span className="latest-activity-heading"><span className="request-overview-label">Latest activity</span><span className={`latest-activity-badge is-${operation.status}`}>{status}</span></span>
        <span className="latest-activity-message" role="status">{latest?.message || 'Getting ready to check your request…'}</span>
        <span className="latest-activity-more">View all activity ({operation.events.length}) <span aria-hidden="true">↗</span></span>
      </button>
      <dialog ref={dialog} className="activity-dialog" aria-labelledby="activity-dialog-title" onCancel={() => setOpen(false)} onClose={() => setOpen(false)}>
        <div className="activity-dialog-content">
          <header>
            <div><span className="request-overview-label">Activity details</span><h2 id="activity-dialog-title">{operation.label}</h2><small>{status} · {operation.events.length} updates</small></div>
            <button type="button" onClick={() => setOpen(false)}>Close</button>
          </header>
          {operation.status === 'running' && <p role="status" className="activity-working">Working on your request. This can take a minute while the media services search.</p>}
          <ol aria-live="polite" className="activity-dialog-events" aria-label="All activity, oldest first">
            {operation.events.map((event) => <li key={event.id} className={`is-${event.state}`}>
              <span className="activity-event-state">{event.state === 'active' ? 'Working' : event.state === 'error' ? 'Needs attention' : 'Done'}</span>
              <div><strong>{event.service}</strong><p>{event.message}</p></div>
            </li>)}
          </ol>
          {operation.status !== 'running' && <footer><button type="button" onClick={() => { setOpen(false); onDismiss() }}>Dismiss activity</button></footer>}
        </div>
      </dialog>
    </div>
  )
}