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-[#1d2430] bg-[#0f141b] p-5 text-sm text-[#7d8fa6]">
        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-[#1d2430] bg-[#0f141b] p-5">
        <div className="text-[10px] uppercase tracking-[0.2em] text-[#7e93ab]">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-[#6f8096]">Raw note</div>
            <p className="mt-2 text-sm leading-7 text-[#dcecff]">{auditTrail.note.rawText}</p>
          </div>
          <div>
            <div className="text-xs uppercase tracking-[0.18em] text-[#6f8096]">Cleaned note</div>
            <p className="mt-2 text-sm leading-7 text-[#dcecff]">{auditTrail.note.cleanedText}</p>
          </div>
        </div>
      </section>
      <section className="rounded-[28px] border border-[#1d2430] bg-[#0f141b] p-5">
        <div className="text-[10px] uppercase tracking-[0.2em] text-[#7e93ab]">Sources</div>
        <ul className="mt-4 space-y-3">
          {auditTrail.sources.map((source) => (
            <li key={source.id} className="rounded-2xl border border-[#1d2430] bg-[#111822] p-4">
              <div className="text-sm font-semibold text-[#eef4ff]">{source.title}</div>
              <div className="mt-1 text-xs text-[#7d8fa6]">
                {source.kind} {source.publishedAt ? `• ${source.publishedAt}` : ''}
              </div>
            </li>
          ))}
        </ul>
      </section>
      <section className="rounded-[28px] border border-[#1d2430] bg-[#0f141b] p-5">
        <div className="text-[10px] uppercase tracking-[0.2em] text-[#7e93ab]">Links</div>
        <ul className="mt-4 space-y-3">
          {auditTrail.links.map((link) => (
            <li key={link.id} className="rounded-2xl border border-[#1d2430] bg-[#111822] p-4 text-sm text-[#dcecff]">
              {link.linkType} • {Math.round(link.confidence * 100)}%
            </li>
          ))}
        </ul>
      </section>
      <section className="rounded-[28px] border border-[#1d2430] bg-[#0f141b] p-5">
        <div className="text-[10px] uppercase tracking-[0.2em] text-[#7e93ab]">Audit events</div>
        <ul className="mt-4 space-y-3">
          {auditTrail.auditEvents.map((event) => (
            <li key={event.id} className="rounded-2xl border border-[#1d2430] bg-[#111822] p-4">
              <div className="text-sm text-[#eef4ff]">{event.action}</div>
              <div className="mt-1 text-xs text-[#7d8fa6]">{event.createdAt}</div>
            </li>
          ))}
        </ul>
      </section>
    </div>
  );
};
