import { Link, useParams } from 'react-router-dom'
import { getCiMeta } from '../lib/ciRouteLookup'

/** Fallback for CI-style paths not yet ported to dedicated React pages. */
export function CiPlaceholderPage() {
  const params = useParams()
  const star = params['*'] ?? ''
  const segments = star.split('/').filter(Boolean)
  const meta = getCiMeta(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((s, i) => (
            <li
              key={`${s}-${i}`}
              className={`breadcrumb-item ${i === segments.length - 1 ? 'active' : ''}`}
              aria-current={i === segments.length - 1 ? 'page' : undefined}
            >
              {s}
            </li>
          ))}
        </ol>
      </nav>

      <h2 className="h4 mb-3">{title}</h2>
      
      <p className="text-muted small mb-3">
        Implement this screen using the matching routes in <code>app_laravel/routes/api.php</code>{' '}
        (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 CI view routes</Link>
        {' · '}
       
      </p>
    </div>
  )
}