import React, { HTMLAttributes, ReactNode } from 'react';
import styled, { css } from 'styled-components';

export interface CardProps extends HTMLAttributes<HTMLDivElement> {
  variant?: 'default' | 'outlined' | 'elevated' | 'muted' | 'inset';
  padding?: 'none' | 'sm' | 'md' | 'lg';
  interactive?: boolean;
  fillHeight?: boolean;
  header?: ReactNode;
  footer?: ReactNode;
}

const StyledCard = styled.div<{
  $variant: NonNullable<CardProps['variant']>;
  $padding: CardProps['padding'];
  $interactive: boolean;
  $fillHeight: boolean;
}>`
  border-radius: ${({ theme }) => theme.borderRadius.lg};
  overflow: visible;
  transition:
    box-shadow ${({ theme }) => theme.transitions.fast},
    border-color ${({ theme }) => theme.transitions.fast},
    transform ${({ theme }) => theme.transitions.fast};

  @media (prefers-reduced-motion: reduce) {
    transition: border-color ${({ theme }) => theme.transitions.fast};
  }

  ${({ $variant, theme }) => {
    switch ($variant) {
      case 'outlined':
        return css`
          background-color: ${theme.colors.surface};
          border: 1px solid ${theme.colors.borderSoft};
        `;
      case 'muted':
        return css`
          background-color: ${theme.colors.surfaceMuted};
          border: 1px solid ${theme.colors.borderSoft};
        `;
      case 'inset':
        return css`
          background-color: ${theme.colors.surfaceInset};
          border: 1px solid ${theme.colors.borderSoft};
          box-shadow: ${theme.shadows.inner};
        `;
      case 'elevated':
        return css`
          background-color: ${theme.colors.surfaceElevated};
          border: 1px solid ${theme.colors.borderSoft};
          box-shadow: ${theme.shadows.sm};
        `;
      default:
        return css`
          background-color: ${theme.colors.surface};
          border: 1px solid ${theme.colors.borderSoft};
          box-shadow: none;
        `;
    }
  }}

  ${({ $interactive, theme }) =>
    $interactive &&
    css`
      cursor: pointer;

      &:hover {
        box-shadow: ${theme.shadows.md};
        border-color: ${theme.colors.border};
        transform: ${theme.motion.cardHover};
      }
    `}

  ${({ $fillHeight }) =>
    $fillHeight &&
    css`
      height: 100%;
      display: flex;
      flex-direction: column;
      min-height: 0;
    `}

  ${({ $padding, theme }) => {
    if ($padding === 'none') return '';
    switch ($padding) {
      case 'sm':
        return css`padding: ${theme.layout.cardPaddingSm};`;
      case 'lg':
        return css`padding: ${theme.layout.cardPaddingLg};`;
      default:
        return css`padding: ${theme.layout.cardPaddingMd};`;
    }
  }}
`;

const CardHeader = styled.div`
  padding: ${({ theme }) => `${theme.spacing[5]} ${theme.layout.cardPaddingMd} ${theme.spacing[4]}`};
  border-bottom: 1px solid ${({ theme }) => theme.colors.borderSoft};
  font-weight: ${({ theme }) => theme.typography.fontWeight.semibold};
  font-size: ${({ theme }) => theme.typography.fontSize.sm};
  letter-spacing: ${({ theme }) => theme.typography.letterSpacing.tight};
  color: ${({ theme }) => theme.colors.text.primary};
  background-color: transparent;
  border-radius: ${({ theme }) => theme.borderRadius.lg}
    ${({ theme }) => theme.borderRadius.lg} 0 0;
`;

const CardBody = styled.div<{ $padding: CardProps['padding']; $fillHeight: boolean }>`
  ${({ $fillHeight }) =>
    $fillHeight &&
    css`
      flex: 1;
      display: flex;
      flex-direction: column;
      min-height: 0;
    `}

  ${({ $padding, theme }) => {
    if ($padding === 'none') return '';
    switch ($padding) {
      case 'sm':
        return css`padding: ${theme.layout.cardPaddingSm};`;
      case 'lg':
        return css`padding: ${theme.layout.cardPaddingLg};`;
      default:
        return css`padding: ${theme.layout.cardPaddingMd};`;
    }
  }}
`;

const CardFooter = styled.div`
  padding: ${({ theme }) => `${theme.spacing[4]} ${theme.layout.cardPaddingMd}`};
  border-top: 1px solid ${({ theme }) => theme.colors.divider};
  background-color: transparent;
  border-radius: 0 0 ${({ theme }) => theme.borderRadius.lg}
    ${({ theme }) => theme.borderRadius.lg};
`;

export const Card: React.FC<CardProps> = ({
  variant = 'elevated',
  padding = 'md',
  interactive = false,
  fillHeight = false,
  header,
  footer,
  children,
  ...props
}) => {
  const hasHeaderFooter = !!header || !!footer;

  if (hasHeaderFooter) {
    return (
      <StyledCard
        $variant={variant}
        $padding="none"
        $interactive={interactive}
        $fillHeight={fillHeight}
        {...props}
      >
        {header && <CardHeader>{header}</CardHeader>}
        <CardBody $padding={padding} $fillHeight={fillHeight}>
          {children}
        </CardBody>
        {footer && <CardFooter>{footer}</CardFooter>}
      </StyledCard>
    );
  }

  return (
    <StyledCard
      $variant={variant}
      $padding={padding}
      $interactive={interactive}
      $fillHeight={fillHeight}
      {...props}
    >
      {children}
    </StyledCard>
  );
};