import { styled } from "@mui/material/styles";

/**
 * Theme-aware styling for the Quill rich-text editor and its read-only
 * rendered output. Replaces the former `offers.css` — the overrides now layer
 * on top of `react-quill-new/dist/quill.snow.css` via scoped `styled()`
 * wrappers, resolving against `theme.vars` for light/dark.
 *
 * The font/size picker rules from the old stylesheet were dropped: the editor
 * toolbar (see RichEditor.tsx) exposes neither picker. The `.ql-font-*`
 * content classes are kept so legacy stored HTML still renders with its font.
 */

// Font classes applied to content spans (legacy HTML). Shared by editor + view.
const QL_FONT_CLASSES = {
  "& .ql-font-arial": { fontFamily: "Arial, sans-serif" },
  "& .ql-font-tahoma": { fontFamily: "Tahoma, sans-serif" },
  "& .ql-font-verdana": { fontFamily: "Verdana, sans-serif" },
  "& .ql-font-georgia": { fontFamily: "Georgia, serif" },
  "& .ql-font-times-new-roman": { fontFamily: '"Times New Roman", serif' },
  "& .ql-font-courier-new": { fontFamily: '"Courier New", monospace' },
  "& .ql-font-trebuchet-ms": { fontFamily: '"Trebuchet MS", sans-serif' },
  "& .ql-font-impact": { fontFamily: "Impact, sans-serif" },
  "& .ql-font-comic-sans-ms": { fontFamily: '"Comic Sans MS", cursive' },
  "& .ql-font-lucida-console": { fontFamily: '"Lucida Console", monospace' },
  "& .ql-font-palatino-linotype": { fontFamily: '"Palatino Linotype", serif' },
  "& .ql-font-garamond": { fontFamily: "Garamond, serif" },
} as const;

