import React from 'react';
import MuiCard from '@mui/material/Card';
import type { CardProps as MuiCardProps } from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';

// ─── Types ───────────────────────────────────────────────────────────────────

/** Props for the FA Card component */
export interface CardProps extends Omit<MuiCardProps, 'raised' | 'variant'> {
  /** Visual style: "elevated" uses shadow, "outlined" uses border */
  variant?: 'elevated' | 'outlined';
  /** Adds hover background fill, shadow lift, and pointer cursor for clickable cards */
  interactive?: boolean;
  /** Highlights the card as selected — brand border + warm background tint */
  selected?: boolean;
  /** Padding preset: "default" (24px), "compact" (16px), "none" (no wrapper) */
  padding?: 'default' | 'compact' | 'none';
  /** Content to render inside the card */
  children?: React.ReactNode;
}

// ─── Component ───────────────────────────────────────────────────────────────

/**
 * Content container for the FA design system.
 *
 * Wraps MUI Card with FA brand tokens, two visual variants (elevated/outlined),
 * optional hover interactivity, selected state, and padding presets.
 *
 * Variant mapping from design:
 * - `elevated` (default) — shadow.md resting, white background
 * - `outlined` — neutral border, no shadow, white background
 *
 * Use `interactive` for clickable cards (PriceCard, ServiceOption) —
 * adds background fill on hover, shadow lift, and cursor pointer.
 *
 * Use `selected` for option-select patterns — applies brand border
 * (warm gold) and warm background tint (brand.50).
 *
 * Use `padding="none"` when composing with CardMedia or custom layouts
 * that need full-bleed content.
 */
export const Card = React.forwardRef<HTMLDivElement, CardProps>(
  (
    {
      variant = 'elevated',
      interactive = false,
      selected = false,
      padding = 'default',
      children,
      sx,
      ...props
    },
    ref,
  ) => {
    // Map FA variant names to MUI Card variant
    const muiVariant = variant === 'outlined' ? 'outlined' : undefined;

    return (
      <MuiCard
        ref={ref}
        variant={muiVariant}
        elevation={0}
        sx={[
          // Selected state: brand border + warm background
          selected && {
            borderColor: 'var(--fa-card-border-selected)',
            borderWidth: '2px',
            borderStyle: 'solid',
            backgroundColor: 'var(--fa-card-background-selected)',
          },
          // Interactive: hover fill + shadow lift + pointer
          interactive && {
            cursor: 'pointer',
            '&:hover': {
              backgroundColor: selected
                ? 'var(--fa-card-background-selected)'
                : 'var(--fa-card-background-hover)',
              boxShadow: variant === 'elevated' ? 'var(--fa-card-shadow-hover)' : undefined,
            },
          },
          // Focus-visible for keyboard accessibility on interactive cards
          interactive && {
            '&:focus-visible': {
              outline: (theme: Record<string, any>) =>
                `2px solid ${theme.palette.primary.main}`,
              outlineOffset: '2px',
            },
          },
          ...(Array.isArray(sx) ? sx : [sx]),
        ]}
        {...props}
      >
        {padding !== 'none' ? (
          <CardContent
            sx={{
              p: padding === 'compact' ? 4 : 6,
              '&:last-child': {
                pb: padding === 'compact' ? 4 : 6,
              },
            }}
          >
            {children}
          </CardContent>
        ) : (
          children
        )}
      </MuiCard>
    );
  },
);

Card.displayName = 'Card';
export default Card;