import type { ComponentType, CSSProperties } from 'react';
import { motion } from 'motion/react';
import { Youtube, Instagram, Globe, Star, Facebook, Search, MapPin, FileText, Music } from 'lucide-react';
import { SectionWrapper } from './ui/SectionWrapper';
import { ScoreRing } from './ui/ScoreRing';
import { SeverityBadge } from './ui/SeverityBadge';
import type { ChannelScore } from '@/features/report/types/report';

interface ChannelOverviewProps {
  channels: ChannelScore[];
}

const iconMap: Record<string, ComponentType<{ size?: number; className?: string; style?: CSSProperties }>> = {
  youtube: Youtube,
  instagram: Instagram,
  facebook: Facebook,
  star: Star,
  globe: Globe,
  search: Search,
  map: MapPin,
  blog: FileText,
  video: Music,
};

const channelLabel: Record<string, string> = {
  naverBlog: '네이버 블로그',
  naverPlace: '네이버 플레이스',
  gangnamUnni: '강남언니',
  instagram: 'Instagram',
  youtube: 'YouTube',
  facebook: 'Facebook',
  website: '웹사이트',
  tiktok: 'TikTok',
  blog: '블로그',
};

const brandColor: Record<string, string> = {
  facebook: '#1877F2',
  instagram: '#E1306C',
  youtube: '#FF0000',
  globe: '#6B2D8B',
};

/** channel 이름 (영문 key 또는 한글) → iconMap·brandColor 의 키로 정규화 */
function resolveChannelKey(raw: string | undefined): string | undefined {
  if (!raw) return undefined;
  const norm = raw.toLowerCase().replace(/\s+/g, '');
  // 영문 키
  if (norm in iconMap) return norm;
  // 한글 별칭
  if (norm.includes('유튜브') || norm.includes('youtube')) return 'youtube';
  if (norm.includes('인스타') || norm.includes('instagram')) return 'instagram';
  if (norm.includes('페이스북') || norm.includes('facebook')) return 'facebook';
  if (norm.includes('네이버블로그') || norm.includes('naverblog') || norm.includes('블로그')) return 'blog';
  if (norm.includes('네이버플레이스') || norm.includes('naverplace') || norm.includes('플레이스')) return 'map';
  if (norm.includes('강남언니') || norm.includes('gangnamunni')) return 'star';
  if (norm.includes('틱톡') || norm.includes('tiktok')) return 'video';
  if (norm.includes('웹사이트') || norm.includes('website') || norm.includes('홈페이지')) return 'globe';
  return undefined;
}

export default function ChannelOverview({ channels }: ChannelOverviewProps) {
  return (
    <SectionWrapper id="channel-overview" title="Channel Health Score" subtitle="채널별 건강도 종합">
      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
        {channels.map((ch, i) => {
          // 1) icon 값으로 매칭 → 2) channel 이름 (한글 포함) 으로 fallback
          const key = resolveChannelKey(ch.icon) || resolveChannelKey(ch.channel);
          const Icon = key ? iconMap[key] : Globe;
          const color = key ? brandColor[key] : undefined;
          return (
            <motion.div
              key={ch.channel}
              className="rounded-2xl bg-white border border-slate-100 shadow-sm p-4 text-center flex flex-col items-center gap-3"
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.5, delay: i * 0.08 }}
            >
              <div className="w-10 h-10 rounded-xl bg-slate-50 flex items-center justify-center">
                <Icon size={20} style={color ? { color } : undefined} className={color ? '' : 'text-slate-500'} />
              </div>
              <p className="text-sm font-medium text-[#0A1128]">{channelLabel[ch.channel] || ch.channel}</p>
              <ScoreRing score={ch.score} maxScore={ch.maxScore} size={60} color={color} />
              <p className="text-xs text-slate-500 line-clamp-2 leading-relaxed">
                {ch.headline}
              </p>
              <SeverityBadge severity={ch.status} />
            </motion.div>
          );
        })}
      </div>
    </SectionWrapper>
  );
}
