'use client';

import { FiAlertTriangle } from 'react-icons/fi';
import { EnterpriseMatch, GraphInsightsPayload, PublicBadgeData, ScoringSummary, TopBusinessRule } from './types';
// import ShareButton from './components/ShareButton';
import EnterpriseCoaching from './components/EnterpriseCoaching';
import IpRiskAnalysisDisplay from './components/IpRiskAnalysisDisplay';
import ReportHeader from './components/ReportHeader';
// import Image from 'next/image';
import ConnectedPlatforms from './components/ConnectedPlatforms';
import GaugeCard from './components/GaugeCard';
import GraphInsights from './components/GraphInsights';
import RiskCard from './components/RiskCard';
import RoleOverviewCard from './components/RoleOverviewCard';

import ChatWidget from './chat/ChatWidget';
import { yellow } from './colors';
import { BusinessRulesProvider } from './components/BusinessRulesContext';
import CategoryBars from './components/CategoryBars';
import Reveal from './components/Reveal';
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 AiUsageBody from './components/AiUsageBody';
import AppendixContent from './components/AppendixContent';
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 }: { badgeData: PublicBadgeData, chatProps?: ChatWidgetProps, headless?: 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 = 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 hasEnterpriseMatch = !!assessmentResult?.enterprise_match;

  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 || [];
  

  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>
      )}
      {/* Overview quadrant layout (mirrors SharedBadgeDisplay overview) */}
      <div className={'mt-6'}>
        <Reveal headless={isHeadless} offsetY={8} durationMs={500}>
          <div className={'grid grid-cols-1 md:grid-cols-2 gap-6'}>
            <div className={`${hasEnterpriseMatch ? '' : 'md:col-span-2'}`}>
              <ReportHeader
                badgeId={badgeId}
                developerName={badgeData.developerName}
                updatedAt={updatedAt}
                score={overallFinalPercent || 0}
                isPublic={true}
                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}
                rightBadgeLayout={!hasEnterpriseMatch}
              />
            </div>
            {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>
            )}
            <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'}
                    percent={techPct}
                    label={techLabel}
                    topMovers={[]}
                  />
                );
              })()}
            </div>
            <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'}
                    percentGood={riskPctGood}
                    label={riskLabel}
                    topMovers={[]}
                  />
                );
              })()}
            </div>
          </div>
        </Reveal>
        <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>
      {/* Coaching / Evidence under header when present */}
      {(() => {
        const em = assessmentResult.enterprise_match;
        const coaching = em?.coaching;
        if (!coaching || !(Array.isArray(coaching.items) && coaching.items.length)) return null;
        return (
          <Reveal headless={isHeadless}>
            <EnterpriseCoaching roleName={em?.role?.name} matchLabel={em?.label} coaching={coaching} />
          </Reveal>
        );
      })()}
      <div
        className={isHeadless ? 'p-6 sm:p-8 mt-2 border' : 'rounded-xl shadow-xl p-6 sm:p-8 mt-8 border'}
        style={{ backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)' }}
      >
        <div className={'space-y-12 divide-y'} style={{ borderColor: 'var(--icon-button-secondary)' }}>

          {/* Enterprise Use Cases (directly under the three summary cards) */}
          {assessmentResult?.enterprise_use_cases?.items && assessmentResult.enterprise_use_cases.items.length > 0 && (
            <UseCases useCases={assessmentResult.enterprise_use_cases} headless={isHeadless} badgeId={badgeId} />
          )}

          {/* Technical Scores */}
          <div className="mt-8" >
            <div key={'Technical'} className='pt-8 space-y-8 kyd-avoid-break' style={{ 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>
              {/* technical graph insights */}
              <Reveal headless={isHeadless}>
                <div className="">
                  <GraphInsights
                    graphInsights={graphInsights}
                    categories={genreMapping?.['Technical'] as string[]}
                    genre={'Technical'}
                    scoringSummary={scoringSummary}
                    headless={isHeadless}
                  />
                </div>
              </Reveal>

              {/* category bars and contributing factors */}
              <div className="grid grid-cols-1 lg:grid-cols-12 w-full gap-8 items-stretch py-8 border-t" style={{ borderColor: 'var(--icon-button-secondary)'}}>
                
                {/* Left: Bars */}
                <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>

                {/* Right: Contributing Factors (hidden on small screens) */}
                <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>



          <div className="pt-8 space-y-8">
            <Reveal headless={isHeadless} as={'h3'} offsetY={8} className={`text-2xl font-bold ${isHeadless ? 'kyd-break-before' : ''}`} style={{ color: 'var(--text-main)' }}>KYD Risk - Overview</Reveal>
            
            {/* Risk Graph Insights and Category Bars */}
            <Reveal headless={isHeadless}>
              <div className="">
                <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 border-y kyd-avoid-break" style={{ borderColor: 'var(--icon-button-secondary)' }}>
              {/* Left: Bars */}
              <Reveal headless={isHeadless} className="lg:col-span-8 h-full">
                <CategoryBars
                  title={'KYD Risk - Category Insights'}
                  categories={genreMapping?.['Risk'] as string[]}
                  categoryScores={categoryScores}
                  getCategoryTooltipCopy={getCategoryTooltipCopy}
                  barHeight={16}
                  categoryTargets={roleTargets}
                />
              </Reveal>
              {/* Right: Contributing Factors (hidden on small screens) */}
              <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>

            {/* cyber risk display */}
            {badgeData.optOutScreening ? (
              <Reveal headless={isHeadless} className={'p-4 rounded-lg border'} 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 in PDF/downloaded reports.
                    The screening data is still generated and stored — this is a display-only suppression.
                    To re-enable, restore:
                    <Reveal headless={isHeadless}>
                      <SanctionsMatches ss={assessmentResult?.screening_sources} title={'3A. Sanctions Matches'} />
                    </Reveal> */}
                <Reveal headless={isHeadless}>
                  <IpRiskAnalysisDisplay ipRiskAnalysis={screening_sources?.ip_risk_analysis} />
                </Reveal>
              </>
            )}

          </div>

          <div className="pt-8 space-y-8">
            <Reveal headless={isHeadless} as={'h3'} offsetY={8} className={`${isHeadless ? 'kyd-break-before' : ''} text-2xl font-bold`} style={{ color: 'var(--text-main)' }}>KYD AI</Reveal>
            <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 w-full items-stretch py-8 border-y kyd-avoid-break" style={{ borderColor: 'var(--icon-button-secondary)' }}>
              <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}
                  />
                </div>
              </div>
            </Reveal>
          </div>

          {/* Connected Platforms */}
          <Reveal headless={isHeadless}>
            <ConnectedPlatforms accounts={connected} authenticity={assessmentResult?.account_authenticity} />
          </Reveal>

        
          <div className="pt-8">
            <h3 className={`text-2xl font-bold mb-4 ${isHeadless ? 'kyd-break-before' : ''}`} style={{ color: 'var(--text-main)' }}>Appendix</h3>
            <div className="space-y-8">

              {/* Skills */}
              <Reveal headless={isHeadless}>
                {/* screeningSources is intentionally passed as undefined to suppress the Sanctions & Watchlists
                    appendix section from PDF/downloaded reports. The data is still generated and stored.
                    To re-enable, change screeningSources back to:
                    screeningSources={!badgeData.optOutScreening ? screening_sources : undefined} */}
                <AppendixContent graphInsights={graphInsights} updatedAt={updatedAt} developerName={developerName} genreMapping={genreMapping as Record<string, string[]>} screeningSources={undefined} headless={isHeadless} skillsAll={skillsAll} />
              </Reveal>

            </div>
          </div>

          <Reveal headless={isHeadless}>
            <div className={'pt-8 text-sm text-center'} style={{ color: 'var(--text-secondary)' }}>
                Report Completed: {formatLocalDateTime(updatedAt)}
            </div>
          </Reveal>
        </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>
      {/* Floating chat widget */}
      {!headless && (
        <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;