import GlobeIcon from "@/assets/report/globe.svg?react";
import { BrandConsistencyMap } from "@/components/brand/BrandConsistencyMap";
import { DiagnosisRow } from "@/components/diagnosis/DiagnosisRow";
import { ConsolidationCallout } from "@/components/panel/ConsolidationCallout";
import { PageSection } from "@/components/section/PageSection";
import { MOCK_FACEBOOK_AUDIT } from "@/features/report/constants/mock_facebook_audit";
import type { FacebookAudit } from "@/features/report/types/facebookAudit";
import { FacebookPageCard } from "@/features/report/ui/facebook/FacebookPageCard";

type ReportFacebookSectionProps = {
  data?: FacebookAudit;
};

export function ReportFacebookSection({ data = MOCK_FACEBOOK_AUDIT }: ReportFacebookSectionProps) {
  return (
    <PageSection id="facebook-audit" title="Facebook Analysis" subtitle="페이스북 페이지 분석">
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {data.pages.map((page, i) => (
          <FacebookPageCard key={page.pageName} page={page} index={i} />
        ))}
      </div>

      {data.brandInconsistencies.length > 0 ? (
        <BrandConsistencyMap inconsistencies={data.brandInconsistencies} />
      ) : null}

      {data.diagnosis.length > 0 ? (
        <div className="mt-8 rounded-2xl bg-white border border-neutral-20 shadow-sm p-6 card-shadow animate-fade-in-up animation-delay-300">
          <p className="body-14-medium text-neutral-80 mb-2 break-keep">진단 결과</p>
          <p className="label-12 text-neutral-60 mb-4 break-keep">Facebook 채널 문제점</p>
          {data.diagnosis.map((item, i) => (
            <DiagnosisRow
              key={`${item.category}-${i}`}
              category={item.category}
              detail={item.detail}
              severity={item.severity}
            />
          ))}
        </div>
      ) : null}

      {data.consolidationRecommendation ? (
        <ConsolidationCallout
          title="통합 권장 사항"
          icon={<GlobeIcon width={20} height={20} className="text-white" aria-hidden />}
        >
          {data.consolidationRecommendation}
        </ConsolidationCallout>
      ) : null}
    </PageSection>
  );
}