import { Download, FileSpreadsheet, FileText, Image as ImageIcon, Share2 } from 'lucide-react';
import type { Artifact } from '@/lib/types';
import { downloadFile, shareFile } from '@/lib/api';

const icon = (t: string) => (t === 'xlsx' ? FileSpreadsheet : t === 'image' ? ImageIcon : FileText);
const label = (t: string) => (t === 'xlsx' ? 'Excel' : t === 'docx' ? 'Word' : t === 'csv' ? 'CSV' : t === 'image' ? 'Image' : 'Fichier');

export function ArtifactChips({ artifacts }: { artifacts?: Artifact[] }) {
  const list = (artifacts || []).filter((a) => a.file_id && a.type !== 'quiz' && a.type !== 'sources');
  if (!list.length) return null;
  const canShare = typeof navigator !== 'undefined' && !!navigator.share;
  return (
    <div className="flex flex-wrap gap-2">
      {list.map((a) => {
        const Icon = icon(a.type);
        return (
          <div key={a.file_id} className="inline-flex items-center rounded-xl border border-neutral-line bg-white overflow-hidden">
            <button onClick={() => downloadFile(a.file_id!, a.filename || 'fichier')} className="inline-flex items-center gap-2 px-3 min-h-[44px] text-sm hover:bg-neutral-surface">
              <Icon size={16} className="text-uqo-blue" /> <span className="max-w-[200px] truncate">{a.filename}</span> <span className="text-[10px] rounded bg-neutral-surface px-1.5 py-0.5 text-neutral-muted">{label(a.type)}</span> <Download size={14} className="text-neutral-muted" />
            </button>
            {canShare && (
              <button onClick={() => shareFile(a.file_id!, a.filename || 'fichier')} className="px-3 min-h-[44px] border-l border-neutral-line hover:bg-neutral-surface" aria-label="Partager">
                <Share2 size={14} className="text-neutral-muted" />
              </button>
            )}
          </div>
        );
      })}
    </div>
  );
}