import { Subtitle2, Caption1, makeStyles, tokens } from '@fluentui/react-components'
import { SPACE } from './tokens'

/**
 * One shared content max-width for every screen (UI1), plus the screen scroll
 * contract (L161).
 *
 * Settings used to be a 640px column while the list screens (Downloads, Library,
 * History, Terminal) were full-width, so on a wide window Settings read as an odd
 * narrow strip beside edge-to-edge siblings. This caps them all at the same
 * reading width and centers, so they line up. On typical window sizes the content
 * is already under the cap, so the list screens are visually unchanged — only the
 * wide-window upper bound is now shared.
 *
 * Scroll contract (L161): App's `<main>` is a non-scrolling flex column — each
 * screen owns its scrolling through one of two shells, so a page scroll and an
 * internal list scroll can never stack:
 *
 *   - `page` — document screens (Library, Settings, empty History): the shell
 *     scrolls; content is natural height.
 *   - `fill` — internally-scrolling screens (Downloads, Terminal, History): the
 *     shell fills the viewport and hides overflow; the screen's own list/log
 *     region (VirtualList, the terminal <pre>) is the only scroller.
 *
 * Usage: shell div outside, `mergeClasses(styles.root, screen.width)` inside.
 * Inside a `fill` shell the inner root uses `flexGrow: 1; minHeight: 0` (not
 * `height: 100%`, which is what coupled screens to `<main>`'s padding before).
 */
export const useScreenStyles = makeStyles({
  width: {
    width: '100%',
    maxWidth: '1200px',
    marginLeft: 'auto',
    marginRight: 'auto'
  },
  page: {
    flexGrow: 1,
    minHeight: 0,
    overflowY: 'auto',
    padding: SPACE.page
  },
  fill: {
    flexGrow: 1,
    minHeight: 0,
    display: 'flex',
    flexDirection: 'column',
    // Normally content fits and only the screen's internal list/log scrolls; on a
    // very short window the fixed-height rows above the list (header, download
    // bar) plus the list's min-height floor overflow, and the shell scrolls as
    // the fallback instead of the floor collapsing to 0px.
    overflowY: 'auto',
    overflowX: 'hidden',
    padding: SPACE.page
  }
})

const useStyles = makeStyles({
  header: {
    display: 'flex',
    alignItems: 'flex-start',
    gap: '12px',
    flexWrap: 'wrap'
  },
  titleBlock: {
    display: 'flex',
    flexDirection: 'column',
    gap: '2px',
    minWidth: 0,
    flexGrow: 1
  },
  description: {
    color: tokens.colorNeutralForeground3
  },
  actions: {
    display: 'flex',
    alignItems: 'center',
    gap: '8px',
    flexShrink: 0
  }
})

/**
 * The consistent screen header block (UI9/UI10): one page-title style on every
 * screen, with an optional one-line description and an optional right-aligned
 * action slot. Previously each screen rolled its own (Subtitle2 / Title2 / none),
 * and only Library had a description.
 */
export function ScreenHeader({
  title,
  description,
  actions
}: {
  title: string
  description?: React.ReactNode
  actions?: React.ReactNode
}): React.JSX.Element {
  const styles = useStyles()
  return (
    <div className={styles.header}>
      <div className={styles.titleBlock}>
        <Subtitle2 as="h1">{title}</Subtitle2>
        {description && <Caption1 className={styles.description}>{description}</Caption1>}
      </div>
      {actions && <div className={styles.actions}>{actions}</div>}
    </div>
  )
}
