import * as React from "react"
import { cn } from "@/lib/utils"

interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
  variant?: "default" | "elevated" | "glass" | "gradient"
  hover?: boolean
  interactive?: boolean
}

const Card = React.forwardRef<HTMLDivElement, CardProps>(
  ({ className, variant = "default", hover = true, interactive = false, ...props }, ref) => {
    const variants = {
      default: "bg-card text-card-foreground border border-border shadow-sm",
      elevated: "bg-surface-elevated text-card-foreground border border-border shadow-lg",
      glass: "glass text-card-foreground border border-border/20 shadow-lg backdrop-blur-xl",
      gradient: "bg-gradient-to-br from-surface to-surface-elevated text-card-foreground border border-border/50 shadow-xl"
    }

    const hoverClasses = hover ? `
      transition-all duration-300 ease-out
      ${interactive ? 'cursor-pointer' : ''}
      ${hover ? 'hover:shadow-xl hover:shadow-primary/10 hover:-translate-y-1' : ''}
      ${interactive ? 'active:translate-y-0 active:shadow-lg' : ''}
    ` : ''

    return (
      <div
        ref={ref}
        data-slot="card"
        className={cn(
          "flex flex-col gap-6 rounded-xl p-6 relative overflow-hidden",
          variants[variant],
          hoverClasses,
          className
        )}
        {...props}
      />
    )
  }
)
Card.displayName = "Card"

const CardHeader = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement> & {
    title?: string
    description?: string
    action?: React.ReactNode
  }
>(({ className, title, description, action, children, ...props }, ref) => {
  return (
    <div
      ref={ref}
      data-slot="card-header"
      className={cn(
        "grid auto-rows-min grid-rows-[auto_auto] items-start gap-3 relative",
        action && "grid-cols-[1fr_auto]",
        className
      )}
      {...props}
    >
      {children || (
        <>
          {title && (
            <div className="flex items-center gap-3">
              <h3 className="text-lg font-semibold leading-none text-card-foreground">
                {title}
              </h3>
            </div>
          )}
          {description && (
            <p className="text-sm text-muted-foreground leading-relaxed">
              {description}
            </p>
          )}
          {action && (
            <div className="col-start-2 row-span-2 row-start-1 self-start justify-self-end">
              {action}
            </div>
          )}
        </>
      )}
    </div>
  )
})
CardHeader.displayName = "CardHeader"

const CardTitle = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement> & {
    as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div"
    icon?: React.ReactNode
    badge?: React.ReactNode
  }
>(({ className, as: Component = "h3", icon, badge, children, ...props }, ref) => {
  const Comp = Component
  
  return (
    <Comp
      ref={ref}
      data-slot="card-title"
      className={cn(
        "leading-none font-semibold text-xl flex items-center gap-3",
        className
      )}
      {...props}
    >
      {icon && (
        <span className="flex-shrink-0 w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center text-primary">
          {icon}
        </span>
      )}
      <span className="flex-1">{children}</span>
      {badge && (
        <span className="flex-shrink-0">
          {badge}
        </span>
      )}
    </Comp>
  )
})
CardTitle.displayName = "CardTitle"

const CardDescription = React.forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => (
  <p
    ref={ref}
    data-slot="card-description"
    className={cn("text-sm text-muted-foreground leading-relaxed", className)}
    {...props}
  />
))
CardDescription.displayName = "CardDescription"

const CardAction = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    data-slot="card-action"
    className={cn(
      "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
      className
    )}
    {...props}
  />
))
CardAction.displayName = "CardAction"

const CardContent = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement> & {
    noPadding?: boolean
  }
>(({ className, noPadding = false, ...props }, ref) => (
  <div
    ref={ref}
    data-slot="card-content"
    className={cn(
      noPadding ? "" : "px-6",
      "relative",
      className
    )}
    {...props}
  />
))
CardContent.displayName = "CardContent"

const CardFooter = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement> & {
    sticky?: boolean
  }
>(({ className, sticky = false, ...props }, ref) => (
  <div
    ref={ref}
    data-slot="card-footer"
    className={cn(
      "flex items-center px-6 py-4",
      sticky && "sticky bottom-0 bg-card/95 backdrop-blur-sm border-t border-border/50",
      className
    )}
    {...props}
  />
))
CardFooter.displayName = "CardFooter"

// Enhanced Card Components
const CardStats = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement> & {
    title: string
    value: string | number
    change?: {
      value: number
      type: "increase" | "decrease"
      period?: string
    }
    icon?: React.ReactNode
    trend?: "up" | "down" | "stable"
  }
>(({ className, title, value, change, icon, trend, ...props }, ref) => {
  const trendColors = {
    up: "text-success",
    down: "text-destructive",
    stable: "text-muted-foreground"
  }

  return (
    <div
      ref={ref}
      className={cn("p-6 space-y-4", className)}
      {...props}
    >
      <div className="flex items-center justify-between">
        <span className="text-sm font-medium text-muted-foreground">{title}</span>
        {icon && (
          <span className="w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center text-primary">
            {icon}
          </span>
        )}
      </div>
      
      <div className="space-y-2">
        <div className="text-2xl font-bold text-card-foreground">
          {value}
        </div>
        
        {change && (
          <div className="flex items-center gap-2 text-sm">
            <span className={cn(
              "flex items-center gap-1",
              change.type === "increase" ? "text-success" : "text-destructive"
            )}>
              {change.type === "increase" ? "↑" : "↓"} {Math.abs(change.value)}%
            </span>
            {change.period && (
              <span className="text-muted-foreground">{change.period}</span>
            )}
          </div>
        )}
        
        {trend && (
          <div className={cn("text-sm", trendColors[trend])}>
            {trend === "up" && "↗ Trending up"}
            {trend === "down" && "↘ Trending down"}
            {trend === "stable" && "→ Stable"}
          </div>
        )}
      </div>
    </div>
  )
})
CardStats.displayName = "CardStats"

const CardFeature = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement> & {
    icon: React.ReactNode
    title: string
    description: string
    color?: "primary" | "accent" | "success" | "warning" | "destructive"
  }
>(({ className, icon, title, description, color = "primary", ...props }, ref) => {
  const colorClasses = {
    primary: "bg-primary/10 text-primary",
    accent: "bg-accent/10 text-accent",
    success: "bg-success/10 text-success",
    warning: "bg-warning/10 text-warning",
    destructive: "bg-destructive/10 text-destructive"
  }

  return (
    <div
      ref={ref}
      className={cn("p-6 space-y-4 text-center group", className)}
      {...props}
    >
      <div className={cn(
        "w-16 h-16 rounded-2xl flex items-center justify-center mx-auto transition-all duration-300 group-hover:scale-110 group-hover:shadow-lg",
        colorClasses[color]
      )}>
        <span className="text-2xl">{icon}</span>
      </div>
      
      <div className="space-y-2">
        <h3 className="text-lg font-semibold text-card-foreground">
          {title}
        </h3>
        <p className="text-sm text-muted-foreground leading-relaxed">
          {description}
        </p>
      </div>
    </div>
  )
})
CardFeature.displayName = "CardFeature"

export {
  Card,
  CardHeader,
  CardFooter,
  CardTitle,
  CardDescription,
  CardAction,
  CardContent,
  CardStats,
  CardFeature,
}
