import { SymbolView } from "expo-symbols";
import { useCallback, useEffect, useMemo, useState } from "react";
import {
  type ColorValue,
  Modal,
  Pressable,
  ScrollView,
  useWindowDimensions,
  View,
} from "react-native";
import * as Arr from "effect/Array";
import * as Order from "effect/Order";
import { Gesture, GestureDetector } from "react-native-gesture-handler";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import Animated, {
  runOnJS,
  useAnimatedStyle,
  useSharedValue,
  withTiming,
} from "react-native-reanimated";
import { useThemeColor } from "../../lib/useThemeColor";

import { AppText as Text } from "../../components/AppText";
import { StatusPill } from "../../components/StatusPill";
import { useProjects, useThreadShells } from "../../state/entities";
import { groupProjectsByRepository } from "../../lib/repositoryGroups";
import { scopedThreadKey } from "../../lib/scopedEntities";
import { relativeTime } from "../../lib/time";
import { threadStatusTone } from "./threadPresentation";
import { EnvironmentThreadShell } from "@t3tools/client-runtime/state/shell";

const threadActivityOrder = Order.mapInput(
  Order.Struct({
    activityAt: Order.flip(Order.Number),
    title: Order.String,
  }),
  (thread: EnvironmentThreadShell) => ({
    activityAt: new Date(thread.updatedAt ?? thread.createdAt).getTime(),
    title: thread.title,
  }),
);

export function ThreadNavigationDrawer(props: {
  readonly visible: boolean;
  readonly selectedThreadKey: string | null;
  readonly onClose: () => void;
  readonly onSelectThread: (thread: EnvironmentThreadShell) => void;
  readonly onStartNewTask: () => void;
}) {
  const insets = useSafeAreaInsets();
  const { width } = useWindowDimensions();
  const drawerWidth = Math.min(width * 0.84, 360);
  const [mounted, setMounted] = useState(props.visible);
  const translateX = useSharedValue(-drawerWidth);
  const overlayOpacity = useSharedValue(0);

  const backdropColor = useThemeColor("--color-backdrop");
  const drawerBg = useThemeColor("--color-drawer");
  const drawerShadow = useThemeColor("--color-drawer-shadow");
  const primaryForeground = useThemeColor("--color-primary-foreground");
  const borderSubtleColor = useThemeColor("--color-border-subtle");

  useEffect(() => {
    if (props.visible) {
      setMounted(true);
      translateX.value = withTiming(0, { duration: 240 });
      overlayOpacity.value = withTiming(1, { duration: 220 });
      return;
    }

    overlayOpacity.value = withTiming(0, { duration: 180 });
    translateX.value = withTiming(-drawerWidth, { duration: 220 }, (finished) => {
      if (finished) {
        runOnJS(setMounted)(false);
      }
    });
  }, [drawerWidth, overlayOpacity, props.visible, translateX]);

  const closeDrawer = useCallback(() => {
    props.onClose();
  }, [props]);

  const panGesture = useMemo(
    () =>
      Gesture.Pan()
        .activeOffsetX([-12, 12])
        .failOffsetY([-24, 24])
        .onUpdate((event) => {
          translateX.value = Math.min(0, event.translationX);
        })
        .onEnd((event) => {
          const shouldClose = event.translationX < -drawerWidth * 0.2 || event.velocityX < -500;
          if (shouldClose) {
            runOnJS(closeDrawer)();
            return;
          }

          translateX.value = withTiming(0, { duration: 180 });
        }),
    [closeDrawer, drawerWidth, translateX],
  );

  const drawerStyle = useAnimatedStyle(() => ({
    transform: [{ translateX: translateX.value }],
  }));

  const backdropStyle = useAnimatedStyle(() => ({
    opacity: overlayOpacity.value,
  }));

  if (!mounted) {
    return null;
  }

  return (
    <Modal transparent visible={mounted} onRequestClose={props.onClose} statusBarTranslucent>
      <View style={{ flex: 1 }}>
        <Animated.View
          pointerEvents="none"
          style={[
            {
              position: "absolute",
              left: 0,
              right: 0,
              top: 0,
              bottom: 0,
              backgroundColor: backdropColor,
            },
            backdropStyle,
          ]}
        />
        <Pressable
          style={{ position: "absolute", left: 0, right: 0, top: 0, bottom: 0 }}
          onPress={props.onClose}
        />

        <GestureDetector gesture={panGesture}>
          <Animated.View
            style={[
              {
                position: "absolute",
                left: 0,
                top: 0,
                bottom: 0,
                width: drawerWidth,
                backgroundColor: drawerBg,
                paddingTop: insets.top + 10,
                paddingBottom: Math.max(insets.bottom, 18),
                boxShadow: `20px 0 36px ${String(drawerShadow)}`,
              },
              drawerStyle,
            ]}
          >
            <View className="flex-row items-center justify-between px-4 pb-5">
              <Text className="text-2xl font-t3-bold">Threads</Text>
              <Pressable
                onPress={() => {
                  props.onClose();
                  props.onStartNewTask();
                }}
                className="h-11 w-11 items-center justify-center rounded-full bg-primary"
              >
                <SymbolView
                  name="square.and.pencil"
                  size={17}
                  tintColor={primaryForeground}
                  type="monochrome"
                />
              </Pressable>
            </View>

            <ThreadNavigationDrawerContent
              bottomInset={Math.max(insets.bottom, 18)}
              borderSubtleColor={borderSubtleColor}
              selectedThreadKey={props.selectedThreadKey}
              onClose={props.onClose}
              onSelectThread={props.onSelectThread}
            />
          </Animated.View>
        </GestureDetector>
      </View>
    </Modal>
  );
}

