import * as React from 'react'
import { cva } from 'class-variance-authority'

import { cn } from './utils'

/* ------------------------------------------------------------------ */
/*  Types                                                              */
/* ------------------------------------------------------------------ */

export type TrendDirection = 'up' | 'down' | 'neutral'

export interface TrendConfig {
  direction: TrendDirection
  value: string
  label?: string
}

/* ------------------------------------------------------------------ */
/*  Trend styling                                                      */
/* ------------------------------------------------------------------ */

const trendVariants = cva('inline-flex items-center gap-1 text-xs font-medium', {
  variants: {
    direction: {
      up: 'text-accent-emerald',
      down: 'text-accent-rose',
      neutral: 'text-foreground-muted',
    },
  },
  defaultVariants: {
    direction: 'neutral',
  },
})

/* ------------------------------------------------------------------ */
/*  Trend arrow icons                                                  */
/* ------------------------------------------------------------------ */

function TrendArrow({ direction }: { direction: TrendDirection }) {
  const iconClass = 'size-3.5'
  if (direction === 'up') {
    return (
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        strokeWidth={2}
        strokeLinecap="round"
        strokeLinejoin="round"
        className={iconClass}
      >
        <path d="m18 15-6-6-6 6" />
      </svg>
    )
  }
  if (direction === 'down') {
    return (
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        strokeWidth={2}
        strokeLinecap="round"
        strokeLinejoin="round"
        className={iconClass}
      >
        <path d="m6 9 6 6 6-6" />
      </svg>
    )
  }
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={2}
      strokeLinecap="round"
      strokeLinejoin="round"
      className={iconClass}
    >
      <path d="M5 12h14" />
    </svg>
  )
}

/* ------------------------------------------------------------------ */
/*  StatCard                                                           */
/* ------------------------------------------------------------------ */

export interface StatCardProps extends React.ComponentProps<'div'> {
  label: string
  value: string | number
  trend?: TrendConfig
  icon?: React.ReactNode
}

function StatCard({ className, label, value, trend, icon, ...props }: StatCardProps) {
  return (
    <div
      data-slot="stat-card"
      className={cn(
        'flex flex-col gap-2 rounded-xl border border-border-glass bg-glass p-5 backdrop-blur-[20px]',
        'transition-all duration-300 hover:shadow-glow',
        className
      )}
      {...props}
    >
      {/* Header */}
      <div className="flex items-center justify-between">
        <span className="text-xs font-medium tracking-wide text-foreground-secondary">{label}</span>
        {icon !== undefined && icon !== null && (
          <span aria-hidden="true" className="text-foreground-muted [&_svg]:size-4">
            {icon}
          </span>
        )}
      </div>

      {/* Value */}
      <div className="text-2xl font-bold tabular-nums tracking-tight text-foreground">
        {typeof value === 'number' ? String(value) : value}
      </div>

      {/* Trend */}
      {trend !== undefined && (
        <div className={trendVariants({ direction: trend.direction })}>
          <TrendArrow direction={trend.direction} />
          <span>{trend.value}</span>
          {trend.label !== undefined && (
            <span className="text-foreground-muted">{trend.label}</span>
          )}
        </div>
      )}
    </div>
  )
}

export { StatCard, trendVariants }
