resolutionflow/frontend/src/components/step-library/StepCard.tsx

import { Star, User, Calendar, TrendingUp, Eye, Plus, HelpCircle, Zap, CheckCircle } from 'lucide-react'
import { cn } from '@/lib/utils'
import type { StepListItem } from '@/types/step'

interface StepCardProps {
  step: StepListItem
  onPreview: (step: StepListItem) => void
  onInsert: (step: StepListItem) => void
}

const stepTypeIcons = {
  decision: HelpCircle,
  action: Zap,
  solution: CheckCircle
}

const stepTypeColors = {
  decision: 'bg-blue-400/10 text-blue-400 border-blue-400/20',
  action: 'bg-yellow-400/10 text-yellow-400 border-yellow-400/20',
  solution: 'bg-emerald-400/10 text-emerald-400 border-emerald-400/20'
}

export function StepCard({ step, onPreview, onInsert }: StepCardProps) {
  const Icon = stepTypeIcons[step.step_type as keyof typeof stepTypeIcons] || HelpCircle
  const hasRating = step.rating_count > 0
  const visibleTags = step.tags.slice(0, 3)
  const remainingTags = step.tags.length - 3

  return (
    <div className="group rounded-lg border border-border bg-card p-4 transition-shadow hover:shadow-md">
      {/* Header */}
      <div className="mb-3 flex items-start justify-between gap-2">
        <div className="flex-1">
          <div className="mb-1.5 flex items-center gap-2">
            {/* Step Type Badge */}
            <span
              className={cn(
                'flex items-center gap-1 rounded border px-2 py-0.5 text-xs font-medium',
                stepTypeColors[step.step_type as keyof typeof stepTypeColors]
              )}
            >
              <Icon className="h-3 w-3" />
              {step.step_type}
            </span>

            {/* Featured Badge */}
            {step.is_featured && (
              <span className="rounded bg-yellow-400/10 px-2 py-0.5 text-xs font-medium text-yellow-400">
                Featured
              </span>
            )}
          </div>

          {/* Title */}
          <h3 className="font-semibold text-foreground line-clamp-2">{step.title}</h3>
        </div>
      </div>

      {/* Metadata */}
      <div className="mb-3 space-y-1.5 text-sm text-muted-foreground">
        {/* Category */}
        {step.category_name && (
          <div className="flex items-center gap-1.5">
            <span className="text-xs">📁</span>
            <span className="truncate">{step.category_name}</span>
          </div>
        )}

        {/* Rating */}
        <div className="flex items-center gap-1.5">
          <Star className="h-3.5 w-3.5" />
          {hasRating ? (
            <span>
              {step.rating_average.toFixed(1)} ({step.rating_count} {step.rating_count === 1 ? 'rating' : 'ratings'})
            </span>
          ) : (
            <span className="italic">Not rated</span>
          )}
        </div>

        {/* Usage Count */}
        <div className="flex items-center gap-1.5">
          <TrendingUp className="h-3.5 w-3.5" />
          <span>Used {step.usage_count} {step.usage_count === 1 ? 'time' : 'times'}</span>
        </div>

        {/* Author & Date */}
        <div className="flex items-center gap-3">
          <div className="flex items-center gap-1.5">
            <User className="h-3.5 w-3.5" />
            <span className="truncate">{step.author_name || 'Unknown'}</span>
          </div>
          <div className="flex items-center gap-1.5">
            <Calendar className="h-3.5 w-3.5" />
            <span>{new Date(step.created_at).toLocaleDateString()}</span>
          </div>
        </div>
      </div>

      {/* Tags */}
      {step.tags.length > 0 && (
        <div className="mb-3 flex flex-wrap gap-1.5">
          {visibleTags.map(tag => (
            <span
              key={tag}
              className="rounded-full bg-accent px-2 py-0.5 text-xs text-muted-foreground"
            >
              {tag}
            </span>
          ))}
          {remainingTags > 0 && (
            <span className="rounded-full bg-muted px-2 py-0.5 text-xs text-muted-foreground">
              +{remainingTags} more
            </span>
          )}
        </div>
      )}

      {/* Actions */}
      <div className="flex gap-2">
        <button
          onClick={() => onPreview(step)}
          className={cn(
            'flex flex-1 items-center justify-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium text-muted-foreground',
            'hover:bg-accent hover:text-foreground transition-colors'
          )}
        >
          <Eye className="h-4 w-4" />
          Preview
        </button>
        <button
          onClick={() => onInsert(step)}
          className={cn(
            'flex flex-1 items-center justify-center gap-2 rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-3 py-2 text-sm font-medium',
            'hover:opacity-90 transition-colors'
          )}
        >
          <Plus className="h-4 w-4" />
          Insert
        </button>
      </div>
    </div>
  )
}