import React from 'react';
import { FileText } from 'lucide-react';
import type { NoteAuditTrail } from '../../../types/research';
import { formatFileSize } from '../primitives/ResearchFiles';
import { ResearchNoteBody } from '../primitives/ResearchNoteBody';

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>
            <div className="mt-2">
              <ResearchNoteBody note={auditTrail.note} />
            </div>
          </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">Files</div>
        <ul className="mt-4 space-y-3">
          {auditTrail.files.length === 0 ? (
            <li className="rounded-2xl border border-dashed border-term-border bg-term-bg p-4 text-sm text-term-text-muted">
              No attached files
            </li>
          ) : (
            auditTrail.files.map((file) => (
              <li key={file.id} className="rounded-2xl border border-term-border bg-term-bg p-4">
                <div className="flex items-center gap-3">
                  <FileText className="h-4 w-4 text-term-text-tertiary" />
                  <div className="min-w-0 flex-1">
                    <div className="truncate text-sm font-semibold text-term-text">{file.originalName}</div>
                    <div className="mt-1 text-xs text-term-text-muted">{formatFileSize(file.sizeBytes)}</div>
                  </div>
                </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">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="flex gap-3">
                {typeof source.metadataJson.imageUrl === 'string' ? (
                  <img
                    src={source.metadataJson.imageUrl}
                    alt=""
                    className="h-16 w-16 flex-shrink-0 rounded object-cover"
                  />
                ) : null}
                <div className="min-w-0 flex-1">
                  <div className="text-sm font-semibold text-term-text">{source.title}</div>
                  <div className="mt-1 text-xs text-term-text-muted">
                    {[source.publisher, source.kind, source.publishedAt].filter(Boolean).join(' • ')}
                  </div>
                  {source.url ? (
                    <a
                      href={source.url}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="mt-2 block truncate text-xs text-info underline decoration-info/40 underline-offset-2"
                    >
                      {source.url}
                    </a>
                  ) : null}
                  {typeof source.metadataJson.excerpt === 'string' ? (
                    <p className="mt-2 text-xs leading-5 text-term-text-muted">
                      {source.metadataJson.excerpt}
                    </p>
                  ) : null}
                </div>
              </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>
  );
};
