"use client";

import React, { useCallback, useEffect, useMemo, useState } from "react";
import {
  Box,
  Card,
  CardContent,
  Chip,
  CircularProgress,
  FormControl,
  InputLabel,
  MenuItem,
  Paper,
  Select,
  Stack,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TablePagination,
  TableRow,
  Typography,
  Button,
  Tooltip,
} from "@mui/material";
import { useTranslation } from "react-i18next";
import { useSession } from "next-auth/react";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { DatePicker } from "@mui/x-date-pickers/DatePicker";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import dayjs, { Dayjs } from "dayjs";
import { arrayToDayjs, formatDepartureTime, requiredDeliveryDateToDayString } from "@/app/utils/formatUtil";
import {
  fetchWorkbenchTicketReleaseTable,
  forceCompleteWorkbenchTicket,
  revertWorkbenchTicketAssignment,
  WorkbenchTicketReleaseTable,
} from "@/app/api/do/actions";
import Swal from "sweetalert2";
import { AUTH } from "@/authorities";
import { SessionWithTokens } from "@/config/authConfig";

function formatTicketDateTime(value: unknown): string {
  if (!value) return "-";
  if (Array.isArray(value)) {
    return arrayToDayjs(value as number[], true).format("HH:mm");
  }
  const parsedDate = dayjs(value as string, "YYYYMMDDHHmmss");
  if (!parsedDate.isValid()) {
    return dayjs(value as string | number | Date).format("HH:mm");
  }
  return parsedDate.format("HH:mm");
}

function isCompletedStatus(status: string | null | undefined): boolean {
  return (status ?? "").toLowerCase() === "completed";
}

function showDoPickOpsButtons(row: WorkbenchTicketReleaseTable): boolean {
  return (
    row.isActiveWorkbenchTicket === true &&
    !isCompletedStatus(row.ticketStatus) &&
    row.handledBy != null
  );
}

