"use client";

import { motion, useInView, useReducedMotion } from "motion/react";
import { useRef } from "react";
import { cn } from "@/lib/utils";

type Bar = {
  /** Axis label under the bar (e.g. a year). */
  label: string;
  value: number;
  /** Optional pre-formatted value shown above the bar. Defaults to `value`. */
  display?: string;
};

type BarChartProps = {
  data: Bar[];
  /** Index that gets the solid accent fill. Default: the max-value bar. */
  accentIndex?: number;
  /** Plot-area height in px (labels add below). Default 300. */
  height?: number;
  className?: string;
};

/**
 * BarChart — the event-deck native bar chart (no chart library).
 *
 * Each fill grows with scaleY from the baseline over 1.3 s (ease-strong),
 * staggered 120 ms per bar; the value label fades in once the bar has landed.
 * The reference bar (default: the tallest) takes the solid accent; the rest a
 * soft accent-100 → accent-200 gradient. See sd EVENT-DECK.md → bar chart.
 */
export function BarChart({ data, accentIndex, height = 300, className }: BarChartProps) {
  const ref = useRef<HTMLDivElement>(null);
  const inView = useInView(ref, { once: true, amount: 0.4 });
  const reduce = useReducedMotion();
  const max = Math.max(...data.map((d) => d.value), 1);
  const accent =
    accentIndex ?? data.reduce((mi, d, i, a) => (d.value > a[mi].value ? i : mi), 0);

  return (
    <div
      ref={ref}
      className={cn(className)}
      style={{ height, display: "flex", alignItems: "stretch", gap: "clamp(10px, 1.6vw, 30px)" }}
    >
      {data.map((d, i) => {
        const h = (d.value / max) * 100;
        const isAccent = i === accent;
        const delay = 0.1 + i * 0.12;
        return (
          <div
            key={i}
            style={{ display: "flex", height: "100%", flex: 1, flexDirection: "column", alignItems: "center" }}
          >
            <div
              style={{ position: "relative", display: "flex", width: "100%", flex: 1, alignItems: "flex-end", minHeight: 0 }}
            >
              <motion.div
                style={{
                  width: "100%",
                  transformOrigin: "bottom",
                  borderRadius: "8px 8px 0 0",
                  height: `${h}%`,
                  background: isAccent
                    ? "var(--accent-500)"
                    : "linear-gradient(180deg, var(--accent-100), var(--accent-200))",
                }}
                initial={reduce ? { scaleY: 1 } : { scaleY: 0 }}
                animate={inView ? { scaleY: 1 } : { scaleY: 0 }}
                transition={{ duration: reduce ? 0 : 1.3, delay: reduce ? 0 : delay, ease: [0.77, 0, 0.175, 1] }}
              />
              <motion.span
                style={{
                  position: "absolute",
                  left: 0,
                  right: 0,
                  textAlign: "center",
                  fontFamily: "var(--font-display)",
                  bottom: `calc(${h}% - 1.6em)`,
                  color: "var(--ink-900)",
                  fontSize: "clamp(15px, 1.4vw, 24px)",
                }}
                initial={reduce ? { opacity: 1 } : { opacity: 0 }}
                animate={inView ? { opacity: 1 } : { opacity: 0 }}
                transition={{ duration: 0.45, delay: reduce ? 0 : delay + 1.3 }}
              >
                {d.display ?? d.value}
              </motion.span>
            </div>
            <div
              className="caption"
              style={{
                height: "clamp(20px, 2.6vh, 30px)",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                textAlign: "center",
              }}
            >
              {d.label}
            </div>
          </div>
        );
      })}
    </div>
  );
}