import { useIsFocused } from "@react-navigation/native";
import { videoMimeType } from "@t3tools/shared/video";
import { useEffect, useRef, useState } from "react";
import { ActivityIndicator, Keyboard, Modal, Pressable, View } from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";

import { loadLocalAttachmentPreview } from "../lib/localAttachmentPreview";
import { useMediaActions, type MediaActionsSource } from "../lib/mediaActions";
import {
  mediaVideoPreviewUri,
  mediaVideoThumbnailKey,
  type LocalVideoPreviewSource,
  type MediaVideoPreviewSource,
  type VideoPreviewSource,
} from "../lib/videoPreviewSource";
import { useAssetUrlState, useRefreshAssetUrl } from "../state/assets";
import { usePreparedConnection } from "../state/session";
import { AppText } from "./AppText";
import { SymbolView } from "./AppSymbol";
import { MediaActionsMenu } from "./MediaActionsMenu";
import { MediaSourceCaption } from "./MediaSourceCaption";
import { MediaVideoPlayer } from "./MediaVideoPlayer";

export type { VideoPreviewSource } from "../lib/videoPreviewSource";

interface PlaybackState {
  readonly uri: string | null;
  readonly resolvePlaybackUri?: () => Promise<string | null>;
  readonly unavailable: boolean;
  readonly error: string | null;
  readonly actionsSource: MediaActionsSource | undefined;
}

function useMediaPlayback(source: MediaVideoPreviewSource): PlaybackState {
  const environmentId = "environmentId" in source ? source.environmentId : null;
  const resource = "resource" in source ? source.resource : null;
  const connection = usePreparedConnection(environmentId);
  const asset = useAssetUrlState(environmentId, resource);
  const refreshAssetUrl = useRefreshAssetUrl(environmentId, resource);
  const uri = mediaVideoPreviewUri(source, asset._tag === "Success" ? asset.url : null);
  return {
    uri,
    ...(resource !== null
      ? { resolvePlaybackUri: async () => mediaVideoPreviewUri(source, await refreshAssetUrl()) }
      : {}),
    unavailable:
      uri === null &&
      environmentId !== null &&
      (connection._tag === "None" || asset._tag === "Failure"),
    error: null,
    actionsSource: source.actionsSource,
  };
}

function useLocalPlayback(source: LocalVideoPreviewSource): PlaybackState {
  const { attachment } = source;
  const [uri, setUri] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);
  // Only a different file needs a new lease; a metadata update on the same
  // draft must not dispose the file Android is still playing.
  const attachmentRef = useRef(attachment);
  attachmentRef.current = attachment;
  const { id: attachmentId, fileUri } = attachment;
  useEffect(() => {
    setUri(null);
    setError(null);
    const controller = new AbortController();
    const loading = loadLocalAttachmentPreview(attachmentRef.current, controller.signal);
    void loading.then(
      (file) => {
        if (file === null) return;
        if (controller.signal.aborted) file.dispose();
        else setUri(file.uri);
      },
      (cause: unknown) => {
        if (!controller.signal.aborted) {
          setError(cause instanceof Error ? cause.message : "Could not load this video.");
        }
      },
    );
    return () => {
      controller.abort();
      void loading.then(
        (file) => file?.dispose(),
        () => undefined,
      );
    };
  }, [attachmentId, fileUri]);
  const mimeType = videoMimeType(attachment) ?? attachment.mimeType;
  return {
    uri,
    unavailable: error !== null,
    error,
    actionsSource: uri === null ? undefined : { name: attachment.name, mimeType, uri },
  };
}

function MediaPreviewModal(props: {
  readonly source: MediaVideoPreviewSource;
  readonly onRequestClose: () => void;
}) {
  return (
    <OpenVideoPreviewModal
      name={props.source.name}
      thumbnailKey={mediaVideoThumbnailKey(props.source)}
      playback={useMediaPlayback(props.source)}
      onRequestClose={props.onRequestClose}
    />
  );
}

