import React, { ReactNode } from 'react';
import styled, { css } from 'styled-components';
import type { IconType } from 'react-icons';
import { Card } from '@/shared/components/ui';

type StatAccent = 'default' | 'warning' | 'error' | 'success';

const StyledStatCard = styled(Card)<{ $accent: StatAccent; $featured: boolean; $kpi: boolean }>`
  min-height: ${({ $featured, $kpi }) => ($kpi ? '120px' : $featured ? '7.5rem' : '6.75rem')};
  height: ${({ $kpi }) => ($kpi ? '120px' : 'auto')};
  position: relative;
  overflow: hidden;
  transition:
    box-shadow ${({ theme }) => theme.transitions.fast},
    transform ${({ theme }) => theme.transitions.fast},
    border-color ${({ theme }) => theme.transitions.fast};

  &::before {
    content: '';
    position: absolute;
    top: 0;
    inset-inline: 0;
    height: 2px;
    background: ${({ theme, $accent }) => {
      switch ($accent) {
        case 'error':
          return theme.colors.error;
        case 'warning':
          return theme.colors.warning;
        case 'success':
          return theme.colors.success;
        default:
          return theme.colors.primary;
      }
    }};
    opacity: ${({ $featured }) => ($featured ? 1 : 0.65)};
  }

  &:hover {
    box-shadow: ${({ theme }) => theme.shadows.md};
    transform: ${({ theme }) => theme.motion.hoverLift};
    border-color: ${({ theme }) => theme.colors.border};
  }

  ${({ $accent, theme }) =>
    $accent === 'error' &&
    css`
      border-color: ${theme.colors.status.breached.border};
      background: linear-gradient(
        165deg,
        ${theme.colors.status.breached.bg} 0%,
        ${theme.colors.surfaceElevated} 65%
      );
    `}

  ${({ $accent, theme }) =>
    $accent === 'warning' &&
    css`
      border-color: ${theme.colors.status.warning.border};
      background: linear-gradient(
        165deg,
        ${theme.colors.status.warning.bg} 0%,
        ${theme.colors.surfaceElevated} 65%
      );
    `}
`;

const Inner = styled.div`
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: ${({ theme }) => theme.spacing[3]};
  min-height: 100%;
`;

const TextBlock = styled.div`
  display: flex;
  flex-direction: column;
  gap: ${({ theme }) => theme.spacing[2]};
  min-width: 0;
`;

const Label = styled.div`
  font-size: 0.6875rem;
  font-weight: ${({ theme }) => theme.typography.fontWeight.medium};
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: ${({ theme }) => theme.colors.text.tertiary};
  text-align: start;
`;

const Value = styled.div<{ $featured: boolean }>`
  font-size: ${({ theme, $featured }) =>
    $featured
      ? `clamp(1.875rem, 2.5vw, ${theme.typography.fontSize['3xl']})`
      : `clamp(1.5rem, 2vw, ${theme.typography.fontSize['2xl']})`};
  font-weight: ${({ theme }) => theme.typography.fontWeight.bold};
  color: ${({ theme }) => theme.colors.text.primary};
  font-variant-numeric: tabular-nums;
  line-height: ${({ theme }) => theme.typography.lineHeight.tight};
  letter-spacing: ${({ theme }) => theme.typography.letterSpacing.tight};
  text-align: start;
`;

const IconWrap = styled.span<{ $accent: StatAccent }>`
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: ${({ theme }) => theme.borderRadius.lg};
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: ${({ theme, $accent }) => {
    switch ($accent) {
      case 'error':
        return theme.colors.errorLight;
      case 'warning':
        return theme.colors.warningLight;
      case 'success':
        return theme.colors.successLight;
      default:
        return theme.colors.primaryLight;
    }
  }};
  color: ${({ theme, $accent }) => {
    switch ($accent) {
      case 'error':
        return theme.colors.error;
      case 'warning':
        return theme.colors.warningDark;
      case 'success':
        return theme.colors.success;
      default:
        return theme.colors.primary;
    }
  }};

  svg {
    width: 20px;
    height: 20px;
  }
`;

interface StatCardProps {
  label: string;
  value: ReactNode;
  icon?: IconType;
  accent?: StatAccent;
  featured?: boolean;
  /** Fixed 120px KPI height for Agile metric rows */
  kpi?: boolean;
}

export const StatCard: React.FC<StatCardProps> = ({
  label,
  value,
  icon: Icon,
  accent = 'default',
  featured = false,
  kpi = false,
}) => (
  <StyledStatCard variant="elevated" padding="md" $accent={accent} $featured={featured} $kpi={kpi}>
    <Inner>
      <TextBlock>
        <Label>{label}</Label>
        <Value $featured={featured}>{value}</Value>
      </TextBlock>
      {Icon && (
        <IconWrap $accent={accent} aria-hidden>
          <Icon />
        </IconWrap>
      )}
    </Inner>
  </StyledStatCard>
);