'use client';

import { FiAlertTriangle } from 'react-icons/fi';
import { EnterpriseMatch, GraphInsightsPayload, PublicBadgeData, ScoringSummary } from './types';
// import ShareButton from './components/ShareButton';
import AppendixTables from './components/AppendixTables';
import ConnectedPlatforms from './components/ConnectedPlatforms';
import EnterpriseCoaching from './components/EnterpriseCoaching';
import GraphInsights from './components/GraphInsights';
import IpRiskAnalysisDisplay from './components/IpRiskAnalysisDisplay';
import ReportHeader from './components/ReportHeader';
import AiIcon from './components/icons/ai';
import CodeIcon from './components/icons/code';
import RiskIcon from './components/icons/risk';

import { useEffect, useMemo, useState } from 'react';
import ChatWidget from './chat/ChatWidget';
import { matchLabelToColor, yellow } from './colors';
import { BusinessRulesProvider } from './components/BusinessRulesContext';
import CategoryBars from './components/CategoryBars';
import GaugeCard from './components/GaugeCard';
import ResumeView from './components/ResumeView';
import Reveal from './components/Reveal';
import RiskCard from './components/RiskCard';
import RoleOverviewCard from './components/RoleOverviewCard';
import SkillsAppendixTable from './components/SkillsAppendixTable';
import SkillsBubble from './components/SkillsBubble';
import SkillsValidation from './components/SkillsValidation';
import TopContributingFactors from './components/TopContributingFactors';
import UseCases from './components/UseCases';
import { formatLocalDateTime } from './utils/date';
import { getCategoryTooltipCopy } from './utils/provider';

const DEFAULT_AI_CATEGORY_ORDER = [
  'Ecosystems & Providers',
  'Orchestration & Dev',
  'Specialized AI',
  'Machine Learning',
  'Infrastructure',
  'Governance',
] as const;

type ChatWidgetProps = Partial<{
  api: string;
  title: string;
  hintText: string;
  loginPath: string;
  headerOffset: 'auto' | 'none' | number;
  developerName: string;
}>;

// const hexToRgba = (hex: string, alpha: number) => {
//   const clean = hex.replace('#', '');
//   const r = parseInt(clean.substring(0, 2), 16);
//   const g = parseInt(clean.substring(2, 4), 16);
//   const b = parseInt(clean.substring(4, 6), 16);
//   return `rgba(${r}, ${g}, ${b}, ${alpha})`;
// };

