import ArrowBackIcon from "@mui/icons-material/ArrowBack";
import DeleteIcon from "@mui/icons-material/Delete";
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import Chip from "@mui/material/Chip";
import CircularProgress from "@mui/material/CircularProgress";
import Dialog from "@mui/material/Dialog";
import DialogActions from "@mui/material/DialogActions";
import DialogContent from "@mui/material/DialogContent";
import DialogContentText from "@mui/material/DialogContentText";
import DialogTitle from "@mui/material/DialogTitle";
import Divider from "@mui/material/Divider";
import Drawer from "@mui/material/Drawer";
import IconButton from "@mui/material/IconButton";
import List from "@mui/material/List";
import ListItem from "@mui/material/ListItem";
import ListItemButton from "@mui/material/ListItemButton";
import ListItemText from "@mui/material/ListItemText";
import Tooltip from "@mui/material/Tooltip";
import Typography from "@mui/material/Typography";
import { useMemo, useState, useCallback, useEffect } from "react";

import { useEvalVersions } from "../hooks/useEvalVersions";
import type { EvalVersionDrawerProps } from "../types";

import { useDisplaySettings } from "@/contexts/DisplaySettingsContext";
import { TOUR_IDS } from "@/features/task-tour/selectors";
import { formatDateInTimezone } from "@/utils/formatters";

