import { ShieldAlert } from 'lucide-react'
import { cn } from '@/lib/utils'
import type { ScriptTemplateListItem } from '@/types'

const COMPLEXITY_CLASSES: Record<ScriptTemplateListItem['complexity'], string> = {
  beginner: 'text-emerald-400 bg-emerald-400/10',
  intermediate: 'text-amber-400 bg-amber-400/10',
  advanced: 'text-rose-500 bg-rose-500/10',
}

interface Props {
  template: ScriptTemplateListItem
  onConfigure: (id: string) => void
}

export function TemplateCard({ template, onConfigure }: Props) {
  return (
    <div
      className={cn(
        'w-full px-4 py-3 rounded-xl border transition-all',
        'border-border bg-transparent'
      )}
    >
      <div className="flex items-start justify-between gap-2 mb-1">
        <span className="text-sm font-medium text-foreground line-clamp-1">
          {template.name}
        </span>
        <div className="flex items-center gap-1.5 shrink-0">
          {template.requires_elevation && (
            <span title="Requires administrator elevation">
              <ShieldAlert size={13} className="text-amber-400" />
            </span>
          )}
          <span className={cn('font-label text-[0.625rem] uppercase tracking-wide px-1.5 py-0.5 rounded', COMPLEXITY_CLASSES[template.complexity])}>
            {template.complexity}
          </span>
        </div>
      </div>

      {template.description && (
        <p className="text-xs text-muted-foreground line-clamp-2 mb-2">
          {template.description}
        </p>
      )}

      <div className="flex items-center justify-between gap-3">
        <div className="flex items-center gap-3 text-[0.625rem] text-muted-foreground font-label">
          <span>{template.usage_count}× used</span>
          {template.tags.length > 0 && (
            <div className="flex gap-1 flex-wrap">
              {template.tags.slice(0, 3).map(tag => (
                <span key={tag} className="bg-white/5 border border-border rounded px-1.5 py-0.5">
                  {tag}
                </span>
              ))}
              {template.tags.length > 3 && (
                <span className="text-muted-foreground">+{template.tags.length - 3}</span>
              )}
            </div>
          )}
        </div>
        <button
          type="button"
          onClick={() => onConfigure(template.id)}
          className="shrink-0 bg-primary/10 border border-primary/20 text-primary text-xs px-2.5 py-1 rounded-md hover:bg-primary/20 transition-colors"
        >
          Configure →
        </button>
      </div>
    </div>
  )
}