"use client";

import {
  GlassCard,
  GridOverlay,
  StaggerChildren,
  ScrollReveal,
  CountUp,
  GradientText,
} from "@/components/ui/primitives";

const chartData = [
  { label: "Dec 30", value: 180 },
  { label: "Jan 5", value: 320 },
  { label: "Jan 10", value: 250 },
  { label: "Jan 15", value: 420 },
  { label: "Jan 20", value: 380 },
  { label: "Jan 25", value: 350 },
  { label: "Jan 30", value: 480 },
  { label: "Feb 5", value: 410 },
  { label: "Feb 10", value: 390 },
  { label: "Feb 15", value: 450 },
  { label: "Feb 20", value: 420 },
  { label: "Feb 25", value: 500 },
];

const stats = [
  { label: "Total Events", value: 4580, suffix: "", change: "+12%" },
  { label: "Active Users", value: 1240, suffix: "", change: "+8%" },
  { label: "Avg. Response", value: 42, suffix: "ms", change: "-15%" },
  { label: "Uptime", value: 99.99, suffix: "%", decimals: 2, change: "0%" },
];

const yLabels = [500, 400, 300, 200, 100];
const maxValue = 500;

export default function SaasAnalytics1() {
  return (
    <section className="relative overflow-hidden bg-white py-24">
      <GridOverlay type="grid" fade="radial" opacity={0.025} size={48} />

      <div className="relative mx-auto max-w-6xl px-6">
        {/* Header */}
        <ScrollReveal variant="blur-in">
          <div className="mx-auto max-w-2xl text-center">
            <h2 className="text-3xl font-semibold tracking-tight text-gray-900 md:text-4xl">
              Weekly{" "}
              <GradientText from="indigo-500" to="cyan-500">Activity</GradientText>
            </h2>
            <p className="mt-4 text-base leading-relaxed text-gray-500">
              Track key metrics in real-time. Monitor usage patterns, spot trends,
              and make data-driven decisions.
            </p>
          </div>
        </ScrollReveal>

        {/* Chart area */}
        <ScrollReveal variant="fade-up" delay={0.2}>
          <GlassCard variant="light" hover={false} className="mt-14 p-6 md:p-8">
            {/* Stats row */}
            <StaggerChildren staggerDelay={0.1} className="mb-8 grid grid-cols-2 gap-4 sm:grid-cols-4">
              {stats.map((stat) => (
                <div
                  key={stat.label}
                  className="rounded-xl bg-linear-to-br from-gray-50 to-gray-100/50 p-4 transition-all hover:shadow-sm"
                >
                  <p className="text-xs text-gray-400">{stat.label}</p>
                  <p className="mt-1 text-xl font-semibold text-gray-900">
                    <CountUp
                      end={stat.value}
                      suffix={stat.suffix}
                      decimals={stat.decimals ?? 0}
                      duration={2}
                    />
                  </p>
                  <p
                    className={`mt-0.5 text-xs font-medium ${
                      stat.change.startsWith("+")
                        ? "text-emerald-600"
                        : stat.change.startsWith("-")
                          ? "text-indigo-600"
                          : "text-gray-400"
                    }`}
                  >
                    {stat.change}
                  </p>
                </div>
              ))}
            </StaggerChildren>

            {/* Chart */}
            <div className="flex gap-4">
              {/* Y-axis */}
              <div className="hidden w-8 flex-col justify-between text-right sm:flex">
                {yLabels.map((label) => (
                  <span key={label} className="text-xs text-gray-400">
                    {label}
                  </span>
                ))}
              </div>

              {/* Chart body */}
              <div className="relative flex-1">
                {/* Grid lines */}
                <div className="absolute inset-0 flex flex-col justify-between">
                  {yLabels.map((_, i) => (
                    <div key={i} className="border-b border-gray-100" />
                  ))}
                </div>

                {/* Bars */}
                <div className="relative flex h-64 items-end gap-1 sm:gap-2">
                  {chartData.map((d, i) => {
                    const height = (d.value / maxValue) * 100;
                    return (
                      <div
                        key={d.label}
                        className="group relative flex flex-1 flex-col items-center"
                      >
                        <div className="absolute -top-8 z-10 hidden rounded-md bg-gray-900 px-2 py-1 text-xs text-white shadow-lg group-hover:block">
                          {d.value}
                        </div>
                        <div
                          className="w-full rounded-t-md bg-linear-to-t from-indigo-500 to-indigo-400 opacity-80 transition-all duration-300 group-hover:opacity-100 group-hover:shadow-[0_0_10px_rgba(99,102,241,0.3)]"
                          style={{
                            height: `${height}%`,
                            animationDelay: `${i * 0.05}s`,
                          }}
                        />
                      </div>
                    );
                  })}
                </div>

                {/* X-axis */}
                <div className="mt-3 flex justify-between">
                  {chartData
                    .filter((_, i) => i % 2 === 0)
                    .map((d) => (
                      <span key={d.label} className="text-xs text-gray-400">
                        {d.label}
                      </span>
                    ))}
                </div>
              </div>
            </div>
          </GlassCard>
        </ScrollReveal>
      </div>
    </section>
  );
}