Timeline Stats

"use client";
 
import React from "react";
import { motion } from "framer-motion";
import {
  TrendingUp,
  Users,
  DollarSign,
  Activity,
  ArrowUpRight,
  ArrowDownRight,
} from "lucide-react";
 
interface TimelineDataPoint {
  period: string;
  value: number;
  change?: number;
  label?: string;
}
 
interface StatCard {
  id: string;
  title: string;
  value: string;
  change: number;
  changeLabel: string;
  icon: "users" | "revenue" | "activity" | "growth";
  timeline: TimelineDataPoint[];
}
 
interface TimelineStatsProps {
  title?: string;
  description?: string;
  stats: StatCard[];
  period?: string;
  className?: string;
}
 
export function TimelineStats({
  title = "Growth Analytics",
  description = "Track your key metrics over time",
  stats,
  period = "Last 30 days",
  className = "",
}: TimelineStatsProps) {
  const getIcon = (iconType: StatCard["icon"]) => {
    switch (iconType) {
      case "users":
        return Users;
      case "revenue":
        return DollarSign;
      case "activity":
        return Activity;
      case "growth":
        return TrendingUp;
    }
  };
 
  const getIconColor = (iconType: StatCard["icon"]) => {
    switch (iconType) {
      case "users":
        return "bg-blue-500/10 text-blue-600 dark:text-blue-400";
      case "revenue":
        return "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400";
      case "activity":
        return "bg-purple-500/10 text-purple-600 dark:text-purple-400";
      case "growth":
        return "bg-orange-500/10 text-orange-600 dark:text-orange-400";
    }
  };
 
  const renderMiniChart = (
    timeline: TimelineDataPoint[],
    isPositive: boolean,
    chartId: string,
  ) => {
    if (timeline.length === 0) return null;
 
    const maxValue = Math.max(...timeline.map((d) => d.value));
    const minValue = Math.min(...timeline.map((d) => d.value));
    const range = maxValue - minValue || 1;
 
    const points = timeline.map((point, index) => {
      const x = (index / (timeline.length - 1)) * 100;
      const y = 100 - ((point.value - minValue) / range) * 70 - 15;
      return `${x},${y}`;
    });
 
    const chartColor = isPositive
      ? "text-emerald-500 dark:text-emerald-400"
      : "text-red-500 dark:text-red-400";
 
    return (
      <svg
        className="h-16 w-full"
        viewBox="0 0 100 100"
        preserveAspectRatio="none"
      >
        <defs>
          <linearGradient
            id={`gradient-${chartId}`}
            x1="0%"
            y1="0%"
            x2="0%"
            y2="100%"
          >
            <stop offset="0%" stopColor="currentColor" stopOpacity="0.3" />
            <stop offset="100%" stopColor="currentColor" stopOpacity="0.05" />
          </linearGradient>
        </defs>
        <motion.path
          initial={{ pathLength: 0, opacity: 0 }}
          animate={{ pathLength: 1, opacity: 1 }}
          transition={{ duration: 1.2, ease: "easeOut" }}
          d={`M ${points.join(" L ")} L 100,100 L 0,100 Z`}
          fill={`url(#gradient-${chartId})`}
          className={chartColor}
        />
        <motion.polyline
          initial={{ pathLength: 0, opacity: 0 }}
          animate={{ pathLength: 1, opacity: 1 }}
          transition={{ duration: 1.2, ease: "easeOut", delay: 0.1 }}
          points={points.join(" ")}
          fill="none"
          stroke="currentColor"
          strokeWidth="2.5"
          strokeLinecap="round"
          strokeLinejoin="round"
          className={chartColor}
        />
        {points.map((point, index) => {
          const [x, y] = point.split(",");
          return (
            <motion.circle
              key={index}
              initial={{ scale: 0, opacity: 0 }}
              animate={{ scale: 1, opacity: 1 }}
              transition={{
                duration: 0.3,
                delay: 1.2 + index * 0.1,
                ease: "easeOut",
              }}
              cx={x}
              cy={y}
              r="2.5"
              fill="currentColor"
              className={chartColor}
            />
          );
        })}
      </svg>
    );
  };
 
  return (
    <section className={`w-full py-24 ${className}`}>
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, ease: "easeOut" }}
          className="mb-12 text-center"
        >
          <h2 className="mb-4 text-4xl font-bold tracking-tight text-zinc-900 dark:text-white sm:text-5xl">
            {title}
          </h2>
          <p className="mx-auto max-w-2xl text-lg text-zinc-600 dark:text-zinc-400">
            {description}
          </p>
          <div className="mt-4 inline-flex items-center gap-2 rounded-full bg-zinc-100 px-4 py-2 text-sm font-medium text-zinc-700 dark:bg-zinc-800 dark:text-zinc-300">
            <Activity className="h-4 w-4" />
            {period}
          </div>
        </motion.div>
 
        <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
          {stats.map((stat, index) => {
            const Icon = getIcon(stat.icon);
            const isPositive = stat.change >= 0;
            const ChangeIcon = isPositive ? ArrowUpRight : ArrowDownRight;
 
            return (
              <motion.div
                key={stat.id}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{
                  duration: 0.5,
                  delay: index * 0.1,
                  ease: "easeOut",
                }}
                className="group relative overflow-hidden rounded-2xl border border-zinc-200 bg-white p-6 transition-all hover:shadow-lg dark:border-zinc-800 dark:bg-zinc-900"
              >
                {/* Icon */}
                <div className="mb-4 flex items-center justify-between">
                  <div
                    className={`flex h-12 w-12 items-center justify-center rounded-xl ${getIconColor(stat.icon)}`}
                  >
                    <Icon className="h-6 w-6" />
                  </div>
                  <div
                    className={`flex items-center gap-1 rounded-full px-2.5 py-1 text-xs font-semibold ${
                      isPositive
                        ? "bg-emerald-50 text-emerald-700 dark:bg-emerald-950/30 dark:text-emerald-400"
                        : "bg-red-50 text-red-700 dark:bg-red-950/30 dark:text-red-400"
                    }`}
                  >
                    <ChangeIcon className="h-3 w-3" />
                    {Math.abs(stat.change)}%
                  </div>
                </div>
 
                <div className="mb-4">
                  <p className="mb-1 text-sm font-medium text-zinc-600 dark:text-zinc-400">
                    {stat.title}
                  </p>
                  <p className="text-3xl font-bold text-zinc-900 dark:text-white">
                    {stat.value}
                  </p>
                  <p className="mt-1 text-xs text-zinc-500 dark:text-zinc-500">
                    {stat.changeLabel}
                  </p>
                </div>
 
                <div className="relative h-16 overflow-hidden rounded-lg bg-zinc-50 dark:bg-zinc-800/50">
                  {renderMiniChart(stat.timeline, isPositive, stat.id)}
                </div>
                <div className="absolute inset-0 -z-10 bg-gradient-to-br from-blue-500/5 to-purple-500/5 opacity-0 transition-opacity group-hover:opacity-100" />
              </motion.div>
            );
          })}
        </div>
 
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.5, ease: "easeOut" }}
          className="mt-12 overflow-hidden rounded-2xl border border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-900"
        >
          <div className="border-b border-zinc-200 p-6 dark:border-zinc-800">
            <h3 className="text-xl font-bold text-zinc-900 dark:text-white">
              Detailed Timeline
            </h3>
            <p className="mt-1 text-sm text-zinc-600 dark:text-zinc-400">
              View your metrics breakdown over time
            </p>
          </div>
          <div className="overflow-x-auto">
            <table className="w-full">
              <thead className="border-b border-zinc-200 bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-800/50">
                <tr>
                  <th className="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-zinc-600 dark:text-zinc-400">
                    Period
                  </th>
                  {stats.map((stat) => (
                    <th
                      key={stat.id}
                      className="px-6 py-3 text-right text-xs font-semibold uppercase tracking-wider text-zinc-600 dark:text-zinc-400"
                    >
                      {stat.title}
                    </th>
                  ))}
                </tr>
              </thead>
              <tbody className="divide-y divide-zinc-200 dark:divide-zinc-800">
                {stats[0]?.timeline.map((_, periodIndex) => (
                  <motion.tr
                    key={periodIndex}
                    initial={{ opacity: 0, x: -20 }}
                    whileInView={{ opacity: 1, x: 0 }}
                    viewport={{ once: true }}
                    transition={{
                      duration: 0.3,
                      delay: periodIndex * 0.05,
                      ease: "easeOut",
                    }}
                    className="transition-colors hover:bg-zinc-50 dark:hover:bg-zinc-800/50"
                  >
                    <td className="whitespace-nowrap px-6 py-4 text-sm font-medium text-zinc-900 dark:text-white">
                      {stats[0].timeline[periodIndex].period}
                    </td>
                    {stats.map((stat) => {
                      const dataPoint = stat.timeline[periodIndex];
                      const change = dataPoint.change;
                      return (
                        <td
                          key={stat.id}
                          className="whitespace-nowrap px-6 py-4 text-right text-sm"
                        >
                          <div className="flex items-center justify-end gap-2">
                            <span className="font-semibold text-zinc-900 dark:text-white">
                              {dataPoint.label ||
                                dataPoint.value.toLocaleString()}
                            </span>
                            {change !== undefined && (
                              <span
                                className={`text-xs ${
                                  change >= 0
                                    ? "text-emerald-600 dark:text-emerald-400"
                                    : "text-red-600 dark:text-red-400"
                                }`}
                              >
                                {change >= 0 ? "+" : ""}
                                {change}%
                              </span>
                            )}
                          </div>
                        </td>
                      );
                    })}
                  </motion.tr>
                ))}
              </tbody>
            </table>
          </div>
        </motion.div>
      </div>
    </section>
  );
}