ProgressAndroid

import * as React from "react";
import { forwardRef } from "react";
import { View, type ViewProps } from "react-native";
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withTiming,
  withRepeat,
  Easing,
} from "react-native-reanimated";
import { cn, useReducedMotion, timing, ease } from "@lumioui/core";
import { Glass } from "../glass";

export interface ProgressProps extends ViewProps {
  /** 0–100 */
  value: number;
  className?: string;
  /** Fill bar classes. */
  indicatorClassName?: string;
  /** Unknown progress — shows a looping sliding bar instead of the fill. */
  indeterminate?: boolean;
  /** Liquid-glass lane — a taller frosted pill instead of the hairline. */
  glass?: boolean;
}

/** Determinate fill — timing.normal (250ms) on the ease.out decel token:
 * one fluid glide to the new value, not a state snap. */
const FILL_TIMING = { duration: timing.normal.duration, easing: Easing.bezier(...ease.out) };

/** Indeterminate sweep — ambient loop, intentionally outside the UI-motion
 * band (same reasoning as skeleton's shimmer cycle). Rides the ease.inOut
 * token so the bar accelerates in and decelerates out symmetrically. */
const SWEEP_CYCLE = { duration: 1200, easing: Easing.bezier(...ease.inOut) };

/** Progress — animated fill bar. Animates smoothly to new values. */
export const Progress = forwardRef<React.ElementRef<typeof View>, ProgressProps>(
  function Progress(
    { value, className, indicatorClassName, indeterminate, glass = false, onLayout, ...props },
    ref
  ) {
    const clamped = Math.max(0, Math.min(100, value));
    const reduceMotion = useReducedMotion();
    const width = useSharedValue(clamped);
    const [trackW, setTrackW] = React.useState(0);
    const slide = useSharedValue(0);

    React.useEffect(() => {
      // Reduced motion: jump straight to the value — no gliding travel.
      width.value = reduceMotion ? clamped : withTiming(clamped, FILL_TIMING);
    }, [clamped, width, reduceMotion]);

    React.useEffect(() => {
      if (indeterminate && trackW > 0) {
        if (reduceMotion) {
          // Reduced motion: static band, no looping travel (skeleton pattern).
          slide.value = 0;
          return;
        }
        const barW = trackW * 0.4;
        slide.value = -barW;
        slide.value = withRepeat(
          withTiming(trackW, SWEEP_CYCLE),
          -1,
          false
        );
      } else {
        slide.value = 0;
      }
    }, [indeterminate, trackW, slide, reduceMotion]);

    const fillStyle = useAnimatedStyle(() => ({ width: `${width.value}%` }));
    const slideStyle = useAnimatedStyle(() => ({
      width: trackW * 0.4,
      transform: [{ translateX: slide.value }],
    }));

    return (
      <View
        ref={ref}
        className={cn(glass ? "w-full overflow-hidden rounded-full" : "h-2 w-full overflow-hidden rounded-full bg-secondary", className)}
        style={glass ? { height: 14 } : undefined}
        onLayout={(e) => {
          setTrackW(e.nativeEvent.layout.width);
          onLayout?.(e);
        }}
        accessibilityRole="progressbar"
        accessibilityValue={indeterminate ? undefined : { min: 0, max: 100, now: clamped }}
        accessibilityState={indeterminate ? { busy: true } : undefined}
        // RNW drops the accessibilityValue/accessibilityState objects —
        // direct aria-* props keep web screen readers informed (switch pattern).
        aria-valuemin={0}
        aria-valuemax={100}
        aria-valuenow={indeterminate ? undefined : clamped}
        aria-busy={indeterminate ? true : undefined}
        {...props}
      >
        {glass ? (
          <Glass
            effect="clear"
            className="absolute inset-0 rounded-full"
            pointerEvents="none"
          />
        ) : null}
        {indeterminate ? (
          <Animated.View
            style={[{ height: "100%" }, slideStyle]}
            className={cn("rounded-full bg-primary", indicatorClassName)}
          />
        ) : (
          <Animated.View
            style={fillStyle}
            className={cn("h-full rounded-full bg-primary", indicatorClassName)}
          />
        )}
      </View>
    );
  }
);
Progress.displayName = "Progress";