import { ReactNode } from 'react';
import { Card, Statistic, Tag, Space } from 'antd';
import { RiseOutlined, FallOutlined } from '@ant-design/icons';
import { formatCurrency } from '@/lib/formatters';
import { spacing, colSpans } from '@/styles/designTokens';
import { accountingColors } from '@/styles/theme';

export interface StatisticCardProps {
  /** Title of the statistic */
  title: string;
  /** Numeric value to display */
  value: number;
  /** Optional prefix icon */
  icon?: ReactNode;
  /** Suffix text (e.g., "kr.") */
  suffix?: string;
  /** Number of decimal places */
  precision?: number;
  /** Whether to format as currency */
  isCurrency?: boolean;
  /** Optional color for the value */
  valueColor?: 'debit' | 'credit' | 'neutral' | 'balance' | 'default';
  /** Optional percentage change to display */
  change?: number;
  /** Label for the change tag */
  changeLabel?: string;
  /** Additional content below the statistic */
  footer?: ReactNode;
  /** Card size */
  size?: 'default' | 'small';
  /** Whether the card is loading */
  loading?: boolean;
}

/**
 * A consistent card component for displaying KPI statistics.
 * Combines Card + Statistic + optional change indicator.
 *
 * @example
 * <StatisticCard
 *   title="Likviditet"
 *   value={1234567.89}
 *   icon={<BankOutlined />}
 *   isCurrency
 *   change={0.12}
 *   changeLabel="denne måned"
 * />
 */
export function StatisticCard({
  title,
  value,
  icon,
  suffix = 'kr.',
  precision = 2,
  isCurrency = false,
  valueColor,
  change,
  changeLabel = 'denne måned',
  footer,
  size = 'small',
  loading = false,
}: StatisticCardProps) {
  const getValueStyle = () => {
    if (!valueColor || valueColor === 'default') return undefined;
    return { color: accountingColors[valueColor] };
  };

  const getChangeColor = () => {
    if (change === undefined) return 'default';
    return change >= 0 ? 'green' : 'red';
  };

  const getChangeIcon = () => {
    if (change === undefined) return null;
    return change >= 0 ? <RiseOutlined /> : <FallOutlined />;
  };

  const formatValue = (val: number | string) => {
    if (isCurrency) {
      return formatCurrency(val as number);
    }
    return val;
  };

  return (
    <Card size={size} loading={loading}>
      <Statistic
        title={title}
        value={value}
        precision={precision}
        prefix={icon}
        suffix={suffix}
        valueStyle={getValueStyle()}
        formatter={isCurrency ? (v) => formatValue(v as number) : undefined}
      />

      {(change !== undefined || footer) && (
        <div style={{ marginTop: spacing.sm }}>
          {change !== undefined && (
            <Tag color={getChangeColor()} icon={getChangeIcon()}>
              {change >= 0 ? '+' : ''}
              {(change * 100).toFixed(1)}% {changeLabel}
            </Tag>
          )}
          {footer && <div style={{ marginTop: change !== undefined ? spacing.xs : 0 }}>{footer}</div>}
        </div>
      )}
    </Card>
  );
}

export interface StatisticCardFooterTagsProps {
  tags: Array<{
    label: string;
    count?: number;
    color: string;
    icon?: ReactNode;
  }>;
}

/**
 * Helper component for rendering multiple tags in the footer
 */
export function StatisticCardFooterTags({ tags }: StatisticCardFooterTagsProps) {
  return (
    <Space size={4}>
      {tags.map((tag, index) => (
        <Tag key={index} color={tag.color} icon={tag.icon}>
          {tag.count !== undefined ? `${tag.count} ` : ''}
          {tag.label}
        </Tag>
      ))}
    </Space>
  );
}

/**
 * Responsive column spans for StatisticCard grids
 * Use with Ant Design's Col component
 */
export const statisticCardColSpan = colSpans.kpiCard;

export default StatisticCard;
