import { forwardRef, type HTMLAttributes, type ReactNode } from 'react'
import { cv, type VariantProps } from '../../lib/cv.js'

const card = cv(
  'overflow-hidden rounded-[var(--r)] border border-[var(--bdr)] bg-[var(--card)] text-[var(--txt)]',
  {
    variants: {
      padding: {
        none: 'p-0',
        /** Stat / compact surfaces (`.dstat`). */
        sm: 'px-4 py-3.5',
        /** Simple padded panel (`.dcard-b`). */
        md: 'px-6 py-4',
        lg: 'px-6 py-6',
      },
      elevation: {
        flat: 'shadow-none',
        resting: 'shadow-[var(--shd)]',
        elevated: 'shadow-[var(--shd2)]',
      },
    },
    defaultVariants: { padding: 'none', elevation: 'resting' },
  },
)

export type CardVariants = VariantProps<typeof card>

const INTERACTIVE_CLASS =
  'motion-safe:transition-shadow motion-safe:duration-[var(--motion-fast)] hover:shadow-[var(--shd2)] focus-within:shadow-[var(--shd2)]'

export interface CardProps extends HTMLAttributes<HTMLDivElement>, CardVariants {
  /** Apply hover/focus elevation transitions (e.g. for clickable cards). */
  interactive?: boolean
  children?: ReactNode
}

export const Card = forwardRef<HTMLDivElement, CardProps>(function Card(
  { padding, elevation, interactive, className, children, ...rest },
  ref,
) {
  const extras = [interactive ? INTERACTIVE_CLASS : '', className].filter(Boolean).join(' ')
  return (
    <div ref={ref} className={card({ padding, elevation, class: extras })} {...rest}>
      {children}
    </div>
  )
})

/** Header slot — `.dcard-h` in the design system handoff. */
export function CardHeader({
  className = '',
  bordered = true,
  children,
  ...rest
}: HTMLAttributes<HTMLDivElement> & { bordered?: boolean }) {
  return (
    <div
      className={[bordered ? 'border-b border-[var(--bdr)] px-6 pt-6 pb-4' : '', className]
        .filter(Boolean)
        .join(' ')}
      {...rest}
    >
      {children}
    </div>
  )
}

export function CardTitle({
  className = '',
  children,
  ...rest
}: HTMLAttributes<HTMLHeadingElement>) {
  return (
    <h3
      className={`text-[length:var(--fs-card)] font-semibold text-[var(--txt)] ${className}`}
      {...rest}
    >
      {children}
    </h3>
  )
}

export function CardDescription({
  className = '',
  children,
  ...rest
}: HTMLAttributes<HTMLParagraphElement>) {
  return (
    <p className={`mt-px text-[length:var(--fs-hint)] text-[var(--muted)] ${className}`} {...rest}>
      {children}
    </p>
  )
}

/** Body slot — `.dcard-b` in the design system handoff. */
export function CardContent({ className = '', children, ...rest }: HTMLAttributes<HTMLDivElement>) {
  return (
    <div
      className={`px-6 pt-4 pb-6 text-[length:var(--fs-body)] leading-[1.55] text-[var(--sub)] ${className}`}
      {...rest}
    >
      {children}
    </div>
  )
}

export function CardFooter({ className = '', children, ...rest }: HTMLAttributes<HTMLDivElement>) {
  return (
    <div
      className={`flex items-center justify-end gap-2 border-t border-[var(--bdr)] px-6 py-4 ${className}`}
      {...rest}
    >
      {children}
    </div>
  )
}

export { card as cardVariants }
