'use client';

import React from 'react';
import AppendixTables from './AppendixTables';
import SkillsAppendixTable from './SkillsAppendixTable';
import { GraphInsightsPayload, SkillsAll } from '../types';

export default function AppendixContent({
  graphInsights,
  updatedAt,
  developerName,
  genreMapping,
  screeningSources,
  headless,
  skillsAll,
}: {
  graphInsights: GraphInsightsPayload;
  updatedAt: string;
  developerName?: string;
  genreMapping: Record<string, string[]>;
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  screeningSources?: any;
  headless?: boolean;
  skillsAll: SkillsAll;
}) {
  const ofacProvided = screeningSources?.ofac_screen?.sources || [];
  const lists = [...(screeningSources?.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 = screeningSources?.sanctions_sources_detailed || [];
  const useDetailed = detailed && detailed.length > 0;

  return (
    <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"
            // eslint-disable-next-line @typescript-eslint/no-explicit-any
            sources={graphInsights.business_rules_all as any}
            searchedAt={updatedAt}
            developerName={developerName || 'this developer'}
            genreMapping={genreMapping as Record<string, string[]>}
            headless={headless}
          />
        </div>
      )}
      {screeningSources && (
        <div>
          <h4 className={'text-lg font-bold mb-4'} style={{ color: 'var(--text-main)' }}>Sanctions & Watchlists</h4>
          <AppendixTables
            type="sanctions"
            sources={useDetailed ? detailed : dedup}
            searchedAt={updatedAt}
            developerName={developerName || 'this developer'}
            headless={headless}
          />
        </div>
      )}
    </div>
  );
}