import type { ProjectEntry } from "@t3tools/contracts";
import { SymbolView } from "expo-symbols";
import { memo, useCallback, useEffect, useMemo, useState } from "react";
import { ActivityIndicator, FlatList, Pressable, RefreshControl, View } from "react-native";

import { AppText as Text } from "../../components/AppText";
import { PierreEntryIcon } from "../../components/PierreEntryIcon";
import { cn } from "../../lib/cn";
import { useThemeColor } from "../../lib/useThemeColor";
import {
  buildFileTree,
  defaultExpandedTreePaths,
  flattenFileTree,
  type VisibleFileTreeNode,
} from "./fileTree";

function ancestorPaths(path: string): ReadonlyArray<string> {
  const parts = path.split("/").filter(Boolean);
  const ancestors: string[] = [];
  for (let index = 1; index < parts.length; index += 1) {
    ancestors.push(parts.slice(0, index).join("/"));
  }
  return ancestors;
}

const FileTreeRow = memo(function FileTreeRow(props: {
  readonly item: VisibleFileTreeNode;
  readonly selectedPath: string | null;
  readonly expanded: boolean;
  readonly iconColor: string;
  readonly onPressDirectory: (path: string) => void;
  readonly onPressFile: (path: string) => void;
}) {
  const { node, depth } = props.item;
  const selected = node.kind === "file" && node.path === props.selectedPath;

  return (
    <Pressable
      accessibilityRole="button"
      accessibilityLabel={node.path}
      onPress={() => {
        if (node.kind === "directory") {
          props.onPressDirectory(node.path);
          return;
        }
        props.onPressFile(node.path);
      }}
      className={cn(
        "mx-2 min-h-[42px] flex-row items-center gap-2 rounded-[12px] px-2 active:bg-subtle",
        selected && "bg-subtle-strong",
      )}
      style={{ paddingLeft: 8 + depth * 18 }}
    >
      {node.kind === "directory" ? (
        <SymbolView
          name={props.expanded ? "chevron.down" : "chevron.right"}
          size={12}
          tintColor={props.iconColor}
          type="monochrome"
        />
      ) : (
        <View className="w-3" />
      )}
      <PierreEntryIcon path={node.path} kind={node.kind} size={17} />
      <Text
        className={cn(
          "min-w-0 flex-1 text-sm leading-[19px]",
          selected ? "font-t3-bold text-foreground" : "font-t3-medium text-foreground-secondary",
        )}
        numberOfLines={1}
      >
        {node.name}
      </Text>
      {node.kind === "directory" ? (
        <Text className="text-2xs font-t3-medium text-foreground-tertiary">
          {node.children.length}
        </Text>
      ) : null}
    </Pressable>
  );
});

export function FileTreeBrowser(props: {
  readonly entries: ReadonlyArray<ProjectEntry>;
  readonly error: string | null;
  readonly isPending: boolean;
  readonly searchQuery: string;
  readonly selectedPath: string | null;
  readonly onRefresh: () => void;
  readonly onSelectFile: (path: string) => void;
}) {
  const [expandedPaths, setExpandedPaths] = useState<ReadonlySet<string>>(() => new Set());
  const iconColor = String(useThemeColor("--color-icon-muted"));

  const tree = useMemo(() => buildFileTree(props.entries), [props.entries]);
  const defaultExpanded = useMemo(() => defaultExpandedTreePaths(tree), [tree]);
  const visibleNodes = useMemo(
    () =>
      flattenFileTree({
        nodes: tree,
        expanded: expandedPaths,
        searchQuery: props.searchQuery,
      }),
    [expandedPaths, props.searchQuery, tree],
  );

  useEffect(() => {
    setExpandedPaths((current) => {
      if (current.size > 0 || defaultExpanded.size === 0) {
        return current;
      }
      return new Set(defaultExpanded);
    });
  }, [defaultExpanded]);

  useEffect(() => {
    if (!props.selectedPath) {
      return;
    }
    setExpandedPaths((current) => {
      const next = new Set(current);
      for (const ancestor of ancestorPaths(props.selectedPath ?? "")) {
        next.add(ancestor);
      }
      return next;
    });
  }, [props.selectedPath]);

  const toggleDirectory = useCallback((path: string) => {
    setExpandedPaths((current) => {
      const next = new Set(current);
      if (next.has(path)) {
        next.delete(path);
      } else {
        next.add(path);
      }
      return next;
    });
  }, []);

  return (
    <View className="flex-1 bg-sheet">
      {props.error && props.entries.length === 0 ? (
        <View className="px-4 py-5">
          <Text className="text-sm font-t3-bold text-foreground">Files unavailable</Text>
          <Text className="mt-1 text-xs leading-[18px] text-foreground-muted">{props.error}</Text>
        </View>
      ) : (
        <FlatList
          data={visibleNodes}
          keyExtractor={(item) => item.node.path}
          contentInsetAdjustmentBehavior="automatic"
          keyboardDismissMode="on-drag"
          keyboardShouldPersistTaps="handled"
          contentContainerStyle={{ paddingVertical: 8 }}
          refreshControl={
            <RefreshControl refreshing={props.isPending} onRefresh={props.onRefresh} />
          }
          renderItem={({ item }) => (
            <FileTreeRow
              item={item}
              selectedPath={props.selectedPath}
              expanded={expandedPaths.has(item.node.path)}
              iconColor={iconColor}
              onPressDirectory={toggleDirectory}
              onPressFile={props.onSelectFile}
            />
          )}
          ListEmptyComponent={
            <View className="px-4 py-5">
              {props.isPending ? (
                <ActivityIndicator size="small" />
              ) : (
                <>
                  <Text className="text-sm font-t3-bold text-foreground">No files found</Text>
                  <Text className="mt-1 text-xs leading-[18px] text-foreground-muted">
                    {props.searchQuery.trim().length > 0
                      ? "Try a different search."
                      : "The workspace file index is empty."}
                  </Text>
                </>
              )}
            </View>
          }
        />
      )}
    </View>
  );
}