/**
 * TemplateGrid Component
 * 
 * A reusable template selector grid for choosing between pre-designed templates.
 * Used across features like Cookie Consent, GDPR Notice, Email templates, etc.
 * 
 * @example
 * ```tsx
 * <TemplateGrid
 *   templates={myTemplates}
 *   selectedId="default"
 *   onSelect={(id) => handleTemplateSelect(id)}
 *   columns={2}
 * />
 * ```
 * 
 * @component TemplateGrid
 * @package Swift Commerce
 */

import { Check, LucideIcon } from "lucide-react"
import { cn } from "@/lib/utils"
import { ProIndicator } from "@/components/pro/pro-indicator"

export interface Template {
  /** Unique identifier for the template */
  id: string
  /** Display name of the template */
  name: string
  /** Short description of what the template looks like or does */
  description: string
  /** Whether this template requires Pro license (shows Crown badge) */
  isPro?: boolean
  /** If true, show even for non-Pro users (e.g., Custom template with color-only controls) */
  alwaysVisible?: boolean
  /** Optional icon component */
  icon?: LucideIcon
  /** Whether the template is disabled */
  disabled?: boolean
}

export interface TemplateGridProps {
  /** Array of template options to display */
  templates: Template[]
  /** Currently selected template ID */
  selectedId: string
  /** Callback when a template is selected */
  onSelect: (id: string) => void
  /** Number of columns in the grid (default: 2) */
  columns?: 2 | 3 | 4
  /** Whether user has Pro license (affects Pro template behavior) */
  isPro?: boolean
  /** URL to upgrade page (used when non-Pro user clicks Pro template) */
  upgradeUrl?: string
  /** Optional callback for Pro template click when user is not Pro */
  onProClick?: (templateId: string) => void
  /** Gap between grid items in pixels (default: 12) */
  gap?: number
  /** Additional className for the grid container */
  className?: string
  /** Size variant */
  size?: "sm" | "md" | "lg"
}

const sizeStyles = {
  sm: {
    padding: "p-2.5",
    title: "text-xs font-medium",
    description: "text-[10px]",
    checkSize: "h-2.5 w-2.5",
    checkPadding: "p-0.5",
    badge: "text-[8px] px-1",
    badgeIcon: "h-2 w-2",
  },
  md: {
    padding: "p-3",
    title: "text-sm font-medium",
    description: "text-xs",
    checkSize: "h-3 w-3",
    checkPadding: "p-0.5",
    badge: "text-[10px] px-1",
    badgeIcon: "h-2.5 w-2.5",
  },
  lg: {
    padding: "p-4",
    title: "text-base font-medium",
    description: "text-sm",
    checkSize: "h-4 w-4",
    checkPadding: "p-1",
    badge: "text-xs px-1.5",
    badgeIcon: "h-3 w-3",
  },
}

const columnStyles = {
  2: "grid-cols-2",
  3: "grid-cols-3",
  4: "grid-cols-4",
}

export function TemplateGrid({
  templates,
  selectedId,
  onSelect,
  columns = 2,
  isPro = false,
  gap = 12,
  className,
  size = "md",
}: TemplateGridProps) {
  const styles = sizeStyles[size]

  const handleClick = (template: Template) => {
    if (template.disabled) return

    // Pro-only templates (without alwaysVisible) are blocked for non-Pro users
    if (template.isPro && !template.alwaysVisible && !isPro) return

    onSelect(template.id)
  }

  return (
    <div
      className={cn("grid", columnStyles[columns], className)}
      style={{ gap: `${gap}px` }}
    >
      {templates.map((template) => {
        const isSelected = selectedId === template.id
        const Icon = template.icon

        // Skip Pro-only templates for non-Pro users (unless alwaysVisible)
        if (template.isPro && !template.alwaysVisible && !isPro) return null

        return (
          <div
            key={template.id}
            onClick={() => handleClick(template)}
            role="button"
            tabIndex={template.disabled ? -1 : 0}
            onKeyDown={(e) => {
              if (e.key === 'Enter' || e.key === ' ') {
                e.preventDefault()
                handleClick(template)
              }
            }}
            className={cn(
              "relative cursor-pointer rounded-lg border-2 transition-all",
              styles.padding,
              isSelected
                ? "border-primary bg-primary/5"
                : "border-border hover:border-primary/50",
              template.disabled && "opacity-50 cursor-not-allowed"
            )}
          >
            {/* Selected Check */}
            {isSelected && (
              <div className={cn(
                "absolute top-2 right-2 bg-primary text-white rounded-full",
                styles.checkPadding
              )}>
                <Check className={styles.checkSize} />
              </div>
            )}

            {/* Icon (non-Pro templates only) */}
            {Icon && !template.isPro && (
              <div className="mb-2">
                <Icon className="h-5 w-5 text-muted-foreground" />
              </div>
            )}

            {/* Title */}
            <h4 className={cn(styles.title, "flex items-center gap-1.5")}>
              {template.name}
              {template.isPro && <ProIndicator size="sm" />}
            </h4>

            {/* Description */}
            <p className={cn("text-muted-foreground mt-1", styles.description)}>
              {template.description}
            </p>
          </div>
        )
      })}
    </div>
  )
}

export default TemplateGrid