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;