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

export const AutocompleteMenuBase = style([
  DefaultReset,
  {
    position: 'relative',
  },
]);

export const AutocompleteMenuContainer = style([
  DefaultReset,
  {
    position: 'absolute',
    bottom: config.space.S200,
    left: 0,
    right: 0,
    zIndex: config.zIndex.Max,
  },
]);

// Dawn popover shell — a single hairline-bordered panel that floats above the
// composer, mirroring the cmdK result-list look (panel #181a20 + faint fleet ring).
export const AutocompleteMenu = style([
  DefaultReset,
  {
    maxHeight: '40vh',
    height: '100%',
    display: 'flex',
    flexDirection: 'column',
    backgroundColor: color.SurfaceVariant.Container,
    border: `${toRem(1)} solid rgba(255, 255, 255, 0.07)`,
    borderRadius: config.radii.R400,
    boxShadow: '0 30px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(149, 128, 255, 0.15)',
    overflow: 'hidden',
  },
]);

// UPPERCASE, letter-spaced, muted mono section label — replaces the folds Header.
export const AutocompleteMenuHeader = style([
  DefaultReset,
  {
    flexShrink: 0,
    display: 'block',
    padding: `${config.space.S200} ${config.space.S300} ${config.space.S100}`,
    fontFamily: 'var(--font-mono)',
    fontSize: toRem(10),
    lineHeight: toRem(14),
    fontWeight: config.fontWeight.W500,
    letterSpacing: '0.12em',
    textTransform: 'uppercase',
    color: color.SurfaceVariant.OnContainer,
    opacity: 0.5,
  },
]);

// JetBrains Mono technical handle (@user:server, #alias:server, !id, /command sig)
// rendered at a muted tone inside an autocomplete row.
export const AutocompleteMono = style({
  fontFamily: 'var(--font-mono)',
  opacity: 0.6,
});

// Fleet highlight for the first (Tab-target) row: faint violet wash + a 2px
// fleet left-border. Purely visual — reflects the onTabPress 'first item' logic.
export const AutocompleteActiveRow = style({
  backgroundColor: 'rgba(149, 128, 255, 0.08)',
  boxShadow: `inset ${toRem(2)} 0 0 0 ${color.Primary.Main}`,
});