import { useMemo } from 'react';
import type { ComponentType } from 'react';
import { useParams, Link } from 'react-router';
import { motion } from 'motion/react';
import { AEO_GEO_RUBRIC } from '../data/aeoGeoRubric';
import { AEO_GEO_RUBRIC_V2 } from '../data/aeoGeoRubricV2';
import { scoreDiscoveryV2 } from '../lib/discoveryScoreV2';
import { AeoGeoV2Panel } from '../components/discovery/AeoGeoV2Panel';
import { Tag } from '../components/discovery/Tag';
import { DISCOVERY_RESULTS } from '../data/discoveryResults';
import { scoreDiscovery, levelToSeverity } from '../lib/discoveryScore';
import type {
  CategoryId,
  CategoryScore,
  ControlLevel,
  EvidenceGrade,
  EvidenceMethod,
  RubricCriterion,
} from '../types/discovery';
import { SectionWrapper } from '../components/report/ui/SectionWrapper';
import { ScoreRing } from '../components/report/ui/ScoreRing';
import { SeverityBadge } from '../components/report/ui/SeverityBadge';
import {
  ServerFilled,
  DatabaseFilled,
  FileTextFilled,
  ShareFilled,
  EyeFilled,
  ShieldFilled,
  PrismFilled,
  CheckFilled,
  CrossFilled,
  WarningFilled,
} from '../components/icons/FilledIcons';

/* ────────────────────────── 라벨 맵 ────────────────────────── */

const CATEGORY_ICON: Record<CategoryId, ComponentType<{ size?: number; className?: string }>> = {
  access: ServerFilled,
  entity: DatabaseFilled,
  content: FileTextFilled,
  surface: ShareFilled,
  measure: EyeFilled,
  hygiene: ShieldFilled,
};

const EVIDENCE_LABEL: Record<EvidenceGrade, string> = {
  measured: '실측',
  academic: '학술',
  vendor: '벤더',
  estimate: '추정',
};

const CONTROL_LABEL: Record<ControlLevel, string> = {
  direct: '직접 통제',
  influence: '영향 가능',
  none: '통제 불가',
};

const METHOD_LABEL: Record<EvidenceMethod, string> = {
  auto: '자동',
  semi: '반자동',
  manual: '수동',
};

const scoreColor = (pct: number) =>
  pct <= 40 ? '#C084CF' : pct <= 60 ? '#8B9CF7' : pct <= 80 ? '#7C6DD8' : '#6C5CE7';

/* ────────────────────────── 페이지 ────────────────────────── */

