'use client';
import { motion } from 'framer-motion';
import { Users, FileText, MessageSquare, Eye, ShieldCheck, AlertTriangle, Coins, Activity } from 'lucide-react';

export interface StatStripProps {
  members: number;
  posts: number;
  comments: number;
  visitsToday: number;
  visitsTotal: number;
  guarantees: number;
  muktiReports: number;
  pointsCirculating: number;
}

const fmt = (n: number) => n.toLocaleString();
const compact = (n: number) =>
  n >= 1_000_000_000 ? (n / 1_000_000_000).toFixed(1) + 'B' :
  n >= 1_000_000 ? (n / 1_000_000).toFixed(1) + 'M' :
  n >= 1_000 ? (n / 1_000).toFixed(1) + 'K' : String(n);

export default function StatStrip({ members, posts, comments, visitsToday, visitsTotal, guarantees, muktiReports, pointsCirculating }: StatStripProps) {
  const stats = [
    { icon: Users,         label: '활성 회원',     value: fmt(members),       sub: '실가입',          tone: 'from-violet-500 to-fuchsia-600' },
    { icon: FileText,      label: '누적 게시글',   value: compact(posts),     sub: `자유게시판`,       tone: 'from-sky-500 to-blue-700' },
    { icon: MessageSquare, label: '전체 댓글',     value: compact(comments),  sub: '커뮤니티',        tone: 'from-emerald-500 to-teal-600' },
    { icon: Eye,           label: '오늘 방문',     value: compact(visitsToday), sub: `누적 ${compact(visitsTotal)}`, tone: 'from-amber-500 to-orange-600' },
    { icon: ShieldCheck,   label: '보증 사이트',   value: fmt(guarantees),    sub: '검수 완료',        tone: 'from-green-500 to-emerald-700' },
    { icon: AlertTriangle, label: '먹튀 신고',     value: fmt(muktiReports),  sub: '신고 누적',        tone: 'from-rose-500 to-red-700' },
    { icon: Coins,         label: '유통 포인트',   value: compact(pointsCirculating), sub: 'p',         tone: 'from-yellow-500 to-amber-700' },
    { icon: Activity,      label: '실시간',        value: 'LIVE',             sub: '24/7 모니터링',    tone: 'from-pink-500 to-rose-600' },
  ];

  return (
    <section className="grid grid-cols-2 gap-2.5 sm:grid-cols-4 lg:grid-cols-8">
      {stats.map((s, i) => {
        const Icon = s.icon;
        return (
          <motion.div
            key={s.label}
            initial={{ opacity: 0, y: 12 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: i * 0.04, duration: 0.4 }}
            className="lift relative overflow-hidden rounded-2xl bg-white p-3.5 ring-1 ring-neutral-100"
          >
            <div className={`absolute -top-6 -right-6 h-20 w-20 rounded-full bg-gradient-to-br ${s.tone} opacity-20 blur-2xl`} />
            <div className="flex items-start justify-between">
              <span className={`grid h-9 w-9 place-items-center rounded-xl bg-gradient-to-br ${s.tone} text-white shadow-[0_6px_14px_rgba(0,0,0,0.10)]`}>
                <Icon size={16} />
              </span>
              <span className="text-[10px] font-semibold uppercase tracking-wider text-neutral-text-soft">{s.sub}</span>
            </div>
            <div className="mt-2 text-[20px] font-extrabold tabular text-neutral-900">{s.value}</div>
            <div className="text-[11px] font-medium text-neutral-text-soft">{s.label}</div>
          </motion.div>
        );
      })}
    </section>
  );
}