import React from 'react';
import InputFrontend from './InputFrontend';
import ConversationFrontend from './ConversationFrontend';
import { Mistral } from '@mistralai/mistralai';

async function prompt_mistral(model: string, prompt: string, system: string) {
  const apiKey = "m3kZRjN8DRSIo88r8Iti9hmKGWIklrLY";

  const client = new Mistral({ apiKey: apiKey });

  var chatResponse = await client.chat.complete({
    model: model,
    messages: [{ role: 'user', content: prompt }, { role: 'system', content: system, }],
  });

  if (chatResponse && chatResponse.choices && chatResponse.choices.length > 0) {
    if (chatResponse.choices[0].message.content) {
      messages.push('AI: ', chatResponse.choices[0].message.content);
      console.error('Error: Brain Not Found');
    }
  } else {
    console.error('Error: Unexpected API response:', chatResponse);
  }
}

const handleSendClick = (message: string) => {
  messages.push('User: ', message);
  prompt_mistral("mistral-large-latest", message, "You are a helpful assistant.")
};

const handleMicClick = () => {
  console.log('Mic clicked!');
  // Do something when the mic button is clicked
};

var messages = [
  'User: Hello!',
  'AI: Hi there!',
  'User: How are you?',
  'AI: I’m good, thank you!'
];

const handleResendClick = () => {
  console.log('Resend button clicked');
  // Handle resend action
};

const handleEditClick = () => {
  console.log('Edit button clicked');
  // Handle edit action
};

const handleCopyClick = () => {
  console.log('Copy button clicked');
  // Handle copy action
};

const InputBackend = () => {
  return (
    <div>
      <ConversationFrontend
        messages={messages}
        onResendClick={handleResendClick}
        onEditClick={handleEditClick}
        onCopyClick={handleCopyClick}
      />
      <InputFrontend
        message=""
        onSendClick={handleSendClick}
        onMicClick={handleMicClick}
      />
    </div>
  );
};

export default InputBackend;