import { Box, Button, Divider, FormControl, Grid, InputAdornment, InputLabel, makeStyles, MenuItem, Paper, Select, TextField, Typography } from '@material-ui/core';
import { useCallback, useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import CustomTable from '../../../Common/CustomTable/CustomTable';
import {
  IJobFilters,
  IJobInfo,
  IJobReportFilter,
} from '../../../../../../Application/DTOs/JobsDto/JobsDto.types';
import { useDispatch, useSelector } from 'react-redux';
import { setLoader } from '../../../../Redux/Loader/actions';
import { Job } from '../../../../Api/Job/Job';
import { toast } from 'react-toastify';
import { getColumns } from './profitabilityColumns';
import ViewEditJob from '../../../Dialogs/ViewEditJob/ViewEditJob';
import { GridFooterContainer, GridPagination, GridRowParams } from '@material-ui/data-grid';
import { AppState } from '../../../../Redux';
import { ALL, JOB_STATUS, MONTHS, TOKEN_STORAGE_KEY, USER_ROLES } from '../../../../Types/Constants';
import SearchIcon from '@material-ui/icons/Search';
import { WebStorage } from '../../../../Utilities/WebStorage';
import MultiSelectDropDownComp from '../../../../ComponentsV2/ui/MultiSelectDropDownComp';
import { DatePicker } from '@material-ui/pickers';
import { Customer } from '../../../../Api/Customer/Customer';
import { debounce } from 'lodash';
import { PRIMARY_COLOR } from '../../../../Styles/colors';
import { display } from 'html2canvas/dist/types/css/property-descriptors/display';
const jobApi = new Job();
const storage = new WebStorage();

const BOX_HEIGHT = 45
const labelSize = '0.8rem'

const useStyles = makeStyles(() => ({
  formControl: {
    minWidth: '100%',
  },
  gap: {
    marginTop: 20,
  },
  selectLabel: {
    fontWeight: 'bold',
    fontSize: "1.2rem"
  },
  textArea: {
    width: '100%',
  },
  btnCreate: {
    backgroundColor: 'green',
    color: 'white',
    '&:hover': {
      backgroundColor: 'green',
    },
  },
  gridList: {
    width: 500,
    height: 450,
  },

  MuiSelect: {
    backgroundColor: 'transparent',
    fontSize: labelSize,
},
mapBox: {
    width: '100%',
    height: `${BOX_HEIGHT}vh`,
    borderRadius: '15px'
},
pies: {
    borderRadius: '13px',
    backgroundColor: 'white',

},

graphBox: {
    width: '100%',
    height: `${BOX_HEIGHT}vh`,
},
inbox: {
    display: 'flex',
    flexDirection: 'row'
},
transparentInput: {
    backgroundColor: 'transparent',
    '& .MuiInputBase-root': {
        backgroundColor: 'transparent',
        fontSize: labelSize,
    },
    '& .MuiOutlinedInput-root': {
        backgroundColor: 'transparent',
        fontSize: labelSize,
    }
},
select: {
    '& .MuiSelect-root': {
        backgroundColor: '#F0ECEC',
        fontSize: labelSize,
    },
},
jobGrid: {
    width: '100%',
    height: `${BOX_HEIGHT}vh`,
    borderRadius: '13px !important',
    backgroundColor: 'white',
    '&::-webkit-scrollbar': {
        width: '12px',
    },
    '&::-webkit-scrollbar-thumb': {
        backgroundColor: '#888',
        borderRadius: '10px',
    },
    '&::-webkit-scrollbar-thumb:hover': {
        backgroundColor: '#555',
    },
    '&::-webkit-scrollbar-track': {
        backgroundColor: '#f1f1f1',
        borderRadius: '10px',
    },
    scrollbarWidth: 'thin',
    scrollbarColor: '#888 #f1f1f1',
},
label: {
    margin: '0px',
    fontSize: '0.75rem',
    fontWeight: 600,
    letterSpacing: '0.5px',
    lineHeight: '2.5',
    textTransform: 'uppercase',
    fontFamily: `Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"`,
    color: ' rgb(108, 115, 127)'
},
count: {
    fontWeight: 'bold',
    margin: '30px 0',
    fontSize: '2rem',
    lineHeight: '1.2'
},
breadCrumbs: {
    float: 'right'
},
active: {
    fontWeight: 'bold'
},
footer: {
  display: 'flex',
  padding: '10px',
  backgroundColor: PRIMARY_COLOR + '15',
  fontWeight: 'bold',
  fontSize: '1rem',
  justifyContent: "end !important", 
  color: 'green !important',
},
profitText: {
  marginLeft: "18px",
  marginRight: "20px",
},
}));

const {
    ADMIN_USER,
    SUPER_ADMIN,
    WAREHOUSE, CUSTOMER
} = USER_ROLES

const customerApi = new Customer();
export default function Profitability() {
  const [t, i18n] = useTranslation('JobReport');
  const [customersData, setCustomersData] = useState<any[]>([]);
  const user = useSelector((state: AppState) => state.user.response);
  const classes = useStyles();
  const company = useSelector((state: AppState) => state.company);
  const isUserAdmin = user?.type === ADMIN_USER;
  const isSuperAdmin = user?.type === SUPER_ADMIN;
  const adminPrivilege = isSuperAdmin || isUserAdmin
  const [companyId, setCompanyId] = useState<any>('');
  const [selectedCustomer, setSelectedCustomer] = useState<any>('');
  const [customerOptions, setCustomerOptions] = useState<any[]>([]);
  const [startDate, setStartDate] = useState<Date | string | null>(null);
  const [endDate, setEndDate] = useState<Date | string | null>(null);



const [totalProfit, setTotalProfit] = useState(0);





  const isCustomer = [CUSTOMER].includes(user?.type);

  const [customer, setCustomer] = useState<any>()
  const userData = useSelector((state: AppState) => state.user.response);
  const dispatch = useDispatch();
  // const user = useSelector((state: AppState) => state.user);
  const [isViewEditJobDialogOpen, setIsViewEditJobDialogOpen] = useState(false);
  const [filterState] = useState<IJobReportFilter>({
    job_status: [JOB_STATUS.ARCHIVE],
    // is_expired: true,
  });
  const [jobs, setJobs] = useState<any>([]);
  const [selectedMonth, setSelectedMonth] = useState((new Date()).getMonth())
  const [selectedYear, setSelectedYear] = useState((new Date()).getFullYear())
  const [selectedJob, setSelectedJob] = useState<IJobInfo | null>(null);
  const [searchByReference, setSearchByReference] = useState('');
  const [filters, setFilters] = useState<any>({
    jobType: ALL,
    vehicleType: ALL,
    // access_type: access_type,
    companyId: companyId ?? '',
    customerId: selectedCustomer ?? '',
    
    reference: searchByReference,
    startDate: startDate,
    endDate: endDate
  })
  

  const monthsOption = useMemo(() =>
    Object.keys(MONTHS).map((month, i) => (
      <MenuItem key={i} value={i}>
        {month}
      </MenuItem>
    )),
    [MONTHS]
  );
  const currentYear = new Date().getFullYear();
  const YEARS = Array.from({ length: currentYear - 2014 }, (_, index) => currentYear - index);

  const yearsOption = useMemo(() =>
    YEARS.map((i) => (
      <MenuItem key={i} value={i}>
        {i}
      </MenuItem>
    )),
    [YEARS]
  );



  const columns = getColumns(t, user as any);

  const handleOnViewEditJobDialogClose = useCallback(() => {
    setIsViewEditJobDialogOpen(false);
    setSelectedJob(null);
  }, []);

  const onRowClick = useCallback((params: GridRowParams) => {
    const job: IJobInfo = params.row as IJobInfo;

    setSelectedJob(job);
    setIsViewEditJobDialogOpen(true);
  }, []);
  

  const fetchCustomerApi = async (compId: string | number) => {
    try {
      const myHeaders = new Headers({
        Authorization: `Bearer ${storage.retrieve(TOKEN_STORAGE_KEY)}`,
      });

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

      const response = await fetch(process.env.REACT_APP_NEW_BASE_URL + `/v1/customer/list?offset=0&limit=10&company_id=${userData?.company?.id}&is_admin=true&active=false`,
        requestOptions
      );

      const result = await response.json();
      setCustomersData(result.rows)
    } catch (err) {
      console.error('Fetch error:', err);
    }
  };

  useEffect(() => {
    fetchCustomerApi(userData?.company?.id);
  }, []);
  const getJobCompletion = (
    companyId: any | number,
    startDate: string | any | null,
    endDate: string | any | null,
    customerId: number | null
) => {
  dispatch(setLoader(true));
    jobApi.getJobProfitable(companyId ?? '', 5, 0, startDate, endDate, customerId ?? '')
        .then((response) => {
           
setTotalProfit(response?.data?.totalProfit)
setJobs(response?.data?.jobs);
          dispatch(setLoader(false));
           
        })
        .catch((err: any) => {
          dispatch(setLoader(false));
            console.error('Error fetching grouped pallets:', err);
        });
};

    const debouncedFilter = useCallback(
          debounce(() => {
              
              getJobCompletion(companyId, startDate, endDate, selectedCustomer)
            
          }, 500),
          [startDate, endDate, companyId, selectedCustomer]
      );
  
      useEffect(() => {
          if (!adminPrivilege) {
              setCompanyId(user.company.id)
  
          }
          if (isCustomer) {
              setCustomerOptions([{ 'company_name': user.company.companyName as any, user: { company_id: user.company.id } }])
              setSelectedCustomer(user.company.id)
          }
      }, [dispatch, t])
  
      useEffect(() => {
          debouncedFilter();
      }, [startDate, endDate, companyId, selectedCustomer, debouncedFilter]);
  


  const clearFilters = () => {
    if (adminPrivilege) {
        setCompanyId('');
        setSelectedCustomer('');
    }

    setStartDate(null);
    setEndDate(null);
};


let companyListOptions = useMemo(() =>
  company.list.map((company, i) => (
      <MenuItem key={i} value={company.id}>
          {company.companyName}
      </MenuItem>
  )),
  [company.list]
);

    useEffect(() => {
        if (companyId) {
            getCustomerPerCompany(companyId)
        }
    }, [companyId])
    const getCustomerPerCompany = (search_id: any) => {
        customerApi.getAll(0, 99999, isUserAdmin, undefined, search_id, true)
            .then((response) => {
                const rows = response.data.rows;
                const count = response.data.count;
                setCustomerOptions(rows)
                return { jobs: rows, count }
            })
            .catch((err: any) => {
                toast.error(t('error_getting_customers'));
                return { jobs: [], count: 0 }

            });
    }


    function CustomFooter() {
      const classes = useStyles();
      return (
        <>
        <GridFooterContainer className={classes.footer}>
          Total Profit :
          <span
            className={classes.profitText}
            style={{ color: totalProfit > 0 ? "green" : "red" }}
          >
            {`$ ${totalProfit}` }
          </span>
          
        </GridFooterContainer>
        <GridPagination />
        </>
      );
    }

  return (
    <>
      {/* <ViewEditJob
        hideActionButtons
        selectedJob={selectedJob}
        type={selectedJob?.job_classification}
        open={isViewEditJobDialogOpen}
        handleClose={handleOnViewEditJobDialogClose}
      /> */}
      <Grid
        direction="column"
        container
        justifyContent="space-between"
        alignItems="stretch"
        spacing={2}
      >
        <Grid item md={3}>
          <Typography>{t('profitability_report')}</Typography>
        </Grid>


        <Grid item md={12}>
          <Grid container spacing={2} >

          <Grid item
                    container
                    direction="row"
                    
                      
                    style={{ paddingBottom: '20px', gap: '10px' }}
                >

                  

                    <Grid item xs={6} sm={6} md={2}>
                        <DatePicker
                            className={classes.MuiSelect}
                            label={t('start_date')}
                            value={startDate}
                            onChange={setStartDate}
                            inputFormat="MM/dd/yyyy"
                            disableFuture
                            renderInput={(props) => (
                                <TextField
                                    {...props}
                                    fullWidth
                                    InputLabelProps={{ shrink: true ,
                                      style: { fontSize: "1.2rem", fontWeight: "bold" } // Font Size Increase & Bold

                                    }}
                                    helperText={null}
                                    className={classes.transparentInput}
                                />
                            )}
                        />
                    </Grid>

                
                    <Grid item xs={6} sm={6} md={2}>
                        <DatePicker
                            className={classes.MuiSelect}
                            label={t('end_date')}
                            value={endDate}
                            onChange={setEndDate}
                            inputFormat="MM/dd/yyyy"
                            renderInput={(props) => (
                                <TextField
                                    {...props}
                                    fullWidth
                                    InputLabelProps={{ shrink: true,
                                      style: { fontSize: "1.2rem", fontWeight: "bold" }
                                     }}
                                    helperText={null}
                                    className={classes.transparentInput}
                                />
                            )}
                        />
                    </Grid>

                    
                        <Grid item xs={12} sm={12} md={2}>
                            <FormControl variant="standard" fullWidth>
                                <InputLabel className={classes.selectLabel} shrink>
                                    {t('select_company') + '*'}
                                </InputLabel>
                                <Select
                                    className={classes.MuiSelect}
                                    value={companyId}
                                    onChange={(e) => {
                                        const companyId = e.target.value;
                                        setCompanyId(companyId);
                                    }}
                                >
                                    <MenuItem key="placeholder" value="" disabled>
                                        Select an option
                                    </MenuItem>
                                    {companyListOptions}
                                </Select>
                            </FormControl>
                        </Grid>
                    

                    {/* Customer Selection */}
                  < Grid item xs={12} sm={12} md={2}>
                        <FormControl variant="standard" fullWidth>
                            <InputLabel className={classes.selectLabel} shrink>
                                {t('select_customer')}
                            </InputLabel>
                            <Select
                                className={classes.MuiSelect}
                                value={selectedCustomer}
                                onChange={(e) => {
                                  const companySelect = e.target.value;
                                  setSelectedCustomer(companySelect)
                                }}
                            >
                                <MenuItem key="placeholder" value="" disabled>
                                    Select an option
                                </MenuItem>
                                {customerOptions.map((customer, i) => {
                                
                                  return (
                                    <MenuItem key={i} value={customer['user']['id']}>
                                        {customer['company_name']}
                                    </MenuItem>
                                )
                                })}
                            </Select>
                        </FormControl>
                    </Grid>
                    {/* Customer Selection */}
                    <Grid item xs={12} sm={12} md={2}>
                        <Button
                            fullWidth
                            variant="contained"
                            color="primary"
                            onClick={clearFilters}
                        >
                            Clear Filters
                        </Button>
                    </Grid>
                </Grid>
            
            <Grid item md={12}>
              <CustomTable
                columns={columns}
                rows={jobs ?? []}
                onRowClick={onRowClick}
                CustomFooter={CustomFooter}
              />
             
            </Grid>
          </Grid>
        </Grid>
      </Grid>
    </>
  );
}