import { globalStyle, style } from '@vanilla-extract/css';
import { color, config, toRem } from 'folds';
import { VOJO_HORSESHOE_GAP_PX, VOJO_HORSESHOE_RADIUS_PX } from '../../styles/horseshoe';
import { ChatComposer } from '../room/RoomView.css';

// Bridge widgets centre their body content in a 960px column (apps/widget-telegram/src/styles.css
// `.app { max-width: 960px; margin: 0 auto }`, mirrored by the host hero's `BotShell.HeroInner`).
// The native AI surface matches that band so the transcript + composer sit centred on wide web
// viewports instead of spreading edge-to-edge. On narrow (mobile/native) screens the cap is a
// no-op — the column just fills the width, so native is byte-identical to before.
const BOT_CONTENT_MAX = toRem(960);

// ChatGPT-style conversation surface for assistant bots. A slim hero (in AiChatHeader) sits above
// a body that holds the active conversation / new-chat composer, with a chat-history panel that
// slides in from the RIGHT over it. Works identically on desktop and mobile (single column; the
// panel is an overlay, not a second pane).
export const Surface = style({
  // Fill the page slot via FLEX, NOT `height: 100%`. The real parent is PageRoot's `<Box grow="Yes">`
  // (Page.tsx) — a flex ROW — so `flexGrow: 1` supplies the WIDTH and `alignSelf: 'stretch'` supplies
  // the HEIGHT via cross-axis stretch (height stays `auto`). An explicit `height: 100%` instead opts
  // the item OUT of stretch and resolves as a PERCENTAGE of the parent's height — unreliable on
  // Android WebView when an ancestor's height is itself a flex-stretch value rather than a concrete
  // px (e.g. inside the swipe-back overlay card). That percentage path is what collapsed the bot
  // surface to content height on native (hint+composer riding to the top, history panel cropped),
  // while RoomView — which fills purely by flex — was fine. Filling by flex is robust to whatever
  // positioned/flex wrapper hosts the surface.
  flexGrow: 1,
  minWidth: 0,
  minHeight: 0,
  alignSelf: 'stretch',
  display: 'flex',
  flexDirection: 'column',
  backgroundColor: color.SurfaceVariant.Container,
  // Native safe-top: `#root` no longer reserves the status-bar inset (src/index.css), so the
  // surface extends to the screen top and the top bar clears the system icons. Web → 0.
  paddingTop: 'var(--vojo-safe-top, 0px)',
});

export const Body = style({
  position: 'relative',
  flexGrow: 1,
  minHeight: 0,
  overflow: 'hidden',
  display: 'flex',
});

export const Main = style({
  // No `height: 100%` here — Main is a flex child of the row-flex `Body`, so its height comes from
  // cross-axis stretch (same reasoning as `Surface` above). An explicit percentage height would be
  // the brittle pattern we just removed from `Surface`.
  flexGrow: 1,
  minWidth: 0,
  display: 'flex',
  flexDirection: 'column',
});

// Hide the composer/input form entirely while the chats list (History panel) is open; the chat
// messages stay visible. `ChatComposer` marks both the new-chat composer and the in-thread
// composer, so both are removed.
globalStyle(`${Main}[data-history-open] ${ChatComposer}`, {
  display: 'none',
});

// Chat-history panel, anchored to the RIGHT edge of the body, slid off-screen until toggled. Sits
// above the Main content (zIndex 2) over a click-to-close Backdrop (zIndex 1). Raised
// Surface.Container tone + a soft cast shadow lift it off the surface so the open/close reads as a
// panel sliding in, not a flat colour swap. (The back affordance lives in the top AiChatHeader.)
export const History = style({
  position: 'absolute',
  insetBlock: 0,
  right: 0,
  zIndex: 2,
  // ~1.1× narrower than before (440→400 / 300→280 / 50%→45%).
  width: '45%',
  maxWidth: toRem(400),
  minWidth: toRem(280),
  display: 'flex',
  flexDirection: 'column',
  // Composer/input-form tone (Surface.Container = #0d0e11 — the same fill the message input uses).
  backgroundColor: color.Surface.Container,
  // No border — the panel separates from the chat via its own cast shadow + the rounded corner.
  // Round the inner (top-left) corner with the app-wide horseshoe radius, matching the Direct-tab
  // chat list (PageNav content) and the composer card.
  borderTopLeftRadius: toRem(VOJO_HORSESHOE_RADIUS_PX),
  transform: 'translateX(100%)',
  transition: 'transform 220ms cubic-bezier(0.22, 1, 0.36, 1)',
  selectors: {
    // No cast shadow — the panel separates from the chat via its darker bg + rounded corner only.
    '&[data-open]': {
      transform: 'translateX(0)',
    },
  },
  '@media': {
    '(prefers-reduced-motion: reduce)': { transition: 'none' },
    // Narrower on native so there's a bigger gap on the left of the chats list.
    '(max-width: 600px)': { width: '78%', maxWidth: 'none' },
  },
});

export const HistoryHeader = style({
  flexShrink: 0,
  display: 'flex',
  alignItems: 'center',
  gap: config.space.S200,
  padding: `${config.space.S300} ${config.space.S300} ${config.space.S300} ${config.space.S400}`,
});

