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

export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
  variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info' | 'gray' | 'get' | 'post' | 'put' | 'delete';
  size?: 'sm' | 'md' | 'lg';
}

type StyledBadgeTransientProps = {
  $variant: NonNullable<BadgeProps['variant']>;
  $size: NonNullable<BadgeProps['size']>;
};

const StyledBadge = styled.span<StyledBadgeTransientProps>`
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: ${({ theme }) => theme.typography.fontWeight.medium};
  border-radius: ${({ theme }) => theme.borderRadius.full};
  white-space: nowrap;
  border: 1px solid transparent;

  ${({ $size = 'md', $variant }) => {
    const isMethodBadge = ['get', 'post', 'put', 'delete'].includes($variant);

    switch ($size) {
      case 'sm':
        return css`
          padding: 0.125rem ${({ theme }) => theme.spacing[2]};
          font-size: ${({ theme }) => theme.typography.fontSize.xs};
          ${isMethodBadge &&
          css`
            font-family: ${({ theme }) => theme.typography.fontFamily.mono};
          `}
        `;
      case 'lg':
        return css`
          padding: 0.375rem ${({ theme }) => theme.spacing[4]};
          font-size: ${({ theme }) => theme.typography.fontSize.sm};
        `;
      default:
        return css`
          padding: 0.25rem ${({ theme }) => theme.spacing[3]};
          font-size: ${({ theme }) => theme.typography.fontSize.xs};
          ${isMethodBadge &&
          css`
            font-family: ${({ theme }) => theme.typography.fontFamily.mono};
          `}
        `;
    }
  }}

  ${({ $variant = 'gray', theme }) => {
    switch ($variant) {
      case 'primary':
        return css`
          background-color: ${theme.colors.status.unread.bg};
          border-color: ${theme.colors.status.unread.border};
          color: ${theme.colors.status.unread.text};
        `;
      case 'secondary':
        return css`
          background-color: ${theme.colors.status.inProgress.bg};
          border-color: ${theme.colors.status.inProgress.border};
          color: ${theme.colors.status.inProgress.text};
        `;
      case 'success':
        return css`
          background-color: ${theme.colors.status.success.bg};
          border-color: ${theme.colors.status.success.border};
          color: ${theme.colors.status.success.text};
        `;
      case 'warning':
        return css`
          background-color: ${theme.colors.status.warning.bg};
          border-color: ${theme.colors.status.warning.border};
          color: ${theme.colors.status.warning.text};
        `;
      case 'error':
        return css`
          background-color: ${theme.colors.status.error.bg};
          border-color: ${theme.colors.status.error.border};
          color: ${theme.colors.status.error.text};
        `;
      case 'info':
        return css`
          background-color: ${theme.colors.status.open.bg};
          border-color: ${theme.colors.status.open.border};
          color: ${theme.colors.status.open.text};
        `;
      case 'get':
        return css`
          background-color: ${theme.colors.status.success.bg};
          border-color: ${theme.colors.status.success.border};
          color: ${theme.colors.status.success.text};
        `;
      case 'post':
        return css`
          background-color: ${theme.colors.status.open.bg};
          border-color: ${theme.colors.status.open.border};
          color: ${theme.colors.status.open.text};
        `;
      case 'put':
        return css`
          background-color: ${theme.colors.status.warning.bg};
          border-color: ${theme.colors.status.warning.border};
          color: ${theme.colors.status.warning.text};
        `;
      case 'delete':
        return css`
          background-color: ${theme.colors.status.error.bg};
          border-color: ${theme.colors.status.error.border};
          color: ${theme.colors.status.error.text};
        `;
      default:
        return css`
          background-color: ${theme.colors.status.neutral.bg};
          border-color: ${theme.colors.status.neutral.border};
          color: ${theme.colors.status.neutral.text};
        `;
    }
  }}
`;

export const Badge: React.FC<BadgeProps> = ({
  children,
  variant = 'gray',
  size = 'md',
  ...rest
}) => (
  <StyledBadge $variant={variant} $size={size} {...rest}>
    {children}
  </StyledBadge>
);