export default function DiscoveryReportPage() {
  const { id } = useParams<{ id: string }>();
  const result = id ? DISCOVERY_RESULTS[id] : undefined;
  const overall = useMemo(
    () => (result ? scoreDiscovery(AEO_GEO_RUBRIC, result) : null),
    [result],
  );
  const overallV2 = useMemo(
    () => (result ? scoreDiscoveryV2(AEO_GEO_RUBRIC_V2, result) : null),
    [result],
  );

  // 진단은 AEO/GEO 36항목 실측 결과가 있어야 그린다. 사이트 빌드와는 별개 산출물이라
  // 빌드만 끝난 병원은 여기에 들어올 수 있다. 막다른 길로 두지 않고 다음 단계로 잇는다.
  if (!result || !overall) {
    return <NoReport clinicId={id ?? ''} />;
  }

  const resultById = new Map(result.results.map((r) => [r.criterionId, r]));

  return (
    <div data-report-content className="[word-break:keep-all]">
      {/* ── 1. 헤더 (dark) ── */}
      <section className="on-dark bg-[#0A1128] text-white relative overflow-hidden pt-28 pb-16 md:pt-36 md:pb-20 px-6">
        <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,rgba(108,92,231,0.18),transparent_60%)]" />
        <div className="relative max-w-7xl mx-auto grid lg:grid-cols-[1fr_auto] gap-12 items-center">
          <div>
            <div className="inline-flex items-center gap-2 rounded-full bg-white/10 border border-white/10 px-4 py-1.5 mb-6">
              <PrismFilled size={16} className="text-purple-300" />
              <span className="text-sm font-semibold tracking-wide text-purple-200">
                INFINITH AI Discovery · AEO / GEO Audit v{result.rubricVersion}
              </span>
            </div>
            <h1 className="font-serif text-4xl md:text-6xl font-bold tracking-[-0.02em] mb-4">
              <span className="bg-gradient-to-r from-purple-300 to-blue-300 bg-clip-text text-transparent">
                AI Answer Readiness
              </span>
            </h1>
            <p className="text-3xl font-bold mb-2">{result.clinicName}</p>
            <p className="text-purple-200 text-base mb-1">{result.industry}</p>
            <a
              href={result.url}
              target="_blank"
              rel="noreferrer"
              className="text-purple-300 text-base underline underline-offset-4"
            >
              {result.url}
            </a>
            <p className="text-white/60 text-sm mt-4">
              실측일 {result.auditedAt} · 실측 항목 {overall.categories.reduce((s, c) => s + c.verifiedCount, 0)} /
              {' '}{AEO_GEO_RUBRIC.criteria.length} · AEO·GEO 각 100점 독립 지표 · 미검증 항목은 분모 제외
            </p>
          </div>

          <div className="on-light bg-white rounded-2xl shadow-[3px_4px_12px_rgba(0,0,0,0.06)] p-8 flex flex-col items-center gap-4 min-w-[260px]">
            <div className="flex items-start gap-8">
              {overallV2 && [overallV2.aeo, overallV2.geo].map((ax) => (
                <div key={ax.axis.id} className="flex flex-col items-center gap-2">
                  <ScoreRing score={ax.score} size={130} label={ax.axis.nameEn} />
                  <div className="flex items-baseline gap-2">
                    <span className="font-serif text-3xl font-black text-[#0A1128]">{ax.grade}</span>
                    <span className="ui-note">{ax.axis.code} {ax.axis.name}</span>
                  </div>
                </div>
              ))}
            </div>
            <p className="ui-note">
              v1.0 종합 {overall.score}/{overall.grade} · 실측 {overall.earned} / {overall.possible}점
            </p>
          </div>
        </div>

        {/* 카테고리 바 */}
        <div className="relative max-w-7xl mx-auto mt-14 grid md:grid-cols-3 gap-4">
          {overall.categories.map((cs, i) => (
            <CategoryBar key={cs.category.id} cs={cs} index={i} />
          ))}
        </div>
      </section>

      {/* ── 1b. v2.0 AEO / GEO 분리 점수 (light) ── */}
      {overallV2 && <AeoGeoV2Panel rubric={AEO_GEO_RUBRIC_V2} score={overallV2} />}

      {/* ── 2. 핵심 발견 (light) ── */}
      <SectionWrapper
        id="findings"
        title="What AI Sees"
        subtitle="AI 답변엔진이 지금 이 업체를 어떻게 읽는지. 진단의 결론"
      >
        <div className="grid md:grid-cols-2 gap-5">
          {result.keyFindings.map((f, i) => (
            <motion.div
              key={f.title}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: i * 0.08 }}
              className="on-light bg-white rounded-2xl border border-slate-100 shadow-[3px_4px_12px_rgba(0,0,0,0.06)] p-6"
            >
              <div className="flex items-start justify-between gap-4 mb-3">
                <h3 className="text-xl font-bold text-[#0A1128]">{f.title}</h3>
                <FindingIcon severity={f.severity} />
              </div>
              <p className="ui-body">{f.detail}</p>
            </motion.div>
          ))}
        </div>
      </SectionWrapper>

      {/* ── 3. 카테고리별 상세 (dark) ── */}
      <SectionWrapper
        id="breakdown"
        title="Scorecard by Category"
        subtitle="v1.0 실측 항목 36개 · AEO/GEO 점수의 파생 신호. 각 항목의 실측 근거와 근거 등급"
        dark
      >
        <div className="space-y-6">
          {overall.categories.map((cs) => {
            const Icon = CATEGORY_ICON[cs.category.id];
            const criteria = AEO_GEO_RUBRIC.criteria.filter((c) => c.category === cs.category.id);
            return (
              <div
                key={cs.category.id}
                className="on-light bg-white rounded-2xl shadow-[3px_4px_12px_rgba(0,0,0,0.06)] p-6 text-[#0A1128]"
              >
                <div className="flex flex-wrap items-center justify-between gap-4 mb-5">
                  <div>
                    <div className="flex items-center gap-3">
                      <div className="w-10 h-10 shrink-0 rounded-xl bg-[#F3F0FF] flex items-center justify-center text-[#6C5CE7]">
                        <Icon size={22} />
                      </div>
                      <p className="font-serif text-[28px] font-bold text-[#1D0024] tracking-[-0.01em] leading-10">
                        {cs.category.code} · {cs.category.nameEn}
                      </p>
                    </div>
                    <h3 className="text-xl font-bold mt-1 pl-[52px] font-sans text-[#0A1128]!">{cs.category.name}</h3>
                  </div>
                  <div className="flex items-center gap-4">
                    <div className="text-right">
                      <p className="ui-note">배점 {cs.weight} · 검증 {cs.verifiedCount}/{cs.totalCount}</p>
                      <p className="text-base font-semibold">{cs.earned} / {cs.possible}점</p>
                    </div>
                    <ScoreRing score={cs.pct} size={64} />
                  </div>
                </div>
                <p className="text-lg text-[#4F1DA1] mb-4">{cs.category.description}</p>

                <div className="divide-y divide-slate-100">
                  {criteria.map((c) => {
                    const r = resultById.get(c.id);
                    const level = r?.level ?? 'unverified';
                    const levelLabel =
                      level === 'unverified' ? '미검증' : c.levels[level].label;
                    return (
                      <div key={c.id} className="py-4 grid md:grid-cols-[170px_1fr_auto] gap-3 items-start">
                        <div>
                          <span className="ui-note font-semibold">{c.id}</span>
                          <p className="text-base font-bold">{c.name}</p>
                          <p className="ui-note mt-0.5">{c.weight}점</p>
                        </div>
                        <div>
                          <p className="ui-body">{r?.evidence}</p>
                          {r?.source && (
                            <p className="ui-note mt-1 font-mono break-all">{r.source}</p>
                          )}
                          <div className="flex flex-wrap gap-1.5 mt-2">
                            <Tag>{EVIDENCE_LABEL[c.evidenceGrade]}</Tag>
                            <Tag>{CONTROL_LABEL[c.control]}</Tag>
                            <Tag>{METHOD_LABEL[c.method]}</Tag>
                          </div>
                        </div>
                        <div className="flex flex-col items-end gap-1">
                          <SeverityBadge severity={levelToSeverity(level)} label={levelLabel} className="text-base font-bold px-4 py-1.5" />
                          {level !== 'unverified' && (
                            <span className="ui-note">
                              {Math.round((c.weight * level) / 3 * 10) / 10} / {c.weight}
                            </span>
                          )}
                        </div>
                      </div>
                    );
                  })}
                </div>
              </div>
            );
          })}
        </div>
      </SectionWrapper>

      {/* 개선 제안(Action Plan)·하지 않을 것·빌드 제안·확인 항목 패널은 /actions/:id 로 옮겼다.
          증거(진단)와 처방(할 일)은 읽는 목적이 달라 여기 한 페이지에 두면 스크롤만 길어진다.
          확인 항목 패널은 /supporters/:id 라는 전용 단계가 이미 있어 여기서 다시 보여줄 필요가 없다. */}

      {/* ── 4. 채점 기준표 (light) ── */}
      <SectionWrapper
        id="rubric"
        title="Scoring Rubric"
        subtitle={`실측 기준표 v${AEO_GEO_RUBRIC.version} · ${AEO_GEO_RUBRIC.criteria.length}개 항목. v2.0 AEO/GEO 점수는 이 항목들을 파생 신호로 쓴다`}
      >
        <div className="on-light overflow-x-auto rounded-2xl border border-slate-100 shadow-sm bg-white">
          <table className="w-full text-base min-w-[860px]">
            <thead className="on-dark bg-[#0A1128] text-white">
              <tr>
                <th className="text-left px-4 py-3 font-semibold w-16">ID</th>
                <th className="text-left px-4 py-3 font-semibold">항목</th>
                <th className="text-left px-4 py-3 font-semibold w-14">배점</th>
                <th className="text-left px-4 py-3 font-semibold w-16">근거</th>
                <th className="text-left px-4 py-3 font-semibold w-20">통제</th>
                <th className="text-left px-4 py-3 font-semibold w-16">채점</th>
                <th className="text-left px-4 py-3 font-semibold">3점 기준</th>
              </tr>
            </thead>
            <tbody>
              {AEO_GEO_RUBRIC.categories.map((cat) => (
                <RubricRows
                  key={cat.id}
                  categoryName={`${cat.code}. ${cat.name} (${cat.weight})`}
                  criteria={AEO_GEO_RUBRIC.criteria.filter((c) => c.category === cat.id)}
                />
              ))}
            </tbody>
          </table>
        </div>
      </SectionWrapper>
    </div>
  );
}

