import styles from './MetricCard.module.css';

interface MetricCardProps {
  label: string;
  value: number;
  subLabel: string;
  changePercent: number;
  /** Admin support view: dealer doesn't have access to this metric on their plan */
  locked?: boolean;
}

/**
 * MetricCard - displays a single metric with trend indicator
 *
 * Shows a large value with label and percentage change from previous period.
 * Green up arrow for positive change, red down arrow for negative.
 * When locked=true, renders grayed-out (admin bypass view for lower-tier dealers).
 */
export function MetricCard({ label, value, subLabel, changePercent, locked }: MetricCardProps) {
  const isPositive = changePercent >= 0;
  const formattedChange = Math.abs(changePercent).toFixed(1);

  return (
    <div className={`${styles.card} ${locked ? styles.locked : ''}`}>
      <span className={styles.label}>
        {label}
        {locked && (
          <svg
            className={styles.lockIcon}
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
            aria-label="Not available on dealer's plan"
          >
            <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
            <path d="M7 11V7a5 5 0 0 1 10 0v4" />
          </svg>
        )}
      </span>
      <div className={styles.valueRow}>
        <span className={styles.value}>{value.toLocaleString()}</span>
        <span className={`${styles.trend} ${isPositive ? styles.positive : styles.negative}`}>
          {isPositive ? (
            <svg
              className={styles.arrow}
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="3"
              strokeLinecap="round"
              strokeLinejoin="round"
            >
              <path d="M18 15l-6-6-6 6" />
            </svg>
          ) : (
            <svg
              className={styles.arrow}
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="3"
              strokeLinecap="round"
              strokeLinejoin="round"
            >
              <path d="M6 9l6 6 6-6" />
            </svg>
          )}
          {formattedChange}%
        </span>
      </div>
      <span className={styles.subLabel}>{subLabel}</span>
    </div>
  );
}

export default MetricCard;