import { style, globalStyle } from '@vanilla-extract/css';
import { color, config } from 'folds';

const border = color.Surface.Container;
const panelBg = color.Surface.Container;

export const ForumBoardRoot = style({
  display: 'flex',
  flexDirection: 'column',
  flex: 1,
  minHeight: 0,
  overflow: 'hidden',
});

export const ForumBoardGrid = style({
  display: 'grid',
  flex: 1,
  minHeight: 0,
  gap: config.space.S300,
  padding: config.space.S300,
  gridTemplateColumns: 'minmax(300px, 400px) minmax(0, 1fr)',
  gridTemplateRows: 'auto auto minmax(0, 1fr)',
});

export const ForumFiltersCard = style({
  gridColumn: '1',
  gridRow: '1',
  padding: config.space.S300,
  borderRadius: config.radii.R400,
  border: `1px solid ${border}`,
  backgroundColor: panelBg,
});

export const ForumListCard = style({
  gridColumn: '1',
  gridRow: '2 / 4',
  display: 'flex',
  flexDirection: 'column',
  minHeight: 0,
  minWidth: 0,
  overflow: 'hidden',
  padding: config.space.S300,
  borderRadius: config.radii.R400,
  border: `1px solid ${border}`,
  backgroundColor: panelBg,
});

export const ForumDetailPanel = style({
  gridColumn: '2',
  gridRow: '1 / 4',
  display: 'flex',
  flexDirection: 'column',
  minHeight: 0,
  minWidth: 0,
  overflow: 'hidden',
  borderRadius: config.radii.R400,
  border: `1px solid ${border}`,
  backgroundColor: panelBg,
});

export const ForumFilters = style({
  display: 'grid',
  gap: config.space.S200,
  gridTemplateColumns: 'minmax(0, 1.3fr) minmax(0, 1.3fr) minmax(0, 1fr) auto',
  alignItems: 'center',
});

export const ForumFilterSelect = style({
  fontSize: '0.88rem',
  height: '2rem',
  minWidth: 0,
  width: '100%',
  padding: '0.2rem 0.5rem',
  borderRadius: config.radii.R300,
  border: `1px solid ${border}`,
  background: 'transparent',
  color: 'inherit',
});

export const ForumSearchField = style({
  gridColumn: '1 / -1',
});

export const ForumSearchRow = style({
  display: 'grid',
  gridTemplateColumns: 'minmax(0, 1fr) auto',
  gap: config.space.S100,
  alignItems: 'center',
  borderBottom: `1px solid ${border}`,
  paddingBottom: config.space.S100,
});

export const ForumSearchInput = style({
  background: 'transparent',
  border: 0,
  outline: 'none',
  fontSize: '0.88rem',
  height: '2rem',
  width: '100%',
  color: 'inherit',
});

export const ForumSortCycleBtn = style({
  display: 'inline-flex',
  alignItems: 'center',
  justifyContent: 'center',
  minWidth: '2.25rem',
  height: '2rem',
  padding: config.space.S100,
  border: 0,
  background: 'transparent',
  color: 'inherit',
  cursor: 'pointer',
  borderRadius: config.radii.R300,
  selectors: {
    '&:hover': {
      color: color.Primary.Main,
    },
  },
});

export const ForumNewPostBox = style({
  display: 'flex',
  alignItems: 'center',
  gap: config.space.S300,
  justifyContent: 'flex-end',
  marginBottom: config.space.S300,
  flexShrink: 0,
});

export const ForumSessionUser = style({
  display: 'inline-flex',
  alignItems: 'center',
  gap: config.space.S200,
  marginRight: 'auto',
  minWidth: 0,
});

export const ForumPostScroll = style({
  flex: '1 1 0',
  minHeight: 0,
  overflowY: 'auto',
  overflowX: 'hidden',
});

export const ForumPostList = style({
  display: 'grid',
  gap: 0,
  listStyle: 'none',
  margin: 0,
  padding: 0,
});