/* ────────────────────────── 서브 컴포넌트 ────────────────────────── */

/** 진단 데이터가 없는 병원. 빌드·사진 확인으로 잇고, 진단이 무엇인지 한 줄로 알린다. */
function NoReport({ clinicId }: { clinicId: string }) {
  return (
    <div className="[word-break:keep-all]">
      <section className="on-dark bg-[#0A1128] text-white relative overflow-hidden pt-28 pb-16 md:pt-36 md:pb-20 px-6">
        <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,rgba(108,92,231,0.18),transparent_60%)]" />
        <div className="relative max-w-3xl mx-auto">
          <div className="inline-flex items-center gap-2 rounded-full bg-white/10 border border-white/10 px-4 py-1.5 mb-6">
            <PrismFilled size={16} className="text-purple-300" />
            <span className="text-sm font-semibold tracking-wide text-purple-200">INFINITH AI Discovery</span>
          </div>
          <h1 className="font-serif text-4xl md:text-5xl font-bold tracking-[-0.02em] mb-4">
            <span className="bg-gradient-to-r from-purple-300 to-blue-300 bg-clip-text text-transparent">No Audit Yet</span>
          </h1>
          <p className="text-2xl font-bold mb-3">{clinicId}</p>
          <p className="ui-body">
            이 병원은 아직 AEO/GEO 진단을 받지 않았습니다.{' '}
            진단은 36개 항목을 실제로 물어보고 답변을 확인해 매기는 별도 작업이라, 사이트 빌드만으로는 만들어지지 않습니다.
          </p>
        </div>
      </section>

      <section className="bg-white py-16 md:py-20 px-6">
        <div className="max-w-3xl mx-auto">
          <p className="ui-ask ui-ask-block mb-8">진단 없이도 아래는 바로 보실 수 있습니다.</p>
          <div className="grid sm:grid-cols-2 gap-4">
            <Link to={`/build/${clinicId}`} className="rounded-2xl border border-slate-200 p-5 hover:shadow-[4px_6px_16px_rgba(0,0,0,0.09)] transition-shadow">
              <p className="font-bold text-[#1D0024] mb-1">사이트 빌드 결과</p>
              <p className="ui-note">만들어진 글과 안내 페이지를 봅니다.</p>
            </Link>
            <Link to={`/images/${clinicId}`} className="rounded-2xl border border-slate-200 p-5 hover:shadow-[4px_6px_16px_rgba(0,0,0,0.09)] transition-shadow">
              <p className="font-bold text-[#1D0024] mb-1">사진 확인</p>
              <p className="ui-note">사이트에 실을 사진을 고릅니다.</p>
            </Link>
          </div>
          <p className="ui-note mt-8">
            진단 리포트 예시는 <Link to="/discovery/viewclinic" className="underline underline-offset-4 text-[#4A3A7C]">뷰성형외과 리포트</Link>에서 보실 수 있습니다.
          </p>
        </div>
      </section>
    </div>
  );
}

