import { RichTextValue } from '../../components/RichTextValue/RichTextValue';
import { highlightText } from '../../components/HighlightText/highlight-text';
import { TriangleIcon } from '../../components/TriangleIcon';
import { powerShellDisplayLines, type FindingFirstRead as Summary } from './first-read';

/** Scanner first read: what the scanner found here, why it matters, and what to do next. */
export function FindingFirstRead({ summary, outcome, search, onResults }: {
  summary: Summary; outcome: string; search: string; onResults?: () => void;
}) {
  return <>
    {summary.rows.length > 0 && <section className="policy-problem finding-first-read" aria-label={summary.heading} data-outcome={outcome}>
      <h4>{summary.heading}</h4>
      <dl className="policy-problem__values">
        {summary.rows.map((row, index) => <div key={`${row.label}-${index}`} data-state={row.state ?? 'neutral'}><dt>{row.label}</dt>
          <dd>{row.state
            ? <span className={`policy-value-mark is-${row.state}`}>{highlightText(row.value, search)}</span>
            : <RichTextValue value={row.value} search={search} label={row.label} onResults={onResults} />}</dd></div>)}
      </dl>
    </section>}
    {(summary.nextStep || summary.link) && <section className="policy-next-step finding-first-read" aria-label="Next step">
      <h4>Next step</h4>
      {summary.nextStep?.lead && <RichTextValue value={summary.nextStep.lead} search={search} label={summary.nextStep.label} onResults={onResults} />}
      {summary.nextStep?.command && <pre className="finding-first-read__command"><code>{highlightText(powerShellDisplayLines(summary.nextStep.command).join('\n'), search)}</code></pre>}
      {summary.nextStep?.rest && <details className="finding-optional-detail">
        <summary><TriangleIcon direction="right" />Full remediation</summary>
        <RichTextValue value={summary.nextStep.rest} search={search} label={summary.nextStep.label} onResults={onResults} />
      </details>}
      {summary.link && <p><a className="btn" href={summary.link.href} target="_blank" rel="noopener noreferrer" referrerPolicy="no-referrer">{summary.link.label}</a></p>}
    </section>}
  </>;
}