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

export function DocxCard({ call }: { call: ToolCallView }) {
  const p = call.payload as { title?: string; filename?: string; file_id?: string; words?: number; outline?: string[] };
  const fileId = p.file_id || call.artifacts?.[0]?.file_id;
  const filename = p.filename || 'document.docx';
  return (
    <div className="space-y-3">
      <div className="flex items-start gap-3">
        <span className="h-10 w-10 rounded-xl bg-[#e6ecfb] text-[#2b579a] inline-flex items-center justify-center shrink-0"><FileText size={20} /></span>
        <div className="min-w-0 flex-1">
          <div className="font-semibold truncate">{p.title || filename}</div>
          <div className="text-xs text-neutral-muted">{filename}{p.words ? ` · ${p.words} mots` : ''} · Word (.docx)</div>
        </div>
      </div>
      {p.outline?.length ? (
        <ol className="rounded-xl border border-neutral-line bg-white px-3 py-2 text-sm space-y-0.5">
          {p.outline.map((h, i) => <li key={i} className="truncate text-neutral-text">{h}</li>)}
        </ol>
      ) : null}
      {fileId && (
        <div className="flex gap-2 flex-wrap">
          <Button size="sm" onClick={() => downloadFile(fileId, filename)}><Download size={16} /> Télécharger</Button>
          {typeof navigator !== 'undefined' && !!navigator.share && <Button size="sm" variant="secondary" onClick={() => shareFile(fileId, filename)}><Share2 size={16} /> Partager</Button>}
        </div>
      )}
    </div>
  );
}