function CategoryBar({ cs, index }: { key?: string; cs: CategoryScore; index: number }) {
  const Icon = CATEGORY_ICON[cs.category.id];
  return (
    <motion.a
      href="#breakdown"
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ delay: 0.2 + index * 0.06 }}
      className="on-light bg-white rounded-2xl shadow-[3px_4px_12px_rgba(0,0,0,0.06)] hover:shadow-[4px_6px_16px_rgba(0,0,0,0.09)] transition-shadow p-5 text-[#0A1128]"
    >
      <div className="flex items-center justify-between mb-3">
        <div className="flex items-center gap-2">
          <span className="text-[#6C5CE7]"><Icon size={18} /></span>
          <span className="text-base font-bold">{cs.category.code}. {cs.category.name}</span>
        </div>
        <span className="ui-note">{cs.weight}점</span>
      </div>
      <div className="h-2 rounded-full bg-slate-100 overflow-hidden">
        <motion.div
          className="h-full rounded-full"
          style={{ background: scoreColor(cs.pct) }}
          initial={{ width: 0 }}
          animate={{ width: `${cs.pct}%` }}
          transition={{ duration: 0.9, ease: 'easeOut', delay: 0.3 + index * 0.06 }}
        />
      </div>
      <div className="flex justify-between mt-2 text-sm">
        <span className="font-semibold">{cs.pct}%</span>
        <span className="text-slate-400">
          {cs.verifiedCount < cs.totalCount ? `미검증 ${cs.totalCount - cs.verifiedCount}` : '전 항목 검증'}
        </span>
      </div>
    </motion.a>
  );
}

