import { usePersonaRuntimeEndpoint, usePersonaRuntimeMessages } from '@applica-software-guru/persona-chat-sdk';
import { useMemo } from 'react';
import _ from 'lodash';

function MessageLogger() {
  const messages = usePersonaRuntimeMessages();
  const { reasoning, user, assistant, sources } = useMemo(() => {
    const reasoning = _.filter(messages, (message) => message.role === 'assistant' && message.type === 'reasoning').length;
    const user = _.filter(messages, (message) => message.role === 'user').length;
    const assistant = _.filter(messages, (message) => message.role === 'assistant').length;
    const sources = _.filter(messages, (message) => message.role === 'assistant' && message.sources).length;
    return { reasoning, user, assistant, sources };
  }, [messages]);
  return (
    <div className="absolute top-0 left-0 w-30 h-40 overflow-y-auto m-2 box-border border-gray-300 rounded-lg shadow-lg p-2">
      <h3 className="text-md font-bold mb-2">Messages</h3>
      <p className="top-0 left-0 bg-white text-black text-sm">
        <span className="text-gray-500">
          User: <span className="font-bold">{user}</span>
        </span>
        <br />
        <span className="text-gray-500">
          Assistant: <span className="font-bold">{assistant}</span>
        </span>
        <br />
        <span className="text-gray-500">
          Reasoning: <span className="font-bold">{reasoning}</span>
        </span>
        <br />
        <span className="text-gray-500">
          Sources: <span className="font-bold">{sources}</span>
        </span>
        <br />
        <span className="text-gray-500">
          Total: <span className="font-bold">{messages.length}</span>
        </span>
        <br />
      </p>
    </div>
  );
}

function EndpointLogger() {
  const endpoint = usePersonaRuntimeEndpoint();
  return (
    <div className="absolute top-0 right-0 w-50 h-40 overflow-y-auto m-2 box-border border-gray-300 rounded-lg shadow-lg p-2">
      <h3 className="text-md font-bold mb-2">Endpoint</h3>
      <p className="top-0 left-0 bg-white text-black text-sm">{endpoint || 'No endpoint available'}</p>
    </div>
  );
}

export { MessageLogger, EndpointLogger };