Newbie_CRM/src/components/dashboard/stat-card.tsx

"use client"

import { useEffect, useState } from "react"
import { motion } from "framer-motion"
import { cn } from "@/lib/utils"
import { Card, CardContent } from "@/components/ui/card"
import { LucideIcon } from "lucide-react"

interface StatCardProps {
  title: string
  value: string | number
  icon: LucideIcon
  variant?: "default" | "blue" | "amber" | "purple" | "emerald" | "zinc"
  description?: string
  index?: number
}

const variantStyles = {
  default: { bg: "bg-muted", text: "text-foreground" },
  blue: { bg: "bg-teal-500/10", text: "text-teal-600 dark:text-teal-400" },
  amber: { bg: "bg-amber-500/10", text: "text-amber-600 dark:text-amber-400" },
  purple: { bg: "bg-purple-500/10", text: "text-purple-600 dark:text-purple-400" },
  emerald: { bg: "bg-emerald-500/10", text: "text-emerald-600 dark:text-emerald-400" },
  zinc: { bg: "bg-zinc-500/10", text: "text-zinc-600 dark:text-zinc-400" },
}

const cardGradients: Record<string, string> = {
  "Total Leads": "from-[#0d9488] to-[#5eead4]",
  "Open Leads": "from-[#14b8a6] to-[#5eead4]",
  "Contacted": "from-[#c9a96e] to-[#e8d5a3]",
  "Pending": "from-[#94a3b8] to-[#cbd5e1]",
  "Closed": "from-[#c9a96e] to-[#e8d5a3]",
  "Conversion Rate": "from-[#f43f5e] to-[#fb7185]",
}

const trendBadges: Record<string, { label: string; up: boolean }> = {
  "Total Leads": { label: "12%", up: true },
  "Open Leads": { label: "8%", up: true },
  "Contacted": { label: "5%", up: true },
  "Pending": { label: "3%", up: false },
  "Closed": { label: "15%", up: true },
  "Conversion Rate": { label: "2%", up: true },
}

const sparklines: Record<string, string> = {
  "Total Leads": "M0,28 L10,22 L20,18 L30,20 L40,12 L50,8 L60,6",
  "Open Leads": "M0,28 L10,24 L20,26 L30,20 L40,22 L50,18 L60,14",
  "Contacted": "M0,28 L10,20 L20,16 L30,18 L40,10 L50,6 L60,4",
  "Pending": "M0,28 L10,26 L20,24 L30,22 L40,20 L50,18 L60,16",
  "Closed": "M0,28 L10,24 L20,18 L30,14 L40,10 L50,6 L60,2",
  "Conversion Rate": "M0,28 L10,22 L20,20 L30,16 L40,12 L50,8 L60,4",
}

const sparklineColors: Record<string, string> = {
  "Total Leads": "#0d9488",
  "Open Leads": "#14b8a6",
  "Contacted": "#c9a96e",
  "Pending": "#94a3b8",
  "Closed": "#c9a96e",
  "Conversion Rate": "#f43f5e",
}

export function StatCard({ title, value, icon: Icon, variant = "default", description, index = 0 }: StatCardProps) {
  const style = variantStyles[variant]
  const gradient = cardGradients[title] ?? "from-[#0d9488] to-[#5eead4]"
  const sparkPath = sparklines[title] ?? "M0,28 L10,22 L20,18 L30,20 L40,12 L50,8 L60,6"
  const sparkColor = sparklineColors[title] ?? "#0d9488"
  const badge = trendBadges[title]

  const isNumeric = typeof value === "number"
  const [display, setDisplay] = useState(0)
  const target = typeof value === "number" ? value : 0

  useEffect(() => {
    if (!isNumeric) return
    const duration = 1000
    const steps = 40
    const increment = target / steps
    let current = 0
    const timer = setInterval(() => {
      current += increment
      if (current >= target) {
        setDisplay(target)
        clearInterval(timer)
      } else {
        setDisplay(Math.floor(current))
      }
    }, duration / steps)
    return () => clearInterval(timer)
  }, [target, isNumeric])

  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.3, delay: index * 0.05 }}
      className="relative"
    >
      <Card className="group hover:shadow-md transition-all duration-200">
        <CardContent className="p-6">
          <div className="flex items-center justify-between">
            <div className="space-y-1">
              <p className="text-sm font-medium text-muted-foreground">{title}</p>
              <p className="text-3xl font-bold tracking-tight">
                {isNumeric ? display : value}
              </p>
              {description && (
                <p className="text-xs text-muted-foreground">{description}</p>
              )}
              {badge && (
                <span className={cn(
                  "inline-flex items-center gap-0.5 text-xs font-semibold",
                  badge.up ? "text-emerald-500" : "text-rose-500"
                )}>
                  {badge.up ? "↑" : "↓"} {badge.label}
                </span>
              )}
            </div>
            <div className={cn("flex h-12 w-12 items-center justify-center rounded-xl shrink-0", style.bg)}>
              <Icon className={cn("h-6 w-6", style.text)} />
            </div>
          </div>

          <div className="mt-6">
            <svg width="60" height="28" viewBox="0 0 60 28" className="opacity-60 group-hover:opacity-100 transition-opacity duration-200">
              <defs>
                <linearGradient id={`spark-fill-${title.replace(/\s/g, "")}`} x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0%" stopColor={sparkColor} stopOpacity="0.25" />
                  <stop offset="100%" stopColor={sparkColor} stopOpacity="0" />
                </linearGradient>
              </defs>
              <path d={`${sparkPath} L60,28 L0,28 Z`} fill={`url(#spark-fill-${title.replace(/\s/g, "")})`} />
              <path d={sparkPath} fill="none" stroke={sparkColor} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </div>

          {title === "Conversion Rate" && (
            <div className="mt-3">
              <div className="w-full h-1.5 bg-muted rounded-full overflow-hidden">
                <div className="h-full rounded-full bg-gradient-to-r from-[#0d9488] to-[#5eead4]" style={{ width: "22%" }} />
              </div>
              <p className="text-xs text-muted-foreground mt-1">22% conversion rate</p>
            </div>
          )}
        </CardContent>

        {(title === "Closed" || title === "Conversion Rate") && (
          <div className={cn(
            "absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-transparent to-transparent",
            title === "Closed" ? "via-[rgba(201,169,110,0.2)]" : "via-[rgba(244,63,94,0.2)]"
          )} />
        )}
      </Card>
    </motion.div>
  )
}