import { useEffect, useId, useState, type ReactNode } from 'react';
import { AssessorApiClient } from '../../api/assessor-api-client';
import type { BackendStatus } from '../../app/app-state';
import { useEnginePreferences } from '../../app/engine-preferences';
import { DashboardGlyph, type DashboardFact } from '../../features/dashboard/ClientTileParts';
import { EnvironmentResultsButton } from '../../features/dashboard/EnvironmentResultsButton';
import type { RegulatoryControlOverviewItem, RegulatoryControlOverviewResponse, RegulatoryControlTheme, RegulatoryMappingHistoryEntry } from '../regulatory-mapping';
import { useRegulatoryDecisionRevision } from './decision-revision';
import { bsiRequirementFindings, type BsiOverview } from '../bsi-grundschutz';
import { ComplianceFrameworkSwitch, ComplianceOverview, type ComplianceFramework } from './ComplianceOverview';
import type { ComplianceMappingState } from './compliance-work-facets';
import { MappingReviewTile } from './MappingReviewTile';
import './compliance.css';

const assessorApi = new AssessorApiClient();
const THEMES: RegulatoryControlTheme[] = ['Organizational', 'People', 'Physical', 'Technological'];
export const ISO_TILE_TITLE = 'ISO 27001/27002';
export const BSI_TILE_TITLE = 'BSI Grundschutz++';

interface Props {
  projectId?: string;
  assessmentIds?: readonly string[];
  scanRunIds?: readonly string[];
  backendStatus: BackendStatus;
  /** Opens Work filtered to this accepted control, like a Context heatmap cell. */
  onOpenControl(controlId: string): void;
  /** Opens Work filtered to this ISO theme. */
  onOpenTheme(theme: RegulatoryControlTheme): void;
  /** Opens Work filtered to this derived BSI requirement. */
  onOpenBsiRequirement(requirementId: string): void;
  /** Opens Work filtered to this BSI practice. */
  onOpenBsiPractice(practiceId: string): void;
  /** Opens Work with the deviations in this `ISO mapping` facet state. */
  onOpenMappingState(state: ComplianceMappingState): void;
  /** The Client Info context row (client and timeslot), shown below the tab bar like on the Overview. */
  context?: ReactNode;
  /** The Client Info tab bar, shown above this tab like on the AI Overview. */
  navigation?: ReactNode;
}

type OverviewState = { status: 'idle' | 'loading' } | { status: 'error' } | { status: 'ready'; overview: RegulatoryControlOverviewResponse };

const number = (value: number) => value.toLocaleString('en-US');
const count = (value: number, noun: string) => `${number(value)} ${noun}${value === 1 ? '' : 's'}`;
const byFindings = (left: RegulatoryControlOverviewItem, right: RegulatoryControlOverviewItem) =>
  right.findings.length - left.findings.length || left.controlId.localeCompare(right.controlId, 'en', { numeric: true });

interface ThemeGroup { theme?: RegulatoryControlTheme; controls: RegulatoryControlOverviewItem[]; findings: number }

/** Themes in ISO 27002 order, only with hits; a control without a known theme follows without a drilldown. */
function themeGroups(controls: RegulatoryControlOverviewItem[]): ThemeGroup[] {
  return [...THEMES, undefined]
    .map(theme => {
      const themeControls = controls.filter(control => control.theme === theme).sort(byFindings);
      // A finding with several controls of one theme counts once for that theme.
      const findings = new Set(themeControls.flatMap(control => control.findings.map(finding => finding.resultProjectionId))).size;
      return { theme, controls: themeControls, findings };
    })
    .filter(group => group.controls.length > 0);
}

/**
 * Client Info `Compliance` tab: an overview row (mapping coverage and Annex A footprint), one tile per framework
 * in the environment tile geometry, the complete control list in its Results window, and when the timeslot was
 * last mapped. ISO/IEC 27001/27002 is the first framework.
 */
