import React, { useEffect, useState } from 'react';
import { Typography, Spin, Message, Card, Grid, PageHeader } from '@arco-design/web-react';
import '@arco-design/web-react/dist/css/arco.css';
import { VChart } from '@visactor/react-vchart';

const { Row, Col } = Grid;
const ghostBgStyle = {
  backgroundImage: 'radial-gradient(var(--color-fill-3) 1px, rgba(0, 0, 0, 0) 1px)',
  backgroundSize: '16px 16px',
  padding: 20,
};

function App() {
  const [fiveMinData, setFiveMinData] = useState([]);
  const [dayAheadData, setDayAheadData] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    Promise.all([
      fetch('http://127.0.0.1:8000/market/real-time'),
      fetch('http://127.0.0.1:8000/market/day-ahead')
    ])
      .then(async ([res1, res2]) => {
        if (!res1.ok || !res2.ok) throw new Error('Failed to fetch data');
        const json1 = await res1.json();
        const json2 = await res2.json();
        setFiveMinData(json1);
        setDayAheadData(json2);
      })
      .catch((err) => {
        console.error(err);
        Message.error('Failed to load market data.');
      })
      .finally(() => setLoading(false));
  }, []);

  const getChartSpec = (data, title) => ({
    type: 'line',
    data: {
      values: data.map(d => ({
        timestamp: new Date(d.timestamp).toLocaleString(),
        lmp: d.lmp,
        energy: d.energy,
        congestion: d.congestion,
        loss: d.loss
      })),
      transforms: [
        {
          type: 'fold',
          options: {
            key: 'name',
            value: 'value',
            fields: ['lmp', 'energy', 'congestion', 'loss']
          }
        }
      ]
    },
    xField: 'timestamp',
    yField: 'value',
    seriesField: 'name',
    smooth: true,
    legend: {
      position: 'top'
    },
    tooltip: {
      formatter: (datum) => ({
        name: datum.name,
        value: datum.value.toFixed(2)
      })
    },
    dataZoom: [
      {
        orient: 'bottom',
        height: 20,
        start: title === 'fiveMin' ? 0.9 : 0.05,
        end: 1
      }
    ]
  });

  return (
  <>
    <div style={ghostBgStyle}>
        <PageHeader title={
          <Typography.Title heading={3}>PolyEnergy</Typography.Title>
        } subTitle={
          <Typography.Title type="secondary" heading={4}>Virtual Energy Trading</Typography.Title>
      } />
    </div>
    <div style={{ padding: 20, backgroundColor: 'var(--color-fill-2)' }}>
      <Typography.Title heading={4}>Market Data Visualization</Typography.Title>
      {loading ? (
        <Spin />
      ) : (
        <>
          <div
                style={{
                  width: '100%',
                  backgroundColor: 'var(--color-fill-2)',
                }}
              >
                <Row gutter={24}>
                  <Col span={12}>
                  <Card style={{ height: 600}} title='Real-Time Market Data'>
            <VChart spec={getChartSpec(fiveMinData, 'fiveMin')} />
          </Card>
                  </Col>
                  <Col span={12}>
          <Card style={{ height: 600}} title='Day-Ahead Market Data'>
                      <VChart spec={getChartSpec(dayAheadData, 'dayAhead')} />
                    </Card>
                  </Col>
                </Row>
              </div>
        </>
      )}
    </div>
  </>
  );
}

export default App;