import { useEffect, useState, useRef } from 'react';
import { View, ScrollView, KeyboardAvoidingView, Platform, Pressable, Text, TextInput, Keyboard } from 'react-native';
import { router } from 'expo-router';
import { activateKeepAwakeAsync, deactivateKeepAwake } from 'expo-keep-awake';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

// Simple unique ID generator
let messageIdCounter = 0;
function generateMessageId(): string {
  return `msg_${Date.now()}_${messageIdCounter++}`;
}
import { useWebSocket } from '@/hooks/use-websocket';
import { useAudioRecorder } from '@/hooks/use-audio-recorder';
import { useAudioPlayer } from '@/hooks/use-audio-player';
import { useSettings } from '@/hooks/use-settings';
import { ConnectionStatus } from '@/components/connection-status';
import { UserMessage, AssistantMessage, ActivityLog, ToolCall } from '@/components/message';
import { ArtifactDrawer, type Artifact } from '@/components/artifact-drawer';
import { ActiveProcesses } from '@/components/active-processes';
import { AgentStreamView } from '@/components/agent-stream-view';
import { ConversationSelector } from '@/components/conversation-selector';
import { MaterialIcons } from '@expo/vector-icons';
import type {
  ActivityLogPayload,
  SessionInboundMessage,
  WSInboundMessage,
} from '@voice-assistant/server/messages';
import type { AgentStatus } from '@voice-assistant/server/acp/types';
import type { SessionNotification } from '@agentclientprotocol/sdk';

type MessageEntry =
  | {
      type: 'user';
      id: string;
      timestamp: number;
      message: string;
    }
  | {
      type: 'assistant';
      id: string;
      timestamp: number;
      message: string;
    }
  | {
      type: 'activity';
      id: string;
      timestamp: number;
      activityType: 'system' | 'info' | 'success' | 'error';
      message: string;
      metadata?: Record<string, unknown>;
    }
  | {
      type: 'tool_call';
      id: string;
      timestamp: number;
      toolName: string;
      args: any;
      result?: any;
      error?: any;
      status: 'executing' | 'completed' | 'failed';
    };

type ViewMode = 'orchestrator' | 'agent';

interface Agent {
  id: string;
  status: AgentStatus;
  createdAt: Date;
  type: 'claude';
  sessionId?: string;
  error?: string;
  currentModeId?: string;
  availableModes?: Array<{ id: string; name: string; description?: string | null }>;
}

interface Command {
  id: string;
  name: string;
  workingDirectory: string;
  currentCommand: string;
  isDead: boolean;
  exitCode: number | null;
}

interface AgentUpdate {
  timestamp: Date;
  notification: SessionNotification;
}

