import { useAtomValue } from "@effect/atom-react";
import { useId, useMemo, useState } from "react";
import { ActivityIndicator, Image, Pressable, View } from "react-native";
import { AsyncResult } from "effect/unstable/reactivity";

import { AppText as Text } from "../../components/AppText";
import { EmptyState } from "../../components/EmptyState";
import { workspaceFileImageAtom } from "./workspace-file-image-cache";
import { FilePreviewModal, type FilePreviewSource } from "../../components/FilePreviewModal";
import { PresentationSource } from "../../components/NativePresentation";

function ResolvedWorkspaceFileImagePreview(props: {
  readonly accessibilityLabel: string;
  readonly uri: string;
}) {
  const [loadError, setLoadError] = useState<string | null>(null);
  const [preview, setPreview] = useState<FilePreviewSource | null>(null);
  const sourceIdentifier = useId();
  const imageSource = useMemo(
    () => ({ uri: props.uri, cache: "force-cache" as const }),
    [props.uri],
  );

  return (
    <View className="relative flex-1 bg-subtle">
      <Pressable
        accessibilityRole="button"
        accessibilityLabel={`Open full-screen preview of ${props.accessibilityLabel}`}
        disabled={loadError !== null}
        className="flex-1 p-4 active:bg-subtle-strong"
        onPress={() =>
          setPreview({
            kind: "image",
            uri: props.uri,
            name: props.accessibilityLabel,
            sourceIdentifier,
          })
        }
      >
        <PresentationSource identifier={sourceIdentifier} style={{ flex: 1 }}>
          <Image
            accessible={false}
            source={imageSource}
            className="h-full w-full"
            resizeMode="contain"
            onLoadStart={() => setLoadError(null)}
            onError={(event) => {
              setLoadError(event.nativeEvent.error || "The image could not be rendered.");
            }}
          />
        </PresentationSource>
      </Pressable>

      {loadError !== null ? (
        <View className="absolute inset-0 items-center justify-center bg-card px-6">
          <EmptyState title="Image unavailable" detail={loadError} />
        </View>
      ) : null}

      <FilePreviewModal source={preview} onRequestClose={() => setPreview(null)} />
    </View>
  );
}

function CachedWorkspaceFileImagePreview(props: {
  readonly accessibilityLabel: string;
  readonly uri: string;
}) {
  const imageAtom = useMemo(() => workspaceFileImageAtom(props.uri), [props.uri]);
  const imageResult = useAtomValue(imageAtom);

  if (AsyncResult.isFailure(imageResult)) {
    return (
      <View className="flex-1 items-center justify-center bg-card px-6">
        <EmptyState
          title="Image unavailable"
          detail="The image could not be loaded into the local cache."
        />
      </View>
    );
  }

  if (!AsyncResult.isSuccess(imageResult)) {
    return (
      <View className="flex-1 items-center justify-center gap-3 bg-card px-6">
        <ActivityIndicator />
        <Text className="text-center text-sm text-foreground-muted">Loading image...</Text>
      </View>
    );
  }

  return (
    <ResolvedWorkspaceFileImagePreview
      accessibilityLabel={props.accessibilityLabel}
      uri={imageResult.value}
    />
  );
}

export function WorkspaceFileImagePreview(props: {
  readonly accessibilityLabel: string;
  readonly uri: string | null;
}) {
  if (props.uri === null) {
    return (
      <View className="flex-1 items-center justify-center gap-3 bg-card px-6">
        <ActivityIndicator />
        <Text className="text-center text-sm text-foreground-muted">
          Preparing image preview...
        </Text>
      </View>
    );
  }

  return (
    <CachedWorkspaceFileImagePreview
      accessibilityLabel={props.accessibilityLabel}
      uri={props.uri}
    />
  );
}