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

interface Result { title: string; url: string; date?: string; excerpt: string; domain?: string }

export function WebSearchCard({ call }: { call: ToolCallView }) {
  const p = call.payload as { query?: string; results?: Result[]; error?: string; mode?: string };
  const results = p.results || [];
  if (!results.length) return <p className="text-sm text-neutral-muted">{p.error ? "Le web n'a pas pu être consulté." : 'Aucun résultat pertinent.'}</p>;
  return (
    <ul className="space-y-2">
      {results.map((r, i) => {
        const domain = r.domain || (() => { try { return new URL(r.url).hostname.replace(/^www\./, ''); } catch { return ''; } })();
        return (
          <li key={i}>
            <a href={r.url} target="_blank" rel="noopener noreferrer" className="flex gap-3 rounded-xl border border-neutral-line bg-white p-3 hover:bg-neutral-surface">
              <img src={`https://www.google.com/s2/favicons?domain=${domain}&sz=32`} alt="" width={20} height={20} className="mt-0.5 h-5 w-5 rounded shrink-0" onError={(e) => ((e.target as HTMLImageElement).style.visibility = 'hidden')} />
              <span className="min-w-0 flex-1">
                <span className="block text-sm font-medium text-uqo-blue-dark truncate">{r.title}</span>
                <span className="block text-xs text-neutral-muted truncate inline-flex items-center gap-1"><Globe size={11} /> {domain}{r.date ? ` · ${r.date.slice(0, 10)}` : ''} <ExternalLink size={11} /></span>
                {r.excerpt && <span className="block text-xs text-neutral-text/80 mt-1 line-clamp-3">{r.excerpt}</span>}
              </span>
            </a>
          </li>
        );
      })}
    </ul>
  );
}