import { motion } from 'motion/react';
import { CHANNELS } from '../constants/performance';

function MetricCell({ label, value, delta }: { label: string; value: string; delta: string }) {
  const isPositive = delta.startsWith('+');
  const isNew = delta === 'NEW' || delta === '-';
  return (
    <div className="text-center">
      <p className="text-xs text-slate-400 mb-1">{label}</p>
      <p className="text-sm font-semibold text-[#0A1128]">{value}</p>
      <p className={`text-xs font-medium ${
        isNew ? 'text-slate-400' : isPositive ? 'text-[#4A3A7C]' : 'text-[#7C3A4B]'
      }`}>{delta}</p>
    </div>
  );
}

export function ChannelPerformanceSection() {
  return (
    <section className="py-10 px-6">
      <div className="max-w-6xl mx-auto">
        <h3 className="font-serif font-bold text-xl text-[#0A1128] mb-4">채널별 성과</h3>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          {CHANNELS.map((ch, i) => {
            const Icon = ch.icon;
            return (
              <motion.div
                key={ch.id}
                className="bg-white rounded-2xl border border-slate-100 shadow-[3px_4px_12px_rgba(0,0,0,0.06)] p-5"
                initial={{ opacity: 0, y: 15 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.3, delay: i * 0.08 }}
              >
                <div className="flex items-center gap-3 mb-4">
                  <div className="w-10 h-10 rounded-xl flex items-center justify-center" style={{ backgroundColor: ch.bgColor }}>
                    <Icon size={20} style={{ color: ch.brandColor }} />
                  </div>
                  <div className="flex-1">
                    <h4 className="text-sm font-semibold text-[#0A1128]">{ch.name}</h4>
                    <p className="text-xs text-slate-400">{ch.posts}개 콘텐츠</p>
                  </div>
                  <div className={`w-10 h-10 rounded-full flex items-center justify-center text-sm font-bold ${
                    ch.score >= 70 ? 'bg-[#F3F0FF] text-[#4A3A7C]' :
                    ch.score >= 40 ? 'bg-[#FFF6ED] text-[#7C5C3A]' :
                    ch.score > 0 ? 'bg-[#FFF0F0] text-[#7C3A4B]' :
                    'bg-slate-50 text-slate-400'
                  }`}>
                    {ch.score || '-'}
                  </div>
                </div>
                <div className="grid grid-cols-3 gap-3">
                  <MetricCell label="팔로워" value={ch.followers} delta={ch.followersDelta} />
                  <MetricCell label="조회수" value={ch.views} delta={ch.viewsDelta} />
                  <MetricCell label="참여율" value={ch.engagement} delta={ch.engagementDelta} />
                </div>
              </motion.div>
            );
          })}
        </div>
      </div>
    </section>
  );
}