import * as Haptics from "expo-haptics";
import { GlassView } from "expo-glass-effect";
import { SymbolView } from "../../components/AppSymbol";
import { useCallback, useEffect, useRef } from "react";
import { ActivityIndicator, Pressable, StyleSheet, useColorScheme, View } from "react-native";
import Animated, { FadeIn, FadeOut, LinearTransition } from "react-native-reanimated";
import { useSafeAreaInsets } from "react-native-safe-area-context";

import { AppText as Text } from "../../components/AppText";
import { APP_BAR_HEIGHT } from "../../lib/layoutMetrics";
import { themeColorWithAlpha } from "../../lib/mobileTheme";
import { tryOpenExternalUrl } from "../../lib/openExternalUrl";
import { useUniwindTheme } from "../../lib/useUniwindTheme";
import { NATIVE_LIQUID_GLASS_SUPPORTED } from "../../native/native-glass";
import type { GitActionProgress } from "../../state/use-vcs-action-state";

const OVERLAY_LAYOUT_TRANSITION = LinearTransition.duration(220);
const OVERLAY_TOP_GAP = 8;
const AnimatedGlassView = Animated.createAnimatedComponent(GlassView);

export function GitActionProgressOverlay(props: {
  readonly progress: GitActionProgress;
  readonly onDismiss: () => void;
}) {
  const { progress, onDismiss } = props;
  const insets = useSafeAreaInsets();
  const prevPhaseRef = useRef(progress.phase);

  useEffect(() => {
    const prev = prevPhaseRef.current;
    prevPhaseRef.current = progress.phase;

    if (prev === "running" && progress.phase === "success") {
      Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
    } else if (prev === "running" && progress.phase === "error") {
      Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
    }
  }, [progress.phase]);

  const handlePress = useCallback(() => {
    if (progress.prUrl) {
      void tryOpenExternalUrl(progress.prUrl, "pull-request");
      return;
    }
    if (progress.phase === "success" || progress.phase === "error") {
      onDismiss();
    }
  }, [onDismiss, progress.phase, progress.prUrl]);

  if (progress.phase === "idle") {
    return null;
  }

  return (
    <Animated.View
      entering={NATIVE_LIQUID_GLASS_SUPPORTED ? undefined : FadeIn.duration(200)}
      exiting={FadeOut.duration(150)}
      className="absolute inset-x-3 z-[100]"
      style={{ top: insets.top + APP_BAR_HEIGHT + OVERLAY_TOP_GAP }}
      pointerEvents="box-none"
    >
      <Pressable onPress={handlePress}>
        <OverlayContent progress={progress} />
      </Pressable>
    </Animated.View>
  );
}

function OverlayContent(props: { readonly progress: GitActionProgress }) {
  const { progress } = props;
  const colors = useUniwindTheme();
  const glassSurface = colors["--color-glass-surface"];
  const foreground = colors["--color-foreground"];
  const shadowColor = colors["--color-primary-shadow"];
  const isDarkMode = useColorScheme() === "dark";
  const glassTint = themeColorWithAlpha(String(glassSurface), isDarkMode ? 0.48 : 0.38);
  const glassBorder = themeColorWithAlpha(String(foreground), isDarkMode ? 0.18 : 0.12);
  const content = (
    <>
      <OverlayIcon phase={progress.phase} />

      <View className="flex-1 gap-0.5">
        {progress.label ? (
          <Text className="text-sm font-t3-bold text-foreground" numberOfLines={1}>
            {progress.label}
          </Text>
        ) : null}
        {progress.description ? (
          <Text className="text-2xs text-foreground-muted" numberOfLines={1}>
            {progress.description}
          </Text>
        ) : null}
      </View>

      {progress.prUrl ? (
        <SymbolView
          name="arrow.up.right"
          size={13}
          tintColorClassName={"accent-icon"}
          type="monochrome"
        />
      ) : null}
    </>
  );

  if (NATIVE_LIQUID_GLASS_SUPPORTED) {
    return (
      <Animated.View
        layout={OVERLAY_LAYOUT_TRANSITION}
        style={{
          borderCurve: "continuous",
          borderRadius: 26,
          elevation: 12,
          shadowColor,
          shadowOffset: { width: 0, height: 8 },
          shadowOpacity: isDarkMode ? 0.42 : 0.2,
          shadowRadius: 18,
        }}
      >
        <AnimatedGlassView
          colorScheme={isDarkMode ? "dark" : "light"}
          glassEffectStyle="regular"
          isInteractive
          layout={OVERLAY_LAYOUT_TRANSITION}
          tintColor={glassTint}
          style={{
            borderColor: glassBorder,
            borderCurve: "continuous",
            borderRadius: 26,
            borderWidth: StyleSheet.hairlineWidth,
            overflow: "hidden",
          }}
        >
          <Animated.View
            entering={FadeIn.delay(60).duration(140)}
            className="flex-row items-center gap-2.5 px-3.5 py-3"
          >
            {content}
          </Animated.View>
        </AnimatedGlassView>
      </Animated.View>
    );
  }

  const bgClass =
    progress.phase === "error" ? "border-danger-border bg-danger" : "bg-card border-border";

  return (
    <Animated.View
      layout={OVERLAY_LAYOUT_TRANSITION}
      className={`flex-row items-center gap-2.5 rounded-[26px] border border-continuous px-3.5 py-3 shadow-lg shadow-black/10 ${bgClass}`}
    >
      {content}
    </Animated.View>
  );
}

function OverlayIcon(props: { readonly phase: GitActionProgress["phase"] }) {
  switch (props.phase) {
    case "running":
      return <ActivityIndicator size="small" colorClassName={"accent-icon"} />;
    case "success":
      return (
        <View className="h-6 w-6 items-center justify-center rounded-full bg-green-500">
          <SymbolView name="checkmark" size={12} tintColor="white" type="monochrome" />
        </View>
      );
    case "error":
      return (
        <View className="h-6 w-6 items-center justify-center rounded-full bg-danger">
          <SymbolView
            name="exclamationmark.triangle"
            size={12}
            tintColorClassName="accent-danger-foreground"
            type="monochrome"
          />
        </View>
      );
    default:
      return null;
  }
}