import { safeHttpUrl } from './safe-url'

export function DataCoveragePanel(props: {
  gaps: Array<{ id: string; label: string; specRef: string }>
}) {
  return (
    <details className="relative">
      <summary className="flex min-h-11 cursor-pointer list-none items-center rounded-md border border-border px-3 text-xs font-semibold text-fg-muted hover:bg-surface-raised focus-visible:outline focus-visible:outline-2 focus-visible:outline-accent">
        Data coverage
      </summary>
      <div className="absolute right-0 top-full z-50 mt-2 w-80 rounded-lg border border-border bg-surface p-4 shadow-xl">
        <h2 className="text-sm font-semibold text-fg">Not recorded yet</h2>
        {props.gaps.length === 0 ? (
          <p className="mt-2 text-sm text-fg-muted">All run-page signals are recorded.</p>
        ) : (
          <ul className="mt-2 space-y-2">
            {props.gaps.map((gap) => (
              <li key={gap.id}>
                <a href={safeHttpUrl(gap.specRef)} className="text-sm text-fg-muted underline decoration-border-strong underline-offset-2 hover:text-fg">
                  {gap.id} · {gap.label}
                </a>
              </li>
            ))}
          </ul>
        )}
      </div>
    </details>
  )
}