import React, { useState, useEffect } from "react";
import { MaterialReactTable } from "material-react-table";
import { useDispatch, useSelector } from "react-redux";
import { useTranslation } from "react-i18next";
import { Card, CardHeader, CardTitle, Alert } from "reactstrap";
import { getVMEmissionSummary } from "../../redux/actions/mainDataTables/index";
import { editNumbers } from "../../components/edit-numbers";

function MainDataTables() {
  const { t } = useTranslation();
  const dispatch = useDispatch();
  const mainDataTablesStore = useSelector((state) => state.mainDataTables);
  const [error, setError] = useState(null);

  useEffect(() => {
    try {
      // Fetch VM emission data
      dispatch(getVMEmissionSummary());
    } catch (err) {
      console.error('Error in MainDataTables:', err);
      setError(err.message);
    }
  }, [dispatch]);

  // Debug log for store data
  useEffect(() => {
    console.log('Current store data:', mainDataTablesStore);
  }, [mainDataTablesStore]);

  const columns = [
    {
      header: "VM ID",
      accessorKey: "vmId",
      Cell: ({ cell }) => <span>{cell.getValue() || "-"}</span>,
    },
    {
      header: "Data Center",
      accessorKey: "dataCenter",
      Cell: ({ cell }) => <span>{cell.getValue() || "-"}</span>,
    },
    {
      header: "Project",
      accessorKey: "project",
      Cell: ({ cell }) => <span>{cell.getValue() || "-"}</span>,
    },
    {
      header: "Physical Machine",
      accessorKey: "physicalMachine",
      Cell: ({ cell }) => <span>{cell.getValue() || "-"}</span>,
    },
    {
      header: "Virtual Machine",
      accessorKey: "vmName",
      Cell: ({ cell }) => <span>{cell.getValue() || "-"}</span>,
    },
    {
      header: "VM Power (W)",
      accessorKey: "vmPower",
      Cell: ({ cell }) => <span>{editNumbers(cell.getValue()) || "-"}</span>,
    },
    {
      header: "VM Status",
      accessorKey: "vmStatus",
      Cell: ({ cell }) => <span>{cell.getValue() || "-"}</span>,
    },
    {
      header: "Total Emissions",
      accessorKey: "totalEmission",
      Cell: ({ cell }) => <span>{editNumbers(cell.getValue()) || "-"}</span>,
    },
    {
      header: "CO2",
      accessorKey: "co2",
      Cell: ({ cell }) => <span>{editNumbers(cell.getValue()) || "-"}</span>,
    },
    {
      header: "CH4",
      accessorKey: "ch4",
      Cell: ({ cell }) => <span>{editNumbers(cell.getValue()) || "-"}</span>,
    },
    {
      header: "N2O",
      accessorKey: "n2o",
      Cell: ({ cell }) => <span>{editNumbers(cell.getValue()) || "-"}</span>,
    },
    {
      header: "Created Date",
      accessorKey: "createdDate",
      Cell: ({ cell }) => (
        <span>
          {cell.getValue() ? new Date(cell.getValue()).toLocaleString() : "-"}
        </span>
      ),
    },
  ];

  const tableData = mainDataTablesStore?.vmEmissionSummary || [];
  console.log('VM Emission data:', tableData);

  if (error) {
    return (
      <Alert color="danger" className="m-2">
        Error loading data: {error}
      </Alert>
    );
  }

  return (
    <div style={{ marginTop: "2%" }}>
      <Card>
        <CardHeader className="border-bottom">
          <CardTitle tag="h4">{t("Carbon Emission Data")}</CardTitle>
        </CardHeader>
        <MaterialReactTable
          columns={columns}
          data={tableData}
          enableColumnFilters={true}
          enableFilters={true}
          enableGlobalFilter={true}
          enablePagination={true}
          enableColumnResizing={true}
          enableStickyHeader={true}
          muiTableContainerProps={{ sx: { maxHeight: 'calc(100vh - 180px)' } }}
          muiTableProps={{
            sx: {
              tableLayout: 'auto',
            },
          }}
          initialState={{
            pagination: {
              pageSize: 100,
              pageIndex: 0
            },
            sorting: [
              { id: 'dataCenter', desc: false }
            ],
            density: 'compact'
          }}
          state={{
            isLoading: !mainDataTablesStore?.vmEmissionSummary
          }}
        />
      </Card>
    </div>
  );
}

export { MainDataTables };
export default MainDataTables;