const SharedBadgeDisplay = ({ badgeData, chatProps, headless, selfCheck = false, public: isPublicView = false, suppressChat = false }: { badgeData: PublicBadgeData, chatProps?: ChatWidgetProps, headless?: boolean, selfCheck?: boolean, 'public'?: boolean, suppressChat?: boolean }) => {
  const { 
    badgeId, 
    developerName, 
    assessmentResult, 
    updatedAt, 
    // connectedAccounts
   } = badgeData;

  const { 
    // report_summary, 
    // developer_trust_explanation, 
    screening_sources, 
    // industry_considerations 
  } = assessmentResult;

  const graphInsights: GraphInsightsPayload = (assessmentResult)?.graph_insights || {} as GraphInsightsPayload;
  const scoringSummary: ScoringSummary = (assessmentResult)?.scoring_summary || {} as ScoringSummary;
  

  const wrapperMaxWidth = 'max-w-5xl';
  const isHeadless = !!headless;

  // Overall and genre scores
  const overallFinalPercent = Math.round(assessmentResult?.final_percent || 0);

  // Build category display grouped by genres from scoring_summary.config.genre_mapping
  const genreMapping = (scoringSummary?.config?.genre_mapping) || {};
  const categoryScores = (scoringSummary?.category_scores) || {};
  const categoryTopByGraph = (graphInsights?.categoryTopBusiness) || {};
  const aiCategoryOrder =
    graphInsights?.aiCategoryOrder && graphInsights.aiCategoryOrder.length > 0
      ? graphInsights.aiCategoryOrder
      : [...DEFAULT_AI_CATEGORY_ORDER];
  const aiCategoryScores = (graphInsights?.aiCategoryScores) || {};
  const aiCategoryTopByGraph = (graphInsights?.aiCategoryTopBusiness) || {};
  const roleTargets: Record<string, number> | undefined = (() => {
    try {
      const em: EnterpriseMatch | undefined = assessmentResult?.enterprise_match;
      return (em && em.role && em.role.categoryTargets) ? (em.role.categoryTargets as Record<string, number>) : undefined;
    } catch {
      return undefined;
    }
  })();

  // const topBusinessForGenre = (genre: string) => {
  //   const cats: string[] = (genreMapping)?.[genre] || [];
  //   const items = [];
  //   for (const c of cats) {
  //     const arr = (categoryTopByGraph)?.[c] || [];
  //     for (const it of arr) items.push(it);
  //   }
  //   items.sort((a, b) => Number(b?.weight || 0) - Number(a?.weight || 0));
  //   return items.slice(0, 3) as TopBusinessRule[];
  // };

  // const skillsMatrix = assessmentResult?.skills_matrix || { skills: [] };
  const skillsAll = assessmentResult?.skills_all || { skills: [] };
  const connected = badgeData?.connectedAccounts || [];
  

  // Determine Role Fit & Coaching visibility
  const hasEnterpriseMatch = !!assessmentResult?.enterprise_match;
  const hasCoaching = !!(assessmentResult?.enterprise_match?.coaching && Array.isArray(assessmentResult.enterprise_match.coaching.items) && assessmentResult.enterprise_match.coaching.items.length > 0);
  const hasUseCases = !!(assessmentResult?.enterprise_use_cases?.items && assessmentResult.enterprise_use_cases.items.length > 0);
  const showRoleFit = hasEnterpriseMatch || hasCoaching || hasUseCases;

  // Simple tabs for non-headless view
  const tabs = useMemo(() => {
    const arr = [
      { key: 'overview', label: 'Overview' },
      { key: 'technical', label: 'KYD Technical' },
      { key: 'risk', label: 'KYD Risk' },
      { key: 'ai', label: 'KYD AI' },
      { key: 'role', label: showRoleFit ? 'Role Fit & Coaching' : 'Coaching' },
      { key: 'resume', label: 'KYD Resume' },
      { key: 'appendix', label: 'Appendix' }
    ];
    return arr;
  }, [showRoleFit]);

  const [activeTab, setActiveTab] = useState<string>('overview');

  useEffect(() => {
    const handleHashChange = () => {
      try {
        const hash = (typeof window !== 'undefined' && window.location.hash ? window.location.hash.substring(1) : '').toLowerCase();
        const keys = new Set(tabs.map(t => t.key));
        if (hash && keys.has(hash)) setActiveTab(hash);
        // If the hash targets a skills appendix anchor, switch to Appendix
        if (hash && (hash.startsWith('appendix-skills') || hash.includes('appendix-skills-cat-') || hash.includes('appendix-connected'))) {
          setActiveTab('appendix');
        }
      } catch {}
    };

    handleHashChange(); // Run on mount and when tabs change

    if (typeof window !== 'undefined') {
      window.addEventListener('hashchange', handleHashChange);
      return () => {
        window.removeEventListener('hashchange', handleHashChange);
      };
    }
  }, [tabs]);

  const computeStickyTop = (): string | number => {
    if (isHeadless) return 0;
    const ho = chatProps?.headerOffset;
    if (ho === 'none') return 0;
    if (typeof ho === 'number') return ho;
    if (ho === 'auto') return 'var(--kyd-tabs-offset, var(--kyd-header-offset, 64px))';
    return 'var(--kyd-tabs-offset, 0px)';
  };

  const TabNav = () => (
    <div className={'sticky z-10'} style={{ top: computeStickyTop(), background: 'var(--background)', borderBottom: '1px solid var(--icon-button-secondary)' }}>
      <div className={`${wrapperMaxWidth} mx-auto px-2 sm:px-0 overflow-x-auto`}>
        <div className="flex gap-1 sm:gap-2">
          {tabs.map(t => {
            // Map tab key to icon component
            const IconComp = (() => {
              if (t.key === 'ai') return AiIcon;
              if (t.key === 'technical') return CodeIcon;
              if (t.key === 'risk') return RiskIcon;
              return null;
            })();
            return (
              <button
                key={t.key}
                onClick={() => {
                  setActiveTab(t.key);
                  try { if (typeof window !== 'undefined') window.history.replaceState(null, '', `#${t.key}`); } catch {}
                }}
                className={`px-3 text-xs sm:text-base sm:px-4 py-2 text-sm rounded-t flex items-center gap-2 cursor-pointer ${activeTab === t.key ? 'font-semibold' : ''}`}
                style={{
                  color: 'var(--text-main)',
                  background: activeTab === t.key ? 'var(--content-card-background)' : 'transparent',
                  border: activeTab === t.key ? '1px solid var(--icon-button-secondary)' : '1px solid transparent',
                  borderBottomColor: 'transparent'
                }}
              >
                {IconComp ? (
                  <>
                    <span className="block sm:inline">
                      <IconComp
                        width={18}
                        height={18}
                        className="text-[var(--text-main)]"
                        style={{ display: 'inline-block', verticalAlign: 'middle', color: 'var(--text-main)' }}
                      />
                    </span>
                    <span className="hidden sm:inline">{t.label}</span>
                  </>
                ) : (
                  t.label
                )}
              </button>
            );
          })}
        </div>
      </div>
    </div>
  );

  const AuthenticityNotice = () => {
    const label = (assessmentResult?.account_authenticity?.label || '').toLowerCase();
    if (!label) return null;
    const isCritical = label === 'likely inauthentic';
    const isSuspicious = label === 'suspicious';
    if (!isCritical && !isSuspicious) return null;
    return (
      <div className={'mt-4'}>
        <div className={'rounded-md border p-3 flex items-start gap-2'} style={{ backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)' }}>
          <span className={'mt-0.5'} style={{ color: isCritical ? '#B00020' : '#9f580a' }}><FiAlertTriangle size={18} /></span>
          <div className={'text-sm'}>
            <div className={'font-semibold'} style={{ color: 'var(--text-main)' }}>{isCritical ? 'Warning' : 'Attention'}</div>
            <div className={'mt-1'} style={{ color: 'var(--text-secondary)' }}>{assessmentResult?.account_authenticity?.description || (isCritical ? 'We detected signals that some linked accounts may be inauthentic. Review sources below.' : 'Some inconsistencies were observed across linked accounts. Review sources below.')}</div>
            {!isPublicView && (
              <div className={'mt-2'}>
                <a href="#appendix-connected" className={'text-xs font-medium underline underline-offset-2'} style={{ color: 'var(--text-secondary)' }}>See more</a>
              </div>
            )}
          </div>
        </div>
      </div>
    );
  };

  const OverviewSection = () => (
    <div className={`${wrapperMaxWidth} mx-auto mt-6`}>
      <Reveal headless={isHeadless} offsetY={8} durationMs={500}>
        {/* Quadrant layout */}
        <div className={'grid grid-cols-1 md:grid-cols-2 gap-6'}>
          {/* Top-left: Name, countries, badge image handled by ReportHeader */}
          <div className={`${hasEnterpriseMatch ? 'h-full' : 'md:col-span-2'}`}>
            <ReportHeader 
              badgeId={badgeId}
              developerName={badgeData.developerName}
              updatedAt={updatedAt}
              score={overallFinalPercent || 0}
              isPublic={isPublicView}
              badgeImageUrl={badgeData.badgeImageUrl || ''}
              summary={undefined}
              enterpriseMatch={null}
              countries={(assessmentResult?.screening_sources?.ip_risk_analysis?.raw_data?.countries) || []}
              accountAuthenticity={assessmentResult?.account_authenticity}
              companyName={badgeData.companyName}
              sourcesProviders={connected.map(a => (a?.name || '').toLowerCase())}
              connectedAccounts={connected}
              selfCheck={selfCheck}
              rightBadgeLayout={!hasEnterpriseMatch}
            />
          </div>
          {/* Top-right: Role match section */}
          {hasEnterpriseMatch && (
            <div>
              {(() => {
                const em = assessmentResult?.enterprise_match;
                if (!em) return null;
                const role = em.role || {};
                return (
                  <RoleOverviewCard
                    title={'Role Alignment'}
                    matchLabel={em.label}
                    roleName={role?.name || 'Role'}
                  />
                );
              })()}
            </div>
          )}

          {/* Bottom-left: Technical score */}
          <div>
            {(() => {
              const uiTech = graphInsights?.uiSummary?.technical || {};
              const techPct = Math.round(Number(uiTech?.percent ?? 0));
              const techLabel = uiTech?.label || 'EVIDENCE';
              return (
                <GaugeCard
                  title={'KYD Technical'}
                  description={'Composite of technical evidence; more right indicates stronger capability'}
                  tooltipText={"KYD Technical surfaces signals across a developer's portfolio, skills, experience, activity, and network. These signals indicate the likelihood that a developer has the capabilities they claim and is actively applying them. KYD Technical does not certify proof; it highlights observable patterns that help organizations assess trustworthiness in technical competence."}
                  percent={techPct}
                  label={techLabel}
                  topMovers={[]}
                  selfCheck={selfCheck}
                />
              );
            })()}
          </div>
          {/* Bottom-right: Risk score */}
          <div>
            {(() => {
              const uiRisk = graphInsights?.uiSummary?.risk || {};
              const riskPctGood = Math.round(Number(uiRisk?.percent_good ?? 0));
              const riskLabel = uiRisk?.label || 'RISK';
              return (
                <RiskCard
                  title={'KYD Risk'}
                  description={'Lower bar height indicates lower risk exposure'}
                  tooltipText={"KYD Risk evaluates the trustworthiness of a developer through non-technical signals that highlight potential exposure to fraud, compliance issues, or security vulnerabilities. It includes authenticity checks to gauge whether the identity is genuine, reputation signals that reflect how peers and clients perceive the developer, and telemetry factors such as sanctions, location, and digital/cyber risk. These signals do not prove risk but offer directional insight into areas where additional scrutiny or caution may be warranted."}
                  percentGood={riskPctGood}
                  label={riskLabel}
                  topMovers={[]}
                />
              );
            })()}
          </div>
        </div>
      </Reveal>

      {/* AI Skills bar chart above Skills Footprint */}
      <Reveal headless={isHeadless}>
        <div className={'mt-6'}>
          <SkillsValidation
            skillsCategoryRadar={graphInsights?.aiSkillsCategoryRadar}
            headless={isHeadless}
            title={'AI Skills by Subcategory'}
            description={'The bar chart shows AI evidence strength by subcategory.'}
            marginLeft={60}
            marginRight={60}
          />
        </div>
      </Reveal>

      {/* Full-width Skills bubble chart below quadrant */}
      <div className={'rounded-xl shadow-xl p-6 sm:p-8 mt-6 border'} style={{ backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)' }}>
        <Reveal headless={isHeadless}>
          <div className={'kyd-avoid-break'}>
            <h4 className={'text-2xl font-semibold mb-3'} style={{ color: 'var(--text-main)' }}>Skills Footprint</h4>
            <SkillsBubble skillsCategoryRadar={graphInsights?.skillsCategoryRadar} headless={isHeadless} skillsByCategory={assessmentResult?.graph_insights?.skillsByCategory} skillsMeta={assessmentResult?.graph_insights?.skillsMeta} />
          </div>
        </Reveal>
        
      </div>
      <div className={'pt-6 text-sm text-center'} style={{ color: 'var(--text-secondary)' }}>
          Report Completed: {formatLocalDateTime(updatedAt)}
        </div>
    </div>
  );

  const RoleFitSection = () => {
    // Local state for expanding long role descriptions
    const [showFullRoleDescription, setShowFullRoleDescription] = useState(false);
    const rec = assessmentResult?.recommendations;
    const recommendationRoleName = (assessmentResult?.enterprise_match?.role?.name || '').trim();
    const recommendationsTitle = recommendationRoleName
      ? `Evidence Recommendations for ${recommendationRoleName}`
      : 'Evidence Recommendations';

    return (
      <div className={`${wrapperMaxWidth} mx-auto`}>
        <div className={'rounded-xl shadow-xl p-6 sm:p-8 mt-6 border'} style={{ backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)' }}>
          <div className="space-y-10">
            {hasEnterpriseMatch && (
              <div>
                {(() => {
                  const em = assessmentResult?.enterprise_match;
                  if (!em) return null;
                  const role = em.role || {};
                  const roleName = role?.name || '';
                  return (
                    <>
                      <Reveal headless={isHeadless} as={'h4'} offsetY={8} className={'text-2xl font-semibold mb-3'} style={{ color: 'var(--text-main)' }}>
                        Role Alignment{roleName ? ` • ${roleName}` : ''}
                      </Reveal>
                      <Reveal headless={isHeadless}>
                        {(() => {
                          const primaryDescription = (role?.description || em.description || '').trim();
                          const isLong = primaryDescription.length > 500;
                          const visibleText = isLong && !showFullRoleDescription ? `${primaryDescription.slice(0, 500)}…` : primaryDescription;
                          return (
                            <div className='mt-3' style={{ color: 'var(--text-secondary)' }}>
                              <div className={'text-base font-semibold'} style={{ color: 'var(--text-main)' }}>{roleName}</div>
                              {primaryDescription ? (
                                <div>
                                  <span>{visibleText}</span>
                                  {isLong && (
                                    <button
                                      type="button"
                                      onClick={() => setShowFullRoleDescription(v => !v)}
                                      className={'ml-2 text-xs font-semibold'}
                                      style={{ color: 'var(--text-main)' }}
                                    >
                                      {showFullRoleDescription ? 'See less' : 'See more'}
                                    </button>
                                  )}
                                </div>
                              ) : null}

                              {em.description ? (
                                <div>
                                  <div className="flex items-center text-start gap-2 mt-3">
                                    <div className={'text-base font-semibold'} style={{ color: 'var(--text-main)' }}>Alignment Description</div>
                                    <span>-</span>
                                    <div 
                                      className={`px-2 py-1 inline-block rounded-md font-semibold shadow-sm text-[var(--text-main)] border`}
                                      style={{ borderColor: matchLabelToColor(em.label) }}
                                    >
                                      {em.label}
                                    </div>
                                  </div>
                                  <div className={'text-sm'} style={{ color: 'var(--text-secondary)' }}>{em.description}</div>
                                </div>
                              ) : null}
                            </div>
                          );
                        })()}
                      </Reveal>
                    </>
                  );
                })()}
              </div>
            )}
            {hasCoaching && (() => {
              const em = assessmentResult?.enterprise_match;
              const coaching = em?.coaching;
              if (!coaching || !(Array.isArray(coaching.items) && coaching.items.length)) return null;
              return (
                <div>
                  <Reveal headless={isHeadless} as={'h4'} offsetY={8} className={'text-2xl font-semibold mb-3'} style={{ color: 'var(--text-main)' }}>Role Alignment Coaching</Reveal>
                  <Reveal headless={isHeadless}>
                    <EnterpriseCoaching roleName={em?.role?.name} matchLabel={em?.label} coaching={coaching} />
                  </Reveal>
                </div>
              );
            })()}
            {hasUseCases && (
              <div>
                <UseCases useCases={assessmentResult?.enterprise_use_cases} headless={isHeadless} badgeId={badgeId} />
              </div>
            )}
            <div>
              <Reveal headless={isHeadless} as={'h4'} offsetY={8} className={'text-2xl font-semibold mb-3'} style={{ color: 'var(--text-main)' }}>{recommendationsTitle}</Reveal>
              <Reveal headless={isHeadless}>
                <div className={'space-y-3'}>
                  {rec?.summary ? (
                    <div className={'text-sm'} style={{ color: 'var(--text-secondary)' }}>{rec.summary}</div>
                  ) : null}
                  {Array.isArray(rec?.bullet_points) && (rec?.bullet_points?.length || 0) > 0 ? (
                    <ul className={'list-disc pl-5 space-y-3 text-sm'} style={{ color: 'var(--text-secondary)' }}>
                      {rec?.bullet_points?.map((bp, idx) => (
                        <li key={idx}>{bp}</li>
                      ))}
                    </ul>
                  ) : (!rec?.summary ? (
                    <div className={'text-sm'} style={{ color: 'var(--text-secondary)' }}>No recommendations available.</div>
                  ) : null)}
                </div>
              </Reveal>
            </div>
          </div>
        </div>
      </div>
    );
  };

  const ResumeSection = () => {
    const resumeJson = (assessmentResult as any)?.resume?.json || null;
    const roleName = (() => {
      try { return (assessmentResult?.enterprise_match?.role?.name) || undefined; } catch { return undefined; }
    })();
    return (
      <div className={`${wrapperMaxWidth} mx-auto`}>
        <div className={'rounded-xl shadow-xl p-6 sm:p-8 mt-6 border'} style={{ backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)' }}>
          <ResumeView
            resume={resumeJson}
            roleName={roleName}
            badgeId={badgeId}
            isPublic={badgeData.isPublic}
            showDownloadButton={true}
          />
        </div>
      </div>
    );
  };

  const TechnicalSection = () => (
    <div className={`${wrapperMaxWidth} mx-auto`}>
      <div className={'rounded-xl shadow-xl p-6 sm:p-8 mt-6 border'} style={{ backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)' }}>
        <Reveal headless={isHeadless} as={'h4'} offsetY={8} className={'text-2xl font-semibold mb-3'} style={{ color: 'var(--text-main)' }}>KYD Technical</Reveal>
        <Reveal headless={isHeadless}>
          <div className="">
            <GraphInsights
              graphInsights={graphInsights}
              categories={genreMapping?.['Technical'] as string[]}
              genre={'Technical'}
              scoringSummary={scoringSummary}
              headless={isHeadless}
            />
          </div>
        </Reveal>
        <div className="grid grid-cols-1 lg:grid-cols-12 w-full gap-8 items-stretch py-8">
          <Reveal headless={isHeadless} className="lg:col-span-8 h-full">
            <CategoryBars
              title={'Technical Category Contributions'}
              categories={genreMapping?.['Technical'] as string[]}
              categoryScores={categoryScores}
              getCategoryTooltipCopy={getCategoryTooltipCopy}
              barHeight={16}
              categoryTargets={roleTargets}
            />
          </Reveal>
          <Reveal headless={isHeadless} className="lg:col-span-4 w-full hidden lg:flex flex-col items-start justify-start" delayMs={80}>
            <div className={'text-sm font-semibold mb-3'} style={{ color: 'var(--text-main)' }}>Top Contributing Factors</div>
            <TopContributingFactors categories={genreMapping?.['Technical'] as string[] || []} categoryTopByGraph={categoryTopByGraph as any} />
          </Reveal>
        </div>
        <Reveal headless={isHeadless}>
          <div className="pt-8 border-t kyd-avoid-break" style={{ borderColor: 'var(--icon-button-secondary)'}}>
            <h3 className={'text-xl font-bold mb-3 kyd-keep-with-next'} style={{ color: 'var(--text-main)' }}>KYD Technical - Skills Insights</h3>
            <div className={'prose prose-sm max-w-none mb-6 space-y-4'} style={{ color: 'var(--text-secondary)' }}>
              <SkillsValidation skillsCategoryRadar={graphInsights?.skillsCategoryRadar} headless={isHeadless} />
            </div>
          </div>
        </Reveal>
      </div>
    </div>
  );

  const AiSection = () => (
    <div className={`${wrapperMaxWidth} mx-auto`}>
      <div className={'rounded-xl shadow-xl p-6 sm:p-8 mt-6 border'} style={{ backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)' }}>
        <Reveal headless={isHeadless} as={'h4'} offsetY={8} className={'text-2xl font-semibold mb-3'} style={{ color: 'var(--text-main)' }}>KYD AI</Reveal>
        <div className="grid grid-cols-1 lg:grid-cols-12 w-full gap-8 items-stretch py-8">
          <Reveal headless={isHeadless} className="lg:col-span-8 h-full">
            <CategoryBars
              title={'AI Category Contributions'}
              description={'Each bar represents AI evidence grouped into the major AI capability areas surfaced from GitHub business rules. Bar length reflects the strength of evidence for that AI domain.'}
              categories={aiCategoryOrder as string[]}
              categoryScores={aiCategoryScores}
              getCategoryTooltipCopy={getCategoryTooltipCopy}
              barHeight={16}
              linkToAppendix={false}
              tracksClassName={'min-h-[22rem] sm:min-h-[26rem] lg:min-h-[32rem]'}
            />
          </Reveal>
          <Reveal headless={isHeadless} className="lg:col-span-4 w-full hidden lg:flex flex-col items-start justify-start" delayMs={80}>
            <div className={'text-sm font-semibold mb-3'} style={{ color: 'var(--text-main)' }}>Top Contributing Factors</div>
            <TopContributingFactors categories={aiCategoryOrder as string[] || []} categoryTopByGraph={aiCategoryTopByGraph as any} />
          </Reveal>
        </div>
        <Reveal headless={isHeadless}>
          <div className="pt-8 border-t kyd-avoid-break" style={{ borderColor: 'var(--icon-button-secondary)' }}>
            <h3 className={'text-xl font-bold mb-3 kyd-keep-with-next'} style={{ color: 'var(--text-main)' }}>KYD AI - Skills Insights</h3>
            <div className={'prose prose-sm max-w-none mb-6 space-y-4'} style={{ color: 'var(--text-secondary)' }}>
              <SkillsValidation
                skillsCategoryRadar={graphInsights?.aiSkillsCategoryRadar}
                headless={isHeadless}
                title={'AI Skills by Subcategory'}
                description={'The bar chart shows AI evidence strength by subcategory'}
                marginLeft={60}
                marginRight={60}
                tickFontSize={12}
              />
            </div>
          </div>
        </Reveal>
      </div>
    </div>
  );

  const RiskSection = () => {
    const adjustedCategoryScores = (() => {
      if (!badgeData.optOutScreening) return categoryScores;
      try {
        const copy = { ...categoryScores } as Record<string, any>;
        const key = Object.keys(copy).find(k => /sanctions?.*criminal|sanction|criminal/i.test(k));
        if (key) {
          const prev = copy[key] || {};
          const business = { ...(prev.business || {}), percent_progress_signed: 0, percent_progress: 0 };
          const combined = { ...(prev.combined || {}), percent_progress_signed: 0, percent_progress: 0 };
          copy[key] = { ...prev, business, combined };
        }
        return copy;
      } catch {
        return categoryScores;
      }
    })();

    const getRiskTooltipCopy = (category: string) => {
      if (badgeData.optOutScreening && /sanction|criminal/i.test(category)) {
        return 'User opted out of screening; score shown as 0.';
      }
      return getCategoryTooltipCopy(category);
    };

    return (
      <div className={`${wrapperMaxWidth} mx-auto`}>
        <div className={'rounded-xl shadow-xl p-6 sm:p-8 mt-6 border'} style={{ backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)' }}>
          <Reveal headless={isHeadless} as={'h3'} offsetY={8} className={'text-2xl font-bold'} style={{ color: 'var(--text-main)' }}>KYD Risk</Reveal>
          <Reveal headless={isHeadless}>
            <div className="mt-4">
              <GraphInsights
                graphInsights={graphInsights}
                categories={genreMapping?.['Risk'] as string[]}
                genre={'Risk'}
                scoringSummary={scoringSummary}
                headless={isHeadless}
              />
            </div>
          </Reveal>
          <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 w-full items-stretch py-8 kyd-avoid-break" style={{ borderColor: 'var(--icon-button-secondary)' }}>
            <Reveal headless={isHeadless} className="lg:col-span-8 h-full">
              <CategoryBars
                title={'KYD Risk - Category Insights'}
                categories={genreMapping?.['Risk'] as string[]}
                categoryScores={adjustedCategoryScores}
                getCategoryTooltipCopy={getRiskTooltipCopy}
                barHeight={16}
                categoryTargets={roleTargets}
              />
            </Reveal>
            <Reveal headless={isHeadless} className="lg:col-span-4 w-full hidden lg:flex flex-col items-start justify-start" delayMs={80}>
              <div className={'text-sm font-semibold mb-3'} style={{ color: 'var(--text-main)' }}>Top Contributing Factors</div>
              <TopContributingFactors categories={genreMapping?.['Risk'] as string[] || []} categoryTopByGraph={categoryTopByGraph as any} />
            </Reveal>
          </div>
          {badgeData.optOutScreening ? (
            <Reveal headless={isHeadless} className={'p-4 rounded-lg border mt-6'} style={{ backgroundColor: 'var(--icon-button-secondary)', borderColor: 'var(--icon-button-secondary)' }}>
              <div className="flex items-start">
                <span className="h-5 w-5 mr-3 mt-0.5 flex-shrink-0" style={{ color: yellow }}>
                  <FiAlertTriangle size={20} />
                </span>
                <div>
                  <h4 className={'font-bold'} style={{ color: 'var(--text-main)' }}>User Opted Out of Screening</h4>
                  <p className={'text-sm mt-1'} style={{ color: 'var(--text-secondary)' }}>
                    The user chose not to participate in the automated sanctions and risk screening process. The risk score reflects this decision and is for informational purposes only.
                  </p>
                </div>
              </div>
            </Reveal>
          ) : (
            
            <>
              {/* Sanctions match cards are temporarily not displayed. The screening data is still
                  generated and stored — this is a display-only suppression. To re-enable, restore:
                  <Reveal headless={isHeadless} className={'mb-0 mt-6'}>
                    <SanctionsMatches ss={assessmentResult?.screening_sources} />
                  </Reveal> */}
              <Reveal headless={isHeadless}>
                <IpRiskAnalysisDisplay ipRiskAnalysis={screening_sources?.ip_risk_analysis} />
              </Reveal>
            </>
          )}
        </div>
      </div>
    );
  };

  const AppendixSection = () => (
    <div className={`${wrapperMaxWidth} mx-auto`}>
      <div className={'rounded-xl shadow-xl p-6 sm:p-8 mt-6 border'} style={{ backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)' }}>
        <div className="space-y-10">
          <div>
            <h4 id="appendix-skills" className={'text-lg font-bold mb-1'} style={{ color: 'var(--text-main)' }}>Skills</h4>
            <div className="text-sm mb-4" style={{ color: 'var(--text-secondary)' }}>
              Skills are grouped by evidence: Observed when demonstrated in code, Self-reported when declared by the developer without independent verification, and Certified when confirmed through a credential.
            </div>
            <SkillsAppendixTable skillsAll={skillsAll} />
          </div>
          {Array.isArray(graphInsights?.business_rules_all) && graphInsights.business_rules_all.length > 0 && (
            <div>
              <h4 className={'text-lg font-bold mb-4'} style={{ color: 'var(--text-main)' }}>Observations</h4>
              <AppendixTables
                type="business_rules"
                sources={graphInsights.business_rules_all}
                searchedAt={updatedAt}
                developerName={developerName || 'this developer'}
                genreMapping={genreMapping as Record<string, string[]>}
                headless={isHeadless}
              />
            </div>
          )}
          {/* Sanctions & Watchlists appendix section is temporarily not displayed. The screening
              data is still generated and stored — this is a display-only suppression. To re-enable,
              restore the block below:
              {!badgeData.optOutScreening && screening_sources && (
                <div>
                  <h4 className={'text-lg font-bold mb-4'} style={{ color: 'var(--text-main)' }}>Sanctions & Watchlists</h4>
                  {(() => {
                    const ofacProvided = screening_sources.ofac_screen?.sources || [];
                    const lists = [...(screening_sources.ofac_lists || []), ...ofacProvided];
                    const seen: { [k: string]: boolean } = {};
                    const dedup: string[] = [];
                    for (let i = 0; i < lists.length; i++) {
                      const val = lists[i];
                      if (!seen[val]) { seen[val] = true; dedup.push(val); }
                    }
                    const detailed = screening_sources.sanctions_sources_detailed || [];
                    const useDetailed = detailed && detailed.length > 0;
                    return (
                      <AppendixTables
                        type="sanctions"
                        sources={useDetailed ? detailed : dedup}
                        searchedAt={updatedAt}
                        developerName={developerName || 'this developer'}
                        headless={isHeadless}
                      />
                    );
                  })()}
                </div>
              )} */}
          <div id="appendix-connected">
            <ConnectedPlatforms accounts={connected} authenticity={assessmentResult?.account_authenticity} />
          </div>
          {/* badge id */}
          <div className='mt-4 text-sm' style={{ color: 'var(--text-secondary)' }}>
            <p className="font-medium">Badge ID: {badgeId}</p>
          </div>
        </div>
      </div>
      <Reveal headless={isHeadless}>
        <footer className={'mt-12 pt-6 border-t'} style={{ borderColor: 'var(--icon-button-secondary)' }}>
          <p className={'text-center text-xs max-w-4xl mx-auto'} style={{ color: 'var(--text-secondary)' }}>
            © 2025 Know Your Developer, LLC. All rights reserved. KYD Self-Check™, and associated marks are trademarks of Know Your Developer, LLC. This document is confidential, proprietary, and intended solely for the individual or entity to whom it is addressed. Unauthorized use, disclosure, copying, or distribution of this document or any of its contents is strictly prohibited and may be unlawful. Know Your Developer, LLC assumes no responsibility or liability for any errors or omissions contained herein. Report validity subject to the terms and conditions stated on the official Know Your Developer website located at https://knowyourdeveloper.ai.
          </p>
        </footer>
      </Reveal>
    </div>
  );

  return (
    <BusinessRulesProvider items={graphInsights?.business_rules_all}>
      <div className={`${wrapperMaxWidth} mx-auto`}>
        {isHeadless ? (
          <>
            <style>
              {`@page { margin: 0; }
                html, body { margin: 0 !important; padding: 0 !important; background: #fff !important; }
                #__next, main { margin: 0 !important; padding: 0 !important; }
                @media print {
                  .kyd-break-before { break-before: page; page-break-before: always; }
                  .kyd-break-after  { break-after: page;  page-break-after: always; }
                  .kyd-avoid-break  { break-inside: avoid; page-break-inside: avoid; }
                  .kyd-keep-with-next { break-after: avoid; page-break-after: avoid; }
                }`}
            </style>
            {/* Long-form original layout retained for headless/print */}
            <AuthenticityNotice />
            {OverviewSection()}
            <RoleFitSection />
            {TechnicalSection()}
            {RiskSection()}
            {AiSection()}
            {AppendixSection()}
          </>
        ) : (
            !isPublicView ? (
              <>
                <TabNav />
                <div className={'px-2 sm:px-0 pb-2'}>
                  {activeTab === 'overview' && <AuthenticityNotice />}
                  {activeTab === 'overview' && OverviewSection()}
                  {activeTab === 'technical' && TechnicalSection()}
                  {activeTab === 'risk' && RiskSection()}
                  {activeTab === 'ai' && AiSection()}
                  {activeTab === 'role' && <RoleFitSection />}
                  {activeTab === 'resume' && <ResumeSection />}
                  {activeTab === 'appendix' && AppendixSection()}
                </div>
              </>
            ) : (
              <>
                <AuthenticityNotice />
                {OverviewSection()}
              </>
            )
        )}
        {!headless && !suppressChat && (
          <ChatWidget api={chatProps?.api || '/api/chat'} badgeId={badgeId} title={chatProps?.title} hintText={chatProps?.hintText} loginPath={chatProps?.loginPath} headerOffset={chatProps?.headerOffset} developerName={developerName} />
        )}
      </div>
    </BusinessRulesProvider>
  );
};

export default SharedBadgeDisplay;