import React from 'react';
import type { NoteAuditTrail } from '../../../types/research';

export const EvidenceTracePanel: React.FC<{ auditTrail: NoteAuditTrail | null }> = ({
  auditTrail,
}) => {
  if (!auditTrail) {
    return (
      <div className="rounded-[28px] border border-term-border bg-term-surface p-5 text-sm text-term-text-muted">
        Select a note to inspect raw text, sources, links, and audit events.
      </div>
    );
  }

  return (
    <div className="grid gap-4 xl:grid-cols-2">
      <section className="rounded-[28px] border border-term-border bg-term-surface p-5">
        <div className="text-[10px] uppercase tracking-[0.2em] text-term-text-tertiary">Raw vs Cleaned</div>
        <div className="mt-4 grid gap-4 md:grid-cols-2">
          <div>
            <div className="text-xs uppercase tracking-[0.18em] text-term-text-tertiary">Raw note</div>
            <p className="mt-2 text-sm leading-7 text-term-text">{auditTrail.note.rawText}</p>
          </div>
          <div>
            <div className="text-xs uppercase tracking-[0.18em] text-term-text-tertiary">Cleaned note</div>
            <p className="mt-2 text-sm leading-7 text-term-text">{auditTrail.note.cleanedText}</p>
          </div>
        </div>
      </section>
      <section className="rounded-[28px] border border-term-border bg-term-surface p-5">
        <div className="text-[10px] uppercase tracking-[0.2em] text-term-text-tertiary">Sources</div>
        <ul className="mt-4 space-y-3">
          {auditTrail.sources.map((source) => (
            <li key={source.id} className="rounded-2xl border border-term-border bg-term-bg p-4">
              <div className="text-sm font-semibold text-term-text">{source.title}</div>
              <div className="mt-1 text-xs text-term-text-muted">
                {source.kind} {source.publishedAt ? `• ${source.publishedAt}` : ''}
              </div>
            </li>
          ))}
        </ul>
      </section>
      <section className="rounded-[28px] border border-term-border bg-term-surface p-5">
        <div className="text-[10px] uppercase tracking-[0.2em] text-term-text-tertiary">Links</div>
        <ul className="mt-4 space-y-3">
          {auditTrail.links.map((link) => (
            <li key={link.id} className="rounded-2xl border border-term-border bg-term-bg p-4 text-sm text-term-text">
              {link.linkType} • {Math.round(link.confidence * 100)}%
            </li>
          ))}
        </ul>
      </section>
      <section className="rounded-[28px] border border-term-border bg-term-surface p-5">
        <div className="text-[10px] uppercase tracking-[0.2em] text-term-text-tertiary">Audit events</div>
        <ul className="mt-4 space-y-3">
          {auditTrail.auditEvents.map((event) => (
            <li key={event.id} className="rounded-2xl border border-term-border bg-term-bg p-4">
              <div className="text-sm text-term-text">{event.action}</div>
              <div className="mt-1 text-xs text-term-text-muted">{event.createdAt}</div>
            </li>
          ))}
        </ul>
      </section>
    </div>
  );
};
