import React, { ReactNode, useCallback, useRef, useState } from 'react';
import FocusTrap from 'focus-trap-react';
import { Box, Overlay, OverlayBackdrop, config, color, toRem } from 'folds';
import { stopPropagation } from '../../utils/keyboard';

type ActionSheetProps = {
  open: boolean;
  onClose: () => void;
  'aria-label'?: string;
  children: ReactNode;
};

/**
 * [Gitea #166] A bottom sheet for touch screens: slides up from the bottom,
 * swipe-down or backdrop tap dismisses. Content is whatever the caller
 * renders (quick reactions + a folds Menu, for message actions).
 */
export function ActionSheet({
  open,
  onClose,
  children,
  'aria-label': ariaLabel,
}: ActionSheetProps) {
  const [dragY, setDragY] = useState(0);
  const startY = useRef<number | null>(null);
  // The long-press that opened us ends with a touchend/click that lands
  // "outside" the sheet — ignore outside clicks for the first moments.
  const openedAt = useRef(Date.now());

  const onTouchStart = useCallback((evt: React.TouchEvent) => {
    startY.current = evt.touches[0]?.clientY ?? null;
  }, []);
  const onTouchMove = useCallback((evt: React.TouchEvent) => {
    if (startY.current === null) return;
    const dy = (evt.touches[0]?.clientY ?? startY.current) - startY.current;
    setDragY(Math.max(0, dy));
  }, []);
  const onTouchEnd = useCallback(() => {
    const dismiss = dragY > 80;
    startY.current = null;
    setDragY(0);
    if (dismiss) onClose();
  }, [dragY, onClose]);

  if (!open) return null;
  return (
    <Overlay open backdrop={<OverlayBackdrop />}>
      <FocusTrap
        focusTrapOptions={{
          initialFocus: false,
          onDeactivate: onClose,
          clickOutsideDeactivates: () => Date.now() - openedAt.current > 600,
          escapeDeactivates: stopPropagation,
        }}
      >
        <Box
          role="dialog"
          aria-modal
          aria-label={ariaLabel}
          direction="Column"
          style={{
            position: 'fixed',
            left: 0,
            right: 0,
            bottom: 0,
            maxHeight: '75vh',
            background: color.Surface.Container,
            color: color.Surface.OnContainer,
            borderTopLeftRadius: toRem(16),
            borderTopRightRadius: toRem(16),
            boxShadow: '0 -8px 32px rgba(0,0,0,0.35)',
            paddingBottom: 'env(safe-area-inset-bottom)',
            transform: dragY ? `translateY(${dragY}px)` : undefined,
            transition: dragY ? undefined : 'transform 120ms ease-out',
            overflow: 'hidden',
          }}
          onTouchStart={onTouchStart}
          onTouchMove={onTouchMove}
          onTouchEnd={onTouchEnd}
          onTouchCancel={onTouchEnd}
        >
          <Box justifyContent="Center" shrink="No" style={{ padding: config.space.S200 }}>
            <div
              aria-hidden
              style={{
                width: toRem(36),
                height: toRem(4),
                borderRadius: toRem(2),
                background: color.Surface.ContainerLine,
              }}
            />
          </Box>
          <Box direction="Column" style={{ overflowY: 'auto' }}>
            {children}
          </Box>
        </Box>
      </FocusTrap>
    </Overlay>
  );
}