import { useConversation } from '@elevenlabs/react-native';
import { View, Button, Text, ScrollView } from 'react-native';
import { z } from 'zod';
import { useState } from 'react';

export default function VoiceAgent() {
  const [transcript, setTranscript] = useState<Array<{ role: string; text: string }>>([]);

  const { startConversation, stopConversation, status } = useConversation({
    agentId: process.env.EXPO_PUBLIC_ELEVENLABS_AGENT_ID!,

    // Use signed URL (most secure)
    signedUrl: async () => {
      const response = await fetch('https://your-api.com/elevenlabs/auth');
      const { signedUrl } = await response.json();
      return signedUrl;
    },

    clientTools: {
      updateProfile: {
        description: "Update user profile",
        parameters: z.object({
          name: z.string()
        }),
        handler: async ({ name }) => {
          console.log('Updating profile:', name);
          return { success: true };
        }
      }
    },

    onEvent: (event) => {
      if (event.type === 'transcript') {
        setTranscript(prev => [...prev, { role: 'user', text: event.data.text }]);
      } else if (event.type === 'agent_response') {
        setTranscript(prev => [...prev, { role: 'agent', text: event.data.text }]);
      }
    }
  });

  return (
    <View style={{ padding: 20 }}>
      <Text style={{ fontSize: 24, fontWeight: 'bold', marginBottom: 20 }}>Voice Agent</Text>

      <View style={{ flexDirection: 'row', gap: 10, marginBottom: 20 }}>
        <Button title="Start" onPress={startConversation} disabled={status === 'connected'} />
        <Button title="Stop" onPress={stopConversation} disabled={status !== 'connected'} />
      </View>

      <Text>Status: {status}</Text>

      <ScrollView style={{ marginTop: 20, maxHeight: 400 }}>
        {transcript.map((msg, i) => (
          <View key={i} style={{ padding: 10, marginBottom: 10, backgroundColor: msg.role === 'user' ? '#e3f2fd' : '#f5f5f5' }}>
            <Text style={{ fontWeight: 'bold' }}>{msg.role === 'user' ? 'You' : 'Agent'}</Text>
            <Text>{msg.text}</Text>
          </View>
        ))}
      </ScrollView>
    </View>
  );
}