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

// Category headers in the channels pane, Dawn-canon take two: the list rows
// in docs/design/…/stream-v2-dawn.jsx carry small tinted square glyphs and
// pill-shaped tabular badges — the headers borrow exactly that vocabulary
// (icon chip + regular app font + count pill + rotating chevron) instead of
// the folds Chip pill. Typography stays the app default on purpose.
export const SectionHeader = style({
  appearance: 'none',
  WebkitAppearance: 'none',
  border: 'none',
  background: 'transparent',
  width: '100%',
  display: 'flex',
  alignItems: 'center',
  gap: toRem(8),
  padding: `${toRem(4)} ${toRem(8)}`,
  borderRadius: toRem(8),
  cursor: 'pointer',
  font: 'inherit',
  color: color.Background.OnContainer,
  transition: 'background-color 120ms ease-out',
  selectors: {
    '&:hover': {
      backgroundColor: color.Background.ContainerHover,
    },
    '&:focus-visible': {
      outline: `2px solid ${color.Primary.Main}`,
      outlineOffset: toRem(-2),
    },
  },
});

// Tinted square glyph — same idiom as the mock's letter-avatars in the bots
// sidebar (rounded square, accent-on-tint). One accent per section kind.
export const SectionIcon = recipe({
  base: {
    width: toRem(26),
    height: toRem(26),
    borderRadius: toRem(7),
    display: 'inline-flex',
    alignItems: 'center',
    justifyContent: 'center',
    flexShrink: 0,
  },
  variants: {
    tint: {
      chats: { background: 'rgba(122, 182, 217, 0.16)', color: '#7ab6d9' },
      groups: { background: 'rgba(125, 211, 168, 0.16)', color: '#7dd3a8' },
      broadcasts: { background: 'rgba(212, 184, 138, 0.18)', color: '#d4b88a' },
      neutral: { background: color.Background.Container, color: color.Background.OnContainer },
    },
  },
  defaultVariants: { tint: 'neutral' },
});

export const SectionLabel = style({
  fontSize: toRem(13.5),
  lineHeight: toRem(18),
  fontWeight: 600,
  whiteSpace: 'nowrap',
  overflow: 'hidden',
  textOverflow: 'ellipsis',
  minWidth: 0,
});

// Count pill — the mock's unread-badge shape (rounded, tabular nums) in a
// neutral container tone, so it reads as «size of section», not «unread».
export const SectionCount = style({
  marginLeft: 'auto',
  minWidth: toRem(18),
  padding: `0 ${toRem(6)}`,
  height: toRem(16),
  borderRadius: toRem(99),
  background: color.Background.Container,
  color: color.Background.OnContainer,
  opacity: 0.75,
  fontSize: toRem(10.5),
  lineHeight: toRem(16),
  fontWeight: 600,
  fontVariantNumeric: 'tabular-nums',
  textAlign: 'center',
  flexShrink: 0,
});

export const SectionChevron = recipe({
  base: {
    flexShrink: 0,
    display: 'inline-flex',
    color: color.Background.OnContainer,
    opacity: 0.55,
    transition: 'transform 150ms ease-out',
  },
  variants: {
    closed: {
      true: { transform: 'rotate(-90deg)' },
    },
  },
});

// Tight vertical rhythm between sections — the previous S400 padding on top
// of the chip's own chrome was the «почему такой геп» complaint.
export const SectionGap = style({
  paddingTop: config.space.S200,
});

// Rooms nest under their section: indented to the right with a hairline
// guide dropping from the section icon's centerline (header padding 8px +
// half of the 26px icon ≈ 21px) — the Fleet tree-guide idiom, and the
// visual cue that rows belong to the шторка above.
export const SectionChildren = style({
  marginLeft: toRem(20),
  paddingLeft: toRem(8),
  borderLeft: `1px solid ${color.Background.ContainerLine}`,
});
