import { Terminal, ShieldCheck, CheckCircle2, Package } from 'lucide-react'
import { cn } from '@/lib/utils'
import type { PublicScriptTemplate } from '@/types'

interface ScriptTemplateCardProps {
  template: PublicScriptTemplate
  onClick: () => void
}

const complexityColors: Record<string, string> = {
  basic: 'text-emerald-400 border-emerald-400/20 bg-emerald-400/5',
  intermediate: 'text-amber-400 border-amber-400/20 bg-amber-400/5',
  advanced: 'text-rose-500 border-rose-500/20 bg-rose-500/5',
}

export function ScriptTemplateCard({ template, onClick }: ScriptTemplateCardProps) {
  return (
    <button
      type="button"
      onClick={onClick}
      className="card-interactive text-left w-full flex flex-col gap-3 p-5"
    >
      <div className="flex items-start justify-between gap-2">
        <div className="flex items-center gap-2 min-w-0">
          <h3 className="font-heading text-foreground text-base font-semibold leading-tight line-clamp-2">
            {template.name}
          </h3>
          {template.is_verified && (
            <CheckCircle2 className="w-4 h-4 text-primary shrink-0" />
          )}
        </div>
        <span className="shrink-0">
          <Terminal className="w-4 h-4 text-muted-foreground" />
        </span>
      </div>

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

      {template.tags.length > 0 && (
        <div className="flex flex-wrap gap-1.5">
          {template.tags.slice(0, 3).map((tag) => (
            <span
              key={tag}
              className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] px-2 py-0.5 rounded-md bg-card border border-border text-muted-foreground"
            >
              {tag}
            </span>
          ))}
          {template.tags.length > 3 && (
            <span className="font-sans text-xs text-[0.625rem] text-muted-foreground">
              +{template.tags.length - 3}
            </span>
          )}
        </div>
      )}

      <div className="flex items-center gap-3 mt-auto pt-2 border-t border-border">
        {template.complexity && (
          <span
            className={cn(
              'font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] px-2 py-0.5 rounded-md border',
              complexityColors[template.complexity] || 'text-muted-foreground border-border bg-card'
            )}
          >
            {template.complexity}
          </span>
        )}
        <span className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
          {template.parameter_count} param{template.parameter_count !== 1 ? 's' : ''}
        </span>
        {template.requires_elevation && (
          <ShieldCheck className="w-3.5 h-3.5 text-amber-400" />
        )}
      </div>

      {template.requires_modules.length > 0 && (
        <div className="flex flex-wrap gap-1.5">
          {template.requires_modules.slice(0, 2).map((mod) => (
            <span
              key={mod}
              className="font-sans text-xs text-[0.625rem] px-2 py-0.5 rounded-md bg-card border border-border text-muted-foreground flex items-center gap-1"
            >
              <Package className="w-3 h-3" />
              {mod}
            </span>
          ))}
        </div>
      )}

      <div className="flex items-center justify-end">
        <span className="font-sans text-xs text-[0.625rem] text-text-muted">
          {template.usage_count.toLocaleString()} uses
        </span>
      </div>
    </button>
  )
}