export const ForumPostItem = style({
  borderTop: `1px solid ${border}`,
  selectors: {
    '&:first-child': {
      borderTop: 0,
    },
  },
});

export const ForumPostLink = style({
  display: 'grid',
  rowGap: config.space.S100,
  width: '100%',
  padding: `${config.space.S300} ${config.space.S200}`,
  boxSizing: 'border-box',
  border: 0,
  background: 'transparent',
  color: 'inherit',
  textAlign: 'left',
  cursor: 'pointer',
  font: 'inherit',
  selectors: {
    '&:hover': {
      backgroundColor: color.Primary.Container,
    },
    '&[data-active="true"]': {
      backgroundColor: color.Primary.Container,
    },
    '&[data-pinned="true"]': {
      backgroundColor: color.Secondary.Container,
    },
  },
});

export const ForumPostHead = style({
  display: 'flex',
  alignItems: 'flex-start',
  justifyContent: 'space-between',
  gap: config.space.S200,
  minWidth: 0,
});

export const ForumPostHeadMain = style({
  display: 'flex',
  alignItems: 'flex-start',
  gap: config.space.S200,
  flex: 1,
  minWidth: 0,
});

export const ForumPostTitle = style({
  flex: 1,
  minWidth: 0,
  fontSize: '1.02rem',
  fontWeight: 700,
  lineHeight: 1.3,
  wordBreak: 'break-word',
});

export const ForumPostFoot = style({
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'space-between',
  gap: config.space.S200,
  minWidth: 0,
});

export const ForumPostAuthor = style({
  display: 'flex',
  alignItems: 'center',
  flexWrap: 'wrap',
  gap: config.space.S100,
  flex: 1,
  minWidth: 0,
  fontSize: '0.88rem',
  color: color.Surface.OnContainer,
});

export const ForumAuthorName = style({
  fontWeight: 600,
});

export const ForumAuthorServer = style({
  color: color.Surface.OnContainer,
  opacity: 0.75,
  fontSize: '0.8rem',
});

export const ForumPostMeta = style({
  display: 'flex',
  alignItems: 'center',
  flexShrink: 0,
  gap: config.space.S200,
  fontSize: '0.8rem',
  color: color.Surface.OnContainer,
  opacity: 0.85,
  whiteSpace: 'nowrap',
});

export const ForumCategoryLabel = style({
  textTransform: 'lowercase',
});

export const ForumReplyMeta = style({
  display: 'inline-flex',
  alignItems: 'center',
  gap: '0.2rem',
  flexShrink: 0,
});

export const ForumReplyCount = style({
  fontSize: '0.8rem',
  fontWeight: 600,
});

export const ForumListFooter = style({
  borderTop: `1px solid ${border}`,
  padding: config.space.S300,
  textAlign: 'center',
  flexShrink: 0,
});

export const ForumLoadMoreBtn = style({
  width: '100%',
});

export const ForumListLoading = style({
  padding: config.space.S400,
});

export const ForumDetailScroll = style({
  flex: 1,
  minHeight: 0,
  display: 'flex',
  flexDirection: 'column',
});

export const ForumPageNav = style({
  width: 'min(400px, 38vw)',
  minWidth: '300px',
  maxWidth: '420px',
  height: '100%',
  minHeight: 0,
});

/** PageNav column must shrink so the feed list can scroll inside. */
globalStyle(`${ForumPageNav} > div`, {
  minHeight: 0,
  height: '100%',
});

export const ForumFeedSidebar = style({
  display: 'flex',
  flexDirection: 'column',
  flex: 1,
  minHeight: 0,
  gap: config.space.S200,
});

export const ForumDetailOnlyRoot = style({
  display: 'flex',
  flexDirection: 'column',
  flex: 1,
  minHeight: 0,
  height: '100%',
});

export const ForumDetailPanelFull = style({
  flex: 1,
  minHeight: 0,
  display: 'flex',
  flexDirection: 'column',
  overflow: 'hidden',
});
