import { style } from '@vanilla-extract/css';
import { color, toRem } from 'folds';
import { VOJO_HORSESHOE_RADIUS_PX } from '../../styles/horseshoe';

// Outer container — anchor for the two absolutely-positioned panes
// (`appBody` and `silhouette`). `overflow: hidden` clips the full-bleed
// children at the SCREEN edges; the rounded top corners are carved by the
// silhouette's own `overflow: hidden` + border-radius (its top edge sits
// flush under the status bar, nowhere near the container's edges).
//
// Deliberately NO background color. The silhouette's carved corners must
// stay TRANSPARENT so they reveal the live chat behind (`appBody`), exactly
// like the chat-list curtain / profile horseshoe render «only the rounded
// shape» over real content. Painting the container would put a flat square
// behind the curve — a rounded silhouette sitting on a coloured block,
// which is the «rounding without rounding» look we're avoiding (whether the
// block is black or light-blue).
export const container = style({
  position: 'relative',
  display: 'flex',
  flex: 1,
  flexDirection: 'column',
  minWidth: 0,
  minHeight: 0,
  overflow: 'hidden',
});

// Holds the wrapped chat column, full-bleed behind the silhouette. NOT
// clipped: the live chat must paint behind the silhouette's rounded top
// corners so the carved corners reveal real content (room header /
// timeline) — that's what makes the rounding read, with no synthetic
// backing square. The opaque silhouette covers everything except the two
// corner triangles + the status-bar strip above its top edge.
//
// `isolation: isolate` is load-bearing now that the chat is full-bleed
// (it used to be clip-path-masked away below the sheet). It makes appBody
// its OWN stacking context so the chat's positively z-indexed overlays —
// the composer / input form, scroll-to-bottom pill, typing strip — stay
// confined below the silhouette sibling. Without it they out-stack the
// (z-index: auto) sheet and render on top of the open viewer.
// `backgroundColor` opaque so nothing behind the wrapper bleeds through any
// transparent slivers in the wrapped tree (e.g. between bubble rows).
export const appBody = style({
  position: 'absolute',
  top: 0,
  left: 0,
  right: 0,
  bottom: 0,
  display: 'flex',
  flexDirection: 'column',
  minWidth: 0,
  minHeight: 0,
  backgroundColor: color.Background.Container,
  isolation: 'isolate',
});

// The viewer sheet's surface. `Background.Container` (deepest Dawn tone)
// so the image floats on a near-black backdrop — closest to the legacy
// `<Overlay>` viewer's full-screen dark scrim. Rounded top corners (same
// radius as the tab curtains) with `overflow: hidden` clip the header /
// image to the curve. `overflow: hidden` also means the two corner
// triangles paint NOTHING — they stay transparent and reveal the live chat
// behind (`appBody` is full-bleed, not clipped), so the rounding reads
// against real content the way the chat-list curtain / profile horseshoe
// do, with no backing square behind the curve.
export const silhouette = style({
  position: 'absolute',
  bottom: 0,
  left: 0,
  right: 0,
  display: 'flex',
  flexDirection: 'column',
  overflow: 'hidden',
  backgroundColor: color.Background.Container,
  borderTopLeftRadius: toRem(VOJO_HORSESHOE_RADIUS_PX),
  borderTopRightRadius: toRem(VOJO_HORSESHOE_RADIUS_PX),
  willChange: 'height',
});

// Top-anchored — handle + viewer body reveal top-down as silhouette
// grows. Android nav-bar clearance is owned by `MainActivity.java`'s
// WindowInsets listener (the WebView is already sized above the nav
// bar), so no `padding-bottom: env(...)` here — that would stack on
// top of the native padding and lift the download / share row above
// its visible host.
export const panelContent = style({
  position: 'absolute',
  top: 0,
  left: 0,
  right: 0,
  boxSizing: 'border-box',
  display: 'flex',
  flexDirection: 'column',
});

// 20px drag-to-close band — ONE of two close origins. This dedicated strip
// drives close via the handle gesture below; the viewer body is the other,
// driving close via MediaViewerBody's `onCloseDrag` (a vertical-down drag at
// zoom=1 anywhere on the stage). Touches on the body otherwise drive zoom /
// pan / swipe. `touchAction: none` blocks browser-native scroll on this strip.
export const panelHandle = style({
  flexShrink: 0,
  height: toRem(20),
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  cursor: 'grab',
  touchAction: 'none',
  userSelect: 'none',
  selectors: {
    '&:active': { cursor: 'grabbing' },
  },
});

// Darker than `Background.Container` would make the grabber
// disappear — use `SurfaceVariant.Container` so the bar reads
// against the dark viewer bg. Mirror of the settings handle's
// step-up against `SurfaceVariant.Container` (where it uses the
// deeper `Background.Container`).
export const panelHandleBar = style({
  width: toRem(36),
  height: toRem(4),
  borderRadius: toRem(4),
  backgroundColor: color.SurfaceVariant.Container,
});

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