"use client";

import dynamic from "next/dynamic";
import React from "react";

// Client-only dynamic imports to prevent any SSR/hydration issues with WebGL/Three.js
export const ThreeUIDefenseLines = dynamic(
  () =>
    import("@designcodeio/threeui").then((mod) => {
      const Component = mod.DefenseLines;
      return function DefenseLinesWrapper(props: React.ComponentProps<typeof Component>) {
        return (
          <Component
            mode="dark"
            saturation={0}
            opacity={0.35}
            {...props}
            className={`pointer-events-none absolute inset-0 size-full select-none ${props.className || ""}`}
          />
        );
      };
    }),
  { ssr: false }
);

export const ThreeUITopoField = dynamic(
  () =>
    import("@designcodeio/threeui").then((mod) => {
      const Component = mod.TopoField;
      return function TopoFieldWrapper(props: React.ComponentProps<typeof Component>) {
        return (
          <Component
            mode="dark"
            saturation={0}
            opacity={0.4}
            {...props}
            className={`pointer-events-none absolute inset-0 size-full select-none ${props.className || ""}`}
          />
        );
      };
    }),
  { ssr: false }
);

export const ThreeUIMatrixField = dynamic(
  () =>
    import("@designcodeio/threeui").then((mod) => {
      const Component = mod.MatrixField;
      return function MatrixFieldWrapper(props: React.ComponentProps<typeof Component>) {
        return (
          <Component
            mode="dark"
            saturation={0}
            opacity={0.35}
            {...props}
            className={`pointer-events-none absolute inset-0 size-full select-none ${props.className || ""}`}
          />
        );
      };
    }),
  { ssr: false }
);

export const ThreeUIGatewayFlow = dynamic(
  () =>
    import("@designcodeio/threeui").then((mod) => {
      const Component = mod.GatewayFlow;
      return function GatewayFlowWrapper(props: React.ComponentProps<typeof Component>) {
        return (
          <Component
            mode="dark"
            saturation={0}
            opacity={0.4}
            {...props}
            className={`pointer-events-none absolute inset-0 size-full select-none ${props.className || ""}`}
          />
        );
      };
    }),
  { ssr: false }
);

export const ThreeUIRibbonField = dynamic(
  () =>
    import("@designcodeio/threeui").then((mod) => {
      const Component = mod.RibbonFieldBackground;
      return function RibbonFieldWrapper(props: React.ComponentProps<typeof Component>) {
        return (
          <Component
            saturation={0}
            opacity={0.35}
            pointerAmount={0.3}
            speed={0.7}
            {...props}
            className={`pointer-events-none absolute inset-0 size-full select-none ${props.className || ""}`}
          />
        );
      };
    }),
  { ssr: false }
);

export const ThreeUIHalftoneRelay = dynamic(
  () =>
    import("@designcodeio/threeui").then((mod) => {
      const Component = mod.AmberHalftone;
      return function HalftoneRelayWrapper(props: React.ComponentProps<typeof Component>) {
        return (
          <Component
            mode="dark"
            saturation={0}
            opacity={0.45}
            {...props}
            className={`pointer-events-none absolute inset-0 size-full select-none ${props.className || ""}`}
          />
        );
      };
    }),
  { ssr: false }
);

// Vanishing Array (matrix-field/vanishing-array) — a laser-shader variant surfaced
// through LaserCollection. Monochrome (saturation:0) for the CTA side treatment.
export const ThreeUIVanishingArray = dynamic(
  () =>
    import("@designcodeio/threeui").then((mod) => {
      const Component = mod.LaserCollection;
      return function VanishingArrayWrapper(props: React.ComponentProps<typeof Component>) {
        return (
          <Component
            variant="vanishing-array"
            saturation={0}
            opacity={0.7}
            // The vanishing-array is a radial burst of radius ~1.5 in the
            // shader's aspect-normalised space; a wide CTA card spans ±2.7, so
            // at default size/length the rays stop well short of the side edges
            // (reads as "not full"). Maxing both extends the reach edge-to-edge.
            // pointer-events are disabled on the wrapper, so the burst origin
            // stays locked at dead-centre instead of tracking the cursor.
            size={2.5}
            length={2.5}
            {...props}
            className={`pointer-events-none absolute inset-0 size-full select-none ${props.className || ""}`}
          />
        );
      };
    }),
  { ssr: false }
);

// Particle Wordmark (text-animation/article-headings) — the real ThreeUI
// component, default visual character, monochrome. Text is UPPERCASE "QUTO AI".
export const ThreeUIParticleWordmark = dynamic(
  () =>
    import("@designcodeio/threeui").then((mod) => {
      // Runtime accepts `text` (default "ThreeUI"); the bundled .d.ts omits it, so
      // widen the type here rather than casting at every call site.
      const Component = mod.ParticleWordmark as React.ComponentType<{
        text?: string;
        mode?: "dark" | "light";
        saturation?: number;
        className?: string;
      }>;
      return function ParticleWordmarkWrapper(props: { text?: string; className?: string }) {
        return (
          <Component
            text="QUTO AI"
            mode="dark"
            saturation={0}
            {...props}
            className={`size-full ${props.className || ""}`}
          />
        );
      };
    }),
  { ssr: false }
);