import React, { useState, useMemo } from "react";
import {
  Box,
  Paper,
  Typography,
  Button,
  TextField,
  InputAdornment,
  IconButton,
  Chip,
  Menu,
  MenuItem,
  ListItemIcon,
  ListItemText,
  Tooltip,
  Card,
  CardContent,
  CardMedia,
  CardActions,
  Grid,
  ToggleButton,
  ToggleButtonGroup,
  FormControl,
  InputLabel,
  Select,
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  Alert,
  Skeleton,
} from "@mui/material";
import {
  Add as AddIcon,
  Search as SearchIcon,
  Clear as ClearIcon,
  ViewList as ViewListIcon,
  ViewModule as ViewModuleIcon,
  MoreVert as MoreVertIcon,
  Edit as EditIcon,
  Delete as DeleteIcon,
  Inventory as InventoryIcon,
  FilterList as FilterListIcon,
  Image as ImageIcon,
} from "@mui/icons-material";
import { useTranslation, Trans } from "react-i18next";
import { DataGrid, GridColDef, GridRenderCellParams } from "@mui/x-data-grid";
import { useArticles, useDeleteArticle, useCategoryTree } from "../hooks";
import { useWarehouseNavigation } from "../hooks/useWarehouseNavigation";
import { ArticleDto, formatCurrency } from "../types";

type ViewMode = "list" | "grid";

