"use client"
import React from 'react';
import {Grid, Button, Box, Container, Image, Flex, Center, Text} from "@chakra-ui/react"
import { LuMoon, LuSun } from "react-icons/lu";
import { useColorMode } from "@/components/ui/color-mode"
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { PayPalScriptProvider } from '@paypal/react-paypal-js';
import Payment from './pages/Payment.jsx';
import Success from './pages/Success.jsx';
import Cancel from './pages/Cancel.jsx';
import './App.css';
import logo from '/affordableluxurywatches-logo.svg';

// PayPal configuration
const paypalOptions = {
    "client-id": import.meta.env.VITE_REACT_APP_PAYPAL_CLIENT_ID || "test",
    currency: "USD",
    intent: "capture",
};

function App() {
    const { toggleColorMode, colorMode } = useColorMode()
    return (
        <PayPalScriptProvider options={paypalOptions}>
            <Router>
                <div className="App">
                    <Container mt="5">
                        <Grid>
                            <Box
                                p="4"
                                borderWidth="1px"
                                borderColor="border.disabled"
                                color="fg.disabled"
                            >
                                <Grid
                                    templateColumns={{ base: "1fr", md: "1fr auto" }}
                                    alignItems="center"
                                    p={4}
                                    gap={4}
                                >
                                    <Image width="550px" src={logo} className="logo react" alt="React logo" />
                                    {/*<Center>*/}
                                    {/*    <Button variant="outline" onClick={toggleColorMode} >*/}
                                    {/*    {colorMode === "light" ? <><LuSun /> Toggle Light mode</> : <><LuMoon /> Toogle Dark mode</>}*/}
                                    {/*    </Button>*/}
                                    {/*</Center>*/}
                                </Grid>
                                <Flex direction="row" gap="4" justify="space-between" align="center" mb="10">

                                </Flex>
                                <Routes>
                                    <Route path="/" element={<Payment />} />
                                    <Route path="/payment" element={<Payment />} />
                                    <Route path="/success" element={<Success />} />
                                    <Route path="/cancel" element={<Cancel />} />
                                    <Route path="*" element={
                                        <div className="container mt-5 text-center">
                                            <h2>Page Not Found</h2>
                                            <p>The requested page could not be found.</p>
                                            <a href="/payment" className="btn btn-primary">Go to Payment</a>
                                        </div>
                                    } />
                                </Routes>
                                <Center mt="5">
                                    <Text textStyle="xs">{import.meta.env.VITE_REACT_APP_STORE_NAME}</Text>
                                </Center>
                            </Box>
                        </Grid>
                    </Container>
                </div>
            </Router>
        </PayPalScriptProvider>
    );
}

export default App;