import type { CSSProperties } from "react";
import type { ImageBlockProps } from "@/features/editor/state/editorStore";

export type ImageWidthMode = "auto" | "full" | "fixed" | null | undefined;
export type ImageBorderRadiusToken = "none" | "sm" | "md" | "lg" | "full" | null | undefined;

export interface ImageExportStyleInput {
  backgroundColorCustom?: string | null | undefined;
  widthMode?: ImageWidthMode;
  widthPx?: number | null | undefined;
  borderRadius?: ImageBorderRadiusToken;
  borderRadiusPx?: number | null | undefined;
}

export interface ImageExportStyles {
  wrapperStyleParts: string[];
  imgStyleParts: string[];
}

export function computeImageExportStyles(input: ImageExportStyleInput): ImageExportStyles {
  const wrapperStyleParts: string[] = [];
  const imgStyleParts: string[] = [];

  if (input.backgroundColorCustom && input.backgroundColorCustom.trim() !== "") {
    wrapperStyleParts.push(`background-color:${input.backgroundColorCustom.trim()}`);
  }

  const widthMode: ImageWidthMode = input.widthMode ?? "auto";
  if (widthMode === "fixed" && typeof input.widthPx === "number" && input.widthPx > 0) {
    const widthEm = input.widthPx / 16;
    imgStyleParts.push(`width:${widthEm}em`);
  }

  const radiusToken: ImageBorderRadiusToken = input.borderRadius ?? "md";
  const fallbackRadiusPx =
    radiusToken === "none"
      ? 0
      : radiusToken === "sm"
        ? 4
        : radiusToken === "lg"
          ? 16
          : radiusToken === "full"
            ? 9999
            : 8;

  const radiusPx =
    typeof input.borderRadiusPx === "number" && input.borderRadiusPx >= 0
      ? input.borderRadiusPx
      : fallbackRadiusPx;

  if (typeof radiusPx === "number" && radiusPx >= 0) {
    imgStyleParts.push(`border-radius:${radiusPx === 9999 ? "9999px" : `${radiusPx}px`}`);
  }

  return {
    wrapperStyleParts,
    imgStyleParts,
  };
}

export interface ImageEditorTokens {
  widthPx?: number;
  radiusPx: number;
}

export function computeImageEditorTokens(input: ImageExportStyleInput): ImageEditorTokens {
  const widthMode: ImageWidthMode = input.widthMode ?? "auto";
  let widthPx: number | undefined;

  if (widthMode === "fixed" && typeof input.widthPx === "number" && input.widthPx > 0) {
    widthPx = input.widthPx;
  }

  const radiusToken: ImageBorderRadiusToken = input.borderRadius ?? "md";
  const fallbackRadiusPx =
    radiusToken === "none"
      ? 0
      : radiusToken === "sm"
        ? 4
        : radiusToken === "lg"
          ? 16
          : radiusToken === "full"
            ? 9999
            : 8;

  const radiusPx =
    typeof input.borderRadiusPx === "number" && input.borderRadiusPx >= 0
      ? input.borderRadiusPx
      : fallbackRadiusPx;

  return {
    widthPx,
    radiusPx,
  };
}

export interface ImagePublicTokens {
  alignClass: string;
  wrapperStyle: CSSProperties;
  imageStyle: CSSProperties;
}

const pxToEm = (px: number, base = 16) => `${px / base}em`;

export function computeImagePublicTokens(props: ImageBlockProps): ImagePublicTokens {
  const alignClass =
    props.align === "left" ? "justify-start" : props.align === "right" ? "justify-end" : "justify-center";

  const widthMode: ImageWidthMode = props.widthMode ?? "auto";

  const wrapperStyle: CSSProperties = {};
  const imageStyle: CSSProperties = {
    display: "block",
    maxWidth: "100%",
    height: "auto",
  };

  if (widthMode === "fixed" && typeof props.widthPx === "number" && props.widthPx > 0) {
    imageStyle.width = pxToEm(props.widthPx);
  }

  const radiusToken: ImageBorderRadiusToken = props.borderRadius ?? "md";
  const fallbackRadiusPx =
    radiusToken === "none"
      ? 0
      : radiusToken === "sm"
        ? 4
        : radiusToken === "lg"
          ? 16
          : radiusToken === "full"
            ? 9999
            : 8;

  const radiusPx =
    typeof props.borderRadiusPx === "number" && props.borderRadiusPx >= 0
      ? props.borderRadiusPx
      : fallbackRadiusPx;

  imageStyle.borderRadius = radiusPx === 9999 ? "9999px" : pxToEm(radiusPx);

  if (props.backgroundColorCustom && props.backgroundColorCustom.trim() !== "") {
    wrapperStyle.backgroundColor = props.backgroundColorCustom.trim();
  }

  return {
    alignClass,
    wrapperStyle,
    imageStyle,
  };
}
