import {StyleSheet} from 'react-native';
import {COLORS} from '@shared/colors';
import {NEUTRAL_COLORS, SPACING} from '@shared/theme';

/** Big play / loading circle in the centre of the video surface.
 *  Matches the camera-preview modal's `PLAY_PAUSE_BUTTON_SIZE` (64).
 *  Exported so the Spinner-inside-circle variant in the component
 *  can size itself to the exact same circle. */
export const BIG_OVERLAY_SIZE = 64;

export const styles = StyleSheet.create({
  videoContainer: {
    // No `backgroundColor` here — the gallery screen's
    // `theme.background.layout.tertiary` shows through, so the
    // letterboxing around the video blends with the rest of the
    // screen instead of standing out as a black rectangle.
    // No `borderRadius` either: the video runs edge-to-edge now
    // that the gallery removed its horizontal padding.
    alignItems: 'center',
    flex: 1,
    justifyContent: 'center',
    overflow: 'hidden',
    width: '100%',
  },
  overlay: {
    ...StyleSheet.absoluteFillObject,
    alignItems: 'center',
    justifyContent: 'center',
  },
  // Thumbnail placeholder rendered ON TOP of the VideoView until the
  // first frame paints. Sits above the (initially-black) native surface
  // and below the tap Pressable so toggling controls keeps working.
  placeholder: {...StyleSheet.absoluteFillObject},
  placeholderImage: {
    height: '100%',
    width: '100%',
  },
  // Wrapper spans the surface and centers the play/loading circle.
  // `pointerEvents="box-none"` lets taps in the area AROUND the circle
  // fall through to the underlying tap-to-dismiss Pressable.
  //
  // `zIndex` + `elevation` force this above the poster placeholder.
  // JSX order alone isn't enough: the placeholder uses ExpoImage,
  // which on Android may render through a hardware-accelerated layer
  // that paints above sibling Views unless they also have a non-zero
  // elevation. Without this, the play button stays hidden behind the
  // poster and only becomes visible once the placeholder unmounts.
  bigOverlayWrapper: {
    ...StyleSheet.absoluteFillObject,
    alignItems: 'center',
    elevation: 2,
    justifyContent: 'center',
    zIndex: 2,
  },
  // Explicit size on the Pressable around `<IconPlayVideo size="lg" />`.
  // The icon is `position: 'absolute'` + `pointerEvents="none"`
  // internally, so it doesn't contribute to its parent's layout.
  // Without these dimensions the Pressable collapses to 0×0 — the
  // icon would render offset from the centre and taps would fall
  // through to the surface Pressable below.
  bigPlayPressable: {
    height: BIG_OVERLAY_SIZE,
    width: BIG_OVERLAY_SIZE,
  },
  // Loading-state circle — matches `IconPlayVideo`'s lg circle so
  // the play and loading variants swap in place visually.
  bigLoadingCircle: {
    alignItems: 'center',
    backgroundColor: NEUTRAL_COLORS.grey[100],
    borderRadius: BIG_OVERLAY_SIZE / 2,
    height: BIG_OVERLAY_SIZE,
    justifyContent: 'center',
    width: BIG_OVERLAY_SIZE,
  },
});

// Black-to-transparent darkening so the white icons / text stand out
// against any video frame underneath.
export const TOP_GRADIENT_COLORS = [
  'rgba(0, 0, 0, 0.65)',
  'rgba(0, 0, 0, 0)',
] as const;
export const BOTTOM_GRADIENT_COLORS = [
  'rgba(0, 0, 0, 0)',
  'rgba(0, 0, 0, 0.65)',
] as const;

const TOP_GRADIENT_HEIGHT = 72;
const BOTTOM_GRADIENT_HEIGHT = 80;

// Controls overlay. The two LinearGradients sit at the top + bottom of
// the video; everything else is transparent so taps on the middle of
// the frame fall through to the parent toggle-Pressable.
export const controlsStyles = StyleSheet.create({
  topGradient: {
    alignItems: 'flex-end',
    height: TOP_GRADIENT_HEIGHT,
    left: 0,
    paddingHorizontal: SPACING.x1,
    paddingTop: SPACING['x0.5'],
    position: 'absolute',
    right: 0,
    top: 0,
  },
  fullscreenButton: {
    alignItems: 'center',
    justifyContent: 'center',
    padding: SPACING['x0.5'],
  },
  bottomGradient: {
    bottom: 0,
    height: BOTTOM_GRADIENT_HEIGHT,
    justifyContent: 'flex-end',
    left: 0,
    position: 'absolute',
    right: 0,
  },
  bottomBar: {
    alignItems: 'center',
    flexDirection: 'row',
    gap: SPACING.x2,
    paddingHorizontal: SPACING.x2,
    paddingVertical: SPACING['x0.5'],
  },
  playPauseButton: {
    alignItems: 'center',
    justifyContent: 'center',
    paddingHorizontal: SPACING['x0.5'],
  },
  // Matches the camera-preview modal's `remainingTimeText` / time
  // labels — white, 14, semi-bold, tabular-nums for stable layout.
  timeText: {
    color: COLORS.WHITE,
    fontSize: 14,
    fontVariant: ['tabular-nums'],
    fontWeight: '600',
  },
});

const TRACK_HEIGHT = 4;
const TOUCH_HEIGHT = 32;

export const scrubberStyles = StyleSheet.create({
  // Tall touch target keeps the slider easy to grab even though the
  // visible track is thin.
  touchArea: {
    flex: 1,
    height: TOUCH_HEIGHT,
    justifyContent: 'center',
  },
  // White track with a blue progress fill — same as the camera preview
  // modal's seeker. (The camera preview plays a local file so it has
  // no `buffered` indicator; here we stream from the network, so the
  // buffered fraction is meaningful information and stays.)
  track: {
    backgroundColor: COLORS.WHITE,
    borderRadius: TRACK_HEIGHT / 2,
    height: TRACK_HEIGHT,
    overflow: 'hidden',
  },
  // Lighter shade of the progress blue — distinguishable from both
  // the white track and the saturated progress fill.
  buffered: {
    backgroundColor: NEUTRAL_COLORS.blue[200],
    height: '100%',
    left: 0,
    position: 'absolute',
    top: 0,
  },
  progress: {
    backgroundColor: NEUTRAL_COLORS.blue[500],
    height: '100%',
  },
});
