import { Button } from '../ui/index.js'
import { EmptyState } from './states.js'

/**
 * Stand-in for views not yet built (Focus, Board, Runway, …). Keeps navigation
 * live so the shell is demonstrable before the real screens land in P3-3+.
 * `onOpenIssue`, when given, exercises the shell's issue drill-in + back-stack;
 * real screens replace this with actual issue rows in P3-3+.
 */
export function PlaceholderScreen({
  title,
  phase,
  onOpenIssue,
}: {
  title: string
  phase: string
  onOpenIssue?: () => void
}) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      <header style={{ borderBottom: 'var(--rule-double)', paddingBottom: 14 }}>
        <h1 style={{ font: 'var(--text-display)', color: 'var(--ink-1)', margin: 0 }}>{title}</h1>
        <p style={{ font: 'var(--text-data)', color: 'var(--ink-3)', margin: '6px 0 0' }}>
          arrives in {phase} · the shell and navigation are live
        </p>
      </header>
      <EmptyState
        icon="coffee"
        title="Not yet poured"
        line="This view is on the boil for a later phase. The rail, routing, theme, and Reginald’s panel are already working around it."
      />
      {onOpenIssue ? (
        <div style={{ display: 'flex', justifyContent: 'center' }}>
          <Button variant="ghost" iconRight="arrow-right" onClick={onOpenIssue}>
            Preview an issue page
          </Button>
        </div>
      ) : null}
    </div>
  )
}
