import type { LucideIcon } from "lucide-react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/common/card"
import { motion } from "framer-motion"
import Link from "next/link"
import { ResponsiveContainer, LineChart, Line } from "recharts"

interface OrderStatsProps {
  title: string
  value: string
  icon: LucideIcon
  index?: number
  /** Status to filter by when clicking (e.g., "paid", "shipped") */
  filterStatus?: string
  /** Custom href if not using filterStatus */
  href?: string
  /** Data for sparkline [ { value: number }, ... ] */
  trendData?: { value: number }[]
  /** Color for the sparkline */
  trendColor?: string
}

export default function OrderStats({
  title,
  value,
  icon: Icon,
  index = 0,
  filterStatus,
  href,
  trendData,
  trendColor = "#8884d8"
}: OrderStatsProps) {
  const linkHref = href || (filterStatus ? `/dashboard/orders?status=${filterStatus}` : undefined)

  const CardWrapper = linkHref ? Link : "div"
  const wrapperProps = linkHref ? { href: linkHref } : {}

  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.95 }}
      animate={{ opacity: 1, scale: 1 }}
      transition={{ delay: index * 0.05 }}
    >
      <CardWrapper {...wrapperProps as any}>
        <Card className={`relative overflow-hidden group border-border/40 bg-background/50 backdrop-blur-sm hover:bg-background/80 transition-all duration-300 ${linkHref ? "cursor-pointer hover:border-primary/30" : ""}`}>
          <div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2 relative z-10">
            <CardTitle className="text-sm font-medium tracking-tight text-muted-foreground group-hover:text-foreground transition-colors">
              {title}
            </CardTitle>
            <div className="p-2 rounded-lg bg-muted group-hover:bg-primary/10 group-hover:text-primary transition-all duration-300">
              <Icon className="h-4 w-4" />
            </div>
          </CardHeader>
          <CardContent className="relative z-10">
            <div className="flex items-end justify-between gap-2">
              <div className="text-3xl font-bold tracking-tight">{value}</div>
              {trendData && trendData.length > 0 && (
                <div className="h-10 w-24 mb-1">
                  <ResponsiveContainer width="100%" height="100%">
                    <LineChart data={trendData}>
                      <Line
                        type="monotone"
                        dataKey="value"
                        stroke={trendColor}
                        strokeWidth={2}
                        dot={false}
                        isAnimationActive={true}
                      />
                    </LineChart>
                  </ResponsiveContainer>
                </div>
              )}
            </div>
            <div className="mt-2 h-1 w-0 bg-primary/20 group-hover:w-full transition-all duration-500 rounded-full" />
            {linkHref && (
              <div className="mt-2 text-xs text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity">
                Click to view →
              </div>
            )}
          </CardContent>
        </Card>
      </CardWrapper>
    </motion.div>
  )
}