import { Grid, makeStyles, Button, TextField, FormControl, InputLabel, Select, MenuItem, CircularProgress } from '@material-ui/core'
import { DatePicker } from '@material-ui/pickers';
import { useTranslation } from 'react-i18next'
import { useCallback, useEffect, useState, useMemo } from 'react'
import { useSelector } from 'react-redux'
import { TOKEN_STORAGE_KEY, USER_ROLES } from '../../../Types/Constants'
import { toast } from 'react-toastify'
import { AppState } from '../../../Redux'
import DoughnutChart from './GraphsRebuild/Doughnut'
import { Customer } from '../../../Api/Customer/Customer'
import SectionHeader from '../../Common/SectionHeader/SectionHeader'
import PercentCard from './GraphsRebuild/PercentCard'
import debounce from 'lodash/debounce';
import { WebStorage } from '../../../Utilities/WebStorage';
import MultiAxisLineChart from './GraphsRebuild/MultiAxisLineChart';
import TopMovementTypeItems from './TopMovementTypeItems';
import { format } from 'date-fns';
import GoogleMapNew from './GraphsRebuild/GoogleMapNew';

const labelSize = '0.8rem'
const customerApi = new Customer()
const storage = new WebStorage();
const { ADMIN_USER, SUPER_ADMIN, WAREHOUSE, CUSTOMER,ADMIN_OPERATIONS,CARRIER} = USER_ROLES

const useStyles = makeStyles(() => ({
    MuiSelect: {
        backgroundColor: 'transparent',
        fontSize: labelSize,
    },
    formControl: {
        minWidth: '100%',
    },
    selectLabel: {
        fontWeight: 'bold',
        backgroundColor: 'transparent !important',
        fontSize: labelSize,
    },

    transparentInput: {
        backgroundColor: 'transparent',
        '& .MuiInputBase-root': {
            backgroundColor: 'transparent',
            fontSize: labelSize,
        },
        '& .MuiOutlinedInput-root': {
            backgroundColor: 'transparent',
            fontSize: labelSize,
        }
    },
    loader:{    
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        height: '100%',
        width: '100%',
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
    }
}))

