import { Theme } from "@emotion/react";
import { SxProps } from "@mui/material";

interface KanbanStyles {
  syncingStyle: SxProps<Theme>;
  topHeader: SxProps<Theme>;
  laneHeader: SxProps<Theme>;
  badge: SxProps<Theme>;
  swimlaneWrapperStyle: SxProps<Theme>;
  columnStyle: SxProps<Theme>;
  stageStyle: SxProps<Theme>;
  stageBadge: SxProps<Theme>;
  cardContainer: SxProps<Theme>;
  cardContent: SxProps<Theme>;
  cardHeaderStyle: SxProps<Theme>;
  cardAvatar: SxProps<Theme>;
  statusStyle: SxProps<Theme>;
  codeStyle: SxProps<Theme>;
  nameIconContainer: SxProps<Theme>;
  leadName: SxProps<Theme>;
  iconStyle: SxProps<Theme>;
  leadOwnerStyle: SxProps<Theme>;
  calendarIcon: SxProps<Theme>;
  dateStyle: SxProps<Theme>;
  subSectionAccordion: SxProps<Theme>;
  subSectionCountContainer: SxProps<Theme>;
  cardsContainer: SxProps<Theme>;
  settingStyle: SxProps<Theme>;
  swimLaneAccordionStyle: SxProps<Theme>;
  subSectionHeaderContainer: SxProps<Theme>;
  showMoreStyle: SxProps<Theme>;
}

export const kanbanStyles: KanbanStyles = {
  syncingStyle: {
    display: "flex",
    flexDirection: "row",
    gap: "8px",
    width: "100%",
  },
  topHeader: {
    display: "flex",
    alignItems: "center",
    gap: 1,
    px: 1,
    pt: 2,
    bgcolor: "white",
    width: "fit-content",
    position: "sticky", // Add sticky positioning
    top: 0, // Stick to the top of the viewport
    right: 0,
    zIndex: 1100, // Ensure it stays above other content
  },
  laneHeader: {
    flex: 1, // Equal width distribution
    minWidth: "320px",
    maxWidth: "320px",
    display: "flex",
    fontWeight: 700,
    fontSize: "16px",
    borderRadius: "6px",
    alignItems: "center",
    justifyContent: "center",
    py: "8px",
    px: "12px",
    position: "relative",
  },
  badge: {
    position: "absolute",
    top: "-12px",
    left: "8px",
    px: 1,
    color: "white",
    borderRadius: "8px",
  },
  swimlaneWrapperStyle: {
    flexDirection: "row-reverse",
    bgcolor: "white",
    minHeight: 44, // overall height
    px: 2,
    py: 0, // remove vertical padding
    "&.Mui-expanded": {
      minHeight: 44,
    },
    "& .MuiAccordionSummary-content": {
      margin: "8px 0", // reduced vertical spacing
      display: "flex",
      alignItems: "center",
      justifyContent: "flex-start",
      gap: 5,
      "&.Mui-expanded": {
        margin: "8px 0", // maintain same margin when expanded
      },
    },
    "& .MuiAccordionSummary-expandIconWrapper": {
      mr: 0, // reduce gap between icon and content
    },
  },
  columnStyle: {
    flex: 1, // Equal width distribution
    p: "12px",
    // px: "2px",
    minHeight: "500px",
    // borderRight: "1px solid #e0e0e0",

    borderRadius: "6px",
    minWidth: "320px",
    maxWidth: "320px",
  },
  stageStyle: {
    mb: 2,
    bgcolor: "#f9fafb",
    borderTopLeftRadius: "8px !important",
    borderBottomLeftRadius: "8px !important",
    borderTopRightRadius: "8px !important",
    // borderRadius: 2,
    overflow: "hidden",
    boxShadow: "none",
    "&:before": { display: "none" }, // remove default divider line
  },
  stageBadge: {
    "& .MuiBadge-badge": {
      color: "black",
      fontWeight: "bold",
      fontSize: "0.75rem",
    },
  },
  cardContainer: {
    borderRadius: 2,
    bgcolor: "#fff",
    position: "relative",

    boxShadow:
      "0px 1.36px 2.72px rgba(23, 23, 23, 0.06), 0px 2.72px 5.44px rgba(23, 23, 23, 0.1)",
    border: "none", // explicitly remove border
  },
  cardContent: {
    p: "12px !important",
    display: "flex",
    flexDirection: "column",
    gap: "4px",
  },
  cardHeaderStyle: {
    display: "flex",
    justifyContent: "space-between",
    alignItems: "flex-start",
    // mb: 1,
  },
  cardAvatar: {
    width: "18px",
    height: "18px",
    fontSize: "12px",
    fontWeight: 600,
    bgcolor: "#e5e7eb",
    color: "#374151",
    mr: 1,
  },
  statusStyle: {
    height: 20,
    fontSize: "0.6875rem",

    fontWeight: 500,
  },
  codeStyle: {
    fontSize: "12px",
    color: "#6b7280",
    fontWeight: 500,
    mb: 0.5,
    cursor: "pointer",
  },
  nameIconContainer: {
    display: "flex",
    justifyContent: "space-between",
    alignItems: "flex-start",
    borderBottom: "1px solid #e5e7eb",
    pb: 2,
  },
  leadName: {
    fontSize: "15px",
    fontWeight: 500,
    color: "#1f2937",
    lineHeight: 1.3,
  },
  iconStyle: {
    color: "#6b7280",
    bgcolor: "#f3f4f6",
    borderRadius: "50%",
    width: "20px",
    height: "20px",
    p: 0.6,
  },
  leadOwnerStyle: {
    fontSize: "12px",
    color: "#374151",
    fontWeight: 500,
  },
  calendarIcon: {
    width: "14px",
    height: "14px",
    color: "#7b7a79",
    mr: 0.5,
  },
  dateStyle: {
    fontSize: "12px",
    color: "#7b7a79",

    fontWeight: 500,
  },
  subSectionAccordion: {
    height: "52px", // fixed height
    minHeight: "52px", // prevent auto-expansion
    "&.Mui-expanded": {
      minHeight: "52px", // fix expanded state height
      height: "52px",
    },
    border: "1px solid #e2e8f0",
    borderTopRightRadius: "8px",
    px: 2,
  },
  subSectionCountContainer: {
    // px: 1,
    color: "#574649",
    height: "26px",
    width: "26px !important",
    fontSize: "10px",
    fontWeight: "bold",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    borderRadius: "50%",
  },
  cardsContainer: {
    px: 1,
    gap: "12px",
    display: "flex",
    flexDirection: "column",
    p: "8px",
  },
  settingStyle: {
    bgcolor: "#f8fafc",
    width: "56px",
    height: "41px",
    borderRadius: "6px",
    border: "1px solid #e2e8f0",
  },
  swimLaneAccordionStyle: {
    mb: 1,
    "&:before": { display: "none" },
    py: 0,
    boxShadow: "none",
  },
  subSectionHeaderContainer: {
    display: "flex",
    alignItems: "center",
    gap: "8px",
  },
  showMoreStyle: {
    cursor: "pointer",
    fontSize: "12px",
    fontWeight: 600,
    textAlign: "center",
    color: "#7a5af8",
    mt: 1,
  },
};