import { Sparkles, User } from 'lucide-react'
import { MarkdownContent } from '@/components/ui/MarkdownContent'
import { SuggestedFlowCard } from './SuggestedFlowCard'
import type { SuggestedFlow } from '@/types/copilot'

interface ChatMessageProps {
  role: 'user' | 'assistant'
  content: string
  suggestedFlows?: SuggestedFlow[]
}

export function ChatMessage({ role, content, suggestedFlows }: ChatMessageProps) {
  return (
    <div className={`flex gap-3 ${role === 'user' ? 'flex-row-reverse' : ''}`}>
      {/* Avatar */}
      <div
        className={`shrink-0 w-8 h-8 rounded-full flex items-center justify-center ${
          role === 'assistant'
            ? 'bg-primary/15 text-primary'
            : 'bg-[rgba(255,255,255,0.08)] text-muted-foreground'
        }`}
      >
        {role === 'assistant' ? <Sparkles size={14} /> : <User size={14} />}
      </div>

      {/* Content */}
      <div className={`max-w-[80%] space-y-2 ${role === 'user' ? 'text-right' : ''}`}>
        <div
          className={`rounded-2xl px-4 py-3 text-[0.875rem] leading-relaxed ${
            role === 'user'
              ? 'bg-primary/15 text-foreground'
              : 'bg-[rgba(255,255,255,0.04)] text-foreground border border-[rgba(255,255,255,0.06)]'
          }`}
        >
          <MarkdownContent content={content} className="text-[0.875rem] leading-relaxed" />
        </div>

        {/* Suggested flows (assistant only) */}
        {role === 'assistant' && suggestedFlows && suggestedFlows.length > 0 && (
          <div className="space-y-1.5">
            <span className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
              Related Flows
            </span>
            {suggestedFlows.map(flow => (
              <SuggestedFlowCard key={flow.tree_id} flow={flow} />
            ))}
          </div>
        )}
      </div>
    </div>
  )
}