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

// Hero status card — leading tinted icon, title + live status, big toggle.
export const HeroCard = style({
  display: 'flex',
  alignItems: 'center',
  gap: config.space.S300,
  backgroundColor: color.SurfaceVariant.Container,
  borderRadius: toRem(16),
  padding: config.space.S400,
});

export const HeroIcon = style({
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  width: toRem(40),
  height: toRem(40),
  borderRadius: toRem(12),
  flexShrink: 0,
  backgroundColor: color.Primary.Container,
  color: color.Primary.OnContainer,
});

export const HeroText = style({
  display: 'flex',
  flexDirection: 'column',
  gap: toRem(2),
  flexGrow: 1,
  minWidth: 0,
});

export const StatusLine = style({
  display: 'flex',
  alignItems: 'center',
  gap: toRem(6),
});

export const StatusDot = style({
  width: toRem(8),
  height: toRem(8),
  borderRadius: '50%',
  flexShrink: 0,
});

export const statusDotColor = styleVariants({
  off: { backgroundColor: color.SurfaceVariant.OnContainer, opacity: 0.4 },
  connecting: { backgroundColor: color.Warning.Main },
  ok: { backgroundColor: color.Success.Main },
  error: { backgroundColor: color.Critical.Main },
  // Pre-login: enabled but unverifiable (no homeserver to probe yet) — a calm
  // neutral dot, not the amber "connecting" that would never resolve.
  pending: { backgroundColor: color.Primary.Main },
});

// A subtle inline warning (e.g. background native traffic was blocked).
export const WarnLine = style({
  display: 'flex',
  gap: toRem(6),
  alignItems: 'flex-start',
  color: color.Warning.Main,
});

// One softly-rounded inset panel; rows parted by hairlines (iOS grouped list).
export const Panel = style({
  display: 'flex',
  flexDirection: 'column',
  backgroundColor: color.SurfaceVariant.Container,
  borderRadius: toRem(16),
  overflow: 'hidden',
});

// A field row: muted label on the left, borderless input filling the rest.
export const FieldRow = style({
  display: 'flex',
  alignItems: 'center',
  gap: config.space.S300,
  minHeight: toRem(48),
  paddingLeft: config.space.S400,
  paddingRight: config.space.S400,
  paddingTop: config.space.S200,
  paddingBottom: config.space.S200,
  selectors: {
    '&:not(:last-child)': {
      borderBottom: `1px solid ${color.SurfaceVariant.ContainerLine}`,
    },
  },
});

export const FieldLabel = style({
  width: toRem(96),
  flexShrink: 0,
  whiteSpace: 'nowrap',
  fontSize: toRem(15),
  color: color.SurfaceVariant.OnContainer,
});

// Read-only metadata value on the right of a status row.
export const MetaValue = style({
  marginLeft: 'auto',
  display: 'flex',
  alignItems: 'center',
  gap: toRem(6),
  minWidth: 0,
  fontSize: toRem(15),
  color: color.SurfaceVariant.OnContainer,
  fontVariantNumeric: 'tabular-nums',
});

// Borderless input that reads as part of the row (no box of its own).
export const FieldInput = style({
  flexGrow: 1,
  minWidth: 0,
  border: 'none',
  outline: 'none',
  background: 'transparent',
  color: color.SurfaceVariant.OnContainer,
  fontSize: toRem(15),
  fontFamily: 'inherit',
  padding: 0,
  textAlign: 'right',
  '::placeholder': {
    color: color.SurfaceVariant.OnContainer,
    opacity: 0.35,
  },
});

export const EyeButton = style({
  flexShrink: 0,
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  border: 'none',
  background: 'transparent',
  color: color.SurfaceVariant.OnContainer,
  opacity: 0.6,
  cursor: 'pointer',
  padding: toRem(2),
  selectors: { '&:hover': { opacity: 1 } },
});

// A tappable "value" on the right of a grouped row (the Type selector) — the
// current value + a chevron, borderless so it reads as part of the row, same
// as the iOS settings "Theme ›" pattern.
export const SelectValue = style({
  display: 'flex',
  alignItems: 'center',
  gap: toRem(4),
  marginLeft: 'auto',
  border: 'none',
  outline: 'none',
  background: 'transparent',
  color: color.SurfaceVariant.OnContainer,
  fontSize: toRem(15),
  fontWeight: config.fontWeight.W500,
  fontFamily: 'inherit',
  cursor: 'pointer',
  padding: 0,
});

export const SelectChevron = style({
  display: 'flex',
  opacity: 0.5,
});

// A calm "feature unavailable here" notice (web / desktop / ancient WebView).
export const NoticeCard = style({
  display: 'flex',
  gap: config.space.S300,
  alignItems: 'flex-start',
  padding: config.space.S400,
  borderRadius: toRem(16),
  backgroundColor: color.SurfaceVariant.Container,
  color: color.SurfaceVariant.OnContainer,
});

export const InfoIcon = style({
  flexShrink: 0,
  color: color.SurfaceVariant.OnContainer,
  opacity: 0.7,
  marginTop: toRem(1),
});