const EvalVersionDrawer = ({
  open,
  onClose,
  taskId,
  evalName,
  selectedVersion,
  latestVersion,
  onSelectVersion,
  onDelete,
  onRefetchTrigger,
}: EvalVersionDrawerProps) => {
  const [sortOrder, setSortOrder] = useState<"asc" | "desc">("desc");
  const [excludeDeleted, setExcludeDeleted] = useState(true);
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
  const [versionToDelete, setVersionToDelete] = useState<number | null>(null);
  const [isDeleting, setIsDeleting] = useState(false);

  const { timezone, use24Hour } = useDisplaySettings();
  const { versions, isLoading, error, refetch } = useEvalVersions(taskId, evalName, {
    sort: sortOrder,
    exclude_deleted: excludeDeleted,
  });

  // Refetch versions when the trigger changes (e.g., when a new version is created)
  useEffect(() => {
    if (onRefetchTrigger !== undefined) {
      refetch();
    }
  }, [onRefetchTrigger, refetch]);

  const sortedAndFilteredVersions = useMemo(() => {
    // Sort by creation date
    return [...versions].sort((a, b) => {
      const aTime = new Date(a.created_at).getTime();
      const bTime = new Date(b.created_at).getTime();
      return sortOrder === "asc" ? aTime - bTime : bTime - aTime;
    });
  }, [versions, sortOrder]);

  const handleVersionClick = useCallback(
    (version: number) => {
      onSelectVersion(version);
    },
    [onSelectVersion]
  );

  const handleDeleteClick = useCallback((e: React.MouseEvent, version: number) => {
    e.stopPropagation();
    setVersionToDelete(version);
    setDeleteDialogOpen(true);
  }, []);

  const handleDeleteConfirm = useCallback(async () => {
    if (versionToDelete === null || !onDelete) return;

    try {
      setIsDeleting(true);
      await onDelete(versionToDelete);
      setDeleteDialogOpen(false);
      setVersionToDelete(null);
      refetch();
    } catch (err) {
      console.error("Failed to delete eval version:", err);
    } finally {
      setIsDeleting(false);
    }
  }, [versionToDelete, onDelete, refetch]);

  const handleDeleteCancel = useCallback(() => {
    setDeleteDialogOpen(false);
    setVersionToDelete(null);
  }, []);

  return (
    <Drawer
      variant="permanent"
      anchor="left"
      open={open}
      onClose={onClose}
      sx={{
        width: 400,
        flexShrink: 0,
        position: "relative",
        "& .MuiDrawer-paper": {
          width: 400,
          boxSizing: "border-box",
          position: "relative",
          height: "100%",
          borderRight: "1px solid",
          borderColor: "divider",
          overflow: "visible",
        },
      }}
    >
      <Box data-tour-id={TOUR_IDS.evaluatorDetailVersions} sx={{ p: 2, display: "flex", flexDirection: "column", height: "100%" }}>
        <Box sx={{ display: "flex", alignItems: "center", gap: 1, mb: 2 }}>
          <Tooltip title="Go back">
            <IconButton onClick={onClose} size="small" aria-label="Go back">
              <ArrowBackIcon />
            </IconButton>
          </Tooltip>
          <Typography variant="h6" sx={{ fontWeight: 600 }}>
            Versions: {evalName}
          </Typography>
        </Box>

        <Box sx={{ display: "flex", gap: 1, mb: 2, flexWrap: "wrap" }}>
          <Chip
            label={`Sort: ${sortOrder === "asc" ? "Oldest First" : "Newest First"}`}
            onClick={() => setSortOrder(sortOrder === "asc" ? "desc" : "asc")}
            clickable
            size="small"
          />
          <Chip
            label={excludeDeleted ? "Hide Deleted" : "Show Deleted"}
            onClick={() => setExcludeDeleted((prev) => !prev)}
            clickable
            size="small"
            color={excludeDeleted ? "default" : "warning"}
            variant={excludeDeleted ? "filled" : "outlined"}
          />
        </Box>

        <Divider sx={{ mb: 2 }} />

        {isLoading && (
          <Box sx={{ p: 2, textAlign: "center" }}>
            <Typography variant="body2" color="text.secondary">
              Loading versions...
            </Typography>
          </Box>
        )}

        {error && (
          <Box sx={{ p: 2 }}>
            <Typography variant="body2" color="error">
              Error loading versions: {error.message}
            </Typography>
          </Box>
        )}

        {!isLoading && !error && sortedAndFilteredVersions.length === 0 && (
          <Box sx={{ p: 2, textAlign: "center" }}>
            <Typography variant="body2" color="text.secondary">
              No versions found
            </Typography>
          </Box>
        )}

        {!isLoading && !error && sortedAndFilteredVersions.length > 0 && (
          <List sx={{ flex: 1, overflow: "auto" }}>
            {sortedAndFilteredVersions.map((version) => {
              const isSelected = selectedVersion === version.version;
              const isDeleted = !!version.deleted_at;
              const isLatest = version.version === latestVersion && !isDeleted;

              // Build display tags: Latest badge first, then other tags up to max 3 total
              // Don't show any tags for deleted versions
              const displayTags: Array<{ label: string; type: "latest" | "other" }> = [];

              if (!isDeleted) {
                if (isLatest) displayTags.push({ label: "Latest", type: "latest" });

                // Add other tags up to max of 3 total
                const tags = version.tags || [];
                const remainingSlots = 3 - displayTags.length;
                tags.slice(0, remainingSlots).forEach((tag) => {
                  displayTags.push({ label: tag, type: "other" });
                });
              }

              return (
                <ListItem key={version.version} disablePadding>
                  <ListItemButton
                    selected={isSelected}
                    onClick={() => !isDeleted && handleVersionClick(version.version)}
                    disabled={isDeleted}
                    sx={{
                      backgroundColor: isSelected ? "action.selected" : "transparent",
                      "&:hover": {
                        backgroundColor: isDeleted ? "transparent" : "action.hover",
                      },
                      "&.Mui-disabled": {
                        opacity: 1,
                      },
                      cursor: isDeleted ? "not-allowed" : "pointer",
                    }}
                  >
                    <ListItemText
                      primary={
                        <Box sx={{ display: "flex", alignItems: "center", gap: 0.5, flexWrap: "wrap" }}>
                          <Typography
                            variant="body2"
                            sx={{
                              fontWeight: 500,
                              color: isDeleted ? "text.disabled" : "text.primary",
                              textDecoration: isDeleted ? "line-through" : "none",
                            }}
                          >
                            Version {version.version}
                          </Typography>
                          {displayTags.map((tag, idx) => {
                            const color: "default" | "primary" = tag.type === "latest" ? "default" : "primary";
                            const variant: "filled" | "outlined" = tag.type === "latest" ? "filled" : "outlined";

                            return (
                              <Chip
                                key={`${tag.label}-${idx}`}
                                label={tag.label}
                                size="small"
                                color={color}
                                variant={variant}
                                sx={{ height: 18, fontSize: "0.7rem" }}
                              />
                            );
                          })}
                        </Box>
                      }
                      secondary={
                        <Box component="span" sx={{ mt: 0.5, display: "block" }}>
                          <Typography
                            variant="caption"
                            color="text.secondary"
                            component="span"
                            sx={{ color: isDeleted ? "text.disabled" : "text.secondary" }}
                          >
                            {version.model_provider} / {version.model_name}
                          </Typography>
                          <Typography
                            variant="caption"
                            color="text.secondary"
                            component="span"
                            sx={{
                              display: "block",
                              mt: 0.5,
                              color: isDeleted ? "text.disabled" : "text.secondary",
                            }}
                          >
                            {formatDateInTimezone(version.created_at, timezone, { hour12: !use24Hour })}
                          </Typography>
                          {isDeleted && version.deleted_at && (
                            <Typography
                              variant="caption"
                              component="span"
                              sx={{
                                display: "block",
                                mt: 0.5,
                                color: "text.disabled",
                              }}
                            >
                              Deleted at: {formatDateInTimezone(version.deleted_at, timezone, { hour12: !use24Hour })}
                            </Typography>
                          )}
                        </Box>
                      }
                    />
                    {!isDeleted && (
                      <IconButton
                        size="small"
                        onClick={(e) => handleDeleteClick(e, version.version)}
                        sx={{ color: "error.main" }}
                        aria-label="Delete version"
                      >
                        <DeleteIcon fontSize="small" />
                      </IconButton>
                    )}
                  </ListItemButton>
                </ListItem>
              );
            })}
          </List>
        )}
      </Box>

      <Dialog
        open={deleteDialogOpen}
        onClose={handleDeleteCancel}
        aria-labelledby="delete-version-dialog-title"
        aria-describedby="delete-version-dialog-description"
      >
        <DialogTitle id="delete-version-dialog-title">Delete Version?</DialogTitle>
        <DialogContent>
          <DialogContentText id="delete-version-dialog-description">
            Are you sure you want to delete <strong>Version {versionToDelete}</strong> of <strong>{evalName}</strong>?
          </DialogContentText>
          <Box sx={{ mt: 2, p: 2, bgcolor: "warning.lighter", borderRadius: 1 }}>
            <strong>Warning:</strong> This version and all of its contents will be deleted. This action cannot be undone.
          </Box>
        </DialogContent>
        <DialogActions sx={{ px: 3, pb: 2 }}>
          <Button onClick={handleDeleteCancel} disabled={isDeleting}>
            Cancel
          </Button>
          <Button
            onClick={handleDeleteConfirm}
            color="error"
            variant="contained"
            disabled={isDeleting}
            startIcon={isDeleting ? <CircularProgress size={16} /> : null}
          >
            {isDeleting ? "Deleting..." : "Delete"}
          </Button>
        </DialogActions>
      </Dialog>
    </Drawer>
  );
};

export default EvalVersionDrawer;
