import { useState } from 'react';

function ChatBot() {
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  
  async function handleSubmit(e) {
    e.preventDefault();
    
    if (!input.trim()) return;
    
    // Add user message
    const userMessage = { role: 'user', content: input };
    setMessages(prev => [...prev, userMessage]);
    setInput('');
    setIsLoading(true);
    
    try {
      // Send question to backend
      const response = await fetch('/api/chat', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ question: userMessage.content })
      });
      
      const data = await response.json();
      
      // Format the response
      let botResponse;
      if (data.error) {
        botResponse = { role: 'assistant', content: `I'm sorry, I couldn't find an answer. ${data.error}` };
      } else {
        // Create a natural language response from the structured data
        botResponse = { 
          role: 'assistant', 
          content: formatResponse(data),
          data: data.data // Store the raw data for display if needed
        };
      }
      
      setMessages(prev => [...prev, botResponse]);
    } catch (error) {
      setMessages(prev => [
        ...prev, 
        { role: 'assistant', content: "I'm sorry, I encountered an error. Please try again." }
      ]);
    } finally {
      setIsLoading(false);
    }
  }
  
  // Format structured data into a natural language response
  function formatResponse(data) {
    if (!data.data || data.data.length === 0) {
      return "I couldn't find any information about that.";
    }
    
    // Example formatting for average by category query
    if (data.query_used === 'average_by_category') {
      const results = data.data.map(item => 
        `The average ${data.parameters.metric} for ${item[data.parameters.category]} is ${item.average.toFixed(2)}`
      ).join('. ');
      
      return results;
    }
    
    // Default response if we don't have specific formatting for this query type
    return `Here's what I found: ${JSON.stringify(data.data)}`;
  }
  
  return (
    <div className="chatbot">
      <div className="messages">
        {messages.map((msg, index) => (
          <div key={index} className={`message ${msg.role}`}>
            <div className="content">{msg.content}</div>
            {msg.data && (
              <button 
                onClick={() => console.log(msg.data)} 
                className="view-data-btn"
              >
                View Data
              </button>
            )}
          </div>
        ))}
        {isLoading && (
          <div className="message assistant loading">
            <div className="typing-indicator">
              <span></span><span></span><span></span>
            </div>
          </div>
        )}
      </div>
      
      <form onSubmit={handleSubmit} className="input-form">
        <input
          type="text"
          value={input}
          onChange={(e) => setInput(e.target.value)}
          placeholder="Ask a question about your data..."
          disabled={isLoading}
        />
        <button type="submit" disabled={isLoading}>
          Send
        </button>
      </form>
    </div>
  );
}

import { useState, useRef } from 'react';
import { Bar, Line, Pie } from 'react-chartjs-2';
import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, PointElement, LineElement, ArcElement, Title, Tooltip, Legend } from 'chart.js';

// Register Chart.js components
ChartJS.register(CategoryScale, LinearScale, BarElement, PointElement, LineElement, ArcElement, Title, Tooltip, Legend);

function ChatBotMessage({ message }) {
  const [showChart, setShowChart] = useState(false);
  
  // Only process data visualizations for assistant messages with data
  if (message.role !== 'assistant' || !message.data) {
    return (
      <div className={`message ${message.role}`}>
        <div className="content">{message.content}</div>
      </div>
    );
  }
  
  // Determine what type of chart to show based on the data
  const getChartType = () => {
    if (!message.data || !Array.isArray(message.data)) return null;
    
    // Example: For data that has categories and a single metric, use a bar chart
    if (message.data.length > 1 && message.data.length <= 10) {
      const firstItem = message.data[0];
      const keys = Object.keys(firstItem);
      
      if (keys.length === 2 && typeof firstItem[keys[1]] === 'number') {
        // Likely a category and a value - good for a bar chart
        return 'bar';
      } else if (keys.includes('date') || keys.includes('time') || keys.some(k => k.includes('date') || k.includes('time'))) {
        // Time series data - good for a line chart
        return 'line';
      } else if (message.data.length <= 6) {
        // Small number of categories - could be good for a pie chart
        return 'pie';
      }
    }
    
    return 'bar'; // Default to bar chart
  };
  
  const chartType = getChartType();
  
  // Prepare chart data based on the data structure
  const prepareChartData = () => {
    if (!message.data || !Array.isArray(message.data) || message.data.length === 0) return null;
    
    const firstItem = message.data[0];
    const keys = Object.keys(firstItem);
    
    // For a simple two-column data structure (category and value)
    if (keys.length === 2 && typeof firstItem[keys[1]] === 'number') {
      const categoryKey = keys[0];
      const valueKey = keys[1];
      
      return {
        labels: message.data.map(item => item[categoryKey]),
        datasets: [
          {
            label: valueKey.charAt(0).toUpperCase() + valueKey.slice(1),
            data: message.data.map(item => item[valueKey]),
            backgroundColor: 'rgba(53, 162, 235, 0.5)',
            borderColor: 'rgba(53, 162, 235, 1)',
            borderWidth: 1
          }
        ]
      };
    }
    
    // Add more data preparation logic for other data structures
    
    return null;
  };
  
  const chartData = prepareChartData();
  
  // Chart options
  const chartOptions = {
    responsive: true,
    plugins: {
      legend: {
        position: 'top',
      },
      title: {
        display: true,
        text: 'Data Visualization',
      },
    },
  };
  
  // Render the appropriate chart component based on chartType
  const renderChart = () => {
    if (!chartData) return null;
    
    switch (chartType) {
      case 'bar':
        return <Bar data={chartData} options={chartOptions} />;
      case 'line':
        return <Line data={chartData} options={chartOptions} />;
      case 'pie':
        return <Pie data={chartData} options={chartOptions} />;
      default:
        return null;
    }
  };
  
  return (
    <div className={`message ${message.role}`}>
      <div className="content">{message.content}</div>
      
      {chartType && chartData && (
        <div className="message-actions">
          <button onClick={() => setShowChart(!showChart)}>
            {showChart ? 'Hide Visualization' : 'Show Visualization'}
          </button>
          
          {showChart && (
            <div className="chart-container">
              {renderChart()}
            </div>
          )}
        </div>
      )}
      
      <div className="message-footer">
        <small>Source: Infactory data query</small>
      </div>
    </div>
  );
}