function Dashboard() {
    const [t] = useTranslation(['Columns'])
    const token = `Bearer ${storage.retrieve(TOKEN_STORAGE_KEY)}`
    const classes = useStyles()
    const user = useSelector((state: AppState) => state.user.response);
    const company = useSelector((state: AppState) => state.company);
    const isUserAdmin = user?.type === ADMIN_USER;
    const isSuperAdmin = user?.type === SUPER_ADMIN;
    const isAdminOperations = user?.type === ADMIN_OPERATIONS
    const adminPrivilege = isSuperAdmin || isUserAdmin || isAdminOperations

    //filtering
    const [companyId, setCompanyId] = useState<any>('');
    const [customerId, setCustomerId] = useState<any>('');
    const [customerOptions, setCustomerOptions] = useState<any[]>([]);
    const [startDate, setStartDate] = useState<Date | string | null>(null);
    const [endDate, setEndDate] = useState<Date | string | null>(null);
    const hideFilters = [CUSTOMER, WAREHOUSE,CARRIER].includes(user?.type);
    const [dashboardData, setDashboardData] = useState<any>(null)
    const [loading, setLoading] = useState<boolean>(false)
    const [searchQuery, setSearchQuery] = useState<string | null>(null);


    useEffect(() => {
        if (user?.type === "COMPANY" || user?.type === "COMPANY USER") {
            setCompanyId(user.company.id);
            getCustomerPerCompany(user.company.id);
        } else if (user?.type === "CUSTOMER") {
            setCompanyId(user.company.id);
            getCustomerPerCompany(user.company.id);
            setCustomerId(user.customer.id);
        } 
    }, [user]);

    useEffect(() => {
        debouncedFilter();
    }, [startDate, endDate, companyId, customerId, searchQuery]);


    const getDashboardAPI = async (
        companyId: any | number,
        startDate: string | any | null,
        endDate: string | any | null,
        customerId: number | null
    ) => {
        setLoading(true);
        try {

            const formattedFromDate = startDate ? format(new Date(startDate), 'dd/MM/yyyy') : null;
            const formattedToDate = endDate ? format(new Date(endDate), '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/dashboard?companyId=${companyId}&from=${formattedFromDate}&to=${formattedToDate}&customerId=${customerId}&movementType=${searchQuery}`,
                requestOptions
            );

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

            const result = await response.json();
            setDashboardData(result)
        } catch (err) {
            console.log(err);
        } finally {
            setLoading(false);
        }
    };

    const debouncedFilter = useCallback(
        debounce(() => {
            const companyFilterId = companyId
            getDashboardAPI(companyFilterId, startDate, endDate, customerId)
        }, 500),
        [startDate, endDate, companyId, customerId, searchQuery]
    );

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

    const customerListOptions = useMemo(() =>
        customerOptions.map((customer) => (
            <MenuItem key={customer.id} value={customer.id}>
                {`${customer.first_name} ${customer.last_name}`}
            </MenuItem>
        )),
        [customerOptions]
    );

    const getCustomerPerCompany = (search_id: any) => {
        customerApi.getAll(0, 99999, isUserAdmin, undefined, search_id, false)
            .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 }

            });
    }

    const clearFilters = () => {
        if (adminPrivilege) {
            setCompanyId('');
        }
        setCustomerId('');
        setSearchQuery(null)
        setStartDate(null);
        setEndDate(null);
    };

    if (loading && !dashboardData) return <div className={classes.loader}><CircularProgress /></div>;

    const { pickupJob, deliveryJob } = dashboardData?.topCompany || {}

    const topPickupData = [
        {
            movementType: 'Container',
            companies: pickupJob?.containers || [],
        },
        {
            movementType: 'Loose Cargo',
            companies: pickupJob?.loose_cargo || [],
        },
        {
            movementType: 'Full Truck Load',
            companies: pickupJob?.full_truck_load || [],
        },
    ];

    const topDeliveryData = [
        {
            movementType: 'Container',
            companies: deliveryJob?.containers || [],
        },
        {
            movementType: 'Loose Cargo',
            companies: deliveryJob?.loose_cargo || [],
        },
        {
            movementType: 'Full Truck Load',
            companies: deliveryJob?.full_truck_load || [],
        },
    ];

    return (
        <>
            <Grid
                container
                spacing={2}
                direction='row'
                xs={12} sm={12} md={12}
            >
                <Grid item xs={12} sm={12} md={12}>
                    <SectionHeader title={"Dashboard"} />
                </Grid>

                <Grid
                    container
                    direction="row"
                    alignItems="center"
                    spacing={2}
                    style={{ paddingBottom: '20px' }}
                >

                    <Grid item xs={3} sm={12} md={2}>
                    </Grid>

                    {!adminPrivilege && (
                        <Grid item xs={false} sm={false} md={2}></Grid>
                    )}

                    {hideFilters && (< Grid item xs={12} sm={12} md={2}> </Grid>)}

                    <Grid item xs={6} sm={6} md={2}>
                        <DatePicker
                            className={classes.MuiSelect}
                            label={t('start_date')}
                            value={startDate}
                            onChange={setStartDate}
                            inputFormat="dd/MM/yyyy"
                            disableFuture
                            renderInput={(props) => (
                                <TextField
                                    {...props}
                                    fullWidth
                                    InputLabelProps={{ shrink: true }}
                                    helperText={null}
                                    className={classes.transparentInput}
                                />
                            )}
                        />
                    </Grid>

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

                    {/* Company Selection (only for admins) */}
                    {(adminPrivilege && !hideFilters) && (
                        <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) => { setCompanyId(e.target.value); getCustomerPerCompany(e.target.value) }}
                                    MenuProps={{
                                        disableScrollLock: true,
                                      }}
                                >
                                    <MenuItem key="placeholder" value="" disabled>
                                        Select an option
                                    </MenuItem>
                                    {companyListOptions}
                                </Select>
                            </FormControl>
                        </Grid>
                    )}

                    {/* Customer Selection */}
                    {!hideFilters && (< 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={customerId}
                                onChange={(e) => setCustomerId(e.target.value)}
                                MenuProps={{
                                    disableScrollLock: true,
                                  }}
                            >
                                <MenuItem key="placeholder" value="" disabled>
                                    Select an option
                                </MenuItem>
                                {customerListOptions}
                            </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 container spacing={1}>
                    {/* Column 1 */}
                    <Grid item xs={12} md={6}>
                        <Grid container direction="column" spacing={1}>
                            <Grid item style={{ height: '50vh' }}>
                                <GoogleMapNew
                                    mapData={dashboardData?.mapData || []}
                                    setSearchQuery={setSearchQuery}
                                    searchQuery={searchQuery}
                                />
                            </Grid>

                        </Grid>
                    </Grid>

                    {/* Column 2 */}
                    <Grid item xs={12} md={6}>
                        <Grid container spacing={1}>
                            {/* Percentage Cards */}
                            <Grid item container spacing={1}>
                                <Grid item xs={4} md={4}>
                                    <PercentCard label="Delivered in Full and On-time" number={dashboardData?.onTimeDeliverJob || 0} />
                                </Grid>
                                <Grid item xs={4} md={4}>
                                    <PercentCard label="Jobs Completed" showPercentage={false} number={dashboardData?.totalCompletedJobs || 0} />
                                </Grid>
                                <Grid item xs={4} md={4}>
                                    <PercentCard label="Interstate Orders" number={dashboardData?.interStateJob || 0} />
                                </Grid>
                            </Grid>

                            {/* DoughnutChart and MultiAxisLineChart */}
                            <Grid item container spacing={1}>
                                <Grid item xs={12} md={4}>
                                    <DoughnutChart
                                        title={'Jobs Per State'}
                                        pieLabels={dashboardData?.jobsPerState ? Object?.keys(dashboardData?.jobsPerState) : []}
                                        pieValues={dashboardData?.jobsPerState ? Object?.values(dashboardData?.jobsPerState) : []}
                                    />
                                </Grid>
                                <Grid item xs={12} md={8}>
                                    <MultiAxisLineChart
                                        months={dashboardData?.jobCountsByMovementType.months || []}
                                        containers={dashboardData?.jobCountsByMovementType.containers || []}
                                        full_truck_load={dashboardData?.jobCountsByMovementType.full_truck_load || []}
                                        loose_cargo={dashboardData?.jobCountsByMovementType.loose_cargo || []}
                                    />
                                </Grid>
                            </Grid>
                        </Grid>
                    </Grid>
                </Grid>


                <Grid container spacing={2} style={{ marginTop: '16px', marginBottom: '12px' }}>
                    <Grid container spacing={2}>
                        {topPickupData?.map((data, index) => (
                            <Grid item xs={12} sm={4} key={index}>
                                <TopMovementTypeItems
                                    movementType={data.movementType}
                                    companies={data.companies}
                                    dotSize={12}
                                    gap={10}
                                    heading="Top Pick Up Locations"
                                />
                            </Grid>
                        ))}
                    </Grid>
                </Grid>

                <Grid container spacing={2} style={{ marginTop: '12px', marginBottom: '12px' }}>
                    <Grid container spacing={2}>
                        {topDeliveryData?.map((data, index) => (
                            <Grid item xs={12} sm={4} key={index}>
                                <TopMovementTypeItems
                                    movementType={data.movementType}
                                    companies={data.companies}
                                    dotSize={12}
                                    gap={10}
                                    heading="Top Delivery Locations"
                                />
                            </Grid>
                        ))}
                    </Grid>
                </Grid>
            </Grid >
        </>
    )
}

export default Dashboard