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 { getMainDataTablesWithPaginate } 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(() => {
    const fetchData = async () => {
      try {
        setLoading(true);
        await dispatch(getMainDataTablesWithPaginate());
      } catch (err) {
        console.error('Error in MainDataTables:', err);
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };
    fetchData();
  }, [dispatch]);

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

  const [loading, setLoading] = useState(true);

  const columns = [
    {
      header: t("ID"),
      accessorKey: "id",
      Cell: ({ cell }) => <span>{cell.getValue() || "-"}</span>,
    },
    {
      header: t("Year"),
      accessorKey: "year",
      Cell: ({ cell }) => <span>{cell.getValue() || "-"}</span>,
    },
    {
      header: t("Sector"),
      accessorKey: "sector",
      Cell: ({ cell, row }) => <span>{row.original?.sector?.tag || "-"}</span>,
    },
    {
      header: t("Sub Sector"),
      accessorKey: "subSector",
      Cell: ({ cell, row }) => <span>{row.original?.subSector?.tag || "-"}</span>,
    },
    {
      header: t("Activity Sub Unit"),
      accessorKey: "activitySubUnit",
      Cell: ({ cell, row }) => <span>{row.original?.activitySubUnit?.tag || "-"}</span>,
    },
    {
      header: t("Emission Source"),
      accessorKey: "emissionSource",
      Cell: ({ cell, row }) => <span>{row.original?.emissionSource?.tag || "-"}</span>,
    },
    {
      header: t("Emission Scope"),
      accessorKey: "emissionScope",
      Cell: ({ cell, row }) => <span>{row.original?.emissionScope?.tag || "-"}</span>,
    },
    {
      header: t("Total Emission"),
      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: t("Created Date"),
      accessorKey: "createdDate",
      Cell: ({ cell }) => (
        <span>
          {cell.getValue() ? new Date(cell.getValue()).toLocaleString() : "-"}
        </span>
      ),
      sortable: true,
    },
  ];

  const tableData = mainDataTablesStore?.mainDataTablesWithPaginate?.content || [];
  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("Raw 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: loading,
            showProgressBars: true,
            showSkeletons: true,
          }}
        />
      </Card>
    </div>
  );
}

export { MainDataTables };
export default MainDataTables;