import { useId, type CSSProperties } from "react";
import dwLogo from "./assets/dw.png";

export type UhuruBackgroundPattern = "none" | "grid" | "cross" | "circuit" | "dots";

export type UhuruBackgroundVideo = {
  src: string;
  poster?: string;
};

export interface UhuruBackgroundConfig {
  assetOpacity?: number;
  blur?: number | string;
  className?: string;
  fixed?: boolean;
  image?: string;
  imageFit?: CSSProperties["objectFit"];
  logo?: boolean | string;
  logoBlur?: number | string;
  logoOpacity?: number;
  overlay?: string;
  overlayOpacity?: number;
  pattern?: UhuruBackgroundPattern;
  patternColor?: string;
  patternOpacity?: number;
  patternSize?: number | string;
  position?: string;
  repeat?: CSSProperties["backgroundRepeat"];
  size?: string;
  video?: string | UhuruBackgroundVideo;
  zIndex?: number;
}

function cssSize(value: number | string | undefined) {
  return typeof value === "number" ? `${value}px` : value;
}

function circuitTileSize(value: number | string | undefined) {
  if (typeof value === "number") {
    return value;
  }

  const parsed = value ? Number.parseFloat(value) : Number.NaN;
  return Number.isFinite(parsed) ? parsed : 200;
}

function UhuruCircuitPattern({
  color,
  opacity,
  size,
}: {
  color?: string;
  opacity?: number;
  size?: number | string;
}) {
  const patternId = `uhuru-circuit-${useId().replace(/:/g, "")}`;
  const tileSize = circuitTileSize(size);
  const scale = tileSize / 200;
  const stroke = color ?? "currentColor";

  return (
    <svg
      aria-hidden="true"
      className="absolute inset-0 h-full w-full"
      style={{ opacity: opacity ?? 1 }}
    >
      <defs>
        <pattern height={tileSize} id={patternId} patternUnits="userSpaceOnUse" width={tileSize}>
          <g transform={`scale(${scale})`}>
            <path d="M 50 0 L 50 50 L 0 50" fill="none" opacity="0.4704" stroke={stroke} strokeWidth="1" />
            <path d="M 100 50 L 150 50 L 150 0" fill="none" opacity="0.4704" stroke={stroke} strokeWidth="1" />
            <path d="M 150 100 L 150 150 L 200 150" fill="none" opacity="0.4704" stroke={stroke} strokeWidth="1" />
            <path d="M 50 150 L 0 150 L 0 200" fill="none" opacity="0.4704" stroke={stroke} strokeWidth="1" />
            <circle cx="50" cy="50" fill={stroke} opacity="0.672" r="3" />
            <circle cx="150" cy="50" fill={stroke} opacity="0.672" r="3" />
            <circle cx="150" cy="150" fill={stroke} opacity="0.672" r="3" />
            <circle cx="50" cy="150" fill={stroke} opacity="0.672" r="3" />
          </g>
        </pattern>
      </defs>
      <rect fill={`url(#${patternId})`} height="100%" width="100%" />
    </svg>
  );
}

export function UhuruBackground({ config }: { config?: UhuruBackgroundConfig }) {
  if (!config) {
    return null;
  }

  const logoSource = typeof config.logo === "string" ? config.logo : config.logo ? dwLogo : undefined;
  const videoSource = typeof config.video === "string" ? config.video : config.video?.src;
  const videoPoster = typeof config.video === "string" ? undefined : config.video?.poster;
  const hasMedia = Boolean(videoSource || config.image || logoSource);
  const mediaStyle = {
    filter: config.blur !== undefined ? `blur(${cssSize(config.blur)})` : undefined,
    objectFit: config.imageFit ?? "cover",
    objectPosition: config.position ?? "center",
    opacity: config.assetOpacity ?? 1,
    transform: config.blur !== undefined ? "scale(1.04)" : undefined,
  } satisfies CSSProperties;
  const patternStyle = {
    "--uhuru-background-pattern-color": config.patternColor,
    "--uhuru-background-pattern-opacity": config.patternOpacity,
    "--uhuru-background-pattern-size": cssSize(config.patternSize),
  } as CSSProperties;

  return (
    <div
      aria-hidden="true"
      className={`${config.fixed !== false ? "fixed" : "absolute"} pointer-events-none inset-0 overflow-hidden ${config.className ?? ""}`}
      style={{ zIndex: 0 }}
    >
      {videoSource ? (
        <video
          autoPlay
          className="absolute inset-0 h-full w-full"
          loop
          muted
          poster={videoPoster}
          playsInline
          src={videoSource}
          style={mediaStyle}
        />
      ) : config.image ? (
        <img
          alt=""
          className="absolute inset-0 h-full w-full"
          src={config.image}
          style={mediaStyle}
        />
      ) : null}
      {logoSource && !videoSource && !config.image ? (
        <img
          alt=""
          className="absolute left-1/2 top-1/2 h-auto w-[min(60vw,28rem)] -translate-x-1/2 -translate-y-1/2"
          src={logoSource}
          style={{
            filter: `blur(${cssSize(config.logoBlur ?? config.blur ?? 8)})`,
            opacity: config.logoOpacity ?? 0.16,
          }}
        />
      ) : null}
      {config.pattern && config.pattern !== "none" && !hasMedia ? (
        config.pattern === "circuit" ? (
          <UhuruCircuitPattern
            color={config.patternColor}
            opacity={config.patternOpacity}
            size={config.patternSize}
          />
        ) : (
          <div
            className="uhuru-background-pattern absolute inset-0"
            data-uhuru-pattern={config.pattern}
            style={{
              ...patternStyle,
              backgroundPosition: config.position,
              backgroundRepeat: config.repeat,
              backgroundSize: config.size,
            }}
          />
        )
      ) : null}
      {config.overlay ? (
        <div
          className="absolute inset-0"
          style={{ background: config.overlay, opacity: config.overlayOpacity ?? 1 }}
        />
      ) : null}
    </div>
  );
}