import type { CSSProperties } from "react";

const baseFont =
  "var(--font-inter), -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif";

const editorTheme = {
  surface: "#FFFFFF",
  border: "#EDEEEF",
  text: "#191919",
  primary: "#7C51F8",
  primarySoft: "#F4F3FF",
  danger: "#D83B3B",
} as const;

export const inlineStyles = {
  toolbar: {
    position: "absolute",
    zIndex: 64,
    display: "inline-flex",
    alignItems: "center",
    flexWrap: "wrap",
    gap: 6,
    minHeight: 36,
    maxWidth: "calc(100% - 16px)",
    padding: "4px 6px",
    borderRadius: 8,
    border: `1px solid ${editorTheme.border}`,
    background: "rgba(255,255,255,0.96)",
    boxShadow: "0 12px 34px rgba(16,19,35,0.16)",
  },
  iconButton: {
    width: 28,
    height: 28,
    display: "inline-grid",
    placeItems: "center",
    boxSizing: "border-box",
    borderRadius: 6,
    border: `1px solid ${editorTheme.border}`,
    background: editorTheme.surface,
    color: editorTheme.text,
    fontSize: 13,
    fontWeight: 800,
    lineHeight: 0,
    padding: 0,
    cursor: "pointer",
  },
  iconButtonActive: {
    borderColor: editorTheme.primary,
    background: editorTheme.primarySoft,
    color: editorTheme.primary,
  },
  dangerButton: {
    borderColor: editorTheme.danger,
    background: editorTheme.danger,
    color: "#fff",
  },
  numberInput: {
    width: 54,
    height: 28,
    boxSizing: "border-box",
    borderRadius: 6,
    border: `1px solid ${editorTheme.border}`,
    background: editorTheme.surface,
    color: editorTheme.text,
    padding: "0 6px",
    font: `12px ${baseFont}`,
    outline: "none",
  },
  textInput: {
    width: 112,
    height: 28,
    boxSizing: "border-box",
    borderRadius: 6,
    border: `1px solid ${editorTheme.border}`,
    background: editorTheme.surface,
    color: editorTheme.text,
    padding: "0 7px",
    font: `12px ${baseFont}`,
    outline: "none",
  },
  colorInput: {
    width: 30,
    height: 28,
    borderRadius: 6,
    border: `1px solid ${editorTheme.border}`,
    background: editorTheme.surface,
    padding: 3,
    cursor: "pointer",
  },
  select: {
    height: 28,
    boxSizing: "border-box",
    borderRadius: 6,
    border: `1px solid ${editorTheme.border}`,
    background: editorTheme.surface,
    color: editorTheme.text,
    padding: "0 7px",
    font: `12px ${baseFont}`,
    outline: "none",
    cursor: "pointer",
  },
  fileButton: {
    height: 28,
    display: "inline-flex",
    alignItems: "center",
    justifyContent: "center",
    boxSizing: "border-box",
    borderRadius: 6,
    border: `1px solid ${editorTheme.border}`,
    background: editorTheme.surface,
    color: editorTheme.text,
    padding: "0 9px",
    fontSize: 12,
    fontWeight: 800,
    cursor: "pointer",
  },
  actionButton: {
    height: 28,
    display: "inline-flex",
    alignItems: "center",
    justifyContent: "center",
    boxSizing: "border-box",
    borderRadius: 6,
    border: `1px solid ${editorTheme.primary}`,
    background: editorTheme.primary,
    color: "#FFFFFF",
    padding: "0 9px",
    fontSize: 12,
    fontWeight: 900,
    cursor: "pointer",
    whiteSpace: "nowrap",
  },
  opacityInput: {
    width: 74,
    accentColor: editorTheme.primary,
    cursor: "pointer",
  },
  textEditor: {
    position: "absolute",
    zIndex: 7,
    boxSizing: "border-box",
    border: `1px solid ${editorTheme.primary}`,
    outline: "none",
    resize: "none",
    overflow: "auto",
    padding: 2,
    margin: 0,
    background: "rgba(255,255,255,0.96)",
  },
} satisfies Record<string, CSSProperties>;