import { useState } from 'react';

function ChatInterface() {
  const [messages, setMessages] = useState([]);
  const [inputValue, setInputValue] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  
  async function handleSubmit(e) {
    e.preventDefault();
    
    // Don't submit empty messages
    if (!inputValue.trim()) return;
    
    // Add user message to chat
    const userMessage = { type: 'user', text: inputValue };
    setMessages(prev => [...prev, userMessage]);
    
    // Clear input and show loading state
    setInputValue('');
    setIsLoading(true);
    
    try {
      // Send question to your backend proxy
      const response = await fetch('/api/ask', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ question: userMessage.text })
      });
      
      const data = await response.json();
      
      // Add bot response to chat
      setMessages(prev => [
        ...prev, 
        { 
          type: 'bot', 
          text: 'Here\'s what I found:', 
          data: data.data 
        }
      ]);
    } catch (error) {
      // Handle errors
      setMessages(prev => [
        ...prev, 
        { 
          type: 'bot', 
          text: 'Sorry, I encountered an error. Please try again.' 
        }
      ]);
    } finally {
      setIsLoading(false);
    }
  }
  
  return (
    <div className="chat-container">
      <div className="chat-messages">
        {messages.map((message, index) => (
          <div key={index} className={`message ${message.type}`}>
            <div className="message-text">{message.text}</div>
            {message.data && (
              <div className="message-data">
                <pre>{JSON.stringify(message.data, null, 2)}</pre>
              </div>
            )}
          </div>
        ))}
        {isLoading && (
          <div className="message bot loading">
            <div className="loading-indicator">...</div>
          </div>
        )}
      </div>
      
      <form onSubmit={handleSubmit} className="chat-input-form">
        <input
          type="text"
          value={inputValue}
          onChange={e => setInputValue(e.target.value)}
          placeholder="Ask a question about your data..."
          disabled={isLoading}
        />
        <button type="submit" disabled={isLoading}>
          Send
        </button>
      </form>
    </div>
  );
}

import { useState } from 'react';

function SearchInterface() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState(null);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);
  
  async function handleSearch(e) {
    e.preventDefault();
    
    if (!query.trim()) return;
    
    setIsLoading(true);
    setError(null);
    
    try {
      const response = await fetch('/api/search', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ question: query })
      });
      
      if (!response.ok) {
        throw new Error('Search failed');
      }
      
      const data = await response.json();
      setResults(data);
    } catch (error) {
      setError('An error occurred while searching. Please try again.');
      setResults(null);
    } finally {
      setIsLoading(false);
    }
  }
  
  return (
    <div className="search-container">
      <form onSubmit={handleSearch} className="search-form">
        <input
          type="text"
          value={query}
          onChange={e => setQuery(e.target.value)}
          placeholder="Search your data..."
          disabled={isLoading}
        />
        <button type="submit" disabled={isLoading}>
          {isLoading ? 'Searching...' : 'Search'}
        </button>
      </form>
      
      {error && <div className="error-message">{error}</div>}
      
      {results && (
        <div className="search-results">
          <h2>Results</h2>
          <div className="results-info">
            <p>Query used: {results.query_used}</p>
            <p>Execution time: {results.execution_time_ms}ms</p>
          </div>
          <div className="data-results">
            {Array.isArray(results.data) ? (
              <table>
                <thead>
                  <tr>
                    {Object.keys(results.data[0] || {}).map(key => (
                      <th key={key}>{key}</th>
                    ))}
                  </tr>
                </thead>
                <tbody>
                  {results.data.map((item, index) => (
                    <tr key={index}>
                      {Object.values(item).map((value, i) => (
                        <td key={i}>{typeof value === 'object' ? JSON.stringify(value) : value}</td>
                      ))}
                    </tr>
                  ))}
                </tbody>
              </table>
            ) : (
              <pre>{JSON.stringify(results.data, null, 2)}</pre>
            )}
          </div>
        </div>
      )}
    </div>
  );
}

import { useState, useEffect } from 'react';
import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend } from 'chart.js';
import { Bar } from 'react-chartjs-2';

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

function Dashboard() {
  const [salesData, setSalesData] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);
  
  useEffect(() => {
    async function fetchDashboardData() {
      try {
        // Fetch sales by region data
        const response = await fetch('/api/dashboard/sales-by-region');
        
        if (!response.ok) {
          throw new Error('Failed to fetch dashboard data');
        }
        
        const data = await response.json();
        setSalesData(data);
      } catch (error) {
        setError('Failed to load dashboard data. Please try again later.');
      } finally {
        setIsLoading(false);
      }
    }
    
    fetchDashboardData();
  }, []);
  
  // Format data for Chart.js
  const chartData = salesData ? {
    labels: salesData.data.map(item => item.region),
    datasets: [
      {
        label: 'Sales by Region',
        data: salesData.data.map(item => item.sales),
        backgroundColor: 'rgba(53, 162, 235, 0.5)',
      },
    ],
  } : null;
  
  const chartOptions = {
    responsive: true,
    plugins: {
      legend: {
        position: 'top',
      },
      title: {
        display: true,
        text: 'Sales by Region',
      },
    },
  };
  
  return (
    <div className="dashboard">
      <h1>Sales Dashboard</h1>
      
      {isLoading && <p>Loading dashboard data...</p>}
      {error && <p className="error">{error}</p>}
      
      {chartData && (
        <div className="chart-container">
          <Bar options={chartOptions} data={chartData} />
          <p className="data-timestamp">
            Last updated: {new Date().toLocaleString()}
          </p>
        </div>
      )}
    </div>
  );
}