import { useId } from "react";
import type { CSSProperties } from "react";

import Accessories from "./top/accessories";
import Clothe from "./clothes";
import Face from "./face";
import Skin from "./Skin";
import Top from "./top";
import type { AvatarSvgProps } from "../types";
import { AvatarStyle } from "../types";

export { AvatarStyle };
export type { AvatarSvgProps as Props };

export default function Avatar({ avatarStyle, style }: AvatarSvgProps) {
  const path1 = useId();
  const path2 = useId();
  const path3 = useId();
  const mask1 = useId();
  const mask2 = useId();
  const mask3 = useId();

  const circle = avatarStyle === AvatarStyle.Circle;

  // Extract width and height from style prop if provided, otherwise use defaults
  const svgWidth = style?.width
    ? typeof style.width === "number"
      ? `${style.width}px`
      : style.width
    : "264px";
  const svgHeight = style?.height
    ? typeof style.height === "number"
      ? `${style.height}px`
      : style.height
    : "280px";

  // Determine if height was explicitly provided
  const heightWasProvided = style?.height !== undefined;

  // Create isolated style object that prevents external CSS from affecting the SVG
  const isolatedStyle: CSSProperties = {
    // CSS isolation: reset all inherited styles
    all: "initial",
    // Restore essential SVG properties
    display: "block",
    // Apply width from style prop or defaults
    width: svgWidth,
    // Make SVG responsive: scale down to fit container while maintaining aspect ratio
    // The viewBox (0 0 264 280) ensures aspect ratio is preserved when maxWidth constrains the width
    maxWidth: "100%",
    // Use provided height if given, otherwise auto for responsive scaling
    height: heightWasProvided ? svgHeight : "auto",
    // Merge other style properties (excluding width/height to avoid duplication)
    ...(style
      ? Object.entries(style)
          .filter(([key]) => key !== "width" && key !== "height")
          .reduce((acc, [key, value]) => {
            acc[key] = value;
            return acc;
          }, {} as Record<string, CSSProperties[keyof CSSProperties]>)
      : {}),
    // Ensure these critical properties are always set to prevent external CSS interference
    boxSizing: "border-box",
    margin: "0",
    padding: "0",
    border: "none",
    verticalAlign: "baseline",
    font: "initial",
    color: "initial",
    background: "transparent",
    // Explicitly block visual effects that external CSS might try to add
    boxShadow: "none",
    filter: "none",
    backdropFilter: "none",
    textShadow: "none",
    // Prevent external transforms (we handle transforms internally for animations)
    transform: "none",
    // Prevent external opacity changes
    opacity: "1",
  };

  return (
    <svg
      style={isolatedStyle}
      width={svgWidth}
      height={svgHeight}
      viewBox="0 0 264 280"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlnsXlink="http://www.w3.org/1999/xlink"
      // Prevent external CSS from targeting child elements via CSS reset
      // Note: Inline attributes (fill, stroke, etc.) take precedence over CSS,
      // but we add this style to the root SVG to minimize inheritance
    >
      <desc>Created with getavataaars.com</desc>
      <defs>
        <circle id={path1} cx="120" cy="120" r="120" />
        <path
          d="M12,160 C12,226.27417 65.72583,280 132,280 C198.27417,280 252,226.27417 252,160 L264,160 L264,-1.42108547e-14 L-3.19744231e-14,-1.42108547e-14 L-3.19744231e-14,160 L12,160 Z"
          id={path2}
        />
        <path
          d="M124,144.610951 L124,163 L128,163 L128,163 C167.764502,163 200,195.235498 200,235 L200,244 L0,244 L0,235 C-4.86974701e-15,195.235498 32.235498,163 72,163 L72,163 L76,163 L76,144.610951 C58.7626345,136.422372 46.3722246,119.687011 44.3051388,99.8812385 C38.4803105,99.0577866 34,94.0521096 34,88 L34,74 C34,68.0540074 38.3245733,63.1180731 44,62.1659169 L44,56 L44,56 C44,25.072054 69.072054,5.68137151e-15 100,0 L100,0 L100,0 C130.927946,-5.68137151e-15 156,25.072054 156,56 L156,62.1659169 C161.675427,63.1180731 166,68.0540074 166,74 L166,88 C166,94.0521096 161.51969,99.0577866 155.694861,99.8812385 C153.627775,119.687011 141.237365,136.422372 124,144.610951 Z"
          id={path3}
        />
      </defs>
      <g
        id="Avataaar"
        stroke="none"
        strokeWidth="1"
        fill="none"
        fillRule="evenodd"
      >
        <g
          transform="translate(-825.000000, -1100.000000)"
          id="Avataaar/Circle"
        >
          <g transform="translate(825.000000, 1100.000000)">
            {circle ? (
              <g
                id="Circle"
                strokeWidth="1"
                fillRule="evenodd"
                transform="translate(12.000000, 40.000000)"
              >
                <mask id={mask1} fill="white">
                  <use xlinkHref={"#" + path1} />
                </mask>
                <use
                  id="Circle-Background"
                  fill="#E6E6E6"
                  xlinkHref={"#" + path1}
                />
                <g
                  id="Color/Palette/Blue-01"
                  mask={"url(#" + mask1 + ")"}
                  fill="#65C9FF"
                >
                  <rect id="🖍Color" x="0" y="0" width="240" height="240" />
                </g>
              </g>
            ) : null}
            {circle ? (
              <mask id={mask2} fill="white">
                <use xlinkHref={"#" + path2} />
              </mask>
            ) : null}
            <g id="Mask" />
            <g
              id="Avataaar"
              strokeWidth="1"
              fillRule="evenodd"
              mask={"url(#" + mask2 + ")"}
            >
              <g id="Body" transform="translate(32.000000, 36.000000)">
                <mask id={mask3} fill="white">
                  <use xlinkHref={"#" + path3} />
                </mask>
                <use fill="#D0C6AC" xlinkHref={"#" + path3} />
                <Skin maskID={mask3} />
                <path
                  d="M156,79 L156,102 C156,132.927946 130.927946,158 100,158 C69.072054,158 44,132.927946 44,102 L44,79 L44,94 C44,124.927946 69.072054,150 100,150 C130.927946,150 156,124.927946 156,94 L156,79 Z"
                  id="Neck-Shadow"
                  fillOpacity="0.100000001"
                  fill="#000000"
                  mask={"url(#" + mask3 + ")"}
                />
              </g>
              <Clothe />
              <Face />
              <Top>
                <Accessories />
              </Top>
            </g>
          </g>
        </g>
      </g>
    </svg>
  );
}