import { Check, X, Clock } from 'lucide-react'
import type { AISuggestion } from '@/types'

interface SuggestionsTabProps {
  suggestions: AISuggestion[]
}

const STATUS_CONFIG = {
  accepted: { icon: Check, color: 'text-emerald-400', label: 'Accepted' },
  dismissed: { icon: X, color: 'text-rose-400', label: 'Dismissed' },
  pending: { icon: Clock, color: 'text-amber-400', label: 'Pending' },
} as const

export function SuggestionsTab({ suggestions }: SuggestionsTabProps) {
  if (suggestions.length === 0) {
    return (
      <div className="flex flex-1 items-center justify-center text-sm text-muted-foreground p-6">
        No AI suggestions yet
      </div>
    )
  }

  return (
    <div className="flex-1 overflow-y-auto px-3 py-3 space-y-2">
      {suggestions.map((s) => {
        const config = STATUS_CONFIG[s.status]
        const StatusIcon = config.icon
        return (
          <div key={s.id} className="rounded-lg border border-border bg-card px-3 py-2">
            <div className="flex items-center justify-between">
              <span className="font-sans text-[0.625rem] uppercase tracking-widest text-muted-foreground">
                {s.action_type.replace(/_/g, ' ')}
              </span>
              <span className={`flex items-center gap-1 text-xs ${config.color}`}>
                <StatusIcon className="h-3 w-3" />
                {config.label}
              </span>
            </div>
            {s.target_node_id && (
              <p className="mt-1 text-xs text-muted-foreground truncate">Node: {s.target_node_id}</p>
            )}
            <p className="mt-0.5 font-sans text-[0.625rem] text-text-muted">
              {new Date(s.created_at).toLocaleDateString()}
            </p>
          </div>
        )
      })}
    </div>
  )
}