export default function VoiceAssistantScreen() {
  const { settings, isLoading: settingsLoading } = useSettings();
  const [conversationId, setConversationId] = useState<string | null>(null);
  const ws = useWebSocket(settings.serverUrl, conversationId);
  const audioRecorder = useAudioRecorder();
  const audioPlayer = useAudioPlayer({ useSpeaker: settings.useSpeaker });
  const insets = useSafeAreaInsets();

  const [messages, setMessages] = useState<MessageEntry[]>([]);
  const [currentAssistantMessage, setCurrentAssistantMessage] = useState('');
  const [isProcessingAudio, setIsProcessingAudio] = useState(false);
  const [isPlayingAudio, setIsPlayingAudio] = useState(false);
  const [isRecording, setIsRecording] = useState(false);
  const [userInput, setUserInput] = useState('');

  // Artifact state
  const [artifacts, setArtifacts] = useState<Map<string, Artifact>>(new Map());
  const [currentArtifact, setCurrentArtifact] = useState<Artifact | null>(null);

  // Multi-view navigation state
  const [viewMode, setViewMode] = useState<ViewMode>('orchestrator');
  const [activeAgentId, setActiveAgentId] = useState<string | null>(null);

  // Agent and command state
  const [agents, setAgents] = useState<Map<string, Agent>>(new Map());
  const [commands, setCommands] = useState<Map<string, Command>>(new Map());
  const [agentUpdates, setAgentUpdates] = useState<Map<string, AgentUpdate[]>>(new Map());

  const scrollViewRef = useRef<ScrollView>(null);

  // Keep screen awake if setting is enabled
  useEffect(() => {
    if (settings.keepScreenOn) {
      activateKeepAwakeAsync('voice-assistant');
    } else {
      deactivateKeepAwake('voice-assistant');
    }
  }, [settings.keepScreenOn]);

  // Auto-scroll to bottom when messages update
  useEffect(() => {
    scrollViewRef.current?.scrollToEnd({ animated: true });
  }, [messages, currentAssistantMessage]);

  // WebSocket message handlers
  useEffect(() => {
    // Session state handler - initial agents/commands
    const unsubSessionState = ws.on('session_state', (message) => {
      if (message.type !== 'session_state') return;
      const { agents: agentsList, commands: commandsList } = message.payload;

      console.log('[App] Session state received:', agentsList.length, 'agents,', commandsList.length, 'commands');

      // Update agents
      setAgents(new Map(agentsList.map((a) => [a.id, a as Agent])));

      // Update commands
      setCommands(new Map(commandsList.map((c) => [c.id, c as Command])));
    });

    // Agent created handler
    const unsubAgentCreated = ws.on('agent_created', (message) => {
      if (message.type !== 'agent_created') return;
      const { agentId, status, type, currentModeId, availableModes } = message.payload;

      console.log('[App] Agent created:', agentId);

      const agent: Agent = {
        id: agentId,
        status: status as AgentStatus,
        type,
        createdAt: new Date(),
        currentModeId,
        availableModes,
      };

      setAgents((prev) => new Map(prev).set(agentId, agent));
      setAgentUpdates((prev) => new Map(prev).set(agentId, []));
    });

    // Agent update handler
    const unsubAgentUpdate = ws.on('agent_update', (message) => {
      if (message.type !== 'agent_update') return;
      const { agentId, timestamp, notification } = message.payload;

      console.log('[App] Agent update:', agentId);

      setAgentUpdates((prev) => {
        const updated = new Map(prev);
        const updates = updated.get(agentId) || [];
        updated.set(agentId, [
          ...updates,
          {
            timestamp: new Date(timestamp),
            notification,
          },
        ]);
        return updated;
      });
    });

    // Agent status handler
    const unsubAgentStatus = ws.on('agent_status', (message) => {
      if (message.type !== 'agent_status') return;
      const { agentId, status, info } = message.payload;

      console.log('[App] Agent status changed:', agentId, status);

      setAgents((prev) => {
        const updated = new Map(prev);
        const agent = updated.get(agentId);
        if (agent) {
          updated.set(agentId, {
            ...agent,
            status: status as AgentStatus,
            sessionId: info.sessionId,
            error: info.error,
          });
        }
        return updated;
      });
    });

    // Activity log handler
    const unsubActivity = ws.on('activity_log', (message) => {
      if (message.type !== 'activity_log') return;
      const data = message.payload;

      // Handle tool calls
      if (data.type === 'tool_call' && data.metadata) {
        const {
          toolCallId,
          toolName,
          arguments: args,
        } = data.metadata as {
          toolCallId: string;
          toolName: string;
          arguments: unknown;
        };

        setMessages((prev) => [
          ...prev,
          {
            type: 'tool_call',
            id: toolCallId,
            timestamp: Date.now(),
            toolName,
            args,
            status: 'executing',
          },
        ]);
        return;
      }

      // Handle tool results
      if (data.type === 'tool_result' && data.metadata) {
        const { toolCallId, result } = data.metadata as {
          toolCallId: string;
          result: unknown;
        };

        setMessages((prev) =>
          prev.map((msg) =>
            msg.type === 'tool_call' && msg.id === toolCallId
              ? { ...msg, result, status: 'completed' as const }
              : msg
          )
        );
        return;
      }

      // Handle tool errors
      if (
        data.type === 'error' &&
        data.metadata &&
        'toolCallId' in data.metadata
      ) {
        const { toolCallId, error } = data.metadata as {
          toolCallId: string;
          error: unknown;
        };

        setMessages((prev) =>
          prev.map((msg) =>
            msg.type === 'tool_call' && msg.id === toolCallId
              ? { ...msg, error, status: 'failed' as const }
              : msg
          )
        );
      }

      // Map activity types to message types
      let activityType: 'system' | 'info' | 'success' | 'error' = 'info';
      if (data.type === 'error') activityType = 'error';

      // Add user transcripts as user messages
      if (data.type === 'transcript') {
        setMessages((prev) => [
          ...prev,
          {
            type: 'user',
            id: generateMessageId(),
            timestamp: Date.now(),
            message: data.content,
          },
        ]);
        return;
      }

      // Add assistant messages
      if (data.type === 'assistant') {
        setMessages((prev) => [
          ...prev,
          {
            type: 'assistant',
            id: generateMessageId(),
            timestamp: Date.now(),
            message: data.content,
          },
        ]);
        setCurrentAssistantMessage('');
        return;
      }

      // Add activity log for other types
      setMessages((prev) => [
        ...prev,
        {
          type: 'activity',
          id: generateMessageId(),
          timestamp: Date.now(),
          activityType,
          message: data.content,
          metadata: data.metadata,
        },
      ]);
    });

    // Assistant chunk handler (streaming)
    const unsubChunk = ws.on('assistant_chunk', (message) => {
      if (message.type !== 'assistant_chunk') return;
      setCurrentAssistantMessage((prev) => prev + message.payload.chunk);
    });

    // Transcription result handler
    const unsubTranscription = ws.on('transcription_result', (message) => {
      if (message.type !== 'transcription_result') return;

      setIsProcessingAudio(false);

      const transcriptText = message.payload.text.trim();

      if (!transcriptText) {
        // Empty transcription - false positive, resume playback
        console.log('[App] Empty transcription (false positive) - resuming playback');
        audioPlayer.resume();
      } else {
        // Has content - real speech detected, stop playback
        console.log('[App] Transcription received - stopping playback');
        audioPlayer.stop();
        setIsPlayingAudio(false);
        setCurrentAssistantMessage('');
      }
    });

    // Audio output handler (TTS)
    const unsubAudioOutput = ws.on('audio_output', async (message) => {
      if (message.type !== 'audio_output') return;
      const data = message.payload;

      try {
        setIsPlayingAudio(true);

        // Create blob-like object with correct mime type (React Native compatible)
        const mimeType =
          data.format === 'mp3' ? 'audio/mpeg' : `audio/${data.format}`;
        const base64Audio = data.audio;

        // Create a Blob-like object that works in React Native
        const audioBlob = {
          type: mimeType,
          size: Math.ceil(base64Audio.length * 3 / 4), // Approximate size from base64
          arrayBuffer: async () => {
            // Convert base64 to ArrayBuffer
            const binaryString = atob(base64Audio);
            const bytes = new Uint8Array(binaryString.length);
            for (let i = 0; i < binaryString.length; i++) {
              bytes[i] = binaryString.charCodeAt(i);
            }
            return bytes.buffer;
          },
        } as Blob;

        // Play audio
        await audioPlayer.play(audioBlob);

        // Send confirmation back to server (properly typed)
        const confirmMessage: WSInboundMessage = {
          type: 'session',
          message: {
            type: 'audio_played',
            id: data.id,
          },
        };
        ws.send(confirmMessage);

        setIsPlayingAudio(false);
      } catch (error: any) {
        console.error('[App] Audio playback error:', error);
        setMessages((prev) => [
          ...prev,
          {
            type: 'activity',
            id: generateMessageId(),
            timestamp: Date.now(),
            activityType: 'error',
            message: `Audio playback failed: ${error.message}`,
          },
        ]);
        setIsPlayingAudio(false);
      }
    });

    // Status handler
    const unsubStatus = ws.on('status', (message) => {
      if (message.type !== 'status') return;
      const msg =
        'message' in message.payload
          ? String(message.payload.message)
          : `Status: ${message.payload.status}`;

      setMessages((prev) => [
        ...prev,
        {
          type: 'activity',
          id: generateMessageId(),
          timestamp: Date.now(),
          activityType: 'info',
          message: msg,
        },
      ]);
    });

    // Conversation loaded handler
    const unsubConversationLoaded = ws.on('conversation_loaded', (message) => {
      if (message.type !== 'conversation_loaded') return;
      const { conversationId, messageCount } = message.payload;

      setMessages((prev) => [
        ...prev,
        {
          type: 'activity',
          id: generateMessageId(),
          timestamp: Date.now(),
          activityType: 'success',
          message: `Loaded conversation with ${messageCount} messages`,
        },
      ]);
    });

    // Artifact handler
    const unsubArtifact = ws.on('artifact', (message) => {
      if (message.type !== 'artifact') return;
      const artifactData = message.payload;

      console.log('[App] Received artifact:', artifactData.id, artifactData.type, artifactData.title);

      // Store artifact
      setArtifacts((prev) => {
        const updated = new Map(prev);
        updated.set(artifactData.id, artifactData);
        return updated;
      });

      // Show drawer immediately
      setCurrentArtifact(artifactData);
    });

    return () => {
      unsubSessionState();
      unsubAgentCreated();
      unsubAgentUpdate();
      unsubAgentStatus();
      unsubActivity();
      unsubChunk();
      unsubTranscription();
      unsubAudioOutput();
      unsubStatus();
      unsubConversationLoaded();
      unsubArtifact();
    };
  }, [ws, audioPlayer]);

  // Connection status handler
  useEffect(() => {
    if (ws.isConnected) {
      setMessages((prev) => [
        ...prev,
        {
          type: 'activity',
          id: generateMessageId(),
          timestamp: Date.now(),
          activityType: 'success',
          message: 'WebSocket connected',
        },
      ]);
    } else if (messages.length > 0) {
      setMessages((prev) => [
        ...prev,
        {
          type: 'activity',
          id: generateMessageId(),
          timestamp: Date.now(),
          activityType: 'error',
          message: 'WebSocket disconnected',
        },
      ]);
    }
  }, [ws.isConnected]);

  // Voice button handler
  async function handleVoicePress() {
    if (!ws.isConnected) return;

    // If recording, stop and send
    if (isRecording) {
      try {
        console.log('[App] Stopping recording...');
        const audioBlob = await audioRecorder.stop();
        setIsRecording(false);

        const format = audioBlob.type || 'audio/m4a';
        console.log(
          `[App] Recording complete: ${audioBlob.size} bytes, format: ${format}`
        );

        setIsProcessingAudio(true);
        setMessages((prev) => [
          ...prev,
          {
            type: 'activity',
            id: generateMessageId(),
            timestamp: Date.now(),
            activityType: 'info',
            message: 'Sending audio to server...',
          },
        ]);

        // Convert to base64
        const arrayBuffer = await audioBlob.arrayBuffer();
        const base64Audio = btoa(
          new Uint8Array(arrayBuffer).reduce(
            (data, byte) => data + String.fromCharCode(byte),
            ''
          )
        );

        // Send to server (properly typed)
        const audioMessage: WSInboundMessage = {
          type: 'session',
          message: {
            type: 'audio_chunk',
            audio: base64Audio,
            format: format,
            isLast: true,
          },
        };
        ws.send(audioMessage);

        console.log(
          `[App] Sent audio: ${audioBlob.size} bytes, format: ${format}`
        );
      } catch (error: any) {
        console.error('[App] Recording error:', error);
        setMessages((prev) => [
          ...prev,
          {
            type: 'activity',
            id: generateMessageId(),
            timestamp: Date.now(),
            activityType: 'error',
            message: `Failed to record audio: ${error.message}`,
          },
        ]);
        setIsRecording(false);
      }
    } else {
      // Start recording
      try {
        console.log('[App] Starting recording...');

        // Stop any currently playing audio
        audioPlayer.stop();
        setIsPlayingAudio(false);

        await audioRecorder.start();
        setIsRecording(true);
      } catch (error: any) {
        console.error('[App] Failed to start recording:', error);
        setMessages((prev) => [
          ...prev,
          {
            type: 'activity',
            id: generateMessageId(),
            timestamp: Date.now(),
            activityType: 'error',
            message: `Failed to start recording: ${error.message}`,
          },
        ]);
      }
    }
  }

  // Handle artifact click from activity log
  function handleArtifactClick(artifactId: string) {
    const artifact = artifacts.get(artifactId);
    if (artifact) {
      console.log('[App] Opening artifact:', artifactId);
      setCurrentArtifact(artifact);
    } else {
      console.warn('[App] Artifact not found:', artifactId);
    }
  }

  // Close artifact drawer
  function handleCloseArtifact() {
    setCurrentArtifact(null);
  }

  // Handle agent selection
  function handleSelectAgent(agentId: string) {
    setActiveAgentId(agentId);
    setViewMode('agent');
  }

  // Handle back to orchestrator
  function handleBackToOrchestrator() {
    setActiveAgentId(null);
    setViewMode('orchestrator');
  }

  // Agent control handlers
  function handleKillAgent(agentId: string) {
    console.log('[App] Kill agent:', agentId);
    // TODO: Implement kill agent API call
  }

  function handleCancelAgent(agentId: string) {
    console.log('[App] Cancel agent:', agentId);
    // TODO: Implement cancel agent API call
  }

  // Text message handlers
  function handleSendMessage() {
    if (!userInput.trim() || !ws.isConnected) return;

    // Stop any currently playing audio
    audioPlayer.stop();
    setIsPlayingAudio(false);

    // Send message to server using the hook's method
    ws.sendUserMessage(userInput);

    // Clear input and reset streaming state
    setUserInput('');
    setCurrentAssistantMessage('');
    Keyboard.dismiss();
  }

  function handleCancel() {
    console.log('[App] Cancelling operations...');

    // Stop audio playback
    audioPlayer.stop();
    setIsPlayingAudio(false);

    // Clear streaming state
    setCurrentAssistantMessage('');

    // Reset processing state
    setIsProcessingAudio(false);

    // Send abort request to server (properly typed)
    const abortMessage: WSInboundMessage = {
      type: 'session',
      message: {
        type: 'abort_request',
      },
    };
    ws.send(abortMessage);

    setMessages((prev) => [
      ...prev,
      {
        type: 'activity',
        id: generateMessageId(),
        timestamp: Date.now(),
        activityType: 'info',
        message: 'Operations cancelled',
      },
    ]);
  }

  // Compute if we're processing
  const isInProgress =
    isProcessingAudio || isPlayingAudio || currentAssistantMessage.length > 0;

  function handleButtonClick() {
    if (isRecording) {
      // Stop recording and send the audio
      handleVoicePress();
    } else if (isInProgress) {
      // Cancel processing/playback
      handleCancel();
    } else if (userInput.trim()) {
      // Send text message
      handleSendMessage();
    } else {
      // Start recording
      handleVoicePress();
    }
  }

  // Conversation selection handler
  function handleSelectConversation(newConversationId: string | null) {
    // Clear all state
    setMessages([]);
    setCurrentAssistantMessage('');
    setUserInput('');
    setArtifacts(new Map());
    setCurrentArtifact(null);
    setAgents(new Map());
    setCommands(new Map());
    setAgentUpdates(new Map());
    setViewMode('orchestrator');
    setActiveAgentId(null);

    // Stop any ongoing operations
    if (isRecording) {
      audioRecorder.stop().catch(console.error);
      setIsRecording(false);
    }
    audioPlayer.stop();
    setIsPlayingAudio(false);
    setIsProcessingAudio(false);

    // Update conversation ID (will trigger WebSocket reconnection)
    setConversationId(newConversationId);
  }

  // Render agent stream view
  if (viewMode === 'agent' && activeAgentId) {
    const agent = agents.get(activeAgentId);
    const updates = agentUpdates.get(activeAgentId) || [];

    if (!agent) {
      return (
        <View className="flex-1 bg-black items-center justify-center">
          <Text className="text-white">Agent not found</Text>
        </View>
      );
    }

    return (
      <AgentStreamView
        agentId={activeAgentId}
        agent={agent}
        updates={updates}
        onBack={handleBackToOrchestrator}
        onKillAgent={handleKillAgent}
        onCancelAgent={handleCancelAgent}
      />
    );
  }

  // Render orchestrator view (main chat)
  return (
    <KeyboardAvoidingView
      behavior="padding"
      className="flex-1 bg-black"
    >
      <View className="flex-1">
        {/* Connection status header with buttons */}
        <View style={{ paddingTop: insets.top + 16 }}>
          <View className="flex-row items-center justify-between px-6 pb-4">
            <View className="flex-1">
              <ConnectionStatus isConnected={ws.isConnected} />
            </View>
            <View className="flex-row items-center gap-2">
              <ConversationSelector
                currentConversationId={conversationId}
                onSelectConversation={handleSelectConversation}
                websocket={ws}
              />
              <Pressable
                onPress={() => router.push('/settings')}
                className="bg-zinc-800 p-3 rounded-lg"
              >
                <MaterialIcons name="settings" size={20} color="white" />
              </Pressable>
            </View>
          </View>
        </View>

        {/* Active processes bar */}
        <ActiveProcesses
          agents={Array.from(agents.values())}
          commands={Array.from(commands.values())}
          activeProcessId={activeAgentId}
          activeProcessType={activeAgentId ? 'agent' : null}
          onSelectAgent={handleSelectAgent}
          onBackToOrchestrator={handleBackToOrchestrator}
        />

        {/* Messages */}
        <ScrollView
          ref={scrollViewRef}
          className="flex-1"
          contentContainerClassName="pb-4"
        >
          {messages.map((msg) => {
            if (msg.type === 'user') {
              return (
                <UserMessage
                  key={msg.id}
                  message={msg.message}
                  timestamp={msg.timestamp}
                />
              );
            }

            if (msg.type === 'assistant') {
              return (
                <AssistantMessage
                  key={msg.id}
                  message={msg.message}
                  timestamp={msg.timestamp}
                />
              );
            }

            if (msg.type === 'activity') {
              return (
                <ActivityLog
                  key={msg.id}
                  type={msg.activityType}
                  message={msg.message}
                  timestamp={msg.timestamp}
                  metadata={msg.metadata}
                  onArtifactClick={handleArtifactClick}
                />
              );
            }

            if (msg.type === 'tool_call') {
              return (
                <ToolCall
                  key={msg.id}
                  toolName={msg.toolName}
                  args={msg.args}
                  result={msg.result}
                  error={msg.error}
                  status={msg.status}
                />
              );
            }

            return null;
          })}

          {/* Streaming assistant message */}
          {currentAssistantMessage && (
            <AssistantMessage
              message={currentAssistantMessage}
              timestamp={Date.now()}
              isStreaming={true}
            />
          )}
        </ScrollView>

        {/* Input area */}
        <View className="pt-4 px-6 border-t border-zinc-800" style={{ paddingBottom: Math.max(insets.bottom, 32) }}>
          {/* Text input */}
          <TextInput
            value={userInput}
            onChangeText={setUserInput}
            placeholder="Say something..."
            placeholderTextColor="#71717a"
            className="bg-zinc-800 text-white rounded-2xl px-4 py-3 mb-4 max-h-32"
            multiline
            editable={!isRecording && ws.isConnected}
          />

          {/* Buttons */}
          <View className="flex-row items-center justify-center gap-4">
            {/* Realtime mode button (placeholder) */}
            <Pressable
              disabled={true}
              className="w-16 h-16 rounded-full bg-zinc-800 items-center justify-center opacity-50"
            >
              <View className="w-8 h-8 items-center justify-center">
                <View className="w-6 h-6 rounded-full border-2 border-white" />
                <View className="absolute w-3 h-3 rounded-full border-2 border-white" />
              </View>
            </Pressable>

            {/* Main action button */}
            <Pressable
              onPress={handleButtonClick}
              disabled={!ws.isConnected}
              className={`w-20 h-20 rounded-full items-center justify-center ${
                !ws.isConnected ? 'opacity-50' : 'opacity-100'
              } ${
                isRecording
                  ? 'bg-red-500'
                  : isInProgress
                  ? 'bg-red-600'
                  : userInput.trim()
                  ? 'bg-blue-600'
                  : 'bg-zinc-700'
              }`}
            >
              {isInProgress ? (
                <View className="relative w-6 h-6">
                  <View className="absolute w-6 h-0.5 bg-white rotate-45" style={{top: 11}} />
                  <View className="absolute w-6 h-0.5 bg-white -rotate-45" style={{top: 11}} />
                </View>
              ) : isRecording ? (
                <View className="w-4 h-4 bg-white rounded-full" />
              ) : userInput.trim() ? (
                <Text className="text-white text-xl">▶</Text>
              ) : (
                <View className="w-6 h-8 relative">
                  <View className="absolute bottom-0 left-1/2 -ml-2 w-4 h-6 bg-white rounded-t-full" />
                  <View className="absolute bottom-0 left-1/2 -ml-3 w-6 h-1.5 bg-white rounded-full" />
                </View>
              )}
            </Pressable>
          </View>
        </View>

        {/* Artifact drawer */}
        <ArtifactDrawer
          artifact={currentArtifact}
          onClose={handleCloseArtifact}
        />
      </View>
    </KeyboardAvoidingView>
  );
}