function FindingIcon({ severity }: { severity: 'critical' | 'warning' | 'good' }) {
  if (severity === 'good') return <span className="text-[#9B8AD4] shrink-0"><CheckFilled size={22} /></span>;
  if (severity === 'warning') return <span className="text-[#D4A872] shrink-0"><WarningFilled size={22} /></span>;
  return <span className="text-[#D4889A] shrink-0"><CrossFilled size={22} /></span>;
}

function RubricRows({ categoryName, criteria }: { key?: string; categoryName: string; criteria: RubricCriterion[] }) {
  return (
    <>
      <tr className="bg-[#F4F6FB]">
        <td colSpan={7} className="px-4 py-2 text-sm font-bold text-[#4A3A7C] tracking-wide">
          {categoryName}
        </td>
      </tr>
      {criteria.map((c) => (
        <tr key={c.id} className="border-t border-slate-100 align-top">
          <td className="px-4 py-3 font-semibold text-slate-500">{c.id}</td>
          <td className="px-4 py-3">
            <p className="font-semibold text-[#0A1128]">{c.name}</p>
            <p className="ui-note mt-1">{c.rationale}</p>
            <p className="ui-note mt-1 font-mono">{c.howToCheck}</p>
          </td>
          <td className="px-4 py-3 font-semibold">{c.weight}</td>
          <td className="px-4 py-3 text-slate-600">{EVIDENCE_LABEL[c.evidenceGrade]}</td>
          <td className="px-4 py-3 text-slate-600">{CONTROL_LABEL[c.control]}</td>
          <td className="px-4 py-3 text-slate-600">{METHOD_LABEL[c.method]}</td>
          <td className="px-4 py-3 text-slate-600">{c.levels[3].label}</td>
        </tr>
      ))}
    </>
  );
}