import type { SxProps, Theme } from '@mui/material'
import { CHAT_MAX_WIDTH } from '../const'

export const styles = {
  header: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
    padding: ({ spacing }) => spacing(1),
  },
  headerTitle: {
    flexGrow: 1,
    px: ({ spacing }) => spacing(0.5),
  },
  headerActions: {
    display: 'flex',
    alignItems: 'center',
    marginLeft: ({ spacing }) => spacing(2),
    gap: ({ spacing }) => spacing(0.5),
  },
  footerWrapper: {
    padding: ({ spacing }) => spacing(1),
  },
  /**
   * Rounded input box, matching the reference ChatFooter. A two-column grid:
   * main column (input + optional slots) | send button, bottom-aligned so it
   * stays at the end as the input grows. NO vertical padding — the textarea's own
   * padding sets the ~32px single-line height, so the box hugs the input.
   */
  footerBox: {
    maxWidth: CHAT_MAX_WIDTH,
    width: '100%',
    margin: '0 auto',
    display: 'grid',
    gridTemplateColumns: '1fr auto',
    alignItems: 'end',
    columnGap: ({ spacing }) => spacing(0.5),
    backgroundColor: ({ palette }) =>
      palette.default?.background ?? 'rgba(44, 48, 50, 0.04)',
    borderRadius: ({ spacing }) => spacing(0.5),
    paddingInline: ({ spacing }) => spacing(0.5),
  },
  /** Main grid area: input stacked above the (optional) slots row. */
  footerMain: {
    minWidth: 0,
    display: 'flex',
    flexDirection: 'column',
    gap: ({ spacing }) => spacing(0.5),
  },
  /**
   * Send-button grid area, bottom-aligned (matches the reference flex-end row) so
   * the button stays at the bottom as the input grows. The small bottom padding
   * keeps it off the box edge — in the single-line state it reads as vertically
   * centered (4px top / 4px bottom around the 24px button in the 32px row).
   */
  footerSend: {
    alignSelf: 'end',
    paddingBottom: ({ spacing }) => spacing(0.5),
    '& .MuiIconButton-root': {
      padding: ({ spacing }) => spacing(0.5),
    },
  },
  /** The chrome-less multiline input (no underline / no filled affordance). */
  footerInput: {
    width: '100%',
    typography: 'body2',
    // The Meridian theme styles multiline InputBase as a tall "comment field"
    // (min-height: 96px on the root, 12px/14px textarea padding). Override both to
    // get the compact chat field: kill the root min-height and use the reference's
    // 6px/10px padding — both need !important to beat the theme override. Height
    // then comes from MUI's TextareaAutosize (minRows=1/maxRows=8): one line
    // (~32px) → grows → scrolls.
    //
    // TextareaAutosize renders a hidden shadow <textarea> (it carries
    // `aria-hidden="true"`, the same class, and an inline `padding: 0`) to measure
    // the content height; MUI then applies that height to the visible input. Getting
    // the compact ~32px single line right needs the two rules below split apart:
    //
    //  • Font metrics (size/line-height/letter-spacing) go on BOTH textareas. The
    //    shadow measures with its own CSS, so if it isn't pinned to body2 it
    //    measures at the default ~24px line-height and the box ends up too tall.
    //  • Padding goes on the VISIBLE input ONLY (`:not([aria-hidden])`). A
    //    `!important` padding that also hit the shadow would clobber its measurement
    //    `padding: 0`, double-counting the padding (~44px instead of 32px).
    //
    // `!important` is required on both to beat the Meridian theme's tall
    // "comment field" multiline overrides (12px/14px padding, larger metrics); the
    // root `min-height: 0` kills that theme's 96px min-height.
    minHeight: '0 !important',
    '& textarea': {
      fontSize: ({ typography }) => `${typography.body2.fontSize} !important`,
      lineHeight: ({ typography }) =>
        `${typography.body2.lineHeight} !important`,
      letterSpacing: ({ typography }) =>
        `${typography.body2.letterSpacing} !important`,
    },
    '& textarea:not([aria-hidden])': {
      resize: 'none',
      padding: ({ spacing }) => `${spacing(0.75, 1.25)} !important`,
    },
  },
  /**
   * Slots row under the input: start slot + model selector + end slot. The left
   * padding lines the row's content up with the input text above it: the input
   * text is inset ~12px from the box edge (InputBase root padding + the textarea's
   * 10px left padding) while the model-selector text button only insets ~8px, so a
   * 4px indent here makes the slot label share the placeholder's left edge instead
   * of sitting further out.
   */
  footerSlots: {
    display: 'flex',
    alignItems: 'center',
    gap: ({ spacing }) => spacing(0.5),
    minWidth: 0,
    flexWrap: 'wrap',
    paddingLeft: ({ spacing }) => spacing(0.5),
    paddingBottom: ({ spacing }) => spacing(0.5),
  },
  modelSelector: {
    textTransform: 'none',
    color: ({ palette }) => palette.text.secondary,
    maxWidth: '100%',
    minWidth: 0,
    '& .MuiButton-endIcon': {
      marginLeft: ({ spacing }) => spacing(0.25),
    },
  },
  modelSelectorLabel: {
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    whiteSpace: 'nowrap',
  },
  footerCaption: {
    textAlign: 'center',
  },
  content: {
    overflowY: 'auto',
    flex: 1,
    position: 'relative',
    mx: 'auto',
    maxWidth: CHAT_MAX_WIDTH,
    width: '100%',
    maxHeight: '100%',
    pt: 1,
    pb: 3,
    px: 2,
    display: 'flex',
    flexDirection: 'column',
    borderTopWidth: '1px',
    borderTopStyle: 'solid',
    borderBottomWidth: '1px',
    borderBottomStyle: 'solid',
  },
  sentinel: {
    height: '1px',
    flexShrink: 0,
  },
  jumpToLatestWrapper: {
    position: 'sticky',
    bottom: ({ spacing }) => spacing(3),
    height: 0,
    display: 'flex',
    justifyContent: 'center',
    zIndex: 1,
  },
  jumpToLatest: {
    transition: 'opacity 0.2s',
  },
  starter: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    padding: ({ spacing }) => spacing(3),
    textAlign: 'center',
    maxWidth: CHAT_MAX_WIDTH,
    margin: '0 auto',
  },
  starterItems: {
    display: 'grid',
    width: '100%',
    marginTop: ({ spacing }) => spacing(2),
  },
  starterItemsTwoCol: {
    gridTemplateColumns: 'repeat(2, 1fr)',
  },
} satisfies Record<string, SxProps<Theme>>