import { TextInputWrapper } from "expo-paste-input";
import { AppTextInput as TextInput } from "../../components/AppText";
import { useNativePaste } from "../../lib/useNativePaste";
import { convertPastedImagesToAttachments } from "../../lib/composerImages";
import {
  PROVIDER_SEND_TURN_MAX_ATTACHMENTS,
  type ApprovalRequestId,
  type UserInputQuestion,
} from "@t3tools/contracts";
import { useAtomValue } from "@effect/atom-react";
import { Alert, View } from "react-native";
import { useEffect, useRef } from "react";
import { ComposerAttachmentButton } from "../../components/ComposerAttachmentButton";
import { ComposerAttachmentStrip } from "../../components/ComposerAttachmentStrip";
import { pickComposerFiles, pickComposerMedia } from "../../lib/composerImages";
import { useThreadSelection } from "../../state/use-thread-selection";
import { useServerConfigs } from "../../state/entities";
import { appAtomRegistry } from "../../state/atom-registry";
import {
  appendComposerDraftAttachments,
  composerDraftsAtom,
  removeComposerDraftAttachment,
  releaseUnusedComposerAttachmentFiles,
} from "../../state/use-composer-drafts";
import {
  changeQuestionAttachmentPreparation,
  questionAttachmentDraftKey,
  questionAttachmentPreparationAtom,
} from "../../state/question-attachments";

export function QuestionAttachments(props: {
  requestId: ApprovalRequestId;
  question: UserInputQuestion;
  questions: ReadonlyArray<UserInputQuestion>;
  disabled: boolean;
  value: string;
  onChangeText: (value: string) => void;
  onInputFocusChange?: ((focused: boolean) => void) | undefined;
}) {
  const { selectedThread } = useThreadSelection();
  const configs = useServerConfigs();
  const drafts = useAtomValue(composerDraftsAtom);
  const scopeKey = JSON.stringify([
    selectedThread?.environmentId,
    selectedThread?.id,
    props.requestId,
    props.question.id,
  ]);
  const pickerScope = useRef<{ key: string; active: boolean } | null>(null);
  useEffect(() => {
    const scope = { key: scopeKey, active: true };
    pickerScope.current = scope;
    return () => {
      scope.active = false;
    };
  }, [scopeKey]);
  const append = (
    key: string,
    attachments: Parameters<typeof appendComposerDraftAttachments>[1],
  ) => {
    if (!selectedThread) return 0;
    const current = appAtomRegistry.get(composerDraftsAtom);
    const otherCount = props.questions.reduce((count, question) => {
      const target = questionAttachmentDraftKey(
        selectedThread.environmentId,
        selectedThread.id,
        props.requestId,
        question.id,
      );
      return target === key ? count : count + (current[target]?.attachments.length ?? 0);
    }, 0);
    return appendComposerDraftAttachments(key, attachments, {
      maxAttachments: Math.max(0, PROVIDER_SEND_TURN_MAX_ATTACHMENTS - otherCount),
    });
  };
  const paste = useNativePaste((uris) => {
    const scope = pickerScope.current;
    if (
      !selectedThread ||
      props.disabled ||
      !configs.get(selectedThread.environmentId)?.environment.capabilities.questionAttachments
    )
      return;
    const key = questionAttachmentDraftKey(
      selectedThread.environmentId,
      selectedThread.id,
      props.requestId,
      props.question.id,
    );
    changeQuestionAttachmentPreparation(key, 1);
    void convertPastedImagesToAttachments({
      uris,
      existingCount: appAtomRegistry.get(composerDraftsAtom)[key]?.attachments.length ?? 0,
    })
      .then(async (images) => {
        if (
          scope?.active &&
          (appAtomRegistry.get(questionAttachmentPreparationAtom)[key] ?? 0) > 0
        ) {
          if (append(key, images) > 0)
            Alert.alert("Could not paste image", "Too many attachments.");
        } else await releaseUnusedComposerAttachmentFiles(images);
      })
      .catch((error) =>
        Alert.alert("Could not paste image", error instanceof Error ? error.message : "Try again."),
      )
      .finally(() => changeQuestionAttachmentPreparation(key, -1));
  });
  if (!selectedThread || props.question.allowCustomAnswer === false) return null;
  const { environmentId, id: threadId } = selectedThread;
  const capabilities = configs.get(environmentId)?.environment.capabilities;
  const canAttach = capabilities?.questionAttachments === true;
  const key = questionAttachmentDraftKey(
    environmentId,
    threadId,
    props.requestId,
    props.question.id,
  );
  const attachments = drafts[key]?.attachments ?? [];
  const pick = async (kind: "media" | "files") => {
    const scope = pickerScope.current;
    changeQuestionAttachmentPreparation(key, 1);
    try {
      const existingCount = appAtomRegistry.get(composerDraftsAtom)[key]?.attachments.length ?? 0;
      const result =
        kind === "files"
          ? await pickComposerFiles({
              existingCount,
              maxBytes: capabilities?.fileAttachments?.maxUploadBytes,
            })
          : await pickComposerMedia({
              existingCount,
              maxVideoBytes: capabilities?.fileAttachments?.maxUploadBytes,
            });
      const picked = "files" in result ? result.files : result.attachments;
      // Resolution on another client clears the reservation while the picker is open.
      if (
        !scope?.active ||
        (appAtomRegistry.get(questionAttachmentPreparationAtom)[key] ?? 0) === 0
      ) {
        await releaseUnusedComposerAttachmentFiles(picked);
        return;
      }
      const rejected = append(key, picked);
      if (result.error || rejected > 0)
        Alert.alert("Could not attach file", result.error ?? "Too many attachments.");
    } catch (error) {
      Alert.alert("Could not attach file", error instanceof Error ? error.message : "Try again.");
    } finally {
      changeQuestionAttachmentPreparation(key, -1);
    }
  };
  return (
    <View className="gap-2">
      {canAttach ? (
        <ComposerAttachmentButton
          disabled={props.disabled}
          supportsFiles={Boolean(capabilities?.fileAttachments)}
          onPickMedia={() => pick("media")}
          onPickFiles={() => pick("files")}
        />
      ) : null}
      <ComposerAttachmentStrip
        environmentId={environmentId}
        attachments={attachments}
        onRemove={(id) => {
          if (!props.disabled) removeComposerDraftAttachment(key, id);
        }}
      />
      <TextInputWrapper onPaste={paste}>
        <TextInput
          value={props.value}
          editable={!props.disabled}
          onChangeText={props.onChangeText}
          onFocus={() => props.onInputFocusChange?.(true)}
          onBlur={() => props.onInputFocusChange?.(false)}
          placeholder="Or type a custom answer"
          className="min-h-[54px] rounded-2xl border border-input-border bg-input px-3.5 py-3 font-sans text-base text-foreground"
        />
      </TextInputWrapper>
    </View>
  );
}