/**
 * FeatureComparisonTable — 3-Tier 기능 세부 비교표.
 *
 * 설계 원칙:
 *  - Cell 값 3종:
 *      true   → CheckFilled (accent) 포함
 *      false  → CrossFilled (slate-300) 미포함
 *      string → 짧은 레이블 ("월 1회", "고급" 등)
 *  - INSIGHT가 전 채널을 커버하므로 차별화 축은 "빈도 · 깊이 · 전략 자산 · 범위"
 *  - 중앙 INTELLIGENCE 컬럼은 `bg-accent/5` 로 시각적 강조 (Tier Cards의 ring-accent와 톤 매칭)
 *  - 모바일에서는 가로 스크롤 (min-w-[720px])
 *
 * 카테고리 헤더는 배경 strip으로 섹션 경계를 분명히 하여 스캔 가능성(scannability) 확보.
 */
import { motion } from 'motion/react';
import { CheckFilled, CrossFilled } from '@/shared/icons/FilledIcons';

type CellValue = true | false | string;

interface FeatureRow {
  label: string;
  insight: CellValue;
  intelligence: CellValue;
  intelligencePlus: CellValue;
  /** 추가 설명(헬프 텍스트) — 필요 시 행 아래 회색 부연 */
  hint?: string;
}

interface FeatureCategory {
  name: string;
  rows: FeatureRow[];
}

/**
 * 기능 매트릭스 (plan 섹션 15-D 기준, INSIGHT 전채널화 반영)
 *
 * ⚠️ Tier Cards의 bullets과 "차별화 메시지"가 일치해야 신뢰가 유지됩니다.
 *    카드 bullets를 수정할 경우 이 매트릭스도 함께 업데이트하세요.
 */
const categories: FeatureCategory[] = [
  {
    name: '분석',
    rows: [
      {
        label: '월 리포트 수',
        insight: '1회',
        intelligence: '4회',
        intelligencePlus: '10회',
      },
      {
        label: '전 채널 커버리지',
        insight: true,
        intelligence: true,
        intelligencePlus: true,
        hint: '홈페이지 · 강남언니 · YouTube · Instagram · Facebook · 네이버 플레이스 · 블로그',
      },
      {
        label: 'Vision AI (의료진·슬로건·인증 자동 추출)',
        insight: false,
        intelligence: true,
        intelligencePlus: true,
      },
      {
        label: '스크린샷 증거 기반 심층 분석',
        insight: '기본',
        intelligence: '심층',
        intelligencePlus: '심층 + 변화 추적',
      },
    ],
  },
  {
    name: '전략',
    rows: [
      {
        label: '콘텐츠 플랜',
        insight: '4주',
        intelligence: '8주 + 주간 조정',
        intelligencePlus: '12개월 + 월간 리뷰',
      },
      {
        label: 'KPI 대시보드',
        insight: '기본',
        intelligence: '고급 (3/12개월 목표)',
        intelligencePlus: '커스텀',
      },
      {
        label: '브랜드 가이드 + 콘텐츠 필러',
        insight: false,
        intelligence: '5종',
        intelligencePlus: '10종',
      },
    ],
  },
  {
    name: '경쟁',
    rows: [
      {
        label: '경쟁사 추적',
        insight: '1개',
        intelligence: '3개',
        intelligencePlus: '5개',
      },
      {
        label: '변동 알림',
        insight: false,
        intelligence: '주간',
        intelligencePlus: '일간',
      },
    ],
  },
  {
    name: '조직',
    rows: [
      {
        label: '멀티 분원 통합 대시보드',
        insight: false,
        intelligence: false,
        intelligencePlus: '최대 3개',
        hint: '4개 이상은 커스텀 플랜 상담',
      },
      {
        label: 'PDF 내보내기',
        insight: true,
        intelligence: true,
        intelligencePlus: '병원 CI 커스텀 템플릿',
      },
    ],
  },
  {
    name: '기타',
    rows: [
      {
        label: '신규 기능 베타 우선 접근',
        insight: false,
        intelligence: false,
        intelligencePlus: true,
      },
      {
        label: '지원',
        insight: '이메일',
        intelligence: '이메일 + 화상 월 1회',
        intelligencePlus: '전담 CSM',
      },
    ],
  },
];