export function ClientIsoControls({ projectId, assessmentIds = [], scanRunIds = [], backendStatus, onOpenControl, onOpenTheme, onOpenBsiRequirement, onOpenBsiPractice, onOpenMappingState, navigation, context }: Props) {
  const available = useEnginePreferences().compliance;
  const revision = useRegulatoryDecisionRevision();
  const id = useId();
  const scopeKey = JSON.stringify([projectId, assessmentIds, scanRunIds]);
  const enabled = available && backendStatus === 'connected' && Boolean(projectId) && (assessmentIds.length > 0 || scanRunIds.length > 0);
  // Returning to the tab shows the last overview of this timeslot at once; the refresh below replaces it.
  const [state, setState] = useState<OverviewState>(() => {
    const cached = enabled ? overviewCache.get(scopeKey) : undefined;
    return cached ? { status: 'ready', overview: cached } : { status: 'idle' };
  });

  const [poll, setPoll] = useState(0);
  // Which framework the overview row shows; the framework tiles below are unaffected.
  const [framework, setFramework] = useState<ComplianceFramework>('iso');

  useEffect(() => {
    if (!enabled || !projectId) { setState({ status: 'idle' }); return; }
    let active = true;
    const cached = overviewCache.get(scopeKey);
    // A poll or a remembered overview keeps the shown values until the refreshed overview arrives.
    if (cached) setState({ status: 'ready', overview: cached });
    else if (poll === 0) setState({ status: 'loading' });
    // A preload still in flight answers the first visit; every later visit and poll requests a fresh overview.
    const pending = poll === 0 ? overviewRequests.get(scopeKey) : undefined;
    (pending ?? requestOverview(projectId, assessmentIds, scanRunIds))
      .then(overview => { if (active) setState({ status: 'ready', overview }); })
      .catch(() => { if (active && !cached && poll === 0) setState({ status: 'error' }); });
    return () => { active = false; };
  }, [enabled, revision, scopeKey, poll]); // eslint-disable-line react-hooks/exhaustive-deps
  useEffect(() => { setPoll(0); }, [enabled, revision, scopeKey]);

  const history = state.status === 'ready' ? state.overview.mappingHistory ?? [] : [];
  const mappingActive = history.some(entry => entry.status === 'queued' || entry.status === 'running');
  // While a mapping of this timeslot runs, its progress and newly accepted controls appear without a reload.
  useEffect(() => {
    if (!mappingActive) return;
    const timer = setTimeout(() => setPoll(value => value + 1), MAPPING_POLL_MS);
    return () => clearTimeout(timer);
  }, [mappingActive, state]);

  if (!available || state.status === 'idle') return null;
  const groups = state.status === 'ready' ? themeGroups(state.overview.controls) : [];
  // Pending values stay an em dash, never zero; all four themes follow the totals in ISO order.
  const ready = state.status === 'ready';
  const totals: DashboardFact[] = [
    { label: 'Controls', value: ready ? number(state.overview.controls.length) : '—' },
    { label: 'Findings', value: ready ? number(state.overview.findingCount) : '—' }];
  const themeFindings = (theme: RegulatoryControlTheme) => groups.find(group => group.theme === theme)?.findings ?? 0;
  // Same cell markup as the shared fact grid; a theme with hits opens Work filtered to it.
  const tileFacts = <dl className="client-env-facts">
    {totals.map(fact => <div key={fact.label}><dt>{fact.label}</dt><dd>{fact.value}</dd></div>)}
    {THEMES.map(theme => {
      const findings = themeFindings(theme);
      return <div key={theme} className={ready && findings > 0 ? 'iso-tile-theme is-actionable' : 'iso-tile-theme'} data-theme={theme}>
        <dt>{theme}</dt>
        <dd>{!ready ? '—' : findings > 0
          ? <button type="button" aria-label={`Open ${theme} ISO theme findings in Work (${findings})`}
            onClick={() => onOpenTheme(theme)}>{count(findings, 'finding')}</button>
          : count(0, 'finding')}</dd>
      </div>;
    })}
  </dl>;

  const results = (dismiss: () => void) => {
    const open = (action: () => void) => { dismiss(); action(); };
    if (state.status !== 'ready') return null;
    if (!groups.length) return <p className="iso-controls__empty">No accepted ISO controls in this timeslot.</p>;
    return <div className="iso-controls">
      <p className="iso-controls__total" aria-label="Unique findings with an accepted ISO control">Findings: {number(state.overview.findingCount)}</p>
      <div className="iso-controls__themes" aria-label="Accepted ISO controls by theme">
        {groups.map(({ theme, controls, findings }) => {
          const summary = <><span className="iso-controls__theme-name">{theme ?? 'No ISO theme'}</span>
            <span className="iso-controls__theme-count">{count(controls.length, 'control')} · {count(findings, 'finding')}</span></>;
          return <div key={theme ?? 'none'} className="iso-controls__group" data-theme={theme ?? ''}>
            {theme
              ? <button type="button" className="iso-controls__theme" aria-label={`Open ${theme} ISO theme findings in Work (${findings})`}
                onClick={() => open(() => onOpenTheme(theme))}>{summary}</button>
              : <div className="iso-controls__theme">{summary}</div>}
            <div className="iso-controls__rows">{controls.map(control => <button key={control.controlId} type="button" className="iso-controls__row"
              data-control={control.controlId}
              aria-label={`Open ${control.annexAControlId} findings in Work (${control.findings.length})`}
              onClick={() => open(() => onOpenControl(control.controlId))}>
              <span className="iso-controls__id">{control.annexAControlId}</span>
              <span className="iso-controls__title">{control.title ?? ''}</span>
              <span className="iso-controls__amount">{number(control.findings.length)}</span>
            </button>)}</div>
          </div>;
        })}
      </div>
    </div>;
  };

  return <div className="dashboard-page client-command-center client-compliance-page">
    {navigation}
    {context}
    <section className="client-compliance" aria-labelledby={`${id}-title`} aria-busy={state.status === 'loading'}>
      <header className="client-compliance-header">
        <div className="client-compliance-heading">
          <h2 id={`${id}-title`}>Compliance</h2>
          {state.status !== 'error' && <ComplianceFrameworkSwitch value={framework} onChange={setFramework}/>}
        </div>
        {state.status === 'ready' && <LastMapping history={history}/>}
      </header>
      {state.status !== 'error' && <ComplianceOverview framework={framework} controls={ready ? state.overview.controls : undefined}
        coverage={ready ? state.overview.coverage : undefined} bsi={ready ? state.overview.bsi : undefined}
        bsiFootprint={ready ? state.overview.bsiFootprint : undefined} annexATitles={ready ? state.overview.annexATitles : undefined} onOpenControl={onOpenControl} onOpenTheme={onOpenTheme}
        onOpenBsiRequirement={onOpenBsiRequirement} onOpenBsiPractice={onOpenBsiPractice} onOpenMappingState={onOpenMappingState}/>}
      {/* Same tile geometry as the environment row; later frameworks add their tiles here. */}
      <div className="client-compliance-grid" aria-label="Compliance frameworks">
        <section className="client-env-group" data-framework="iso-27001-27002">
          <header className="client-env-group-header">
            <h3 className="client-env-group-title"><DashboardGlyph name="clipboard"/><span>{ISO_TILE_TITLE}</span></h3>
            {state.status === 'ready' && <EnvironmentResultsButton title={ISO_TILE_TITLE}>{results}</EnvironmentResultsButton>}
          </header>
          {state.status === 'error' ? <p role="alert" className="iso-controls__error">ISO controls could not be loaded.</p> : tileFacts}
        </section>
        <BsiTile state={state} onOpenRequirement={onOpenBsiRequirement} onOpenPractice={onOpenBsiPractice}/>
        {/* User decision 2026-10-09: ISO <-> BSI consistency review beside the framework tiles. */}
        {projectId && <MappingReviewTile projectId={projectId} assessmentIds={assessmentIds} scanRunIds={scanRunIds} backendStatus={backendStatus}/>}
      </div>
    </section>
  </div>;
}

