import { Bot, User, Receipt, Tag } from 'lucide-react';

export function ChatMessage({ role, content, sources = [], detectedCategory, onSelectSource }) {
  const isUser = role === 'user';

  if (isUser) {
    return (
      <div className="flex justify-end">
        <div className="flex max-w-[75%] items-start gap-2">
          <p className="rounded-2xl rounded-tr-sm bg-ink-900 px-4 py-2.5 text-sm text-paper-100">{content}</p>
          <span className="mt-1 flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-ink-100 text-ink-700">
            <User className="h-3.5 w-3.5" />
          </span>
        </div>
      </div>
    );
  }

  return (
    <div className="flex justify-start">
      <div className="flex max-w-[85%] items-start gap-2">
        <span className="mt-1 flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-amber-500 text-ink-950">
          <Bot className="h-3.5 w-3.5" />
        </span>
        <div className="rounded-2xl rounded-tl-sm border border-ink-900/10 bg-paper-50 px-4 py-3 text-sm text-ink-950 shadow-sm">
          {detectedCategory && (
            <div className="mb-2 inline-flex items-center gap-1 rounded-full border border-amber-500/40 bg-amber-500/10 px-2.5 py-1 text-[11px] font-semibold text-amber-700">
              <Tag className="h-3 w-3" /> Searched in: {detectedCategory}
            </div>
          )}
          <p className="whitespace-pre-wrap leading-relaxed">{content}</p>

          {sources.length > 0 && (
            <>
              <div className="dash-divider my-3 opacity-30" />
              <div className="flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
                <Receipt className="h-3 w-3" /> Sourced from {sources.length} catalog item{sources.length > 1 ? 's' : ''}
              </div>
              <div className="mt-2 flex flex-wrap gap-1.5">
                {sources.map((s) => (
                  <button
                    key={s.image_id || s.product_name || s.title}
                    onClick={() => onSelectSource?.(s)}
                    className="rounded-full border border-ink-900/15 bg-paper-100 px-2.5 py-1 font-mono text-[11px] text-ink-700 transition hover:border-amber-500 hover:text-amber-600"
                    title={s.price_range || ''}
                  >
                    {s.product_name || s.title}
                  </button>
                ))}
              </div>
            </>
          )}
        </div>
      </div>
    </div>
  );
}