const WorkbenchTicketReleaseTableTab: React.FC = () => {
  const { t } = useTranslation("ticketReleaseTable");
  const { data: session } = useSession() as { data: SessionWithTokens | null };
  const abilities = session?.abilities ?? session?.user?.abilities ?? [];
  const canManageDoPickOps = abilities.some((a) => a.trim() === AUTH.ADMIN);
  const [queryDate, setQueryDate] = useState<Dayjs>(() => dayjs());
  const [selectedFloor, setSelectedFloor] = useState<string>("");
  const [selectedStatus, setSelectedStatus] = useState<string>("released");
  const [data, setData] = useState<WorkbenchTicketReleaseTable[]>([]);
  const [loading, setLoading] = useState<boolean>(true);
  const [now, setNow] = useState(dayjs());
  const [lastDataRefreshTime, setLastDataRefreshTime] = useState<dayjs.Dayjs | null>(null);
  const [paginationController, setPaginationController] = useState({
    pageNum: 0,
    pageSize: 5,
  });

  const loadData = useCallback(async () => {
    setLoading(true);
    try {
      const dayStr = queryDate.format("YYYY-MM-DD");
      const result = await fetchWorkbenchTicketReleaseTable(dayStr, dayStr);
      setData(result);
      setLastDataRefreshTime(dayjs());
    } catch (error) {
      console.error("Error fetching workbench ticket release table:", error);
      setData([]);
    } finally {
      setLoading(false);
    }
  }, [queryDate]);

  useEffect(() => {
    void loadData();
    const id = setInterval(() => {
      void loadData();
    }, 5 * 60 * 1000);
    return () => clearInterval(id);
  }, [loadData]);

  useEffect(() => {
    const tick = setInterval(() => setNow(dayjs()), 30 * 1000);
    return () => clearInterval(tick);
  }, []);

  const dayStr = queryDate.format("YYYY-MM-DD");
  const filteredData = useMemo(() => {
    return data.filter((item) => {
      if (selectedFloor && item.storeId !== selectedFloor) return false;
      if (item.requiredDeliveryDate) {
        const itemDate = requiredDeliveryDateToDayString(item.requiredDeliveryDate);
        if (itemDate !== dayStr) return false;
      }
      if (selectedStatus && item.ticketStatus?.toLowerCase() !== selectedStatus.toLowerCase()) return false;
      return true;
    });
  }, [data, dayStr, selectedFloor, selectedStatus]);

  const paginatedData = useMemo(() => {
    const startIndex = paginationController.pageNum * paginationController.pageSize;
    const endIndex = startIndex + paginationController.pageSize;
    return filteredData.slice(startIndex, endIndex);
  }, [filteredData, paginationController]);

  const handleRevert = useCallback(
    async (row: WorkbenchTicketReleaseTable) => {
      if (!canManageDoPickOps) return;
      const r = await Swal.fire({
        title: t("Confirm revert assignment"),
        text: t("Revert assignment hint"),
        icon: "warning",
        showCancelButton: true,
        confirmButtonText: t("Confirm"),
        cancelButtonText: t("Cancel"),
      });
      if (!r.isConfirmed) return;
      try {
        const res = await revertWorkbenchTicketAssignment(row.deliveryOrderPickOrderId);
        if (res.code === "SUCCESS") {
          await Swal.fire({
            icon: "success",
            text: t("Operation succeeded"),
            timer: 1500,
            showConfirmButton: false,
          });
          await loadData();
        } else {
          await Swal.fire({ icon: "error", title: res.code ?? "", text: res.message ?? "" });
        }
      } catch (e) {
        console.error(e);
        await Swal.fire({ icon: "error", text: String(e) });
      }
    },
    [canManageDoPickOps, loadData, t],
  );

  const handleForceComplete = useCallback(
    async (row: WorkbenchTicketReleaseTable) => {
      if (!canManageDoPickOps) return;
      const r = await Swal.fire({
        title: t("Confirm force complete"),
        text: t("Force complete hint"),
        icon: "warning",
        showCancelButton: true,
        confirmButtonText: t("Confirm"),
        cancelButtonText: t("Cancel"),
      });
      if (!r.isConfirmed) return;
      try {
        const res = await forceCompleteWorkbenchTicket(row.deliveryOrderPickOrderId);
        if (res.code === "SUCCESS") {
          await Swal.fire({
            icon: "success",
            text: t("Operation succeeded"),
            timer: 1500,
            showConfirmButton: false,
          });
          await loadData();
        } else {
          await Swal.fire({ icon: "error", title: res.code ?? "", text: res.message ?? "" });
        }
      } catch (e) {
        console.error(e);
        await Swal.fire({ icon: "error", text: String(e) });
      }
    },
    [canManageDoPickOps, loadData, t],
  );

  const opsTooltip = !canManageDoPickOps ? t("Manager only hint") : "";

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="zh-hk">
      <Card sx={{ mb: 2 }}>
        <CardContent>
          <Typography variant="h5" sx={{ fontWeight: 600, mb: 2 }}>
            {t("Ticket Release Table")} 
          </Typography>
          <Stack direction="row" spacing={2} sx={{ mb: 3, flexWrap: "wrap", alignItems: "center" }}>
            <DatePicker
              label={t("Target Date")}
              value={queryDate}
              onChange={(v) => v && setQueryDate(v)}
              slotProps={{ textField: { size: "small", sx: { minWidth: 180 } } }}
            />
            <Button variant="outlined" size="small" onClick={() => void loadData()}>
              {t("Reload data")}
            </Button>
            <FormControl sx={{ minWidth: 150 }} size="small">
              <InputLabel id="workbench-floor-select-label" shrink>
                {t("Floor")}
              </InputLabel>
              <Select
                labelId="workbench-floor-select-label"
                value={selectedFloor}
                label={t("Floor")}
                onChange={(e) => setSelectedFloor(e.target.value)}
                displayEmpty
              >
                <MenuItem value="">{t("All Floors")}</MenuItem>
                <MenuItem value="2/F">2/F</MenuItem>
                <MenuItem value="4/F">4/F</MenuItem>
              </Select>
            </FormControl>
            <FormControl sx={{ minWidth: 150 }} size="small">
              <InputLabel id="workbench-status-select-label" shrink>
                {t("Status")}
              </InputLabel>
              <Select
                labelId="workbench-status-select-label"
                value={selectedStatus}
                label={t("Status")}
                onChange={(e) => setSelectedStatus(e.target.value)}
                displayEmpty
              >
                <MenuItem value="">{t("All Statuses")}</MenuItem>
                <MenuItem value="pending">{t("pending")}</MenuItem>
                <MenuItem value="released">{t("released")}</MenuItem>
                <MenuItem value="completed">{t("completed")}</MenuItem>
              </Select>
            </FormControl>
            <Box sx={{ flexGrow: 1 }} />
            <Stack direction="row" spacing={2} sx={{ flexShrink: 0, alignSelf: "center" }}>
              <Typography variant="body2" sx={{ color: "text.secondary" }} suppressHydrationWarning>
                {t("Now")}: {now.format("HH:mm")}
              </Typography>
              <Typography variant="body2" sx={{ color: "text.secondary" }}>
                {t("Auto-refresh every 5 minutes")} | {t("Last updated")}:{" "}
                {lastDataRefreshTime ? lastDataRefreshTime.format("HH:mm:ss") : "--:--:--"}
              </Typography>
            </Stack>
          </Stack>

          {loading ? (
            <Box sx={{ display: "flex", justifyContent: "center", p: 3 }}>
              <CircularProgress />
            </Box>
          ) : (
            <>
              <TableContainer component={Paper} sx={{ maxHeight: 440, overflow: "auto" }}>
                <Table size="small" sx={{ minWidth: 650 }}>
                  <TableHead>
                    <TableRow
                      sx={{
                        position: "sticky",
                        top: 0,
                        zIndex: 1,
                        backgroundColor: "grey.100",
                      }}
                    >
                      <TableCell>{t("Store ID")}</TableCell>
                      <TableCell>{t("Required Delivery Date")}</TableCell>
                      <TableCell>
                        <Box sx={{ display: "flex", flexDirection: "column", gap: 0.5 }}>
                          <Typography variant="subtitle2" sx={{ fontWeight: 600 }}>
                            {t("Truck Information")}
                          </Typography>
                          <Typography variant="caption" sx={{ color: "text.secondary" }}>
                            {t("Truck Lane Code")} - {t("Departure Time")}
                          </Typography>
                        </Box>
                      </TableCell>
                      <TableCell sx={{ minWidth: 200, width: "20%" }}>{t("Shop Name")}</TableCell>
                      <TableCell align="right">{t("Loading Sequence")}</TableCell>
                      <TableCell>
                        <Box sx={{ display: "flex", flexDirection: "column", gap: 0.5 }}>
                          <Typography variant="subtitle2" sx={{ fontWeight: 600 }}>
                            {t("Ticket Information")}
                          </Typography>
                          <Typography variant="caption" sx={{ color: "text.secondary" }}>
                            {t("Ticket No.")} ({t("Status")})
                          </Typography>
                          <Typography variant="caption" sx={{ color: "text.secondary" }}>
                            {t("Released Time")} - {t("Completed Time")}
                          </Typography>
                        </Box>
                      </TableCell>
                      <TableCell>{t("Handler Name")}</TableCell>
                      <TableCell align="right" sx={{ minWidth: 100, width: "8%", whiteSpace: "nowrap" }}>
                        {t("Number of FG Items (Order Item(s) Count)")}
                      </TableCell>
                      <TableCell align="center" sx={{ minWidth: 200 }}>
                        {t("Actions")}
                      </TableCell>
                    </TableRow>
                  </TableHead>
                  <TableBody>
                    {paginatedData.length === 0 ? (
                      <TableRow>
                        <TableCell colSpan={9} align="center">
                          {t("No data available")}
                        </TableCell>
                      </TableRow>
                    ) : (
                      paginatedData.map((row) => (
                        <TableRow key={row.deliveryOrderPickOrderId}>
                          <TableCell>{row.storeId || "-"}</TableCell>
                          <TableCell>
                            {row.requiredDeliveryDate ? requiredDeliveryDateToDayString(row.requiredDeliveryDate) : "-"}
                          </TableCell>
                          <TableCell>
                            <Box sx={{ display: "flex", gap: 0.5, flexWrap: "wrap" }}>
                              {row.truckLanceCode && <Chip label={row.truckLanceCode} size="small" color="primary" />}
                              {row.truckDepartureTime && <Chip label={formatDepartureTime(row.truckDepartureTime)} size="small" color="secondary" />}
                            </Box>
                          </TableCell>
                          <TableCell sx={{ minWidth: 200, width: "20%" }}>{row.shopName || "-"}</TableCell>
                          <TableCell align="right">{row.loadingSequence ?? "-"}</TableCell>
                          <TableCell>
                            <Box sx={{ display: "flex", flexDirection: "column", gap: 0.5 }}>
                              <Typography variant="body2">
                                {row.ticketNo || "-"} ({row.ticketStatus ? t(row.ticketStatus.toLowerCase()) : "-"})
                              </Typography>
                              <Typography variant="body2">
                                {t("Released Time")}: {formatTicketDateTime(row.ticketReleaseTime)}
                              </Typography>
                              <Typography variant="body2">
                                {t("Completed Time")}: {formatTicketDateTime(row.ticketCompleteDateTime)}
                              </Typography>
                            </Box>
                          </TableCell>
                          <TableCell>{row.handlerName ?? "-"}</TableCell>
                          <TableCell align="right" sx={{ minWidth: 100, width: "8%" }}>
                            {row.numberOfFGItems ?? 0}
                          </TableCell>
                          <TableCell align="center">
                            {showDoPickOpsButtons(row) ? (
                              <Stack direction="row" spacing={1} justifyContent="center" flexWrap="wrap" useFlexGap>
                                <Tooltip title={opsTooltip}>
                                  <span>
                                    <Button
                                      size="small"
                                      variant="outlined"
                                      color="warning"
                                      disabled={!canManageDoPickOps}
                                      onClick={() => void handleRevert(row)}
                                    >
                                      {t("Revert assignment")}
                                    </Button>
                                  </span>
                                </Tooltip>
                                <Tooltip title={opsTooltip}>
                                  <span>
                                    <Button
                                      size="small"
                                      variant="outlined"
                                      color="primary"
                                      disabled={!canManageDoPickOps}
                                      onClick={() => void handleForceComplete(row)}
                                    >
                                      {t("Force complete DO")}
                                    </Button>
                                  </span>
                                </Tooltip>
                              </Stack>
                            ) : (
                              <Typography variant="caption" color="text.secondary">
                                —
                              </Typography>
                            )}
                          </TableCell>
                        </TableRow>
                      ))
                    )}
                  </TableBody>
                </Table>
              </TableContainer>
              {filteredData.length > 0 && (
                <TablePagination
                  component="div"
                  count={filteredData.length}
                  page={paginationController.pageNum}
                  rowsPerPage={paginationController.pageSize}
                  onPageChange={(_, page) =>
                    setPaginationController((prev) => ({ ...prev, pageNum: page }))
                  }
                  onRowsPerPageChange={(event) =>
                    setPaginationController({ pageNum: 0, pageSize: parseInt(event.target.value, 10) })
                  }
                  rowsPerPageOptions={[5, 10, 15]}
                  labelRowsPerPage={t("Rows per page")}
                />
              )}
            </>
          )}
        </CardContent>
      </Card>
    </LocalizationProvider>
  );
};

export default WorkbenchTicketReleaseTableTab;
