import { makeStyles, tokens, shorthands } from '@fluentui/react-components'
import { SPACE, RADIUS, ICON } from '../../components/ui/tokens'

// Shared styles for the Settings cards. Each card renders a single <Card> so it
// stays one direct child of SettingsView's root -- the search filter toggles
// `display` per child, so the one-DOM-node-per-card shape must be preserved.
export const useSettingsStyles = makeStyles({
  card: {
    display: 'flex',
    flexDirection: 'column',
    // Page-level card: card padding + card radius (UI3/UI7).
    gap: SPACE.section,
    padding: SPACE.section,
    ...shorthands.borderRadius(RADIUS.card)
  },
  notesBox: {
    maxHeight: '180px',
    overflowY: 'auto',
    padding: '10px 12px',
    backgroundColor: tokens.colorNeutralBackground2,
    ...shorthands.borderRadius(tokens.borderRadiusMedium),
    border: `1px solid ${tokens.colorNeutralStroke2}`,
    whiteSpace: 'pre-wrap',
    fontSize: tokens.fontSizeBase200,
    lineHeight: tokens.lineHeightBase300
  },
  sectionHeader: {
    display: 'flex',
    alignItems: 'center',
    gap: '10px'
  },
  sectionIcon: {
    // Section-header glyph, next to each card's <Subtitle2> title (UI12 section tier).
    fontSize: `${ICON.section}px`,
    color: tokens.colorCompoundBrandForeground1
  },
  folderRow: {
    display: 'flex',
    gap: '8px',
    alignItems: 'flex-end'
  },
  folderInput: {
    flexGrow: 1
  },
  // The "Default format" control: a Video/Audio segmented toggle beside a quality
  // dropdown, mirroring the DownloadBar so both read as one mental model (L102).
  formatRow: {
    display: 'flex',
    gap: '8px',
    alignItems: 'center',
    flexWrap: 'wrap'
  },
  formatQuality: {
    minWidth: '200px'
  },
  hint: {
    color: tokens.colorNeutralForeground3
  },
  // Monospace version/output text (About card). Replaces the repeated inline
  // `style={{ fontFamily: fontFamilyMonospace }}` (L5).
  mono: {
    fontFamily: tokens.fontFamilyMonospace
  },
  monoBlock: {
    fontFamily: tokens.fontFamilyMonospace,
    display: 'block'
  },
  monoPre: {
    fontFamily: tokens.fontFamilyMonospace,
    whiteSpace: 'pre-wrap'
  },
  swatchRow: {
    display: 'flex',
    gap: '10px'
  },
  swatch: {
    boxSizing: 'border-box',
    width: '28px',
    height: '28px',
    flexShrink: 0,
    ...shorthands.borderRadius(tokens.borderRadiusCircular),
    ...shorthands.border('2px', 'solid', 'transparent'),
    padding: 0,
    cursor: 'pointer',
    // The swatch *is* a color preview, so keep the accent color under Windows
    // High Contrast / forced-colors (W18); otherwise every swatch flattens to one
    // system color and the accents become indistinguishable.
    forcedColorAdjust: 'none'
  },
  swatchActive: {
    ...shorthands.borderColor(tokens.colorNeutralForeground1)
  },
  errorList: {
    display: 'flex',
    flexDirection: 'column',
    gap: '8px'
  },
  errorRow: {
    padding: '10px 12px',
    backgroundColor: tokens.colorNeutralBackground2,
    ...shorthands.borderRadius(tokens.borderRadiusLarge),
    border: `1px solid ${tokens.colorNeutralStroke2}`
  },
  errorRowHeader: {
    display: 'flex',
    alignItems: 'center',
    gap: '8px'
  },
  errorRowTitle: {
    flexGrow: 1,
    minWidth: 0,
    fontWeight: tokens.fontWeightSemibold,
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    whiteSpace: 'nowrap'
  },
  // The Diagnostics card's "Show details" expander -- the fuller non-noise
  // stderr transcript behind a failure's one-line headline. Scrollable and
  // capped so a long SponsorBlock/ffmpeg transcript can't blow out the card.
  errorDetail: {
    fontFamily: tokens.fontFamilyMonospace,
    fontSize: tokens.fontSizeBase200,
    whiteSpace: 'pre-wrap',
    wordBreak: 'break-word',
    color: tokens.colorNeutralForeground3,
    backgroundColor: tokens.colorNeutralBackground1,
    marginTop: '6px',
    padding: '8px',
    maxHeight: '200px',
    overflowY: 'auto',
    ...shorthands.borderRadius(tokens.borderRadiusMedium)
  }
})
