/* BridgeWell Calculator — icons (lucide subset, inline SVGs) +
   AnimatedNumber + number formatters. Exposed to window for the
   other script files to pick up. */

// --- Icon factory ---------------------------------------------------------
function makeIcon(paths) {
  return function Icon(props) {
    return (
      <svg
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
        aria-hidden="true"
        {...props}
      >
        {paths}
      </svg>
    );
  };
}

const Users = makeIcon(
  <>
    <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
    <circle cx="9" cy="7" r="4" />
    <path d="M22 21v-2a4 4 0 0 0-3-3.87" />
    <path d="M16 3.13a4 4 0 0 1 0 7.75" />
  </>
);
const UserCheck = makeIcon(
  <>
    <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
    <circle cx="9" cy="7" r="4" />
    <path d="M16 11l2 2 4-4" />
  </>
);
const CalendarDays = makeIcon(
  <>
    <rect x="3" y="4" width="18" height="18" rx="2" />
    <path d="M16 2v4M8 2v4M3 10h18" />
    <path d="M8 14h.01M12 14h.01M16 14h.01M8 18h.01M12 18h.01M16 18h.01" />
  </>
);
const ShieldCheck = makeIcon(
  <>
    <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
    <path d="M9 12l2 2 4-4" />
  </>
);
const ArrowRight = makeIcon(<><path d="M5 12h14M13 5l7 7-7 7" /></>);
const ArrowLeft = makeIcon(<><path d="M19 12H5M11 19l-7-7 7-7" /></>);
const Sparkles = makeIcon(
  <>
    <path d="M12 3l1.9 4.9L19 9.8l-4.9 1.9L12 16.6l-1.9-4.9L5 9.8l5.1-1.9L12 3z" />
    <path d="M18 17l.8 2 2 .8-2 .8L18 23l-.8-2-2-.8 2-.8L18 17z" />
    <path d="M5 17l.8 2 2 .8-2 .8L5 23l-.8-2-2-.8 2-.8L5 17z" />
  </>
);
const GraduationCap = makeIcon(
  <>
    <path d="M22 10L12 4 2 10l10 6 10-6z" />
    <path d="M6 12v5c3 3 9 3 12 0v-5" />
  </>
);
const RotateCcw = makeIcon(<><path d="M3 12a9 9 0 1 0 3-6.7L3 8" /><path d="M3 3v5h5" /></>);
const DollarSign = makeIcon(<><path d="M12 1v22" /><path d="M17 5H9.5a3.5 3.5 0 1 0 0 7h5a3.5 3.5 0 1 1 0 7H6" /></>);
const Clock = makeIcon(<><circle cx="12" cy="12" r="10" /><path d="M12 6v6l4 2" /></>);
const CheckCircle2 = makeIcon(<><circle cx="12" cy="12" r="10" /><path d="M9 12l2 2 4-4" /></>);
const TrendingUp = makeIcon(<><path d="M23 6l-9.5 9.5-5-5L1 18" /><path d="M17 6h6v6" /></>);
const Heart = makeIcon(
  <>
    <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />
  </>
);
const AlertCircle = makeIcon(<><circle cx="12" cy="12" r="10" /><path d="M12 8v4M12 16h.01" /></>);
const Calendar = makeIcon(
  <>
    <rect x="3" y="4" width="18" height="18" rx="2" />
    <path d="M16 2v4M8 2v4M3 10h18" />
  </>
);
const ArrowUpRight = makeIcon(<><path d="M7 17L17 7M7 7h10v10" /></>);

// --- AnimatedNumber -------------------------------------------------------
const { useEffect, useRef, useState } = React;

function AnimatedNumber({
  value,
  duration = 600,
  decimals = 0,
  prefix = "",
  suffix = "",
  className = "",
}) {
  const [display, setDisplay] = useState(value);
  const prevValue = useRef(value);
  const animationRef = useRef(null);

  useEffect(() => {
    const start = prevValue.current;
    const end = value;
    const startTime = performance.now();

    const animate = (currentTime) => {
      const elapsed = currentTime - startTime;
      const progress = Math.min(elapsed / duration, 1);
      const eased = 1 - Math.pow(1 - progress, 3);
      const current = start + (end - start) * eased;
      setDisplay(current);

      if (progress < 1) {
        animationRef.current = requestAnimationFrame(animate);
      } else {
        setDisplay(end);
      }
    };

    animationRef.current = requestAnimationFrame(animate);
    prevValue.current = value;

    return () => {
      if (animationRef.current) cancelAnimationFrame(animationRef.current);
    };
  }, [value, duration]);

  const formatted = display
    .toFixed(decimals)
    .replace(/\B(?=(\d{3})+(?!\d))/g, ",");

  return (
    <span className={className}>
      {prefix}{formatted}{suffix}
    </span>
  );
}

Object.assign(window, {
  Users, UserCheck, CalendarDays, ShieldCheck,
  ArrowRight, ArrowLeft, Sparkles,
  GraduationCap, RotateCcw,
  DollarSign, Clock, CheckCircle2, TrendingUp,
  Heart, AlertCircle, Calendar, ArrowUpRight,
  AnimatedNumber,
});