/** 셀 값 렌더러 — 3종(true/false/string)을 DS 아이콘 규칙으로 일관되게 표현 */
function Cell({ value, isHighlight }: { value: CellValue; isHighlight?: boolean }) {
  if (value === true) {
    return (
      <div className="flex items-center justify-center">
        <CheckFilled size={18} className={isHighlight ? 'text-accent' : 'text-emerald-500'} />
      </div>
    );
  }
  if (value === false) {
    return (
      <div className="flex items-center justify-center">
        <CrossFilled size={18} className="text-slate-300" />
      </div>
    );
  }
  return (
    <div
      className={`text-sm text-center leading-snug break-keep ${
        isHighlight ? 'text-primary-900 font-semibold' : 'text-slate-700'
      }`}
    >
      {value}
    </div>
  );
}

export default function FeatureComparisonTable() {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true, margin: '-80px' }}
      transition={{ duration: 0.5 }}
      className="w-full"
    >
      {/* 섹션 헤드라인 */}
      <div className="text-center mb-10">
        <h2 className="text-3xl md:text-4xl font-serif font-bold text-primary-900 mb-3">
          플랜 세부 비교
        </h2>
        <p className="text-slate-600 break-keep">
          병원 규모·마케팅 예산에 맞는 플랜을 한눈에 비교해 보세요.
        </p>
      </div>

      {/* 테이블 — 모바일 가로 스크롤 */}
      <div className="rounded-3xl bg-white border border-slate-200 shadow-sm overflow-hidden">
        <div className="overflow-x-auto">
          <div className="min-w-[720px]">
            {/* 상단 헤더 행 */}
            <div className="grid grid-cols-[1.4fr_1fr_1fr_1fr] border-b border-slate-200">
              <div className="px-6 py-5 text-sm font-semibold text-slate-500">기능</div>
              <div className="px-4 py-5 text-center">
                <div className="text-sm font-bold text-primary-900">INSIGHT</div>
                <div className="text-xs text-slate-400 mt-0.5">소형·1인 의원</div>
              </div>
              <div className="px-4 py-5 text-center bg-accent/5 border-x border-accent/15 relative">
                <div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-accent/50 to-accent" />
                <div className="text-sm font-bold text-primary-900">INTELLIGENCE</div>
                <div className="text-xs text-accent font-semibold mt-0.5">메인 타겟</div>
              </div>
              <div className="px-4 py-5 text-center">
                <div className="text-sm font-bold text-primary-900">INTELLIGENCE+</div>
                <div className="text-xs text-slate-400 mt-0.5">대형·멀티 분원</div>
              </div>
            </div>

            {/* 카테고리별 렌더링 */}
            {categories.map((cat) => (
              <div key={cat.name}>
                {/* 카테고리 스트립 */}
                <div className="grid grid-cols-[1.4fr_1fr_1fr_1fr] bg-slate-50/70 border-b border-slate-100">
                  <div className="px-6 py-2.5 text-xs font-bold tracking-wide text-slate-500 uppercase">
                    {cat.name}
                  </div>
                  <div className="bg-transparent" />
                  <div className="bg-accent/5 border-x border-accent/15" />
                  <div className="bg-transparent" />
                </div>

                {/* 각 기능 행 */}
                {cat.rows.map((row, idx) => (
                  <div
                    key={row.label}
                    className={`grid grid-cols-[1.4fr_1fr_1fr_1fr] items-center ${
                      idx !== cat.rows.length - 1 ? 'border-b border-slate-100' : ''
                    }`}
                  >
                    <div className="px-6 py-4">
                      <div className="text-sm text-primary-900 font-medium break-keep">
                        {row.label}
                      </div>
                      {row.hint && (
                        <div className="text-xs text-slate-400 mt-1 leading-relaxed break-keep">
                          {row.hint}
                        </div>
                      )}
                    </div>
                    <div className="px-4 py-4">
                      <Cell value={row.insight} />
                    </div>
                    <div className="px-4 py-4 bg-accent/5 border-x border-accent/15 h-full flex items-center justify-center">
                      <Cell value={row.intelligence} isHighlight />
                    </div>
                    <div className="px-4 py-4">
                      <Cell value={row.intelligencePlus} />
                    </div>
                  </div>
                ))}
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* 보조 안내 */}
      <p className="text-xs text-slate-400 text-center mt-4 break-keep">
        모든 플랜은 계약 기반이며, 세부 조건은 상담 시 맞춤 설계됩니다.
      </p>
    </motion.div>
  );
}
