import { Download, Share2 } from 'lucide-react';
import type { ToolCallView } from '@/lib/types';
import { downloadFile, shareFile } from '@/lib/api';

export function ChartCard({ call }: { call: ToolCallView }) {
  const p = call.payload as { title?: string; type?: string; file_id?: string; filename?: string };
  const fileId = p.file_id || call.artifacts?.[0]?.file_id;
  if (!fileId) return <p className="text-sm text-neutral-muted">{call.summary}</p>;
  return (
    <figure className="rounded-xl border border-neutral-line overflow-hidden bg-white">
      <img src={`/api/v1/files/${fileId}`} alt={p.title || 'graphique'} className="w-full max-h-[480px] object-contain" loading="lazy" />
      <figcaption className="flex items-center justify-between gap-2 px-3 py-2 text-xs text-neutral-muted border-t border-neutral-line">
        <span className="truncate">{p.title || p.filename} · {p.type}</span>
        <span className="flex gap-1">
          <button onClick={() => downloadFile(fileId, p.filename || 'graphique.png')} className="h-8 px-2 rounded-lg hover:bg-neutral-surface inline-flex items-center gap-1 text-uqo-blue"><Download size={13} /> PNG</button>
          {typeof navigator !== 'undefined' && !!navigator.share && <button onClick={() => shareFile(fileId, p.filename || 'graphique.png')} className="h-8 px-2 rounded-lg hover:bg-neutral-surface inline-flex items-center gap-1"><Share2 size={13} /></button>}
        </span>
      </figcaption>
    </figure>
  );
}