"use client"

import { useMemo } from "react"
import dynamic from "next/dynamic"
import { Skeleton } from "@/components/ui/skeleton"

const SparkLineChart = dynamic(() => import("./SparkLineChart").then(mod => mod.SparkLineChart), {
  ssr: false,
  loading: () => <Skeleton className="h-[60px] w-full rounded-md" />,
})

interface MetricCardProps {
  title: string
  value: string | number
  icon: React.ReactNode
  subtitle?: string
  gradientFrom: string
  gradientTo: string
  iconColor: string
  chartData?: number[]
  chartDates?: string[]
  chartColor?: string
  chartFillColor?: string
  timeText?: string
  emptyStateMessage?: string
  cumulativeChart?: boolean
  showChart?: boolean
}

export const MetricCard: React.FC<MetricCardProps> = ({
  title,
  value,
  icon,
  subtitle,
  gradientFrom,
  gradientTo,
  iconColor,
  chartData = [],
  chartDates = [],
  chartColor = "rgba(99, 102, 241, 1)",
  chartFillColor = "rgba(99, 102, 241, 0.2)",
  timeText,
  emptyStateMessage,
  cumulativeChart = false,
  showChart = true,
}) => {
  const safeChartData = Array.isArray(chartData) ? chartData : []
  const safeChartDates = Array.isArray(chartDates) ? chartDates : []

  const formattedTimeText = useMemo(() => {
    if (!timeText) return ""
    if (timeText.includes("-")) {
      const [startDate, endDate] = timeText.split("-").map(d => d.trim())

      if (startDate.includes(endDate.split(" ")[0])) {
        return `${startDate} - ${endDate.split(" ")[1]} ${endDate.split(" ")[2]}`
      }

      return timeText
    }
    return timeText
  }, [timeText])

  return (
    <div className="bg-card rounded-xl border border-border p-4 hover:shadow-md transition-all duration-300 hover:border-primary/20 group h-full">
      <div className="flex items-start justify-between mb-2">
        <div>
          <p className="text-muted-foreground text-xs sm:text-sm font-medium">{title}</p>
          <div className="flex items-end gap-1 sm:gap-2 mt-1">
            <h3 className="text-xl sm:text-3xl font-bold text-foreground">
              {typeof value === "number" ? Math.round(value) : value}
            </h3>
            {subtitle && (
              <p className="text-xs sm:text-sm text-muted-foreground mb-0.5 sm:mb-1">{subtitle}</p>
            )}
          </div>
        </div>
        <div
          className={`w-8 h-8 sm:w-10 sm:h-10 rounded-lg sm:rounded-xl ${gradientFrom} ${gradientTo} flex items-center justify-center ${iconColor} [&_svg]:w-4 [&_svg]:h-4 sm:[&_svg]:w-5 sm:[&_svg]:h-5`}
        >
          {icon}
        </div>
      </div>

      {showChart && safeChartData.length > 0 && safeChartDates.length > 0 ? (
        <div className="mt-2">
          <SparkLineChart
            data={safeChartData}
            dates={safeChartDates}
            color={chartColor}
            fillColor={chartFillColor}
            cumulative={cumulativeChart}
            height={60}
            showLabels={true}
          />
        </div>
      ) : !showChart ? (
        <div className="mt-2 text-xs text-muted-foreground">
          {timeText && <span className="italic">{formattedTimeText}</span>}
        </div>
      ) : (
        <div className="mt-2 flex flex-col justify-center h-[40px] bg-muted/10 rounded-md border border-dashed border-border/50">
          <div className="flex justify-center">
            <p className="text-[10px] text-muted-foreground text-center">
              {emptyStateMessage || "No data available"}
            </p>
          </div>
        </div>
      )}
    </div>
  )
}
