import React, { useState, createContext } from 'react';
import { Routes, Route, Navigate, Link, useLocation } from 'react-router-dom';
import { MarketDataPage, BidsPage, SubmitBidPage } from './components';
import { Menu, Select, PageHeader, Typography } from '@arco-design/web-react';
import '@arco-design/web-react/dist/css/arco.css';

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

export const MarketContext = createContext();
export const MARKET_FULL_NAMES = {
  CAISO: 'California ISO',
  ERCOT: 'Electric Reliability Council of Texas',
  ISONE: 'ISO New England',
  MISO: 'Midcontinent ISO',
  NYISO: 'New York ISO',
  PJM: 'PJM Interconnection',
};

function App() {
  const [selectedMarket, setSelectedMarket] = useState('ISONE');
  const location = useLocation();
  return (
    <MarketContext.Provider value={{ selectedMarket, setSelectedMarket }}>
    <div>
      <style>
              {`
                @media (max-width: 600px) {
                .page-header-container {
                                flex-direction: column;
                                align-items: center;
                              }
                .page-header-title {
                    font-size: 20px !important;
                    text-align: center;
                  }
                  .page-header-subtitle {
                    font-size: 14px !important;
                    text-align: center;
                  }
                  .market-select-container {
                                  width: 100%;
                                  display: flex;
                                  justify-content: center;
                                  margin-top: 10px;
                                }
                                .market-select {
                                  width: 100% !important;
                                  text-align: center;
                                }
                }
              `}
            </style>
      <div style={ghostBgStyle}>
        <div className="page-header-container" style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap' }}>
                    <div>
                      <PageHeader
                        title={
                          <Typography.Title heading={3} className="page-header-title">
                            PolyEnergy
                          </Typography.Title>
                        }
                        subTitle={
                          <Typography.Title type="secondary" heading={4} className="page-header-subtitle">
                            Virtual Energy Trading
                          </Typography.Title>
                        }
                      />
                    </div>
                    <div className="market-select-container">
                      <Select
                        className="market-select"
                        value={selectedMarket}
                        onChange={setSelectedMarket}
                        style={{ width: 200 }}
                        options={['ISONE', 'MISO', 'NYISO'].map(market => ({ label: market, value: market }))}
                      />
                    </div>
                  </div>
                  <Menu mode="horizontal" selectedKeys={[location.pathname.split('/')[1] || 'market-data']}>
                    <Menu.Item key="market-data">
                      <Link to="/market-data">Market Data</Link>
                    </Menu.Item>
                    <Menu.Item key="submit-bid">
                      <Link to="/submit-bid">Submit Bid</Link>
                    </Menu.Item>
                    <Menu.Item key="bids">
                      <Link to="/bids">My Bids</Link>
                    </Menu.Item>
                  </Menu>
      </div>
      <div style={{ backgroundColor: 'var(--color-fill-2)', minHeight: '80vh', display: 'flex', flexDirection: 'column' }}>
      <Routes>
        <Route path="/" element={<Navigate to="/market-data" replace />} />
        <Route path="/market-data" element={<MarketDataPage />} />
        <Route path="/submit-bid" element={<SubmitBidPage />} />
        <Route path="/bids" element={<BidsPage />} />
      </Routes>
      </div>
      <footer style={{ flexShrink: 0, marginTop: 20, textAlign: 'center', fontSize: 14, color: 'var(--color-text-3)', paddingBottom: 20 }}>
                © {new Date().getFullYear()} PolyEnergy. All rights reserved.
              </footer>
    </div>
    </MarketContext.Provider>
  );
}

export default App;