export default function ArticlesPage() {
  const { t } = useTranslation();
  const [viewMode, setViewMode] = useState<ViewMode>("list");
  const [search, setSearch] = useState("");
  const [categoryId, setCategoryId] = useState<number | "">("");
  const [showInactive, setShowInactive] = useState(false);
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
  const [articleToDelete, setArticleToDelete] = useState<ArticleDto | null>(
    null,
  );
  const [menuAnchor, setMenuAnchor] = useState<null | HTMLElement>(null);
  const [menuArticle, setMenuArticle] = useState<ArticleDto | null>(null);

  const nav = useWarehouseNavigation();

  const {
    data: articles,
    isLoading,
    error,
  } = useArticles({
    categoryId: categoryId || undefined,
    search: search || undefined,
    isActive: showInactive ? undefined : true,
  });

  const { data: categoryTree } = useCategoryTree();

  const deleteMutation = useDeleteArticle();

  // Flatten category tree for select
  const flatCategories = useMemo(() => {
    const result: { id: number; name: string; level: number }[] = [];
    const flatten = (categories: typeof categoryTree, level = 0) => {
      if (!categories) return;
      for (const cat of categories) {
        result.push({ id: cat.id, name: cat.name, level });
        if (cat.children) flatten(cat.children, level + 1);
      }
    };
    flatten(categoryTree);
    return result;
  }, [categoryTree]);

  const handleMenuOpen = (
    event: React.MouseEvent<HTMLElement>,
    article: ArticleDto,
  ) => {
    event.stopPropagation();
    setMenuAnchor(event.currentTarget);
    setMenuArticle(article);
  };

  const handleMenuClose = () => {
    setMenuAnchor(null);
    setMenuArticle(null);
  };

  const handleEdit = () => {
    if (menuArticle) {
      nav.goToEditArticle(menuArticle.id);
    }
    handleMenuClose();
  };

  const handleDeleteClick = () => {
    setArticleToDelete(menuArticle);
    setDeleteDialogOpen(true);
    handleMenuClose();
  };

  const handleDeleteConfirm = async () => {
    if (articleToDelete) {
      await deleteMutation.mutateAsync(articleToDelete.id);
      setDeleteDialogOpen(false);
      setArticleToDelete(null);
    }
  };

  const handleViewStock = () => {
    if (menuArticle) {
      nav.goToArticle(menuArticle.id);
    }
    handleMenuClose();
  };

  const columns: GridColDef[] = [
    {
      field: "hasImage",
      headerName: "",
      width: 60,
      sortable: false,
      renderCell: (params: GridRenderCellParams<ArticleDto>) => (
        <Box
          sx={{
            width: 40,
            height: 40,
            borderRadius: 1,
            overflow: "hidden",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            bgcolor: "grey.100",
          }}
        >
          {params.row.hasImage ? (
            <img
              src={`/api/warehouse/articles/${params.row.id}/image`}
              alt={params.row.description}
              style={{ width: "100%", height: "100%", objectFit: "cover" }}
            />
          ) : (
            <ImageIcon sx={{ color: "grey.400" }} />
          )}
        </Box>
      ),
    },
    {
      field: "code",
      headerName: t("warehouse.articles.columns.code"),
      width: 120,
      renderCell: (params: GridRenderCellParams<ArticleDto>) => (
        <Typography variant="body2" fontWeight="medium">
          {params.value}
        </Typography>
      ),
    },
    {
      field: "description",
      headerName: t("warehouse.articles.columns.description"),
      flex: 1,
      minWidth: 200,
    },
    {
      field: "categoryName",
      headerName: t("warehouse.articles.columns.category"),
      width: 150,
    },
    {
      field: "unitOfMeasure",
      headerName: t("warehouse.articles.columns.uom"),
      width: 80,
      align: "center",
    },
    {
      field: "weightedAverageCost",
      headerName: t("warehouse.articles.columns.averageCost"),
      width: 120,
      align: "right",
      renderCell: (params: GridRenderCellParams<ArticleDto>) =>
        formatCurrency(params.value || 0),
    },
    {
      field: "isActive",
      headerName: t("warehouse.articles.columns.status"),
      width: 100,
      renderCell: (params: GridRenderCellParams<ArticleDto>) => (
        <Chip
          label={params.value ? t("warehouse.articles.columns.active") : t("warehouse.articles.columns.inactive")}
          size="small"
          color={params.value ? "success" : "default"}
        />
      ),
    },
    {
      field: "actions",
      headerName: "",
      width: 60,
      sortable: false,
      renderCell: (params: GridRenderCellParams<ArticleDto>) => (
        <IconButton size="small" onClick={(e) => handleMenuOpen(e, params.row)}>
          <MoreVertIcon />
        </IconButton>
      ),
    },
  ];

  if (error) {
    return (
      <Box p={3}>
        <Alert severity="error">
          {t("warehouse.articles.loadingError", { error: (error as Error).message })}
        </Alert>
      </Box>
    );
  }

  return (
    <Box>
      {/* Header */}
      <Box
        sx={{
          mb: 3,
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
        }}
      >
        <Typography variant="h5" fontWeight="bold">
          {t("warehouse.articles.title")}
        </Typography>
        <Button
          variant="contained"
          startIcon={<AddIcon />}
          onClick={nav.goToNewArticle}
        >
          {t("warehouse.articles.newArticle")}
        </Button>
      </Box>

      {/* Filters */}
      <Paper sx={{ p: 2, mb: 3 }}>
        <Grid container spacing={2} alignItems="center">
          <Grid size={{ xs: 12, sm: 6, md: 4 }}>
            <TextField
              fullWidth
              size="small"
              placeholder={t("warehouse.articles.filters.searchPlaceholder")}
              value={search}
              onChange={(e) => setSearch(e.target.value)}
              InputProps={{
                startAdornment: (
                  <InputAdornment position="start">
                    <SearchIcon />
                  </InputAdornment>
                ),
                endAdornment: search && (
                  <InputAdornment position="end">
                    <IconButton size="small" onClick={() => setSearch("")}>
                      <ClearIcon />
                    </IconButton>
                  </InputAdornment>
                ),
              }}
            />
          </Grid>
          <Grid size={{ xs: 12, sm: 6, md: 3 }}>
            <FormControl fullWidth size="small">
              <InputLabel>{t("warehouse.articles.filters.category")}</InputLabel>
              <Select
                value={categoryId}
                label={t("warehouse.articles.filters.category")}
                onChange={(e) => setCategoryId(e.target.value as number | "")}
              >
                <MenuItem value="">
                  <em>{t("warehouse.articles.filters.all")}</em>
                </MenuItem>
                {flatCategories.map((cat) => (
                  <MenuItem key={cat.id} value={cat.id}>
                    {"—".repeat(cat.level)} {cat.name}
                  </MenuItem>
                ))}
              </Select>
            </FormControl>
          </Grid>
          <Grid size={{ xs: 12, sm: 6, md: 2 }}>
            <Button
              variant={showInactive ? "contained" : "outlined"}
              size="small"
              startIcon={<FilterListIcon />}
              onClick={() => setShowInactive(!showInactive)}
              fullWidth
            >
              {showInactive ? t("warehouse.articles.filters.showAll") : t("warehouse.articles.filters.onlyActive")}
            </Button>
          </Grid>
          <Grid
            size={{ xs: 12, sm: 6, md: 3 }}
            sx={{ display: "flex", justifyContent: "flex-end" }}
          >
            <ToggleButtonGroup
              value={viewMode}
              exclusive
              onChange={(_, value) => value && setViewMode(value)}
              size="small"
            >
              <ToggleButton value="list">
                <Tooltip title={t("warehouse.articles.filters.viewList")}>
                  <ViewListIcon />
                </Tooltip>
              </ToggleButton>
              <ToggleButton value="grid">
                <Tooltip title={t("warehouse.articles.filters.viewGrid")}>
                  <ViewModuleIcon />
                </Tooltip>
              </ToggleButton>
            </ToggleButtonGroup>
          </Grid>
        </Grid>
      </Paper>

      {/* Content */}
      {viewMode === "list" ? (
        <Paper sx={{ height: 600 }}>
          <DataGrid
            rows={articles || []}
            columns={columns}
            loading={isLoading}
            pageSizeOptions={[25, 50, 100]}
            initialState={{
              pagination: { paginationModel: { pageSize: 25 } },
              sorting: { sortModel: [{ field: "code", sort: "asc" }] },
            }}
            onRowDoubleClick={(params) => nav.goToArticle(params.row.id)}
            disableRowSelectionOnClick
            sx={{
              "& .MuiDataGrid-row:hover": {
                cursor: "pointer",
              },
            }}
          />
        </Paper>
      ) : (
        <Grid container spacing={2}>
          {isLoading ? (
            Array.from({ length: 8 }).map((_, i) => (
              <Grid key={i} size={{ xs: 12, sm: 6, md: 4, lg: 3 }}>
                <Card>
                  <Skeleton variant="rectangular" height={140} />
                  <CardContent>
                    <Skeleton variant="text" width="60%" />
                    <Skeleton variant="text" width="80%" />
                  </CardContent>
                </Card>
              </Grid>
            ))
          ) : articles?.length === 0 ? (
            <Grid size={12}>
              <Paper sx={{ p: 4, textAlign: "center" }}>
                <InventoryIcon
                  sx={{ fontSize: 48, color: "grey.400", mb: 2 }}
                />
                <Typography color="text.secondary">
                  {t("warehouse.articles.noArticlesFound")}
                </Typography>
              </Paper>
            </Grid>
          ) : (
            articles?.map((article) => (
              <Grid key={article.id} size={{ xs: 12, sm: 6, md: 4, lg: 3 }}>
                <Card
                  sx={{
                    height: "100%",
                    display: "flex",
                    flexDirection: "column",
                    cursor: "pointer",
                    "&:hover": { boxShadow: 4 },
                  }}
                  onClick={() => nav.goToArticle(article.id)}
                >
                  {article.hasImage ? (
                    <CardMedia
                      component="img"
                      height="140"
                      image={`/api/warehouse/articles/${article.id}/image`}
                      alt={article.description}
                      sx={{ objectFit: "cover" }}
                    />
                  ) : (
                    <Box
                      sx={{
                        height: 140,
                        display: "flex",
                        alignItems: "center",
                        justifyContent: "center",
                        bgcolor: "grey.100",
                      }}
                    >
                      <ImageIcon sx={{ fontSize: 48, color: "grey.400" }} />
                    </Box>
                  )}
                  <CardContent sx={{ flexGrow: 1 }}>
                    <Typography variant="caption" color="text.secondary">
                      {article.code}
                    </Typography>
                    <Typography
                      variant="subtitle1"
                      fontWeight="medium"
                      gutterBottom
                      noWrap
                    >
                      {article.description}
                    </Typography>
                    <Box sx={{ display: "flex", gap: 1, flexWrap: "wrap" }}>
                      {article.categoryName && (
                        <Chip label={article.categoryName} size="small" />
                      )}
                    </Box>
                  </CardContent>
                  <CardActions>
                    <Button
                      size="small"
                      onClick={(e) => {
                        e.stopPropagation();
                        nav.goToEditArticle(article.id);
                      }}
                    >
                      {t("warehouse.articles.actions.edit")}
                    </Button>
                    <IconButton
                      size="small"
                      onClick={(e) => handleMenuOpen(e, article)}
                      sx={{ ml: "auto" }}
                    >
                      <MoreVertIcon />
                    </IconButton>
                  </CardActions>
                </Card>
              </Grid>
            ))
          )}
        </Grid>
      )}

      {/* Context Menu */}
      <Menu
        anchorEl={menuAnchor}
        open={Boolean(menuAnchor)}
        onClose={handleMenuClose}
      >
        <MenuItem onClick={handleEdit}>
          <ListItemIcon>
            <EditIcon fontSize="small" />
          </ListItemIcon>
          <ListItemText>{t("warehouse.articles.actions.edit")}</ListItemText>
        </MenuItem>
        <MenuItem onClick={handleViewStock}>
          <ListItemIcon>
            <InventoryIcon fontSize="small" />
          </ListItemIcon>
          <ListItemText>{t("warehouse.articles.actions.viewStock")}</ListItemText>
        </MenuItem>
        <MenuItem onClick={handleDeleteClick} sx={{ color: "error.main" }}>
          <ListItemIcon>
            <DeleteIcon fontSize="small" color="error" />
          </ListItemIcon>
          <ListItemText>{t("warehouse.articles.actions.delete")}</ListItemText>
        </MenuItem>
      </Menu>

      {/* Delete Confirmation Dialog */}
      <Dialog
        open={deleteDialogOpen}
        onClose={() => setDeleteDialogOpen(false)}
      >
        <DialogTitle>{t("warehouse.articles.deleteDialog.title")}</DialogTitle>
        <DialogContent>
          <Typography>
            <Trans
              i18nKey="warehouse.articles.deleteDialog.content"
              values={{ code: articleToDelete?.code, description: articleToDelete?.description }}
              components={{ strong: <strong /> }}
            />
          </Typography>
          <Typography variant="body2" color="text.secondary" sx={{ mt: 1 }}>
            {t("warehouse.articles.deleteDialog.warning")}
          </Typography>
        </DialogContent>
        <DialogActions>
          <Button onClick={() => setDeleteDialogOpen(false)}>{t("warehouse.articles.deleteDialog.cancel")}</Button>
          <Button
            onClick={handleDeleteConfirm}
            color="error"
            variant="contained"
            disabled={deleteMutation.isPending}
          >
            {deleteMutation.isPending ? t("warehouse.articles.deleteDialog.deleting") : t("warehouse.articles.deleteDialog.delete")}
          </Button>
        </DialogActions>
      </Dialog>
    </Box>
  );
}
