import React from 'react';
import { StyleSheet } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { NativeStackScreenProps } from '@react-navigation/native-stack';
import { useQuery } from '@tanstack/react-query';
import { MarketplaceStackParamList } from '../../navigation/types';
import { ChatInterface } from '../../components/ChatInterface';
import { Spinner } from '../../components/ui';
import { useTheme } from '../../theme';
import { marketplaceAPI } from '../../services/api';

type Props = NativeStackScreenProps<MarketplaceStackParamList, 'PublicChat'>;

export function PublicChatScreen({ route }: Props) {
  const { chatbotId } = route.params;
  const { theme } = useTheme();

  const { data: bot, isLoading } = useQuery({
    queryKey: ['marketplace-bot', chatbotId],
    queryFn: () => marketplaceAPI.get(chatbotId),
    staleTime: 5 * 60 * 1000,
  });

  if (isLoading) return <Spinner centered />;

  return (
    <SafeAreaView style={[styles.safe, { backgroundColor: theme.bg }]} edges={['bottom']}>
      <ChatInterface
        chatbotId={chatbotId}
        welcomeMessage={bot?.welcome_message}
        primaryColor={bot?.primary_color}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  safe: { flex: 1 },
});
