import React from 'react';
import { useEffect, useState } from 'react';
import { BrowserRouter, Link, Navigate, NavLink, Route, Routes, useNavigate } from 'react-router-dom';
import axios from 'axios';
import Login from './pages/Login';
import Register from './pages/Register';
import Dashboard from './pages/Dashboard';
import Customers from './pages/Customers';
import Products from './pages/Products';
import Sales from './pages/Sales';
import Reports from './pages/Reports';

var API = 'http://localhost:5000/api';

function App() {
  var sessionState = useState(function() {
    var stored = localStorage.getItem('srmsSession');
    return stored ? JSON.parse(stored) : null;
  });
  var session = sessionState[0];
  var setSession = sessionState[1];
  var noticeState = useState('');
  var notice = noticeState[0];
  var setNotice = noticeState[1];

  function saveSession(data) {
    localStorage.setItem('srmsSession', JSON.stringify(data));
    setSession(data);
  }

  function logout() {
    localStorage.removeItem('srmsSession');
    setSession(null);
  }

  return React.createElement('div', null,
    session && React.createElement(TopNav, { user: session.user, onLogout: logout }),
    notice && React.createElement('div', { className: 'notice', onClick: function() { setNotice(''); } }, notice),
    React.createElement(Routes, null,
      React.createElement(Route, { path: '/', element: session ? React.createElement(Navigate, { to: '/dashboard' }) : React.createElement(Login, { onLogin: saveSession }) }),
      React.createElement(Route, { path: '/login', element: React.createElement(Login, { onLogin: saveSession }) }),
      React.createElement(Route, { path: '/register', element: React.createElement(Register, { onLogin: saveSession }) }),
      React.createElement(Route, { path: '/dashboard', element: React.createElement(Protected, { session: session }, React.createElement(Dashboard, { API: API })) }),
      React.createElement(Route, { path: '/customers', element: React.createElement(Protected, { session: session }, React.createElement(Customers, { API: API, session: session, setNotice: setNotice })) }),
      React.createElement(Route, { path: '/products', element: React.createElement(Protected, { session: session }, React.createElement(Products, { API: API, session: session, setNotice: setNotice })) }),
      React.createElement(Route, { path: '/sales', element: React.createElement(Protected, { session: session }, React.createElement(Sales, { API: API, session: session, setNotice: setNotice })) }),
      React.createElement(Route, { path: '/reports', element: React.createElement(Protected, { session: session }, React.createElement(Reports, { API: API, session: session, setNotice: setNotice })) }),
      React.createElement(Route, { path: '*', element: React.createElement(Navigate, { to: session ? '/dashboard' : '/login' }) })
    )
  );
}

function Protected(props) {
  return props.session ? props.children : React.createElement(Navigate, { to: '/login' });
}

function TopNav(props) {
  return React.createElement('header', { className: 'top-nav no-print' },
    React.createElement('div', null,
      React.createElement('h1', null, 'SRMS'),
      React.createElement('p', null, 'Sales Record Management System')
    ),
    React.createElement('nav', null,
      React.createElement(NavLink, { to: '/dashboard' }, 'Dashboard'),
      React.createElement(NavLink, { to: '/customers' }, 'Customers'),
      React.createElement(NavLink, { to: '/products' }, 'Products'),
      React.createElement(NavLink, { to: '/sales' }, 'Sales'),
      React.createElement(NavLink, { to: '/reports' }, 'Reports')
    ),
    React.createElement('div', { className: 'profile' },
      React.createElement('span', null, props.user ? props.user.username : ''),
      React.createElement('button', { onClick: props.onLogout }, 'Logout')
    )
  );
}

export default App;
