---
import type { Status } from '@/lib/constants/status'
import { forEntry, formatDiagnostics } from '@/lib/diagnostics/report'
import type { Diagnostic } from '@/lib/diagnostics/types'
import { getSite } from '@/lib/site'

type Props = {
  collection: string
  id: string
  status?: Status
  diagnostics?: Diagnostic[]
}

const { collection, id, status, diagnostics = [] } = Astro.props

const NOTICE: Partial<Record<Status, string>> = {
  draft: 'Draft – not built in production',
  unlisted: 'Unlisted – has page, but appears in no list',
}

const site = import.meta.env.DEV ? await getSite() : null
const here = site ? [...forEntry(site.diagnostics, collection, id), ...diagnostics] : []
const elsewhere = site ? site.diagnostics.filter((d) => !here.includes(d)) : []
const notice = status ? NOTICE[status] : undefined
const label = [status && status !== 'published' ? status : null, here.length || null]
  .filter(Boolean)
  .join(' · ')
---

{site && (here.length || elsewhere.length || notice) && (
  <details class="dev-banner dark" open>
    <summary class="dev-banner__bar">
      Dev{label && <span class="dev-banner__crumb">{label}</span>}
    </summary>
    <div class="dev-banner__body">
      {notice && <p class="dev-banner__notice">{notice}</p>}
      {here.length > 0 && (
        <ul class="dev-banner__list" role="list">
          {here.map((d) => (
            <li class:list={['dev-banner__item', `dev-banner__item--${d.level}`]}>
              {d.message}
            </li>
          ))}
        </ul>
      )}
      {elsewhere.length > 0 && (
        <details class="dev-banner__elsewhere">
          <summary class="dev-banner__toggle">{elsewhere.length} elsewhere</summary>
          <pre class="dev-banner__log">{formatDiagnostics(elsewhere)}</pre>
        </details>
      )}
    </div>
  </details>
)}