import { useState } from 'react';
import { ChevronDown } from 'lucide-react';
import type { ToolCallView } from '@/lib/types';
import { CodeBlock } from '@/components/chat/code-block';
import { ArtifactChips } from './artifact-chips';
import { cn } from '@/lib/cn';

export function PythonExecCard({ call, conversationId }: { call: ToolCallView; conversationId: string }) {
  const p = call.payload as { code?: string; description?: string; stdout?: string; stderr?: string; exit_code?: number; artifacts?: ToolCallView['artifacts'] };
  const [showCode, setShowCode] = useState(false);
  const images = (p.artifacts || call.artifacts || []).filter((a) => a.type === 'image');
  const others = (p.artifacts || call.artifacts || []).filter((a) => a.type !== 'image');
  return (
    <div className="space-y-2">
      {p.description && <p className="text-sm text-neutral-muted">{p.description}</p>}
      <button onClick={() => setShowCode((v) => !v)} className="text-sm text-uqo-blue inline-flex items-center gap-1 min-h-[44px]">
        <ChevronDown size={16} className={cn('transition-transform', showCode && 'rotate-180')} /> {showCode ? 'Masquer le code' : 'Voir le code'}
      </button>
      {showCode && p.code && <CodeBlock code={p.code} lang="python" conversationId={conversationId} />}
      {(p.stdout || p.stderr) && (
        <div className="rounded-lg bg-neutral-surface p-3 font-mono text-xs overflow-x-auto scroll-thin">
          {p.stdout && <pre className="whitespace-pre-wrap">{p.stdout}</pre>}
          {p.stderr && <pre className="whitespace-pre-wrap text-semantic-error mt-2">{p.stderr}</pre>}
        </div>
      )}
      {images.map((a) => (
        <figure key={a.file_id} className="rounded-xl border border-neutral-line overflow-hidden bg-white">
          <img src={`/api/v1/files/${a.file_id}`} alt={a.filename || 'graphique'} className="w-full max-h-[420px] object-contain" loading="lazy" />
        </figure>
      ))}
      <ArtifactChips artifacts={others} />
    </div>
  );
}