'use client'

/**
 * GlassCard - 純白透光玻璃卡片
 * ============================
 * Nothing.tech 明亮工業風設計
 *
 * Features:
 * - backdrop-blur 毛玻璃效果
 * - 極淡灰色邊框 (border-black/5)
 * - Hover 浮動效果
 * - 支援多種尺寸與變體
 *
 * WCAG 2.1 AA: 背景對比度 4.5:1+
 */

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

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

export interface GlassCardProps extends HTMLAttributes<HTMLDivElement> {
  /** 子元素 */
  children: ReactNode
  /** 變體樣式 */
  variant?: 'default' | 'elevated' | 'copilot' | 'subtle'
  /** 內距尺寸 */
  padding?: 'none' | 'sm' | 'md' | 'lg'
  /** 是否啟用 hover 效果 */
  hoverable?: boolean
  /** 是否可點擊 (啟用 cursor-pointer) */
  clickable?: boolean
  /** 無障礙標籤 */
  'aria-label'?: string
}

// =============================================================================
// Styles
// =============================================================================

const variantStyles = {
  default: [
    // 白色毛玻璃
    'bg-white/70',
    'backdrop-blur-[16px]',
    '-webkit-backdrop-blur-[16px]',
    // 極淡邊框
    'border border-black/[0.05]',
    // 陰影
    'shadow-[0_4px_24px_rgba(0,0,0,0.06)]',
    // 圓角
    'rounded-card',
  ],
  elevated: [
    'bg-white/80',
    'backdrop-blur-[20px]',
    '-webkit-backdrop-blur-[20px]',
    'border border-black/[0.08]',
    'shadow-[0_8px_32px_rgba(0,0,0,0.10)]',
    'rounded-card',
  ],
  copilot: [
    // AI Copilot 面板 - 帶紫色調
    'bg-nothing-cream/90',
    'backdrop-blur-[20px]',
    '-webkit-backdrop-blur-[20px]',
    'border border-status-thinking/20',
    'shadow-[0_4px_24px_rgba(139,92,246,0.1)]',
    'rounded-card',
  ],
  subtle: [
    'bg-white/50',
    'backdrop-blur-[12px]',
    '-webkit-backdrop-blur-[12px]',
    'border border-black/[0.03]',
    'shadow-[0_2px_12px_rgba(0,0,0,0.04)]',
    'rounded-card',
  ],
}

const paddingStyles = {
  none: '',
  sm: 'p-3',
  md: 'p-5',
  lg: 'p-6',
}

const hoverStyles = [
  'transition-all duration-300 ease-out',
  'hover:bg-white/80',
  'hover:shadow-[0_8px_32px_rgba(0,0,0,0.10)]',
  'hover:border-black/[0.08]',
  'hover:-translate-y-0.5',
]

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

export const GlassCard = forwardRef<HTMLDivElement, GlassCardProps>(
  (
    {
      children,
      variant = 'default',
      padding = 'md',
      hoverable = false,
      clickable = false,
      className,
      ...props
    },
    ref
  ) => {
    return (
      <div
        ref={ref}
        className={cn(
          // Base styles
          variantStyles[variant],
          paddingStyles[padding],
          // Hover effect
          hoverable && hoverStyles,
          // Clickable
          clickable && 'cursor-pointer',
          // Custom classes
          className
        )}
        role={clickable ? 'button' : undefined}
        tabIndex={clickable ? 0 : undefined}
        {...props}
      >
        {children}
      </div>
    )
  }
)

GlassCard.displayName = 'GlassCard'

// =============================================================================
// Sub-components
// =============================================================================

export interface GlassCardHeaderProps extends HTMLAttributes<HTMLDivElement> {
  children: ReactNode
}

export function GlassCardHeader({
  children,
  className,
  ...props
}: GlassCardHeaderProps) {
  return (
    <div
      className={cn('flex items-center justify-between mb-4', className)}
      {...props}
    >
      {children}
    </div>
  )
}

export interface GlassCardTitleProps extends HTMLAttributes<HTMLHeadingElement> {
  children: ReactNode
  as?: 'h1' | 'h2' | 'h3' | 'h4'
}

export function GlassCardTitle({
  children,
  as: Tag = 'h3',
  className,
  ...props
}: GlassCardTitleProps) {
  return (
    <Tag
      className={cn(
        'font-heading text-lg font-semibold text-nothing-gray-900',
        className
      )}
      {...props}
    >
      {children}
    </Tag>
  )
}

export interface GlassCardContentProps extends HTMLAttributes<HTMLDivElement> {
  children: ReactNode
}

export function GlassCardContent({
  children,
  className,
  ...props
}: GlassCardContentProps) {
  return (
    <div className={cn('flex-1', className)} {...props}>
      {children}
    </div>
  )
}

export interface GlassCardFooterProps extends HTMLAttributes<HTMLDivElement> {
  children: ReactNode
}

export function GlassCardFooter({
  children,
  className,
  ...props
}: GlassCardFooterProps) {
  return (
    <div
      className={cn(
        'mt-4 pt-3 border-t border-nothing-gray-200',
        className
      )}
      {...props}
    >
      {children}
    </div>
  )
}
