"use client";

import { useRef } from "react";
import { motion, useInView } from "framer-motion";
import { Clock, CreditCard, Globe, Users } from "lucide-react";
import type { LucideIcon } from "lucide-react";
import { cn } from "@/shared/utils";
import { useCountUp } from "@/shared/hooks";

const numberFormatter = new Intl.NumberFormat();

type StatItem =
  | {
      icon: LucideIcon;
      kind: "animated";
      value: number;
      suffix: string;
      label: string;
      delay: number;
      formatter?: (n: number) => string;
    }
  | {
      icon: LucideIcon;
      kind: "static";
      text: string;
      label: string;
    };

const stats: readonly StatItem[] = [
  { icon: Clock, kind: "animated", value: 20, suffix: "+", label: "Years in Japan", delay: 0 },
  { icon: Globe, kind: "animated", value: 100, suffix: "%", label: "English Support", delay: 100 },
  {
    icon: Users,
    kind: "animated",
    value: 10000,
    suffix: "+",
    label: "Customers Served",
    delay: 200,
    formatter: (n: number) => numberFormatter.format(n),
  },
  { icon: CreditCard, kind: "static", text: "Foreign Cards", label: "Accepted" },
];

function AnimatedValue({
  value,
  duration,
  enabled,
  delay,
  suffix,
  formatter,
}: {
  value: number;
  duration: number;
  enabled: boolean;
  delay: number;
  suffix: string;
  formatter?: (n: number) => string;
}) {
  const count = useCountUp({ end: value, duration, enabled, delay });

  return (
    <span className="text-3xl sm:text-4xl font-extrabold text-primary tabular-nums font-heading">
      {formatter ? formatter(count) : count}
      {suffix}
    </span>
  );
}

export function TrustStrip() {
  const ref = useRef<HTMLDivElement>(null);
  const inView = useInView(ref, { once: true, amount: 0.1 });

  return (
    <motion.div
      ref={ref}
      aria-label="Company statistics"
      initial={{ opacity: 0, y: 32 }}
      animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 32 }}
      transition={{ duration: 0.7, ease: "easeOut" as const }}
      className="relative py-10 sm:py-12 overflow-hidden"
    >
      {/* Gradient background */}
      <div className="absolute inset-0 bg-gradient-to-r from-surface-sunken via-background to-info-bg/30" />

      <div className="relative mx-auto max-w-6xl px-6 sm:px-10 lg:px-14">
        <div className="grid grid-cols-2 gap-8 sm:flex sm:justify-between sm:items-center">
          {stats.map((stat, i) => (
            <div
              key={stat.label}
              className={cn(
                "flex flex-col items-center text-center gap-3 sm:flex-1",
                i < stats.length - 1 && "sm:border-r sm:border-border/30"
              )}
            >
              <div className="flex items-center justify-center w-10 h-10 rounded-full bg-primary/10">
                <stat.icon className="h-5 w-5 text-primary" />
              </div>
              <div className="flex flex-col items-center gap-1">
                {stat.kind === "animated" ? (
                  <AnimatedValue
                    value={stat.value}
                    duration={1500}
                    enabled={inView}
                    delay={stat.delay}
                    suffix={stat.suffix}
                    {...(stat.formatter ? { formatter: stat.formatter } : {})}
                  />
                ) : (
                  <span className="text-xl sm:text-2xl font-extrabold text-primary font-heading">
                    {stat.text}
                  </span>
                )}
                <span className="text-sm text-muted-foreground font-medium">{stat.label}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </motion.div>
  );
}
