"use client";
import { useTranslation } from "react-i18next";
import { ThemeProvider } from "@mui/material/styles";
import theme from "../../theme";
import { TabsProps } from "@mui/material/Tabs";
import React, { useCallback, useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { Card, CardContent, CardHeader, Grid } 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 DashboardBox from "./Dashboardbox";
import CollapsibleCard from "./CollapsibleCard";
// import SupervisorQcApproval, { IQCItems } from "./QC/SupervisorQcApproval";
import { EscalationResult } from "@/app/api/escalation";
import EscalationLogTable from "./escalation/EscalationLogTable";
type Props = {
  // iqc: IQCItems[] | undefined
  escalationLogs: EscalationResult[]
};

const DashboardPage: React.FC<Props> = ({
  // iqc,
  escalationLogs
}) => {
  const { t } = useTranslation("dashboard");
  const router = useRouter();

  return (
    <ThemeProvider theme={theme}>
      <Grid container spacing={2}>
        <Grid item xs={12}>
          <CollapsibleCard title={t("Escalation List")}>
            <CardContent>
              <EscalationLogTable items={escalationLogs || []}/>
            </CardContent>
          </CollapsibleCard>
        </Grid>
        <Grid item xs={12}>
          <CollapsibleCard title={t("Progress chart")}>
            <CardContent>
              <Grid container spacing={2}>
                <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>

        <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 item xs={12} md={6}>
                  <Grid container spacing={2}>
                    <Grid item xs={12} sm={6}>
                      <DashboardBox
                        title={t("Temperature status")}
                        value="--"
                        unit="°C"
                      />
                    </Grid>
                    <Grid item xs={12} sm={6}>
                      <DashboardBox
                        title={t("Humidity status")}
                        value="--"
                        unit="%"
                      />
                    </Grid>
                    <Grid item xs={12}>
                      <DashboardLineChart />
                    </Grid>
                  </Grid>
                </Grid>
              </Grid>
            </CardContent>
          </CollapsibleCard>
        </Grid>
      </Grid>
    </ThemeProvider>
  );
};

export default DashboardPage;