import * as React from "react"
import { cn } from "@/lib/utils"
import { useMaterial } from "@/contexts/material-context"

/* ---------------------------------- Types ---------------------------------- */
export interface CardSystemProps extends React.HTMLAttributes<HTMLDivElement> {
  variant?: "default" | "interactive" | "outline" | "glass"
  size?: "sm" | "md" | "lg"
  withHover?: boolean
  withShadow?: boolean
}

/* ---------------------------------- Card ---------------------------------- */
export const Card = React.forwardRef<HTMLDivElement, CardSystemProps>(
  ({ className, variant = "default", size = "md", withHover, withShadow, ...props }, ref) => {
    const { selectedMaterial, getThemeAwareClass } = useMaterial()
    const materialClass = selectedMaterial ? getThemeAwareClass(selectedMaterial) : ""

    // Calculate border radius based on padding to perfectly encapsulate inner rounded elements
    const getBorderRadius = () => {
      switch (size) {
        case "sm":
          // p-3 (12px) + typical inner element radius (8px) = 20px
          return "rounded-[20px]"
        case "md":
          // p-4 (16px) + typical inner element radius (8px) = 24px
          return "rounded-[24px]"
        case "lg":
          // p-6 (24px) + typical inner element radius (8px) = 32px
          return "rounded-[32px]"
        default:
          return "rounded-[24px]"
      }
    }

    return (
      <div
        ref={ref}
        className={cn(
          "border bg-background-primary text-card-foreground",
          getBorderRadius(),
          materialClass,
          {
            "hover:border-primary/50 transition-colors": withHover,
            "shadow-sm": withShadow,
            "p-3": size === "sm",
            "p-4": size === "md",
            "p-6": size === "lg",
            "border-2": variant === "outline",
          },
          className,
        )}
        data-card="true"
        data-variant={variant}
        {...props}
      />
    )
  },
)
Card.displayName = "Card"

/* ---------------------------------- CardHeader ---------------------------------- */
export interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
  compact?: boolean
}

export const CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>(({ className, compact, ...props }, ref) => (
  <div ref={ref} className={cn("flex flex-col space-y-1.5", compact ? "pb-2" : "pb-4", className)} {...props} />
))
CardHeader.displayName = "CardHeader"

/* ---------------------------------- CardTitle ---------------------------------- */
export interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
  as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6"
  size?: "sm" | "md" | "lg" | "xl"
}

export const CardTitle = React.forwardRef<HTMLHeadingElement, CardTitleProps>(
  ({ className, as: Component = "h3", size = "md", ...props }, ref) => {
    const sizeClasses = {
      sm: "text-sm font-medium",
      md: "text-lg font-semibold",
      lg: "text-xl font-semibold",
      xl: "text-2xl font-semibold",
    }

    return (
      <Component ref={ref} className={cn("leading-none tracking-tight", sizeClasses[size], className)} {...props} />
    )
  },
)
CardTitle.displayName = "CardTitle"

/* ---------------------------------- CardDescription ---------------------------------- */
export const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
  ({ className, ...props }, ref) => (
    <p ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
  ),
)
CardDescription.displayName = "CardDescription"

/* ---------------------------------- CardContent ---------------------------------- */
export interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {
  padded?: boolean
}

export const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>(
  ({ className, padded = true, ...props }, ref) => (
    <div ref={ref} className={cn(padded && "pt-0", className)} {...props} />
  ),
)
CardContent.displayName = "CardContent"

/* ---------------------------------- CardFooter ---------------------------------- */
export interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {
  align?: "start" | "center" | "end" | "between"
}

export const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>(
  ({ className, align = "between", ...props }, ref) => {
    const alignClasses = {
      start: "justify-start",
      center: "justify-center",
      end: "justify-end",
      between: "justify-between",
    }

    return <div ref={ref} className={cn("flex items-center pt-4", alignClasses[align], className)} {...props} />
  },
)
CardFooter.displayName = "CardFooter"