function ThreadNavigationDrawerContent(props: {
  readonly bottomInset: number;
  readonly borderSubtleColor: ColorValue;
  readonly selectedThreadKey: string | null;
  readonly onClose: () => void;
  readonly onSelectThread: (thread: EnvironmentThreadShell) => void;
}) {
  const projects = useProjects();
  const threads = useThreadShells();
  const repositoryGroups = useMemo(
    () => groupProjectsByRepository({ projects, threads }),
    [projects, threads],
  );
  const groupedThreads = useMemo(
    () =>
      repositoryGroups.map((group) => {
        const threads: EnvironmentThreadShell[] = [];
        for (const projectGroup of group.projects) {
          threads.push(...projectGroup.threads);
        }
        return {
          key: group.key,
          title: group.projects[0]?.project.title ?? group.title,
          threads: Arr.sort(threads, threadActivityOrder),
        };
      }),
    [repositoryGroups],
  );

  return (
    <ScrollView
      showsVerticalScrollIndicator={false}
      contentInset={{ bottom: props.bottomInset + 12 }}
      contentContainerStyle={{
        gap: 20,
        paddingHorizontal: 14,
      }}
    >
      {groupedThreads.map((group) => (
        <View key={group.key} className="gap-3">
          <Text
            className="px-1 text-base font-t3-bold text-foreground-muted"
            style={{ letterSpacing: -0.2 }}
          >
            {group.title}
          </Text>

          <View className="overflow-hidden rounded-[22px] bg-card">
            {group.threads.length === 0 ? (
              <View className="px-4 py-4">
                <Text className="text-sm font-medium text-foreground-tertiary">No threads yet</Text>
              </View>
            ) : (
              group.threads.map((thread, index) => {
                const threadKey = scopedThreadKey(thread.environmentId, thread.id);
                const selected = props.selectedThreadKey === threadKey;

                return (
                  <Pressable
                    key={threadKey}
                    onPress={() => {
                      props.onSelectThread(thread);
                      props.onClose();
                    }}
                    style={{
                      paddingHorizontal: 16,
                      paddingVertical: 15,
                      borderTopWidth: index === 0 ? 0 : 1,
                      borderTopColor: props.borderSubtleColor,
                      backgroundColor: selected ? undefined : "transparent",
                    }}
                    className={selected ? "bg-subtle" : undefined}
                  >
                    <View className="flex-row items-start justify-between gap-3">
                      <View className="flex-1 gap-1">
                        <Text className="text-base font-t3-bold" numberOfLines={1}>
                          {thread.title}
                        </Text>
                        <Text
                          className="text-sm font-medium text-foreground-muted"
                          numberOfLines={1}
                        >
                          {relativeTime(thread.updatedAt ?? thread.createdAt)}
                        </Text>
                      </View>
                      <StatusPill {...threadStatusTone(thread)} />
                    </View>
                  </Pressable>
                );
              })
            )}
          </View>
        </View>
      ))}
    </ScrollView>
  );
}