import { Star, User, Calendar, TrendingUp, Eye, Plus, HelpCircle, Zap, CheckCircle, Pencil, Trash2, Bookmark, Lock } 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      // session context (now optional)
  onEdit?: (step: StepListItem) => void        // library page
  onDelete?: (step: StepListItem) => void      // library page — NOTE: pass full StepListItem, not just ID
  onSave?: (step: StepListItem) => void        // library page (save copy to My Steps)
  currentUserId?: string                       // to determine ownership
}

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, onEdit, onDelete, onSave, currentUserId }: 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

  const isOwn = currentUserId ? step.created_by === currentUserId : false

  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>
            )}

            {/* From Flow Badge */}
            {step.is_flow_synced && (
              <span className="rounded-full bg-blue-400/15 px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wide text-blue-400">
                From Flow
              </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">
        {(onEdit || onDelete || onSave) ? (
          isOwn ? (
            step.is_flow_synced ? (
              // Flow-synced step: Preview + lock (read-only)
              <>
                <button
                  onClick={() => onPreview(step)}
                  className="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>
                <span
                  title="Managed by source flow — fork to customize"
                  className="flex items-center justify-center rounded-md border border-border px-3 py-2 text-muted-foreground opacity-50 cursor-default"
                >
                  <Lock className="h-4 w-4" />
                </span>
              </>
            ) : (
              // Own step: Preview + Edit + Delete icon
              <>
                <button
                  onClick={() => onPreview(step)}
                  className="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={() => onEdit?.(step)}
                  className="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"
                >
                  <Pencil className="h-4 w-4" />
                  Edit
                </button>
                <button
                  onClick={() => onDelete?.(step)}
                  className="flex items-center justify-center rounded-md border border-border px-3 py-2 text-muted-foreground hover:bg-red-400/10 hover:text-red-400 hover:border-red-400/30 transition-colors"
                  aria-label="Delete step"
                >
                  <Trash2 className="h-4 w-4" />
                </button>
              </>
            )
          ) : (
            // Others' step: Preview + Save
            <>
              <button
                onClick={() => onPreview(step)}
                className="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={() => onSave?.(step)}
                className="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"
              >
                <Bookmark className="h-4 w-4" />
                Save
              </button>
            </>
          )
        ) : (
          // Session context (original): Preview + Insert
          <>
            <button
              onClick={() => onPreview(step)}
              className="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="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>
  )
}