// Last overview per client and timeslot, so the tab does not start empty on every visit. Every visit,
// decision and running mapping still requests a fresh overview; the bound keeps a few recent timeslots.
const OVERVIEW_CACHE_LIMIT = 8;
const overviewCache = new Map<string, RegulatoryControlOverviewResponse>();
const overviewRequests = new Map<string, Promise<RegulatoryControlOverviewResponse>>();
function requestOverview(projectId: string, assessmentIds: readonly string[], scanRunIds: readonly string[]) {
  const scopeKey = JSON.stringify([projectId, assessmentIds, scanRunIds]);
  const request = assessorApi.getRegulatoryControlOverview(projectId, { assessmentIds: [...assessmentIds], scanRunIds: [...scanRunIds] })
    .then(overview => { rememberOverview(scopeKey, overview); return overview; })
    .finally(() => { if (overviewRequests.get(scopeKey) === request) overviewRequests.delete(scopeKey); });
  overviewRequests.set(scopeKey, request);
  return request;
}
/**
 * Client Info calls this when it opens a timeslot, so the Compliance tab already shows its overview on the first
 * visit. A remembered or already requested overview is not requested again; a failure leaves the tab to load itself.
 */
export function preloadClientComplianceOverview(projectId: string, assessmentIds: readonly string[] = [], scanRunIds: readonly string[] = []): void {
  const scopeKey = JSON.stringify([projectId, assessmentIds, scanRunIds]);
  if (overviewCache.has(scopeKey) || overviewRequests.has(scopeKey)) return;
  requestOverview(projectId, assessmentIds, scanRunIds).catch(() => undefined);
}
function rememberOverview(scopeKey: string, overview: RegulatoryControlOverviewResponse) {
  overviewCache.delete(scopeKey);
  overviewCache.set(scopeKey, overview);
  while (overviewCache.size > OVERVIEW_CACHE_LIMIT) overviewCache.delete(overviewCache.keys().next().value!);
}
/** Test support. */
export function resetClientComplianceCacheForTests(): void { overviewCache.clear(); overviewRequests.clear(); }

