import { useState, useCallback, useMemo, useEffect } from 'react'
import { Button, Grid, makeStyles, Typography } from '@material-ui/core';
import CustomDatePickerNew from '../../ui/CustomDatePickerNew';
import CustomSearchInput from '../../ui/CustomSearchInput';
import { format } from 'date-fns';
import GaugeCard from '../../cards/GaugeCard';
import { DataGrid, GridColDef } from '@material-ui/data-grid';
import { TOKEN_STORAGE_KEY } from '../../../Types/Constants';
import { WebStorage } from '../../../Utilities/WebStorage';

const useStyles = makeStyles((theme) => ({
  root: {
    width: '100%',
    overflowX: 'auto',
  },
  dataGrid: {
    minWidth: "fit-content",
    '& .MuiDataGrid-menuIconButton': {
      color: 'white',
    },
  },
  filterHeading: {
    marginTop: '40px'
  },
  apply: {
    padding: '12px',
  },
  clear: {
    backgroundColor: 'white',
    padding: '12px',
  },
  subhead: {
    color: '#6C757D',
    fontSize: '.85rem',
    paddingBottom: '1px',
    marginBottom: '10px',
  },
  heading: {
    color: '#223A59',
    fontSize: '1.5rem',
    fontWeight: 'bold',
    wordBreak: 'break-all'
  },
  flex: {
    display: 'flex',
    marginBottom: '20px',
    flexDirection: 'row',
    gap: '20px',
    alignItems: "flex-start",
  },
  gridContainer: {
    display: 'grid',
    gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
    gap: '20px',
    margin: '20px 0',
    textAlign: 'center',
  },
  card: {
    backgroundColor: 'white',
    padding: '20px',
    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
    borderRadius: '8px',
  },
  cardDiff: {
    backgroundColor: 'white',
    padding: '30px',
    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
    borderRadius: '8px',
  },
  columnFlex: {
    display: 'flex',
    flexDirection: 'column',
    gap: '10px',
    justifyContent: 'space-between',
  },
}));

const storage = new WebStorage();

