import { BookOpen, ExternalLink } from 'lucide-react';
import type { ToolCallView } from '@/lib/types';

interface Source { index: number; course: string; module: string; section: string; page: string; url: string; excerpt: string }

export function CourseSourceCard({ call }: { call: ToolCallView }) {
  const p = call.payload as { query?: string; sources?: Source[] };
  const sources = p.sources || [];
  if (!sources.length) return <p className="text-sm text-neutral-muted">Aucun passage trouvé dans le matériel du cours.</p>;
  return (
    <ul className="grid gap-2 sm:grid-cols-2">
      {sources.map((s) => (
        <li key={s.index}>
          <a href={s.url || '#'} target={s.url ? '_blank' : undefined} rel="noopener noreferrer" className="block rounded-xl border border-neutral-line bg-white p-3 hover:bg-neutral-surface h-full">
            <span className="inline-flex items-center gap-1.5 text-[11px] font-semibold text-uqo-blue bg-uqo-blue-light rounded-md px-1.5 py-0.5"><BookOpen size={11} /> S{s.index} · {s.course}</span>
            <span className="block text-sm font-medium text-uqo-blue-dark mt-1.5 line-clamp-1">{s.module}</span>
            <span className="block text-xs text-neutral-muted line-clamp-1">{s.section && s.section !== s.module ? s.section : ''} {s.url && <ExternalLink size={10} className="inline" />}</span>
            <span className="block text-xs text-neutral-text/80 mt-1 line-clamp-3">{s.excerpt}</span>
          </a>
        </li>
      ))}
    </ul>
  );
}