import { useMemo } from 'react';
import { renderMarkdownHtml } from '@/lib/markdown';
import { useWorkbenchStore } from '@/features/workspace/WorkspaceStore';

export function ReportPanel() {
  const agentRun = useWorkbenchStore((s) => s.agentRun);
  const settings = useWorkbenchStore((s) => s.settings);
  const show = settings.showReportPanel && agentRun.reportMarkdown.trim().length > 0;

  const html = useMemo(
    () => (show ? renderMarkdownHtml(agentRun.reportMarkdown) : ''),
    [agentRun.reportMarkdown, show],
  );

  if (!show) {
    return null;
  }

  return (
    <section className="report-panel">
      <header className="report-panel__header">
        <div>
          <h2>{agentRun.summaryTitle || 'Agent Report'}</h2>
          {agentRun.summarySections.length > 0 && (
            <p>{agentRun.summarySections.slice(0, 5).join(' · ')}</p>
          )}
        </div>
        <span className="report-panel__badge">Highlighted</span>
      </header>
      <div
        className="report-panel__body markdown-body"
        dangerouslySetInnerHTML={{ __html: html }}
      />
    </section>
  );
}