const EmissionDashboard = () => {
  const classes = useStyles();
  const token = `Bearer ${storage.retrieve(TOKEN_STORAGE_KEY)}`
  const [fromDate, setFromDate] = useState<string | null>(null);
  const [toDate, setToDate] = useState<string | null>(null);
  const [searchJobRef, setSearchJobRef] = useState("");
  const [searchCarrier, setSearchCarrier] = useState("");
  const [loading, setLoading] = useState(false);
  const [emissionsData, setEmissionsData] = useState<any>(null);

  useEffect(() => {
    fetchEmissionsApi();
  }, []);
  const fetchEmissionsApi = async () => {
    setLoading(true);
    try {

      const formattedFromDate = fromDate ? format(new Date(fromDate), 'dd/MM/yyyy') : null;
      const formattedToDate = toDate ? format(new Date(toDate), 'dd/MM/yyyy') : null;

      const myHeaders = new Headers({
        Authorization: token,
      });

      const requestOptions: RequestInit = {
        method: 'GET',
        headers: myHeaders,
        redirect: 'follow',
      };

      const response = await fetch(
        `${process.env.REACT_APP_NEW_BASE_URL}/v3/get/job/emission?carrier=${searchCarrier}&from=${formattedFromDate}&to=${formattedToDate}&referenceNumber=${searchJobRef}`,
        requestOptions
      );

      if (!response.ok) {
        throw new Error(`Error: ${response.status} - ${response.statusText}`);
      }

      const result = await response.json();
      setEmissionsData(result);
    } catch (err) {
      setEmissionsData([]);
    } finally {
      setLoading(false);
    }
  };

  const handleApplyFilters = useCallback(() => {
    fetchEmissionsApi();
  }, [searchJobRef, searchCarrier, fromDate, toDate]);

  const handleClearFilters = useCallback(() => {
    setSearchJobRef('');
    setSearchCarrier('');
    setFromDate(null);
    setToDate(null);
    fetchEmissionsApi();
  }, []);

  const handleSearchJobRef = (query: string) => {
    setSearchJobRef(query);
  };

  const handleSearchCarrier = (query: string) => {
    setSearchCarrier(query);
  };

  const columns: GridColDef[] = useMemo(() => [
    { field: 'jobId', headerName: 'ID', align: 'center', headerAlign: 'center', flex: 1 },
    { field: 'reference', headerName: 'Reference ID', align: 'center', headerAlign: 'center', flex: 1 },
    { field: 'carrierName', headerName: 'Carrier', align: 'center', headerAlign: 'center', flex: 1 },
    { field: 'emissions', headerName: 'Total Emissions (kg CO2)', align: 'center', headerAlign: 'center', flex: 1 },
    { field: 'emissionsPerTonne', headerName: 'Emissions Per Tonne (kg CO2/Tonne)', align: 'center', headerAlign: 'center', flex: 1 },
  ], []);

  const rows = useMemo(() => {
    if (!emissionsData || !emissionsData?.emissions) return [];
    return emissionsData?.emissions?.map((item, index) => ({
      id: index,
      jobId: item.jobId,
      reference: item.reference,
      carrierName: item.carrierName || 'N/A',
      emissions: item.emissions,
      emissionsPerTonne: item.emissionsPerTonne,
    }));
  }, [emissionsData]);

  return (
    <>
      <Grid item md={3} container direction="column" alignItems="flex-start" style={{ lineHeight: '5px' }}>
        <Typography style={{ color: '#6C757D', fontSize: '.7rem', paddingBottom: '1px', marginBottom: '10px' }}>
          Emissions Management
        </Typography>

        <Typography variant="h5" style={{ color: '#223A59' }}>
          Emissions Tracking
        </Typography>
      </Grid>

      <h2 className={classes.filterHeading}>Filters</h2>

      <div className={classes.flex}>
        <CustomDatePickerNew
          selectedDate={fromDate}
          handleDateChange={(date: string) => setFromDate(date)}
          name="fromDate"
          placeholder="Select start date"
          fullWidth={false}
          fontWeight="bold"
        />
        <CustomDatePickerNew
          selectedDate={toDate}
          handleDateChange={(date: string) => setToDate(date)}
          name="toDate"
          placeholder="Select end date"
          minDate={fromDate}
          fullWidth={false}
          fontWeight="bold"
        />
        <CustomSearchInput label="Search by reference" onSearch={handleSearchJobRef} variant="outlined" value={searchJobRef} />
        <CustomSearchInput label="Search by carrier" onSearch={handleSearchCarrier} variant="outlined" value={searchCarrier} />
        <Button
          onClick={handleApplyFilters}
          color="primary"
          variant="contained"
          className={classes.apply}
        >
          Apply Filters
        </Button>
        <Button
          className={classes.clear}
          onClick={handleClearFilters}
          color="default"
          variant="contained">
          Clear Filters
        </Button>
      </div>

      <div className={classes.gridContainer}>
        <div className={classes.card}><GaugeCard title="Average Total Emissions" percent={emissionsData?.averageTotalEmissions} percentText="kg CO₂" isYellowBeautiful={true}/></div>
        <div className={classes.card}><GaugeCard title="Average Per Tonne Emissions" percent={emissionsData?.averagePerTonneEmissions} percentText="kg CO₂/Tonne"/></div>
        <div className={classes.columnFlex}>
          <div className={classes.cardDiff}><Typography className={classes.subhead}>Total Emissions</Typography><Typography className={classes.heading}>{emissionsData?.totalEmissions} kg CO<sub>2</sub></Typography></div>
          <div className={classes.cardDiff}><Typography className={classes.subhead}>Emissions Per Tonne</Typography><Typography className={classes.heading}>{emissionsData?.totalEmissionsPerTonne} kg CO<sub>2</sub>/Per Tonne</Typography></div>
        </div>
      </div>

      <div className={classes.root}>
        <DataGrid
          paginationMode="client"
          sortingMode="client"
          rows={rows}
          columns={columns}
          pagination
          disableSelectionOnClick
          className={classes.dataGrid}
          autoHeight
          loading={loading}
        />
      </div>
    </>
  )
}

export default EmissionDashboard