'use client'

/**
 * DotMatrixBg - 工業風點陣背景
 * ============================
 * Nothing.tech 明亮工業風設計
 *
 * Features:
 * - CSS Pattern 實作 (高效能)
 * - 可調整點陣密度與顏色
 * - 支援漸層遮罩
 * - 固定背景或跟隨滾動
 *
 * Usage:
 *   <DotMatrixBg />
 *   <main>...content...</main>
 */

import { forwardRef, type HTMLAttributes } from 'react'
import { cn } from '@/lib/utils'

// =============================================================================
// Types
// =============================================================================

export interface DotMatrixBgProps extends HTMLAttributes<HTMLDivElement> {
  /** 點陣密度 (間距 px) */
  spacing?: number
  /** 點的大小 (px) */
  dotSize?: number
  /** 點的顏色 (CSS color) */
  dotColor?: string
  /** 背景顏色 */
  bgColor?: string
  /** 是否固定位置 (fixed) */
  fixed?: boolean
  /** 是否添加漸層遮罩 */
  fade?: 'none' | 'bottom' | 'edges'
  /** 透明度 (0-1) */
  opacity?: number
}

// =============================================================================
// Component
// =============================================================================

export const DotMatrixBg = forwardRef<HTMLDivElement, DotMatrixBgProps>(
  (
    {
      spacing = 24,
      dotSize = 1,
      dotColor = 'rgba(0, 0, 0, 0.08)',
      bgColor = '#FAFAFA',
      fixed = true,
      fade = 'none',
      opacity = 1,
      className,
      style,
      ...props
    },
    ref
  ) => {
    // CSS Pattern for dot matrix
    const dotPattern = `radial-gradient(circle, ${dotColor} ${dotSize}px, transparent ${dotSize}px)`

    // Fade gradients
    const _fadeStyles: Record<typeof fade, string> = {
      none: '',
      bottom: 'mask-image: linear-gradient(to bottom, black 70%, transparent 100%)',
      edges: 'mask-image: radial-gradient(ellipse at center, black 50%, transparent 100%)',
    }

    return (
      <div
        ref={ref}
        aria-hidden="true"
        className={cn(
          // Positioning
          fixed ? 'fixed' : 'absolute',
          'inset-0 -z-10',
          // Pointer events
          'pointer-events-none',
          // Custom
          className
        )}
        style={{
          backgroundColor: bgColor,
          backgroundImage: dotPattern,
          backgroundSize: `${spacing}px ${spacing}px`,
          backgroundPosition: '0 0',
          opacity,
          ...(fade !== 'none' && {
            WebkitMaskImage:
              fade === 'bottom'
                ? 'linear-gradient(to bottom, black 70%, transparent 100%)'
                : 'radial-gradient(ellipse at center, black 50%, transparent 100%)',
            maskImage:
              fade === 'bottom'
                ? 'linear-gradient(to bottom, black 70%, transparent 100%)'
                : 'radial-gradient(ellipse at center, black 50%, transparent 100%)',
          }),
          ...style,
        }}
        {...props}
      />
    )
  }
)

DotMatrixBg.displayName = 'DotMatrixBg'

// =============================================================================
// Preset Variants
// =============================================================================

/** 淺色點陣 (預設) */
export function DotMatrixLight(props: Omit<DotMatrixBgProps, 'dotColor' | 'bgColor'>) {
  return (
    <DotMatrixBg
      dotColor="rgba(0, 0, 0, 0.06)"
      bgColor="#FAFAFA"
      {...props}
    />
  )
}

/** 極淺點陣 (更subtle) */
export function DotMatrixSubtle(props: Omit<DotMatrixBgProps, 'dotColor' | 'bgColor'>) {
  return (
    <DotMatrixBg
      dotColor="rgba(0, 0, 0, 0.03)"
      bgColor="#FFFFFF"
      spacing={20}
      {...props}
    />
  )
}

/** 密集點陣 (更工業風) */
export function DotMatrixDense(props: Omit<DotMatrixBgProps, 'spacing'>) {
  return (
    <DotMatrixBg
      spacing={16}
      dotSize={1}
      {...props}
    />
  )
}

// =============================================================================
// Grid Lines Background (替代選項)
// =============================================================================

export interface GridLinesBgProps extends HTMLAttributes<HTMLDivElement> {
  /** 網格大小 (px) */
  gridSize?: number
  /** 線條顏色 */
  lineColor?: string
  /** 背景顏色 */
  bgColor?: string
  /** 是否固定 */
  fixed?: boolean
}

export const GridLinesBg = forwardRef<HTMLDivElement, GridLinesBgProps>(
  (
    {
      gridSize = 40,
      lineColor = 'rgba(0, 0, 0, 0.04)',
      bgColor = '#FAFAFA',
      fixed = true,
      className,
      style,
      ...props
    },
    ref
  ) => {
    const gridPattern = `
      linear-gradient(to right, ${lineColor} 1px, transparent 1px),
      linear-gradient(to bottom, ${lineColor} 1px, transparent 1px)
    `

    return (
      <div
        ref={ref}
        aria-hidden="true"
        className={cn(
          fixed ? 'fixed' : 'absolute',
          'inset-0 -z-10 pointer-events-none',
          className
        )}
        style={{
          backgroundColor: bgColor,
          backgroundImage: gridPattern,
          backgroundSize: `${gridSize}px ${gridSize}px`,
          ...style,
        }}
        {...props}
      />
    )
  }
)

GridLinesBg.displayName = 'GridLinesBg'
