RestaurantDash/src/components/Home/Analytics&Reporting/TopSellingProduct.js

import React, { useState } from 'react';
import { useTheme } from '@mui/material/styles';
import { useMediaQuery } from '@mui/material';
import {
  Box,
  Typography,
  Paper,
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableRow,
  Chip,
  Pagination,
  Button,
  Avatar,
  TableContainer
} from '@mui/material';
import TuneIcon from '@mui/icons-material/Tune';
import { green } from '@mui/material/colors';
import AssignmentIcon from '@mui/icons-material/Assignment';

const TopSellingProduct = ({ data = [] }) => {
  const theme = useTheme();
  const [currentPage, setCurrentPage] = useState(1);
  const itemsPerPage = 5;

  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));

  const pageCount = Math.ceil(data.length / itemsPerPage);
  const paginatedData = data.slice(
    (currentPage - 1) * itemsPerPage,
    currentPage * itemsPerPage
  );

  return (
    <Paper sx={{
      borderRadius: 2,
      width: '100%',
      maxWidth: { xs: '100%', md: '115vh' },
      height: { xs: 'auto', md: '100vh' },
      display: 'flex',
      flexDirection: 'column',
      overflow: 'hidden',
      boxShadow: theme.shadows[1]
    }}>
      {/* العنوان وزر الفلاتر */}
      <Box
        display="flex"
        justifyContent="space-between"
        alignItems="center"
        p={{ xs: 1, sm: 2 }}
        sx={{ backgroundColor: theme.palette.background.paper }}
      >
        <Typography variant="h6" sx={{ fontSize: { xs: '1rem', sm: '1.25rem' } }}>
          Top Selling Product
        </Typography>
        <Button
          sx={{
            fontSize: { xs: '12px', sm: '16px' },
            fontWeight: 500,
            border: '1px solid #e0e0e0',
            color: '#667085',
            textTransform: 'none',
            p: { xs: '4px 8px', sm: '6px 16px' }
          }}
          startIcon={<TuneIcon fontSize={isMobile ? 'small' : 'medium'} />}
        >
          {isMobile ? '' : 'Filters'}
        </Button>
      </Box>

      {/* جدول البيانات */}
      <TableContainer
        sx={{
          flexGrow: 1,
          overflowX: 'auto',
          maxHeight: { xs: '60vh', md: 'calc(100vh - 160px)' },
          '&::-webkit-scrollbar': { height: 4 },
        }}
      >
        <Table
          size={isMobile ? 'small' : 'medium'}
          sx={{
            minWidth: 650,
            '& .MuiTableCell-root': {
              borderBottom: '1px solid #e0e0e0',
              py: { xs: 0.5, sm: 1.5 },
              px: { xs: 0.5, sm: 2 },
            },
            '& thead .MuiTableCell-root': {
              borderBottom: 'none',
              fontWeight: 600,
              fontSize: { xs: '11px', sm: '14px' },
              px: { xs: 0.5, sm: 2 },
            },
          }}
        >
          <TableHead sx={{ backgroundColor: '#F0F1F3' }}>
            <TableRow sx={{ height: { xs: '6vh', sm: '10vh' } }}>
              <TableCell>Product</TableCell>
              {!isMobile && <TableCell>Sales</TableCell>}
              <TableCell>Amount</TableCell>
              {!isMobile && <TableCell>Price</TableCell>}
              <TableCell>Status</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {paginatedData.map((row, i) => (
              <TableRow key={i} sx={{ height: { xs: '8vh', sm: '13vh' } }}>
                <TableCell>
                  <Box sx={{ display: 'flex', alignItems: 'center', gap: { xs: 1, sm: 2 } }}>
                    <Avatar
                      sx={{
                        bgcolor: green[50],
                        width: { xs: 28, sm: 40 },
                        height: { xs: 28, sm: 40 }
                      }}
                      variant="rounded"
                    >
                      <AssignmentIcon fontSize={isMobile ? 'small' : 'medium'} />
                    </Avatar>
                    <Box sx={{
                      fontSize: { xs: '11px', sm: '14px' },
                      whiteSpace: 'nowrap',
                      overflow: 'hidden',
                      textOverflow: 'ellipsis',
                      maxWidth: { xs: '80px', sm: '200px' }
                    }}>
                      {row.product}
                    </Box>
                  </Box>
                </TableCell>
                {!isMobile && <TableCell sx={{ fontSize: { xs: '11px', sm: '14px' } }}>{row.sales}</TableCell>}
                <TableCell sx={{ fontSize: { xs: '11px', sm: '14px' } }}>${row.amount.toLocaleString()}</TableCell>
                {!isMobile && <TableCell sx={{ fontSize: { xs: '11px', sm: '14px' } }}>${row.price}</TableCell>}
                <TableCell>
                  <Chip
                    label={isMobile ? row.status.substring(0, 3) : row.status}
                    size={isMobile ? 'small' : 'medium'}
                    sx={{
                      fontSize: { xs: '10px', sm: '14px' },
                      fontWeight: 600,
                      backgroundColor:
                        row.status === 'Published' ? '#E7F4EE' :
                          row.status === 'Low Stock' ? '#FDF1E8' :
                            row.status === 'Out of Stock' ? '#FFCDD2' : '#E0E0E0',
                      color:
                        row.status === 'Published' ? '#0D894F' :
                          row.status === 'Low Stock' ? '#E46A11' :
                            row.status === 'Out of Stock' ? '#C62828' : '#424242',
                      minWidth: { xs: '50px', sm: '100px' }
                    }}
                  />
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>

      {/* التذييل مع الترقيم */}
      <Box
        display="flex"
        justifyContent="space-between"
        alignItems="center"
        p={{ xs: 1, sm: 2 }}
        sx={{
          position: 'sticky',
          bottom: 0,
          backgroundColor: theme.palette.background.paper,
          borderTop: '1px solid #f0f0f0',
          zIndex: 1
        }}
      >
        <Typography
          variant="body2"
          color="text.secondary"
          sx={{
            fontSize: { xs: '11px', sm: '14px' },
            whiteSpace: 'nowrap'
          }}
        >
          Showing {(currentPage - 1) * itemsPerPage + 1} to {Math.min(currentPage * itemsPerPage, data.length)} of {data.length}
        </Typography>

        <Pagination
          count={pageCount}
          page={currentPage}
          onChange={(event, value) => setCurrentPage(value)}
          size={isMobile ? 'small' : 'medium'}
          sx={{
            '& .MuiPaginationItem-root': {
              fontSize: { xs: '12px', sm: '14px' },
              minWidth: { xs: 24, sm: 32 },
              height: { xs: 24, sm: 32 },
              backgroundColor: '#FFECE0',
              color: theme.palette.primary.main,
              borderRadius: '8px',
              '&.Mui-selected': {
                backgroundColor: theme.palette.primary.main,
                color: '#fff',
              },
              '&:hover': {
                backgroundColor: '#FFD6B5',
              },
            },
          }}
        />
      </Box>
    </Paper>
  );
};

export default TopSellingProduct;