function LocalPreviewModal(props: {
  readonly source: LocalVideoPreviewSource;
  readonly onRequestClose: () => void;
}) {
  return (
    <OpenVideoPreviewModal
      name={props.source.attachment.name}
      thumbnailKey={`local:${props.source.attachment.id}`}
      playback={useLocalPlayback(props.source)}
      onRequestClose={props.onRequestClose}
    />
  );
}

function OpenVideoPreviewModal(props: {
  readonly name: string;
  readonly thumbnailKey: string;
  readonly playback: PlaybackState;
  readonly onRequestClose: () => void;
}) {
  const { playback } = props;
  const insets = useSafeAreaInsets();
  const mediaActions = useMediaActions(playback.actionsSource, props.onRequestClose);

  useEffect(() => Keyboard.dismiss(), []);
  return (
    <Modal
      visible
      animationType="fade"
      presentationStyle="fullScreen"
      onRequestClose={props.onRequestClose}
      statusBarTranslucent
      navigationBarTranslucent
    >
      <View
        className="flex-1 bg-black"
        style={{ paddingTop: insets.top, paddingBottom: insets.bottom }}
      >
        <View className="min-h-14 flex-row items-center gap-3 pl-4 pr-2">
          <AppText className="flex-1 font-t3-medium text-base text-white" numberOfLines={2}>
            {props.name}
          </AppText>
          <MediaActionsMenu media={mediaActions} inModal />
          <Pressable
            accessibilityRole="button"
            accessibilityLabel="Close video"
            onPress={props.onRequestClose}
            className="size-12 items-center justify-center"
          >
            <SymbolView name="xmark" size={20} tintColor="#ffffff" type="monochrome" />
          </Pressable>
        </View>
        <MediaSourceCaption source={mediaActions.title} />
        {playback.uri === null && !playback.unavailable ? (
          <View className="flex-1 items-center justify-center gap-3 px-6">
            <ActivityIndicator color="#ffffff" />
            <AppText className="text-sm text-white/80">Loading video...</AppText>
          </View>
        ) : (
          <MediaVideoPlayer
            uri={playback.uri}
            resolvePlaybackUri={playback.resolvePlaybackUri}
            name={props.name}
            thumbnailKey={props.thumbnailKey}
            unavailable={playback.unavailable}
            paused={mediaActions.sharing}
            expanded
            autoPlay
          />
        )}
        {playback.error ? (
          <AppText accessibilityRole="alert" className="px-4 pb-3 text-sm text-white/80">
            {playback.error}
          </AppText>
        ) : null}
        <Pressable
          accessibilityRole="button"
          accessibilityLabel="Save or share video"
          disabled={playback.uri === null || mediaActions.sharing}
          onPress={mediaActions.share}
          className="mx-4 my-3 min-h-12 items-center justify-center rounded-xl bg-white/15 px-4"
        >
          <AppText className="font-t3-medium text-base text-white">
            {mediaActions.sharing ? "Opening share sheet..." : "Save or share video"}
          </AppText>
        </Pressable>
      </View>
    </Modal>
  );
}

export function VideoPreviewModal(props: {
  readonly source: VideoPreviewSource | null;
  readonly onRequestClose: () => void;
}) {
  const isFocused = useIsFocused();
  const hasSource = props.source !== null;
  useEffect(() => {
    if (!isFocused && hasSource) props.onRequestClose();
  }, [isFocused, hasSource, props.onRequestClose]);
  const { source } = props;
  if (source === null || !isFocused) return null;
  return source.type === "local" ? (
    <LocalPreviewModal
      key={`local:${source.attachment.id}:${source.attachment.fileUri}`}
      source={source}
      onRequestClose={props.onRequestClose}
    />
  ) : (
    <MediaPreviewModal
      key={mediaVideoThumbnailKey(source)}
      source={source}
      onRequestClose={props.onRequestClose}
    />
  );
}