import React, { useState, useEffect } from 'react';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';

const App = () => {
  const [prices, setPrices] = useState([]);
  const [rawData, setRawData] = useState('');
  const [error, setError] = useState(null);
  
  const testingString = "hiiii";

  useEffect(() => {
    const fetchPrices = async () => {
      try {
        console.log('Fetching prices...');
        const response = await fetch('/api/prices', {
          method: 'GET',
          headers: {
            'Content-Type': 'application/json',
          },
        });
        console.log('Response status:', response.status);
        console.log('Response headers:', response.headers);
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();
        console.log('Fetched data:', data);
        setPrices(data);
        setRawData(JSON.stringify(data, null, 2));
        setError(null);
      } catch (error) {
        console.error('Failed to fetch prices:', error);
        setError(error.toString());
        setRawData('');
      }
    };
    fetchPrices();
    const interval = setInterval(fetchPrices, 5000);
    return () => clearInterval(interval);
  }, []);

  // prep data
  const chartData = prices.map(item => {
    const parsedItem = JSON.parse(item);
    return {
      price: parsedItem.price,
      time: new Date(parsedItem.timestamp * 1000).toLocaleTimeString()
    };
  }).reverse(); // show oldest data first

  return (
    <div>
      <h1>price</h1>
      <p>test stuff: {testingString}</p>
      {error && <p>Error: {error}</p>}
      <pre>{rawData}</pre>
      
      <h2>Price Graph</h2>
      <ResponsiveContainer width="100%" height={400}>
        <LineChart
          data={chartData}
          margin={{
            top: 5,
            right: 30,
            left: 20,
            bottom: 5,
          }}
        >
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis dataKey="time" />
          <YAxis domain={['auto', 'auto']} />
          <Tooltip />
          <Legend />
          <Line type="monotone" dataKey="price" stroke="#8884d8" activeDot={{ r: 8 }} />
        </LineChart>
      </ResponsiveContainer>
    </div>
  );
};

export default App;