"use client";

import { useRef, useState, useLayoutEffect } from "react";
import { CaretDown } from "@phosphor-icons/react";

function StepsIcon({ size = 22, color = "#F59E0B" }: { size?: number; color?: string }) {
  return (
    <svg width={size} height={size} viewBox="0 0 1200 1200" fill={color} aria-hidden>
      <path d="m1200 225v-6.5625c0-51.875-7.8008-93.445-23.438-124.69-15.637-30.625-37.5-53.746-65.629-69.371-28.125-16.25-66.562-24.375-115.3-24.375h-28.129c-42.492 0-75.637 7.5-99.371 22.5-24.371 15-43.129 30.938-56.258 47.809s-25.309 40.309-36.562 70.309l-4.6914 10.309c-13.754 36.875-20.629 84.996-20.629 144.37v222.19l81.562 25.309 257.81 56.258 26.258-60.938c16.871-40.621 34.992-88.754 54.371-144.37 20.004-56.246 30.012-112.49 30.012-168.75" />
      <path d="m429.37 375.94-4.6914-10.309c-11.258-30-23.438-53.438-36.562-70.309-13.129-16.871-31.871-32.809-56.258-47.809-23.746-15-56.879-22.5-99.371-22.5h-28.129c-48.742 0-87.191 8.125-115.31 24.371-28.129 15.625-50.004 38.746-65.629 69.371-15.609 31.25-23.422 72.805-23.422 124.68v6.5625c0 56.258 9.9961 112.5 30 168.74 19.379 55.621 37.5 103.75 54.371 144.37l26.258 60.938 257.81-56.258 81.562-25.309v-222.18c0-59.363-6.875-107.5-20.629-144.37" />
      <path d="m949.69 918.74c13.754-12.492 26.555-31.57 38.438-57.191l3.7422-6.5625c14.363-30.637 27.492-64.379 39.371-101.26l17.809-56.258-192.19-51.562-129.37-18.742-26.258 59.062c-17.508 39.371-26.258 78.742-26.258 118.13v16.871c0 27.492 4.3789 49.379 13.129 65.629 8.1367 16.246 15.938 29.363 23.438 39.371 7.5 10.008 18.742 20.629 33.742 31.871h0.9375c15 11.258 36.863 16.871 65.629 16.871h3.7422c31.246 0 58.129-6.2539 80.629-18.742 21.902-11.867 39.711-24.359 53.473-37.488" />
      <path d="m488.44 1151.3c7.5-10.008 15.312-23.137 23.438-39.371 8.7461-16.246 13.129-38.137 13.129-65.629v-16.871c0-39.371-8.7461-78.742-26.258-118.13l-26.258-59.062-129.37 18.742-192.19 51.562 17.809 56.258c11.879 36.863 24.996 70.621 39.371 101.26l3.7422 6.5625c11.879 25.621 24.684 44.699 38.438 57.191 13.754 13.129 31.559 25.621 53.438 37.5 22.5 12.492 49.379 18.742 80.629 18.742h3.7422c28.754 0 50.629-5.6289 65.629-16.871h0.9375c15.031-11.27 26.277-21.887 33.777-31.883" />
    </svg>
  );
}
import { m, MotionConfig } from "motion/react";
import NumberFlow from "@number-flow/react";

const DATA = [
  { day: 6, steps: 2100, km: 1.6 },
  { day: 7, steps: 2750, km: 2.1 },
  { day: 8, steps: 1400, km: 1.07 },
  { day: 9, steps: 2500, km: 1.91 },
  { day: 10, steps: 1800, km: 1.37 },
  { day: 11, steps: 2900, km: 2.21 },
  { day: 12, steps: 1600, km: 1.22 },
  { day: 13, steps: 2000, km: 1.53 },
  { day: 14, steps: 2900, km: 2.21 },
  { day: 15, steps: 2700, km: 2.06 },
];

const MAX_STEPS = Math.max(...DATA.map((d) => d.steps));
const BAR_MAX_H = 152;
const BADGE_OFFSET = 44;