export const HistoryTitle = style({
  flexGrow: 1,
  minWidth: 0,
  fontWeight: 700,
  letterSpacing: '0.01em',
});

// Full-width primary action at the top of the panel — a fleet-violet pill that starts a fresh
// conversation. Pinned between the header and the scrolling list so it's always reachable.
export const NewChatButton = style({
  flexShrink: 0,
  margin: `0 ${config.space.S300} ${config.space.S200}`,
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  gap: config.space.S200,
  padding: `${config.space.S300} ${config.space.S400}`,
  borderRadius: config.radii.R400,
  border: 'none',
  appearance: 'none',
  cursor: 'pointer',
  font: 'inherit',
  fontWeight: 600,
  backgroundColor: color.Primary.Main,
  color: color.Primary.OnMain,
  transition: 'filter 120ms ease, transform 120ms ease',
  selectors: {
    '&:hover': { filter: 'brightness(1.06)' },
    '&:active': { transform: 'translateY(1px)' },
    '&:focus-visible': {
      outline: `${config.borderWidth.B400} solid ${color.Primary.Main}`,
      outlineOffset: toRem(2),
    },
  },
});

export const HistoryList = style({
  flexGrow: 1,
  minHeight: 0,
  overflowY: 'auto',
  padding: `0 ${config.space.S300} ${config.space.S300}`,
  display: 'flex',
  flexDirection: 'column',
  gap: config.space.S100,
});

export const Backdrop = style({
  position: 'absolute',
  inset: 0,
  zIndex: 1,
  border: 'none',
  padding: 0,
  margin: 0,
  appearance: 'none',
  cursor: 'default',
  // No scrim — the chat behind must not dim when the chats list opens (click-to-close only).
  backgroundColor: 'transparent',
});

// History row: a rounded card holding the conversation title and a muted last-activity time.
// Hover lifts the fill; the open conversation gets an active fill plus a fleet left-accent drawn
// with an inset box-shadow (so it doesn't shift the text the way a border would).
export const Row = style({
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'flex-start',
  gap: toRem(2),
  width: '100%',
  padding: `${config.space.S300} ${config.space.S300}`,
  borderRadius: config.radii.R400,
  border: 'none',
  background: 'transparent',
  color: color.Surface.OnContainer,
  cursor: 'pointer',
  textAlign: 'left',
  appearance: 'none',
  font: 'inherit',
  minWidth: 0,
  transition: 'background-color 120ms ease, box-shadow 120ms ease',
  selectors: {
    '&:hover': { backgroundColor: color.Surface.ContainerHover },
    '&[data-active]': {
      backgroundColor: color.Surface.ContainerActive,
      boxShadow: `inset ${toRem(3)} 0 0 ${color.Primary.Main}`,
    },
    '&:focus-visible': {
      outline: `${config.borderWidth.B400} solid ${color.Primary.Main}`,
      outlineOffset: toRem(1),
      backgroundColor: color.Surface.ContainerHover,
    },
  },
});

export const RowTitle = style({
  display: 'block',
  width: '100%',
  overflow: 'hidden',
  textOverflow: 'ellipsis',
  whiteSpace: 'nowrap',
  fontWeight: 500,
});

export const RowTime = style({
  color: color.SurfaceVariant.OnContainer,
  opacity: 0.6,
  fontFamily: 'var(--font-mono)',
  fontVariantNumeric: 'tabular-nums',
});

export const Empty = style({
  flexGrow: 1,
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
  justifyContent: 'center',
  gap: config.space.S200,
  padding: config.space.S700,
  textAlign: 'center',
});

// New-chat composer: fills the Main column, composer pinned to the bottom like a chat.
export const NewChat = style({
  flexGrow: 1,
  minHeight: 0,
  display: 'flex',
  flexDirection: 'column',
});

export const NewChatHint = style({
  flexGrow: 1,
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
  justifyContent: 'center',
  gap: config.space.S200,
  padding: config.space.S700,
  textAlign: 'center',
});

// Wrapper for the standard RoomInput in the new-chat view. Mirrors ThreadDrawer's ThreadComposer
// geometry (the `ChatComposer` marker class applied alongside carries the rounded-card chrome via
// globalStyle in RoomView.css), so the new-chat composer looks identical to the in-conversation
// one. Centred in the 960px bridge band so the composer width matches the transcript on web.
export const ComposerWrap = style({
  flexShrink: 0,
  width: '100%',
  maxWidth: BOT_CONTENT_MAX,
  marginLeft: 'auto',
  marginRight: 'auto',
  boxSizing: 'border-box',
  // Mirror ThreadComposerAssistant's geometry EXACTLY (12px horseshoe-gap on mobile, 40px hero
  // gutter on desktop) so the composer doesn't shift sideways when the new-chat view hands off to
  // an opened conversation — on phones too, not just desktop.
  padding: `0 ${toRem(VOJO_HORSESHOE_GAP_PX)} ${toRem(VOJO_HORSESHOE_GAP_PX)}`,
  '@media': {
    'screen and (min-width: 600px)': {
      paddingLeft: toRem(40),
      paddingRight: toRem(40),
    },
  },
});
