import type { ComponentPropsWithoutRef } from "react";
import { cn } from "@/lib/utils";
import { SectionBackground, type SectionBackgroundVariant, type SectionIntensity } from "@/components/section-background";

export interface SectionProps extends ComponentPropsWithoutRef<"section"> {
  theme?: "light" | "dark";
  backgroundVariant?: SectionBackgroundVariant;
  intensity?: SectionIntensity;
  /** Full-section fine dot pattern (CSS, §57) — cheap, static, theme-aware. */
  dots?: boolean;
  /** Background grid/dots toggle (§Part 2). Set false to ensure no grid layer is rendered. */
  showGrid?: boolean;
}

/**
 * Vertical section rhythm with optional ThreeUI backgrounds and monochrome light/dark themes.
 */
export function Section({
  className,
  children,
  theme,
  backgroundVariant = "none",
  intensity = "subtle",
  dots = false,
  showGrid = true,
  ...props
}: SectionProps) {
  const isDark = theme === "dark";

  return (
    <section
      className={cn(
        "relative py-8 md:py-10 lg:py-12",
        isDark && "dark bg-[#020202] text-foreground overflow-hidden",
        (backgroundVariant !== "none" || (dots && showGrid)) && "relative overflow-hidden",
        className
      )}
      {...props}
    >
      {dots && showGrid && <SectionDots />}
      {backgroundVariant !== "none" && (
        <SectionBackground variant={backgroundVariant} intensity={intensity} />
      )}
      <div className="relative z-10 size-full">{children}</div>
    </section>
  );
}

/**
 * Fine, dense, technical dot field covering the whole section background (§16, §57).
 * Pure CSS (no WebGL, §19). Colour follows `--foreground` so it is white on dark
 * sections and near-black on light ones; a soft radial mask fades the edges so it
 * never competes with the content in the centre (§18).
 */
function SectionDots() {
  return (
    <div
      aria-hidden="true"
      className="pointer-events-none absolute inset-0 z-0 select-none [background-image:radial-gradient(circle,color-mix(in_srgb,var(--foreground)_16%,transparent)_1px,transparent_1.5px)] [background-size:17px_17px] [mask-image:radial-gradient(ellipse_120%_120%_at_50%_35%,#000_55%,transparent_100%)]"
    />
  );
}