const MAPPING_POLL_MS = 5_000;
const triggerLabel = (entry: RegulatoryMappingHistoryEntry) =>
  entry.kind === 'single' ? 'Single finding' : entry.trigger === 'automatic' ? 'Automatic' : 'Manual';
const FRAMEWORK_LABEL = { iso27001: 'ISO 27001/27002', 'bsi-kernel': 'BSI Grundschutz++' } as const;
const SCOPE_LABEL = { timeslot: 'This timeslot', 'other-timeslot': 'Other timeslot', 'other-client': 'Other client', unknown: 'Unknown' } as const;
const STATUS_LABEL = { queued: 'Queued', running: 'Running', completed: 'Completed', failed: 'Failed' } as const;
const dateTime = (value: string) => new Date(value).toLocaleString('en-GB',
  { day: 'numeric', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit' });

/**
 * The latest mapping of any client and what started it; mappings are global per rule. The window lists the latest
 * ISO and direct BSI batches and single finding mappings with their framework, scope and rule counts (user decision
 * 2026-10-09); the button names BSI, an ISO mapping keeps its earlier label.
 */
function LastMapping({ history }: { history: RegulatoryMappingHistoryEntry[] }) {
  const latest = history[0];
  if (!latest) return <span className="client-compliance-last-mapping is-empty">No mapping yet</span>;
  const label = `Last mapping: ${dateTime(latest.createdAt)}${latest.framework === 'bsi-kernel' ? ' · BSI' : ''} · ${triggerLabel(latest)}`
    + (latest.scope === 'timeslot' ? '' : ` · ${SCOPE_LABEL[latest.scope]}`)
    + (latest.status === 'completed' ? '' : ` · ${STATUS_LABEL[latest.status]}`);
  return <EnvironmentResultsButton title="Mapping history" trigger={label} triggerClassName="btn client-compliance-last-mapping">
    <div className="client-env-evidence-scroll">
      <table className="client-information-table client-compliance-history">
        <thead><tr><th>Started</th><th>Framework</th><th>Trigger</th><th>Scope</th><th>Status</th><th>Findings</th><th>Sent to model</th><th>Reused</th><th>Succeeded</th><th>Failed</th></tr></thead>
        <tbody>{history.map(entry => <tr key={entry.id}>
          <td>{dateTime(entry.createdAt)}</td>
          <td>{FRAMEWORK_LABEL[entry.framework ?? 'iso27001']}</td>
          <td>{triggerLabel(entry)}</td>
          <td>{SCOPE_LABEL[entry.scope]}</td>
          <td>{STATUS_LABEL[entry.status]}</td>
          <td>{entry.counts.findings === undefined ? '—' : number(entry.counts.findings)}</td>
          <td>{number(entry.counts.sentToModel)}</td>
          <td>{number(entry.counts.reused)}</td>
          <td>{number(entry.counts.succeeded)}</td>
          <td>{number(entry.counts.failed)}</td>
        </tr>)}</tbody>
      </table>
    </div>
  </EnvironmentResultsButton>;
}

const BSI_TILE_PRACTICES = 4;

interface BsiPracticeGroup { id: string; title: string; requirements: Array<BsiOverview['requirements'][number] & { findings: number }>; findings: number }

/** Practices in catalog order, only with derived requirements; a finding counts once per practice. */
function bsiPracticeGroups(overview: RegulatoryControlOverviewResponse): { groups: BsiPracticeGroup[]; findings: number } {
  const bsi = overview.bsi;
  if (!bsi) return { groups: [], findings: 0 };
  const findingsOf = bsiRequirementFindings(overview.controls, bsi);
  const all = new Set<string>();
  const groups = bsi.practices.map(practice => {
    const practiceFindings = new Set<string>();
    const requirements = bsi.requirements.filter(requirement => requirement.practice === practice.id).map(requirement => {
      const findings = findingsOf.get(requirement.requirementId) ?? [];
      for (const finding of findings) { practiceFindings.add(finding.resultProjectionId); all.add(finding.resultProjectionId); }
      return { ...requirement, findings: findings.length };
    }).sort((left, right) => right.findings - left.findings || left.requirementId.localeCompare(right.requirementId, 'en', { numeric: true }));
    return { ...practice, requirements, findings: practiceFindings.size };
  }).filter(group => group.requirements.length > 0);
  return { groups, findings: all.size };
}

/**
 * BSI Grundschutz++ tile (Phase 13F, stage 1): Kernel requirements derived from the accepted ISO controls through
 * the BSI mapping. The four practices with the most findings follow the totals; the Results window lists all.
 */
function BsiTile({ state, onOpenRequirement, onOpenPractice }: { state: OverviewState; onOpenRequirement(id: string): void; onOpenPractice(id: string): void }) {
  const ready = state.status === 'ready';
  const { groups, findings } = ready ? bsiPracticeGroups(state.overview) : { groups: [], findings: 0 };
  const bsi = ready ? state.overview.bsi : undefined;
  const requirementCount = groups.reduce((total, group) => total + group.requirements.length, 0);
  const top = [...groups].sort((left, right) => right.findings - left.findings).slice(0, BSI_TILE_PRACTICES);
  const results = (dismiss: () => void) => {
    const open = (action: () => void) => { dismiss(); action(); };
    if (!groups.length || !bsi) return <p className="iso-controls__empty">No BSI requirements derived from accepted ISO controls in this timeslot.</p>;
    return <div className="iso-controls bsi-requirements">
      <p className="iso-controls__total" aria-label="Unique findings with a derived BSI requirement">Findings: {number(findings)}</p>
      <div className="iso-controls__themes" aria-label="Derived BSI requirements by practice">
        {groups.map(group => <div key={group.id} className="iso-controls__group" data-practice={group.id}>
          <button type="button" className="iso-controls__theme" aria-label={`Open BSI practice ${group.id} findings in Work (${group.findings})`}
            onClick={() => open(() => onOpenPractice(group.id))}>
            <span className="iso-controls__theme-name">{group.id} · {group.title}</span>
            <span className="iso-controls__theme-count">{count(group.requirements.length, 'requirement')} · {count(group.findings, 'finding')}</span>
          </button>
          <div className="iso-controls__rows">{group.requirements.map(requirement => <button key={requirement.requirementId} type="button" className="iso-controls__row"
            data-requirement={requirement.requirementId}
            aria-label={`Open ${requirement.requirementId} findings in Work (${requirement.findings})`}
            onClick={() => open(() => onOpenRequirement(requirement.requirementId))}>
            <span className="iso-controls__id">{requirement.requirementId}</span>
            <span className="iso-controls__title">{requirement.title}
              <span className="bsi-requirements__via"> · via {requirement.via.map(via => `A.${via.isoControlId}`).join(', ')}</span></span>
            <span className="iso-controls__amount">{number(requirement.findings)}</span>
          </button>)}</div>
        </div>)}
      </div>
      <p className="bsi-requirements__source">
        Derived from the accepted ISO controls through the BSI mapping ISO/IEC 27001 Annex A to Grundschutz++ {bsi.crosswalkVersion},
        catalog {bsi.catalogVersion.slice(0, 10)}. A requirement is reached when one of its ISO controls is accepted; it is no decision of its own.
        {bsi.missingTargets.length > 0 && ` Not in the catalog: ${[...new Set(bsi.missingTargets.map(item => item.requirementId))].join(', ')}.`} {bsi.license}
      </p>
    </div>;
  };
  return <section className="client-env-group" data-framework="bsi-grundschutz-plus-plus">
    <header className="client-env-group-header">
      <h3 className="client-env-group-title"><DashboardGlyph name="clipboard"/><span>{BSI_TILE_TITLE}</span></h3>
      {ready && <EnvironmentResultsButton title={BSI_TILE_TITLE}>{results}</EnvironmentResultsButton>}
    </header>
    {state.status === 'error' ? <p role="alert" className="iso-controls__error">BSI requirements could not be loaded.</p>
      : <dl className="client-env-facts">
        <div><dt>Requirements</dt><dd>{ready ? number(requirementCount) : '—'}</dd></div>
        <div><dt>Findings</dt><dd>{ready ? number(findings) : '—'}</dd></div>
        {top.map(group => <div key={group.id} className="iso-tile-theme is-actionable" data-practice={group.id}>
          <dt>{group.title}</dt>
          <dd><button type="button" aria-label={`Open BSI practice ${group.id} findings in Work (${group.findings})`}
            onClick={() => onOpenPractice(group.id)}>{count(group.findings, 'finding')}</button></dd>
        </div>)}
      </dl>}
  </section>;
}