import { useState } from "react";
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { useNavigate } from "react-router-dom";
import {
  Box,
  Typography,
  Button,
  Paper,
  Chip,
  IconButton,
  Tooltip,
} from "@mui/material";
import {
  DataGrid,
  GridColDef,
  GridRenderCellParams,
  GridToolbar,
} from "@mui/x-data-grid";
import {
  Add as AddIcon,
  Visibility as ViewIcon,
  PlayArrow as StartIcon,
  Cancel as CancelIcon,
} from "@mui/icons-material";
import { useTranslation } from "react-i18next";
import { inventoryService } from "../services/warehouseService";
import { InventoryCountDto, InventoryStatus } from "../types";
import dayjs from "dayjs";

export default function InventoryListPage() {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const queryClient = useQueryClient();
  const [statusFilter] = useState<InventoryStatus | undefined>(
    undefined
  );

  const { data: inventories = [], isLoading } = useQuery({
    queryKey: ["inventory-counts", statusFilter],
    queryFn: () => inventoryService.getAll(statusFilter),
  });

  const cancelMutation = useMutation({
    mutationFn: (id: number) => inventoryService.cancel(id),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["inventory-counts"] });
    },
  });

  const handleCreate = () => {
    navigate("/warehouse/inventory/new");
  };

  const handleView = (id: number) => {
    navigate(`/warehouse/inventory/${id}`);
  };

  const handleStart = (id: number) => {
    navigate(`/warehouse/inventory/${id}/count`);
  };

  const getStatusChip = (status: InventoryStatus) => {
    const label = t(`warehouse.inventory.status.${InventoryStatus[status]}`);
    switch (status) {
      case InventoryStatus.Draft:
        return <Chip label={label} size="small" />;
      case InventoryStatus.InProgress:
        return <Chip label={label} color="primary" size="small" />;
      case InventoryStatus.Completed:
        return <Chip label={label} color="info" size="small" />;
      case InventoryStatus.Confirmed:
        return <Chip label={label} color="success" size="small" />;
      case InventoryStatus.Cancelled:
        return <Chip label={label} color="error" size="small" />;
      default:
        return <Chip label={label} size="small" />;
    }
  };

  const columns: GridColDef[] = [
    { field: "code", headerName: t("warehouse.inventory.columns.code"), width: 120 },
    { field: "description", headerName: t("warehouse.inventory.columns.description"), flex: 1, minWidth: 200 },
    {
      field: "inventoryDate",
      headerName: t("warehouse.inventory.columns.date"),
      width: 150,
      valueFormatter: (value) =>
        value ? dayjs(value).format("DD/MM/YYYY") : "",
    },
    { field: "warehouseName", headerName: t("warehouse.inventory.columns.warehouse"), width: 180 },
    { field: "categoryName", headerName: t("warehouse.inventory.columns.category"), width: 150 },
    {
      field: "status",
      headerName: t("warehouse.inventory.columns.status"),
      width: 120,
      renderCell: (params: GridRenderCellParams<InventoryCountDto>) =>
        getStatusChip(params.row.status),
    },
    {
      field: "progress",
      headerName: t("warehouse.inventory.columns.progress"),
      width: 150,
      valueGetter: (_value, row) => {
        if (!row.lineCount) return "0%";
        const percentage = Math.round(
          (row.countedLineCount / row.lineCount) * 100
        );
        return `${row.countedLineCount}/${row.lineCount} (${percentage}%)`;
      },
    },
    {
      field: "actions",
      headerName: t("warehouse.inventory.columns.actions"),
      width: 180,
      sortable: false,
      renderCell: (params: GridRenderCellParams<InventoryCountDto>) => (
        <Box>
          <Tooltip title={t("warehouse.inventory.actions.view")}>
            <IconButton size="small" onClick={() => handleView(params.row.id)}>
              <ViewIcon />
            </IconButton>
          </Tooltip>
          {params.row.status === InventoryStatus.Draft && (
            <Tooltip title={t("warehouse.inventory.actions.start")}>
              <IconButton
                size="small"
                color="primary"
                onClick={() => handleStart(params.row.id)}
              >
                <StartIcon />
              </IconButton>
            </Tooltip>
          )}
          {params.row.status === InventoryStatus.InProgress && (
            <Tooltip title={t("warehouse.inventory.actions.continue")}>
              <IconButton
                size="small"
                color="primary"
                onClick={() => handleStart(params.row.id)}
              >
                <StartIcon />
              </IconButton>
            </Tooltip>
          )}
          {params.row.status === InventoryStatus.Draft && (
            <Tooltip title={t("warehouse.inventory.actions.cancel")}>
              <IconButton
                size="small"
                color="error"
                onClick={() => {
                  if (confirm(t("warehouse.inventory.confirmCancel"))) {
                    cancelMutation.mutate(params.row.id);
                  }
                }}
              >
                <CancelIcon />
              </IconButton>
            </Tooltip>
          )}
        </Box>
      ),
    },
  ];

  return (
    <Box sx={{ p: 3 }}>
      <Box
        sx={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          mb: 3,
        }}
      >
        <Typography variant="h4">{t("warehouse.inventory.title")}</Typography>
        <Button
          variant="contained"
          startIcon={<AddIcon />}
          onClick={handleCreate}
        >
          {t("warehouse.inventory.newInventory")}
        </Button>
      </Box>

      <Paper sx={{ height: 600, width: "100%" }}>
        <DataGrid
          rows={inventories}
          columns={columns}
          loading={isLoading}
          slots={{ toolbar: GridToolbar }}
          slotProps={{
            toolbar: {
              showQuickFilter: true,
            },
          }}
          disableRowSelectionOnClick
          initialState={{
            pagination: { paginationModel: { pageSize: 25 } },
            sorting: {
              sortModel: [{ field: "inventoryDate", sort: "desc" }],
            },
          }}
        />
      </Paper>
    </Box>
  );
}
