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

// Outer column that owns the sheet body — hero + group list. The host
// (mobile horseshoe / desktop side pane) decides the surrounding
// scroll strategy; this component just renders content flat so the
// host can measure its `scrollHeight` for content-fit rail sizing.
export const Root = style({
  display: 'flex',
  flexDirection: 'column',
  width: '100%',
});

// ── Hero ────────────────────────────────────────────────────────
//
// Centred avatar + name + subline + topic. Visual rhyme with
// `UserHero` from the 1:1 peer profile sheet — same gap rhythm and
// padding so the two sheets read as one design system.
export const HeroRoot = style({
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
  padding: `${config.space.S500} ${config.space.S400} ${config.space.S300}`,
  width: '100%',
  gap: toRem(8),
});

// Avatar wrapper — circular 96 px to mirror the 1:1 `UserHero`. The
// `RoomAvatar` primitive renders as an absolutely-filling image /
// fallback inside this fixed-size container, so the avatar is its
// own boundary and stays exactly centred under the column. Using
// `display: block` (not inline-flex) avoids inline-baseline padding
// that can offset the visual centre by 1-2 px on some browsers.
// `boxShadow` ring matches the Dawn outline rhythm used by
// `UserHero` (chat-list rows, avatar surface plate).
export const HeroAvatar = style({
  position: 'relative',
  display: 'block',
  width: toRem(96),
  height: toRem(96),
  borderRadius: '50%',
  flexShrink: 0,
  boxShadow: `0 0 0 ${config.borderWidth.B600} ${color.Background.Container}`,
});

// Native button chrome reset for the tap-to-zoom avatar wrapper.
// Mirrors `UserHero.HeroAvatarButton`. Keeps the visible avatar
// pixel-identical to the non-clickable path so the user can't tell
// «is this tappable?» from look alone — the focus ring on
// keyboard-tab is the affordance.
export const HeroAvatarButton = style({
  display: 'inline-flex',
  background: 'transparent',
  border: 'none',
  padding: 0,
  margin: 0,
  cursor: 'pointer',
});

// Subline row beneath the name — «N members · e2ee» layout mirrors
// the user-profile hero's presence + e2ee row.
export const HeroSubline = style({
  width: '100%',
  justifyContent: 'center',
  flexWrap: 'wrap',
});

export const HeroMembersCount = style({
  color: color.Surface.OnContainer,
  opacity: 0.7,
});

export const HeroBullet = style({
  color: color.Surface.ContainerLine,
});

export const HeroE2ee = style({
  display: 'inline-flex',
  alignItems: 'center',
  gap: toRem(4),
  color: color.Success.Main,
});

// Optional topic line — muted secondary text, clamped to keep the
// hero compact. Long topics overflow into the inner list scroll
// only if the user keeps reading via the host's scroll handle.
export const HeroTopic = style({
  marginTop: toRem(4),
  color: color.Surface.OnContainer,
  opacity: 0.65,
  maxWidth: toRem(360),
});

// ── List ────────────────────────────────────────────────────────

// Spans the full width below the hero. Top border separates the
// hero block from the role-grouped list — same divider rhythm as
// the user-profile `InfoSection` rule above the chips.
export const List = style({
  display: 'flex',
  flexDirection: 'column',
  padding: `0 0 ${config.space.S200}`,
  borderTop: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
});

// Group divider — uppercase muted label + numeric count. Spaced apart
// to match `stream-v2-dawn.jsx` ("ADMIN · 1", "MOD · 1", "BOTS · 1",
// "УЧАСТНИКИ · 22", "ГОСТИ · 4").
export const GroupLabel = style({
  display: 'flex',
  alignItems: 'baseline',
  justifyContent: 'space-between',
  padding: `${config.space.S400} ${config.space.S400} ${config.space.S200}`,
});

export const GroupLabelFirst = style({
  paddingTop: config.space.S300,
});

export const GroupLabelText = style({
  color: color.Surface.OnContainer,
  textTransform: 'uppercase',
  letterSpacing: toRem(1),
  fontWeight: 600,
  opacity: 0.7,
});

export const GroupLabelCount = style({
  color: color.Surface.OnContainer,
  fontVariantNumeric: 'tabular-nums',
  opacity: 0.5,
});

// Member row — full-width button so the entire surface is tappable
// for opening the per-user profile. `text-align: left` because the
// `<button>` resets it to `center` by default. Hover surface raises
// to `Surface.ContainerHover`, matching the chat-list rows.
export const MemberRow = style({
  display: 'flex',
  alignItems: 'center',
  gap: config.space.S200,
  width: '100%',
  padding: `${config.space.S200} ${config.space.S400}`,
  background: 'transparent',
  border: 'none',
  color: color.Surface.OnContainer,
  textAlign: 'left',
  cursor: 'pointer',
  minHeight: toRem(40),
  selectors: {
    '&:hover': {
      backgroundColor: color.Surface.ContainerHover,
    },
    '&:focus-visible': {
      outline: `${config.borderWidth.B400} solid ${color.Primary.Main}`,
      outlineOffset: `-${config.borderWidth.B400}`,
    },
  },
});

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

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

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

export const MemberName = style({
  minWidth: 0,
  flex: '0 1 auto',
});

export const MemberTyping = style({
  display: 'inline-flex',
  marginTop: toRem(2),
});