function ChartCard({ variant }: { variant: "light" | "dark" }) {
  const isDark = variant === "dark";
  const [selected, setSelected] = useState(5);
  const active = DATA[selected];
  const barH = (i: number) => Math.max(16, Math.round((DATA[i].steps / MAX_STEPS) * BAR_MAX_H));
  const barDivRefs = useRef<(HTMLDivElement | null)[]>([]);
  const chartRef = useRef<HTMLDivElement>(null);
  const [badgePos, setBadgePos] = useState({ x: 0, y: 0 });
  const [ready, setReady] = useState(false);

  useLayoutEffect(() => {
    const barDiv = barDivRefs.current[selected];
    const chart = chartRef.current;
    if (!barDiv || !chart) return;
    const br = barDiv.getBoundingClientRect();
    const cr = chart.getBoundingClientRect();
    setBadgePos({ x: br.left - cr.left + br.width / 2, y: br.top - cr.top - BADGE_OFFSET });
    setReady(true);
  }, [selected]);

  return (
    <div
      className={
        isDark
          ? "w-full max-w-[480px] rounded-[28px] bg-gradient-to-b from-[#202020] to-[#191919] px-6 py-5 shadow-[0_1px_0.5px_#ffffff1a_inset,0_1px_1px_#ffffff35_inset,0_10px_10px_-9px_#00000070,0_20px_20px_-14px_#00000060,0_0px_6px_0px_#00000060] border border-white/[0.06]"
          : "w-full max-w-[480px] rounded-3xl bg-white px-6 py-5"
      }
      style={isDark ? {} : { boxShadow: "0 4px 32px rgba(0,0,0,0.07)" }}
    >
      <div className="mb-5 flex items-center justify-between">
        <div className="flex items-center gap-2">
          <StepsIcon size={22} color="#F59E0B" />
          <span className="text-lg font-bold" style={{ color: isDark ? "#FAFAF9" : "#1C1917" }}>
            Steps
          </span>
        </div>
        <button className="flex items-center gap-1 text-sm font-medium focus:outline-none" style={{ color: isDark ? "#78716C" : "#A8A29E" }}>
          August <CaretDown size={14} weight="bold" />
        </button>
      </div>

      <div className="mb-6 flex items-end gap-8">
        <div className="flex items-end gap-1.5">
          <span className="text-4xl font-black" style={{ color: isDark ? "#FAFAF9" : "#1C1917", lineHeight: "3rem" }}>
            <NumberFlow value={active.steps} trend={0} format={{ notation: "compact" }} />
          </span>
          <span className="mb-0.5 text-sm font-medium" style={{ color: isDark ? "#78716C" : "#A8A29E" }}>
            steps
          </span>
        </div>
        <div className="flex items-end gap-1.5">
          <span className="text-4xl font-black" style={{ color: isDark ? "#FAFAF9" : "#1C1917", lineHeight: "3rem" }}>
            <NumberFlow value={active.km} trend={0} format={{ minimumFractionDigits: 2, maximumFractionDigits: 2 }} />
          </span>
          <span className="mb-0.5 text-sm font-medium" style={{ color: isDark ? "#78716C" : "#A8A29E" }}>
            km
          </span>
        </div>
      </div>

      <div className={isDark ? "rounded-2xl p-1" : ""}>
        <div ref={chartRef} className="relative">
          {ready && (
            <m.div className="pointer-events-none absolute left-0 top-0 z-10" animate={{ x: badgePos.x, y: badgePos.y }} initial={false}>
              <div className="flex flex-col items-center" style={{ transform: "translateX(-50%)" }}>
                <div
                  className="mb-0.5 overflow-hidden rounded-xl px-3 py-1.5 text-sm font-semibold"
                  style={{ background: isDark ? "#FAFAF9" : "#1C1917", color: isDark ? "#1C1917" : "#fff" }}
                >
                  <span className="block whitespace-nowrap">
                    <NumberFlow value={active.steps} trend={0} />
                  </span>
                </div>
                <div style={{ width: 0, height: 0, borderLeft: "5px solid transparent", borderRight: "5px solid transparent", borderTop: `6px solid ${isDark ? "#FAFAF9" : "#1C1917"}` }} />
              </div>
            </m.div>
          )}

          <div className="flex gap-1.5 pt-12">
            {DATA.map((d, i) => {
              const isActive = i === selected;
              const h = barH(i);
              return (
                <div key={d.day} className="group flex min-w-0 flex-1 flex-col items-center" onClick={() => setSelected(i)} style={{ cursor: "pointer" }}>
                  <div className="flex h-[160px] w-full items-end">
                    <div
                      ref={(el) => { barDivRefs.current[i] = el; }}
                      className="relative w-full overflow-hidden rounded-xl transition-colors duration-200"
                      style={{
                        height: h,
                        background: isActive
                          ? isDark
                            ? "linear-gradient(180deg, #FFF3B0 0%, #FFD54F 18%, #FFA726 42%, #FF6F00 72%, #E65100 100%)"
                            : "linear-gradient(180deg, #FFF3B0 0%, #FFD54F 18%, #FFA726 42%, #FF6F00 72%, #E65100 100%)"
                          : isDark
                            ? "#2A2A2A"
                            : "#EDE9E3",
                      }}
                      onMouseEnter={(e) => { if (!isActive) (e.currentTarget as HTMLDivElement).style.background = isDark ? "#333333" : "#DDD6CC"; }}
                      onMouseLeave={(e) => { if (!isActive) (e.currentTarget as HTMLDivElement).style.background = isDark ? "#2A2A2A" : "#EDE9E3"; }}
                    >
                      {isActive && (
                        <span style={{ position: "absolute", top: 0, left: 0, right: 0, height: "48%", background: "linear-gradient(to bottom, rgba(255,255,255,0.52) 0%, rgba(255,255,255,0.14) 55%, transparent 100%)", borderRadius: "12px 12px 0 0" }} />
                      )}
                    </div>
                  </div>
                  <div className="mt-2 text-[13px]" style={{ color: isActive ? (isDark ? "#FAFAF9" : "#1C1917") : isDark ? "#57534E" : "#A8A29E", fontWeight: isActive ? 700 : 400 }}>
                    {d.day}
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
}

export default function StepsChart() {
  return (
    <MotionConfig transition={{ type: "spring", stiffness: 420, damping: 32 }}>
      <div className="flex size-full min-h-[520px] flex-col gap-8 p-6 lg:flex-row lg:items-start lg:justify-center">
        <div className="flex flex-1 justify-center">
          <ChartCard variant="light" />
        </div>
        <div className="flex flex-1 justify-center bg-[#0f0f0f] rounded-3xl p-6">
          <ChartCard variant="dark" />
        </div>
      </div>
    </MotionConfig>
  );
}
steps chart
