import { Link, useParams } from 'react-router-dom'
import { getViewRouteMeta } from '../lib/viewRouteLookup'

/** Fallback for mapped source-view paths not yet ported to dedicated React pages. */
export function ViewRoutePlaceholderPage() {
  const params = useParams()
  const star = params['*'] ?? ''
  const segments = star.split('/').filter(Boolean)
  const meta = getViewRouteMeta(star)

  const title = meta?.title ?? 'Section placeholder'
  return (
    <div>
      <nav aria-label="breadcrumb">
        <ol className="breadcrumb">
          <li className="breadcrumb-item">
            <Link to="/app/home">Home</Link>
          </li>
          {segments.map((segment, index) => (
            <li
              key={
                segment + '-' + index
              }
              className={
                'breadcrumb-item ' + (index === segments.length - 1 ? 'active' : '')
              }
              aria-current={index === segments.length - 1 ? 'page' : undefined}
            >
              {segment}
            </li>
          ))}
        </ol>
      </nav>

      <h2 className="h4 mb-3">{title}</h2>

      <p className="text-muted small mb-3">
        Implement this screen using the matching Laravel routes and API endpoints (JWT{' '}
        <code>Authorization: Bearer</code>). See also <Link to="/docs">API docs</Link>.
      </p>
      <p className="small mb-3">
        SPA path: <code>/app/{star || '…'}</code>
      </p>
      <p className="small mb-0">
        <Link to="/app/browse">Browse all mapped view routes</Link>
      </p>
    </div>
  )
}
