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

// Compact dark pill rendered inside `ChannelLayout.threadSummary` slot
// (between the message body and reactions). Click target is the whole
// pill — no inner focusable elements, single tab stop.
//
// Visual: dot indicator + bold accent count + bullet + time + chevron.
// Bg uses the SurfaceVariant elevation chain (Container → ContainerHover
// → ContainerActive on hover/focus) so the pill reads as a tappable
// raised target against both the canvas and the row's own hover bg.
export const Root = style({
  display: 'inline-flex',
  alignItems: 'center',
  gap: config.space.S200,
  padding: `${config.space.S100} ${config.space.S300}`,
  borderRadius: config.radii.R400,
  border: 'none',
  // One step above `SurfaceVariant.Container` so the pill reads as a
  // tappable, raised target against both the canvas (`Surface.Container`)
  // and the row's hover bg.
  background: color.SurfaceVariant.ContainerHover,
  color: color.SurfaceVariant.OnContainer,
  cursor: 'pointer',
  maxWidth: toRem(540),
  minWidth: 0,
  textAlign: 'left',
  appearance: 'none',
  font: 'inherit',
  selectors: {
    '&:hover': {
      backgroundColor: color.SurfaceVariant.ContainerActive,
    },
    '&:focus-visible': {
      outline: `${config.borderWidth.B400} solid ${color.Primary.Main}`,
      outlineOffset: toRem(1),
      backgroundColor: color.SurfaceVariant.ContainerActive,
    },
  },
});

// 6px dot indicator. Visible ONLY when the thread has unread content
// (M4): `unread` → `Primary.Main` (lavender, total > 0); `highlight`
// → `Critical.Main` (mention). On `read` state the dot is hidden
// outright via `display: none` — a dim-coloured dot against the pill
// bg (`SurfaceVariant.ContainerHover`) rendered at ~1.28:1 contrast,
// effectively invisible on dim screens, so the user couldn't tell
// «read» apart from «no indicator». Hiding makes the absence
// load-bearing: dot present → unread, dot absent → read. Under the
// kill switch the parent always passes `read`; the card collapses to
// a clean count + time + chevron pill.
export const Dot = style({
  flexShrink: 0,
  width: toRem(6),
  height: toRem(6),
  borderRadius: '50%',
  display: 'none',
  selectors: {
    '&[data-unread-state="unread"]': {
      display: 'block',
      backgroundColor: color.Primary.Main,
    },
    '&[data-unread-state="highlight"]': {
      display: 'block',
      backgroundColor: color.Critical.Main,
    },
  },
});

export const Count = style({
  flexShrink: 0,
  color: color.Primary.Main,
});

export const Separator = style({
  flexShrink: 0,
  color: color.SurfaceVariant.OnContainer,
  opacity: 0.5,
});

export const TimeText = style({
  flexShrink: 0,
});

export const Chevron = style({
  flexShrink: 0,
  marginLeft: config.space.S100,
  color: color.SurfaceVariant.OnContainer,
  opacity: 0.5,
});
