"use client";
import { useTranslation } from "react-i18next";
import { ThemeProvider } from "@mui/material/styles";
import theme from "../../theme";
import React, { useEffect, useState, ReactNode } from "react";
import { useRouter } from "next/navigation";
import { Card, CardContent, CardHeader, Grid, Tabs, Tab, Box, FormControlLabel, Checkbox } from "@mui/material";
import DashboardProgressChart from "./chart/DashboardProgressChart";
import DashboardLineChart from "./chart/DashboardLineChart";
import PendingInspectionChart from "./chart/PendingInspectionChart";
import PendingStorageChart from "./chart/PendingStorageChart";
import ApplicationCompletionChart from "./chart/ApplicationCompletionChart";
import OrderCompletionChart from "./chart/OrderCompletionChart";
// import SupervisorQcApproval, { IQCItems } from "./QC/SupervisorQcApproval";
import { EscalationResult } from "@/app/api/escalation";
import EscalationLogTable from "./escalation/EscalationLogTable";
import { TruckScheduleDashboard } from "./truckSchedule";
import GoodsReceiptStatusNew from "./goodsReceiptStatus/GoodsReceiptStatusNew";
import { CardFilterContext } from "../CollapsibleCard/CollapsibleCard";

interface TabPanelProps {
  children?: ReactNode;
  index: number;
  value: number;
}

function TabPanel(props: TabPanelProps) {
  const { children, value, index, ...other } = props;

  return (
    <div
      role="tabpanel"
      hidden={value !== index}
      id={`dashboard-tabpanel-${index}`}
      aria-labelledby={`dashboard-tab-${index}`}
      {...other}
    >
      {value === index && <Box sx={{ py: 2 }}>{children}</Box>}
    </div>
  );
}
type Props = {
  // iqc: IQCItems[] | undefined
  escalationLogs: EscalationResult[]
};

const DashboardPage: React.FC<Props> = ({
  // iqc,
  escalationLogs
}) => {
  const { t } = useTranslation("dashboard");
  const router = useRouter();
  
  const [escLog, setEscLog] = useState<EscalationResult[]>([]);
  const [currentTab, setCurrentTab] = useState(0);
  const [showCompletedLogs, setShowCompletedLogs] = useState(false);

  const getPendingLog = () => {
    return escLog.filter(esc => esc.status == "pending");
  };
  
  useEffect(() => {
    setEscLog(escalationLogs);
  }, [escalationLogs])

  const handleTabChange = (event: React.SyntheticEvent, newValue: number) => {
    setCurrentTab(newValue);
  };

  const handleFilterChange = (checked: boolean) => {
    setShowCompletedLogs(checked);
  };

  return (
    <ThemeProvider theme={theme}>
      <Grid container spacing={2}>
        <Grid item xs={12}>
          
          <Card>
            <CardHeader />
            <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
              <Tabs 
                value={currentTab} 
                onChange={handleTabChange}
                aria-label="dashboard tabs"
              >
                <Tab label={t("Truck Schedule Dashboard")} id="dashboard-tab-0" aria-controls="dashboard-tabpanel-0" />
                <Tab label={t("Goods Receipt Status New")} id="dashboard-tab-1" aria-controls="dashboard-tabpanel-1" />
                <Tab 
                  label={`${t("Responsible Escalation List")} (${t("pending")} : ${
                    getPendingLog().length > 0 ? getPendingLog().length : t("No")})`}
                  id="dashboard-tab-2" 
                  aria-controls="dashboard-tabpanel-2" 
                />
              </Tabs>
            </Box>
            <CardContent>
              <TabPanel value={currentTab} index={0}>
                <TruckScheduleDashboard />
              </TabPanel>
              <TabPanel value={currentTab} index={1}>
                <GoodsReceiptStatusNew />
              </TabPanel>
              <TabPanel value={currentTab} index={2}>
                <CardFilterContext.Provider value={{
                  filter: showCompletedLogs,
                  onFilterChange: handleFilterChange,
                  filterText: t("show completed logs"),
                  setOnFilterChange: () => {}
                }}>
                  <Box sx={{ mb: 2 }}>
                    <FormControlLabel
                      control={
                        <Checkbox
                          checked={showCompletedLogs}
                          onChange={(e) => handleFilterChange(e.target.checked)}
                        />
                      }
                      label={t("show completed logs")}
                    />
                  </Box>
                  <EscalationLogTable items={escLog}/>
                </CardFilterContext.Provider>
              </TabPanel>
            </CardContent>
          </Card>
        
        </Grid>
        {/* Hidden: Progress chart - not in use currently */}
        {/* <Grid item xs={12}>
          <CollapsibleCard title={t("Progress chart")}>
            <CardContent>
              <Grid container spacing={3}>
                <Grid item xs={12} md={4}>
                  <DashboardProgressChart />
                </Grid>
                <Grid item xs={12} md={4}>
                  <PendingInspectionChart />
                </Grid>
                <Grid item xs={12} md={4}>
                  <PendingStorageChart />
                </Grid>
              </Grid>
            </CardContent>
          </CollapsibleCard>
        </Grid> */}

        {/* Hidden: Warehouse status - not in use currently */}
        {/* <Grid item xs={12}>
          <CollapsibleCard title={t("Warehouse status")}>
            <CardContent>
              <Grid container spacing={2}>
                <Grid item xs={12} md={6}>
                  <Grid container spacing={2}>
                    <Grid item xs={12} sm={6}>
                      <ApplicationCompletionChart />
                    </Grid>
                    <Grid item xs={12} sm={6}>
                      <OrderCompletionChart />
                    </Grid>
                  </Grid>
                </Grid>
              </Grid>
            </CardContent>
          </CollapsibleCard>
        </Grid> */}
      </Grid>
    </ThemeProvider>
  );
};

export default DashboardPage;
