// Dashboard.js
import React from 'react';
import { Box, Flex, SimpleGrid, Text } from '@chakra-ui/react';
import LastRecordsTable from '../../components/dashboard/LastRecordsTable';
import RecentJobsTable from '../../components/dashboard/RecentJobTable';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';

const Dashboard = () => {
  const data = [
    { name: 'Jan', uv: 400, pv: 2400, amt: 2400 },
    { name: 'Feb', uv: 300, pv: 1398, amt: 2210 },
    { name: 'mar', uv: 250, pv: 1000, amt: 2210 },
    { name: 'april', uv: 200, pv: 800, amt: 2000 },
    // ... more data ...
  ];
  // Define fake order and pagination props for demonstration
  const order = {
    id: 'dateTime',
    desc: true,
    onOrderBy: (sorting) => console.log(sorting),
  };

  const pagination = {
    currentPage: 1,
    pageSize: 10,
    total: 50,
    onPaginationChange: (page) => console.log(page),
  };

  // Fake loading state
  const loading = false;

  return (
    <Flex direction="column" h="87vh">
      {/* Top Section */}
      <Flex w="full" h="42vh" marginBottom="1vh">
        {/* Boxes Section - 60% Width */}
        <SimpleGrid columns={2} spacing={4} w="60%" pr={4}>
          {/* Box 1 */}
          <Box borderWidth="1px" borderRadius="lg" p={4}>
            <Text fontSize="lg">21 jobs are running</Text>
          </Box>
          {/* Box 2 */}
          <Box borderWidth="1px" borderRadius="lg" p={4}>
            <Text fontSize="lg">12 users are working</Text>
          </Box>
          {/* Box 3 */}
          <Box borderWidth="1px" borderRadius="lg" p={4}>
            <Text fontSize="lg">5 jobs running fail</Text>
          </Box>
          {/* Box 4 */}
          <Box borderWidth="1px" borderRadius="lg" p={4}>
            <Text fontSize="lg">7 users nonworking</Text>
          </Box>
        </SimpleGrid>

        {/* Last Records Section - 40% Width */}
        <Box w="40%" borderWidth="1px" borderRadius="lg" overflowY="auto">
          <Text fontSize="xl" p={4} fontWeight="semibold">
            Last Records
          </Text>
          <LastRecordsTable order={order} loading={loading} pagination={pagination} />
        </Box>
      </Flex>

      {/* Bottom Section */}
      <Flex w="full" flex="1">
        <SimpleGrid columns={1} spacing={4} w="60%" pr={4}>
          <Box borderWidth="1px" borderRadius="lg" p={4}>
            <Text fontSize="lg">Bar Chart Demo</Text>
            {/* Bar Chart Component */}
            <BarChart width={900} height={400} data={data}>
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis dataKey="name" />
              <YAxis />
              <Tooltip />
              <Legend />
              <Bar dataKey="pv" fill="#8884d8" />
              <Bar dataKey="uv" fill="#82ca9d" />
            </BarChart>
          </Box>
        </SimpleGrid>

        {/* Recent Jobs Table - 40% Width */}
        <Box w="40%" borderWidth="1px" borderRadius="lg" overflowY="auto">
          <Text fontSize="xl" p={4} fontWeight="semibold">
            Recent Jobs
          </Text>
          <RecentJobsTable order={order} loading={loading} pagination={pagination} />
        </Box>
      </Flex>
    </Flex>
  );
};

export default Dashboard;
