import { motion } from 'motion/react';
import { CheckCircle2, XCircle, HelpCircle, ExternalLink, AlertCircle, Globe, Shield } from 'lucide-react';
import { SectionWrapper } from './ui/SectionWrapper';
import type { OtherChannel, WebsiteAudit } from '@/features/report/types/report';

interface OtherChannelsProps {
  channels: OtherChannel[];
  website: WebsiteAudit;
}

const statusConfig = {
  active: { icon: CheckCircle2, color: 'text-[#9B8AD4]', label: '활성' },
  inactive: { icon: XCircle, color: 'text-[#D4889A]', label: '비활성' },
  unknown: { icon: HelpCircle, color: 'text-slate-400', label: '미확인' },
  not_found: { icon: XCircle, color: 'text-[#D4889A]', label: '미발견' },
};

export default function OtherChannels({ channels, website }: OtherChannelsProps) {
  return (
    <SectionWrapper id="other-channels" title="Other Channels & Website" subtitle="기타 채널 및 웹사이트 기술 진단">
      {/* Other Channels */}
      <motion.div
        className="rounded-2xl bg-white border border-slate-100 shadow-sm overflow-hidden mb-8"
        initial={{ opacity: 0, y: 20 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true }}
        transition={{ duration: 0.5 }}
      >
        <div className="px-6 py-4 border-b border-slate-100">
          <h3 className="font-serif font-bold text-2xl text-[#0A1128]">기타 채널 현황</h3>
        </div>
        <div className="divide-y divide-slate-100">
          {channels.map((ch, i) => {
            const cfg = statusConfig[ch.status];
            const StatusIcon = cfg.icon;
            return (
              <motion.div
                key={ch.name}
                className="flex items-center gap-4 px-6 py-4"
                initial={{ opacity: 0, x: -10 }}
                whileInView={{ opacity: 1, x: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.3, delay: i * 0.05 }}
              >
                <StatusIcon size={20} className={cfg.color} />
                <div className="flex-1 min-w-0">
                  {ch.url ? (
                    <a
                      href={ch.url.startsWith('http') ? ch.url : `https://${ch.url}`}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="text-sm font-semibold text-[#0A1128] hover:text-[#6C5CE7] inline-flex items-center gap-1"
                    >
                      {ch.name}
                      <ExternalLink size={12} className="text-[#6C5CE7] shrink-0" />
                    </a>
                  ) : (
                    <p className="text-sm font-semibold text-[#0A1128]">{ch.name}</p>
                  )}
                  <p className="text-sm text-slate-500">{ch.details}</p>
                </div>
                <span className={`text-xs font-medium ${cfg.color}`}>{cfg.label}</span>
              </motion.div>
            );
          })}
        </div>
      </motion.div>

      {/* Website Tech Audit */}
      <motion.div
        className="rounded-2xl bg-white border border-slate-100 shadow-sm p-6"
        initial={{ opacity: 0, y: 20 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true }}
        transition={{ duration: 0.5, delay: 0.2 }}
      >
        <div className="flex items-center gap-2 mb-6">
          <Globe size={20} className="text-[#6C5CE7]" />
          <h3 className="font-serif font-bold text-2xl text-[#0A1128]">웹사이트 기술 진단</h3>
        </div>

        {/* Domain info */}
        <div className="rounded-xl bg-slate-50 p-4 mb-6">
          <p className="text-sm font-semibold text-[#0A1128] mb-2">기본 도메인: {website.primaryDomain}</p>
          {website.additionalDomains.length > 0 && (
            <div className="mt-2 space-y-1">
              {website.additionalDomains.map((d) => (
                <p key={d.domain} className="text-sm text-slate-600">
                  {d.domain} — <span className="text-slate-400">{d.purpose}</span>
                </p>
              ))}
            </div>
          )}
          <p className="text-sm text-slate-500 mt-2">
            주요 CTA: <span className="font-medium text-[#0A1128]">{website.mainCTA}</span>
          </p>
        </div>

        {/* Tracking Pixels */}
        <div className="mb-6">
          <p className="text-sm font-semibold text-slate-700 mb-3">트래킹 픽셀 설치 현황</p>
          <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
            {website.trackingPixels.map((pixel) => (
              <div
                key={pixel.name}
                className={`flex items-center gap-2 rounded-xl p-3 ${
                  pixel.installed
                    ? 'bg-[#F3F0FF] border border-[#D5CDF5]'
                    : 'bg-[#FFF0F0] border border-[#F5D5DC]'
                }`}
              >
                {pixel.installed ? (
                  <CheckCircle2 size={16} className="text-[#9B8AD4] shrink-0" />
                ) : (
                  <XCircle size={16} className="text-[#D4889A] shrink-0" />
                )}
                <div className="min-w-0">
                  <p className={`text-sm font-medium ${pixel.installed ? 'text-[#4A3A7C]' : 'text-[#7C3A4B]'}`}>
                    {pixel.name}
                  </p>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* SNS Links Status */}
        {!website.snsLinksOnSite && (
          <motion.div
            className="rounded-xl bg-[#FFF0F0] border border-[#F5D5DC] p-4 flex items-start gap-3"
            initial={{ opacity: 0, scale: 0.95 }}
            whileInView={{ opacity: 1, scale: 1 }}
            viewport={{ once: true }}
            transition={{ duration: 0.4, delay: 0.3 }}
          >
            <AlertCircle size={20} className="text-[#7C3A4B] shrink-0 mt-1" />
            <div>
              <p className="text-sm font-bold text-[#7C3A4B]">홈페이지에 SNS 링크 없음</p>
              <p className="text-sm text-[#7C3A4B] mt-1">
                웹사이트에서 소셜 미디어 채널로의 연결이 없습니다. 방문자가 SNS를 통해 브랜드와 연결할 수 없습니다.
              </p>
            </div>
          </motion.div>
        )}
        {website.snsLinksOnSite && (
          <div className="rounded-xl bg-[#F3F0FF] border border-[#D5CDF5] p-4 flex items-center gap-3">
            <CheckCircle2 size={20} className="text-[#9B8AD4]" />
            <p className="text-sm font-medium text-[#4A3A7C]">홈페이지에 SNS 링크 연결됨</p>
          </div>
        )}
      </motion.div>
    </SectionWrapper>
  );
}