/** Wrapper around <ReactQuill> — was `.admin-rich-editor`. */
export const RichEditorRoot = styled("div")(({ theme }) => ({
  border: `1px solid ${theme.vars!.palette.divider}`,
  borderRadius: "0.5rem",
  overflow: "visible",

  "& .quill": { display: "flex", flexDirection: "column" },

  // Toolbar
  "& .ql-toolbar.ql-snow": {
    background: theme.vars!.palette.background.paper,
    border: "none",
    borderBottom: `1px solid ${theme.vars!.palette.divider}`,
    borderRadius: "0.5rem 0.5rem 0 0",
    padding: "0.5rem",
    flexWrap: "wrap",
    gap: "2px",
  },
  "& .ql-toolbar .ql-formats": { marginRight: "8px" },

  // Toolbar icons (idle)
  "& .ql-snow .ql-stroke": { stroke: theme.vars!.palette.text.secondary },
  "& .ql-snow .ql-fill": { fill: theme.vars!.palette.text.secondary },
  "& .ql-snow .ql-picker-label": {
    color: theme.vars!.palette.text.secondary,
    borderColor: theme.vars!.palette.divider,
  },

  // Toolbar icons (hover)
  "& .ql-snow button:hover .ql-stroke, & .ql-snow .ql-picker-label:hover .ql-stroke":
    { stroke: theme.vars!.palette.text.primary },
  "& .ql-snow button:hover .ql-fill, & .ql-snow .ql-picker-label:hover .ql-fill":
    { fill: theme.vars!.palette.text.primary },
  "& .ql-snow button:hover, & .ql-snow .ql-picker-label:hover": {
    color: theme.vars!.palette.text.primary,
  },

  // Active state
  "& .ql-snow button.ql-active": {
    color: theme.vars!.palette.primary.main,
    background: `rgba(${theme.vars!.palette.primary.mainChannel} / 0.15)`,
    borderRadius: "4px",
  },
  "& .ql-snow button.ql-active .ql-stroke": {
    stroke: theme.vars!.palette.primary.main,
  },
  "& .ql-snow button.ql-active .ql-fill, & .ql-snow button.ql-active .ql-stroke.ql-fill":
    { fill: theme.vars!.palette.primary.main },
  "& .ql-snow .ql-picker-item.ql-selected": {
    color: theme.vars!.palette.primary.main,
  },
  "& .ql-snow .ql-picker-label.ql-active": {
    color: theme.vars!.palette.primary.main,
  },
  "& .ql-snow .ql-picker-label.ql-active .ql-stroke": {
    stroke: theme.vars!.palette.primary.main,
  },

  // Dropdowns (color / background / align pickers)
  "& .ql-snow .ql-picker-options": {
    background: theme.vars!.palette.background.default,
    border: `1px solid ${theme.vars!.palette.divider}`,
    borderRadius: "0.375rem",
    boxShadow: "0 4px 12px rgba(0, 0, 0, 0.08)",
    zIndex: 1000,
    padding: "0.25rem",
    ...theme.applyStyles("dark", {
      boxShadow: "0 4px 16px rgba(0, 0, 0, 0.3)",
    }),
  },
  "& .ql-snow .ql-picker-item": {
    color: theme.vars!.palette.text.secondary,
    padding: "0.25rem 0.5rem",
    borderRadius: "0.25rem",
  },
  "& .ql-snow .ql-picker-item:hover": {
    color: theme.vars!.palette.text.primary,
    background: theme.vars!.palette.background.paper,
  },

  // Editor area
  "& .ql-container.ql-snow": {
    border: "none",
    borderRadius: "0 0 0.5rem 0.5rem",
    fontFamily: "Tahoma, sans-serif",
    fontSize: "14px",
  },
  "& .ql-editor": {
    minHeight: "var(--re-min-height, 120px)",
    padding: "0.75rem",
    color: theme.vars!.palette.text.primary,
    lineHeight: 1.6,
    fontFamily: "Tahoma, sans-serif",
    fontSize: "14px",
    background: theme.vars!.palette.background.paper,
  },
  "& .ql-editor.ql-blank::before": {
    color: theme.vars!.palette.text.disabled,
    fontStyle: "normal",
  },
  "& .ql-editor ul, & .ql-editor ol": { paddingLeft: "1.5rem" },

  // Color picker
  '& .ql-snow .ql-color-picker .ql-picker-options[aria-hidden="false"]': {
    width: "176px",
    padding: "0.375rem",
    display: "flex",
    flexWrap: "wrap",
    gap: "2px",
  },
  "& .ql-snow .ql-color-picker .ql-picker-item": {
    width: "18px",
    height: "18px",
    borderRadius: "2px",
    margin: 0,
    padding: 0,
    flexShrink: 0,
  },

  // Tooltip (link editor)
  "& .ql-snow .ql-tooltip": {
    background: theme.vars!.palette.background.default,
    border: `1px solid ${theme.vars!.palette.divider}`,
    borderRadius: "0.375rem",
    boxShadow: "0 4px 12px rgba(0, 0, 0, 0.08)",
    color: theme.vars!.palette.text.primary,
    ...theme.applyStyles("dark", {
      boxShadow: "0 4px 16px rgba(0, 0, 0, 0.3)",
    }),
  },
  '& .ql-snow .ql-tooltip input[type="text"]': {
    background: theme.vars!.palette.background.paper,
    border: `1px solid ${theme.vars!.palette.divider}`,
    borderRadius: "0.25rem",
    color: theme.vars!.palette.text.primary,
    padding: "0.25rem 0.5rem",
  },
  "& .ql-snow .ql-tooltip a": { color: theme.vars!.palette.primary.main },

  ...QL_FONT_CLASSES,

  // Keep picker dropdowns on-screen on narrow phones (the color picker is a
  // fixed 176px which overflows a ~360px viewport).
  "@media (max-width:480px)": {
    "& .ql-snow .ql-picker-options": {
      minWidth: 0,
      maxWidth: "calc(100vw - 32px)",
    },
    '& .ql-snow .ql-color-picker .ql-picker-options[aria-hidden="false"]': {
      width: "auto",
      maxWidth: "calc(100vw - 32px)",
    },
  },
}));

/** Read-only rendered Quill HTML output — was `.admin-rich-text-view`. */
export const RichTextView = styled("div")(({ theme }) => ({
  color: theme.vars!.palette.text.secondary,
  lineHeight: 1.6,
  fontSize: "0.875rem",
  overflowWrap: "break-word",
  wordBreak: "break-word",
  minWidth: 0,

  "& ul, & ol": { paddingLeft: "1.5rem", margin: "0.25rem 0 0.75rem" },
  "& li": { marginBottom: "0.15rem" },
  "& a": { color: theme.vars!.palette.primary.main },
  "& strong, & b": {
    fontWeight: 600,
    color: theme.vars!.palette.text.primary,
    display: "inline-block",
    marginTop: "0.5rem",
  },
  "& br + b, & br + strong": { marginTop: "0.75rem" },
  "& > br:first-child, & ul + br, & ol + br": { display: "none" },

  ...QL_FONT_CLASSES,
}));