import * as Haptics from "expo-haptics";
import { SymbolView } from "expo-symbols";
import { deriveThreadQueueWorkflowState } from "@t3tools/client-runtime/state/thread-workflows";
import type { EnvironmentId, RunId, ThreadId } from "@t3tools/contracts";
import { useMemo, useState } from "react";
import { Pressable, ScrollView, View } from "react-native";

import { AppText as Text } from "../../components/AppText";
import { useThemeColor } from "../../lib/useThemeColor";
import { threadEnvironment } from "../../state/threads";
import { useAtomCommand } from "../../state/use-atom-command";
import { useThreadProjection } from "../../state/use-thread-detail";

export function ThreadQueueControl(props: {
  readonly environmentId: EnvironmentId;
  readonly threadId: ThreadId;
}) {
  const scoped = useThreadProjection(props);
  const workflow = useMemo(
    () => (scoped ? deriveThreadQueueWorkflowState(scoped.projection) : null),
    [scoped],
  );
  const reorder = useAtomCommand(threadEnvironment.reorderQueuedRun, "reorder queued message");
  const promote = useAtomCommand(threadEnvironment.promoteQueuedRun, "promote queued message");
  const [busyRunId, setBusyRunId] = useState<RunId | null>(null);
  const iconColor = useThemeColor("--color-icon-subtle");

  if (!workflow || workflow.queuedRuns.length === 0) return null;

  const move = async (runId: RunId, beforeRunId: RunId | null) => {
    setBusyRunId(runId);
    void Haptics.selectionAsync();
    await reorder({
      environmentId: props.environmentId,
      input: { threadId: props.threadId, runId, beforeRunId },
    });
    setBusyRunId(null);
  };

  const steer = async (queuedRunId: RunId) => {
    if (!workflow.activeRun || !workflow.canPromoteToSteer) return;
    setBusyRunId(queuedRunId);
    void Haptics.selectionAsync();
    await promote({
      environmentId: props.environmentId,
      input: {
        threadId: props.threadId,
        queuedRunId,
        targetRunId: workflow.activeRun.id,
      },
    });
    setBusyRunId(null);
  };

  return (
    <View className="mx-4 mb-3 overflow-hidden rounded-2xl border border-neutral-300/60 bg-card dark:border-white/[0.1]">
      <View className="flex-row items-center gap-2 border-b border-neutral-300/50 px-3 py-2 dark:border-white/[0.08]">
        <SymbolView name="list.number" size={13} tintColor={iconColor} type="monochrome" />
        <Text className="font-t3-medium text-xs text-foreground">Queue</Text>
        <Text className="ml-auto text-2xs tabular-nums text-foreground-muted">
          {workflow.queuedRuns.length}
        </Text>
      </View>
      <ScrollView style={{ maxHeight: 156 }} contentContainerStyle={{ paddingVertical: 4 }}>
        {workflow.queuedRuns.map(({ run, text }, index) => (
          <View key={run.id} className="min-h-11 flex-row items-center gap-1.5 px-2">
            <Text className="w-5 text-right text-3xs tabular-nums text-foreground-muted">
              {index + 1}
            </Text>
            <Text className="min-w-0 flex-1 text-xs text-foreground" numberOfLines={1}>
              {text}
            </Text>
            <Pressable
              accessibilityRole="button"
              accessibilityLabel="Move queued message up"
              disabled={busyRunId !== null || !workflow.canReorder || index === 0}
              onPress={() => void move(run.id, workflow.queuedRuns[index - 1]?.run.id ?? null)}
              className="h-9 w-9 items-center justify-center disabled:opacity-30"
            >
              <SymbolView name="arrow.up" size={13} tintColor={iconColor} type="monochrome" />
            </Pressable>
            <Pressable
              accessibilityRole="button"
              accessibilityLabel="Move queued message down"
              disabled={
                busyRunId !== null ||
                !workflow.canReorder ||
                index === workflow.queuedRuns.length - 1
              }
              onPress={() => void move(run.id, workflow.queuedRuns[index + 2]?.run.id ?? null)}
              className="h-9 w-9 items-center justify-center disabled:opacity-30"
            >
              <SymbolView name="arrow.down" size={13} tintColor={iconColor} type="monochrome" />
            </Pressable>
            <Pressable
              accessibilityRole="button"
              accessibilityLabel="Promote queued message to steer"
              disabled={busyRunId !== null || !workflow.canPromoteToSteer}
              onPress={() => void steer(run.id)}
              className="min-h-8 flex-row items-center gap-1 rounded-lg border border-neutral-300/60 px-2 disabled:opacity-30 dark:border-white/[0.1]"
            >
              <SymbolView
                name="arrow.turn.left.up"
                size={12}
                tintColor={iconColor}
                type="monochrome"
              />
              <Text className="font-t3-medium text-2xs text-foreground">Steer</Text>
            </Pressable>
          </View>
        ))}
      </ScrollView>
    </View>
  );
}