import React, { useState, useEffect } from 'react';
import { Box, useTheme, useMediaQuery } from '@mui/material';
import KitchPlusAppBar from '../AppBar';
import Sidebar from '../SideHome';
import ProductEntry from './ProductEntry';
import TableView from './TableView';

const drawerWidth = 230;

const initialProducts = [
  {
    product: 'Apple Watch',
    sales: 150,
    amount: 45000,
    price: 299,
    status: 'Published',
    expiration: '30 Days Left',
  },
  {
    product: 'Samsung Galaxy',
    sales: 90,
    amount: 36000,
    price: 400,
    status: 'Low Stock',
    expiration: '12 Days Left',
  },
  {
    product: 'Sony Headphones',
    sales: 60,
    amount: 18000,
    price: 299,
    status: 'Draft',
    expiration: '5 Days Left',
  },
];

const Inventory = () => {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
  const [sidebarOpen, setSidebarOpen] = useState(!isMobile);

  const [products, setProducts] = useState(initialProducts);
  const [showProductEntry, setShowProductEntry] = useState(true);

  const addProduct = (newProduct) => {
    const formattedProduct = {
      product: newProduct.fullName || 'Unnamed Product',
      sales: newProduct.stocksLevel ? Number(newProduct.stocksLevel) : 0,
      amount: newProduct.productPrice
        ? Number(newProduct.productPrice) * (newProduct.stocksLevel || 1)
        : 0,
      price: newProduct.productPrice ? Number(newProduct.productPrice) : 0,
      status: newProduct.consumptionStatus ? 'Published' : 'Draft',
      expiration: newProduct.expirationDate
        ? `${Math.ceil(
            (new Date(newProduct.expirationDate) - new Date()) /
              (1000 * 60 * 60 * 24)
          )} Days Left`
        : 'N/A',
    };

    setProducts((prev) => [...prev, formattedProduct]);

    setShowProductEntry(false);
  };

  const handleAddNewProduct = () => {
    setShowProductEntry(true);
  };

  const handleShowTable = () => {
    setShowProductEntry(false);
  };

  return (
    <Box
      sx={{
        display: 'flex',
        height: '100vh',
        backgroundColor: '#F6F6F6',
        overflow: 'hidden',
      }}
    >
      <Sidebar
        open={sidebarOpen}
        onClose={() => setSidebarOpen(!sidebarOpen)}
        isMobile={isMobile}
        drawerWidth={drawerWidth}
      />

      <Box
        sx={{
          flexGrow: 1,
          display: 'flex',
          flexDirection: 'column',
          width: '100%',
          marginLeft: {
            xs: 0,
            sm: sidebarOpen ? `${drawerWidth}px` : 0,
            md: 0,
          },
          transition: theme.transitions.create(['width'], {
            easing: theme.transitions.easing.sharp,
            duration: theme.transitions.duration.leavingScreen,
          }),
        }}
      >
        <KitchPlusAppBar
          onDrawerToggle={() => setSidebarOpen(!sidebarOpen)}
          sidebarOpen={sidebarOpen}
          isMobile={isMobile}
        />

        <Box
          sx={{
            flexGrow: 1,
            width: sidebarOpen ? 'calc(100% - 40px)' : '100%',
            pt: { xs: 2, sm: 3 },
            overflowY: 'auto',
            pl: { xs: 2, sm: 3 },
            pb: { xs: 2, sm: 4 },
            pr: { xs: 2, sm: 3 },
            scrollbarWidth: 'none',
            '&::-webkit-scrollbar': { display: 'none' },
            transition: theme.transitions.create(['margin'], {
              easing: theme.transitions.easing.sharp,
              duration: theme.transitions.duration.leavingScreen,
            }),
          }}
        >
          {showProductEntry ? (
            <ProductEntry onAdd={addProduct} onShowTable={handleShowTable} />
          ) : (
            <TableView data={products} onAddNewProduct={handleAddNewProduct} />
          )}
        </Box>
      </Box>
    </Box>
  );
};

export default Inventory;