import { Cpu, Sparkles, Terminal, type LucideIcon } from 'lucide-react'

import type { TemplateInfo } from './api'

/**
 * Catalog card for a workspace template. Mirrors the visual idiom of
 * OverviewCard (border + rounded-lg + bg-bg-secondary + hover) so the
 * Workspaces activity feels like one design system. Click → opens the
 * detail tab where the README and spawn form live.
 */

const AGENT_ICONS: Record<string, LucideIcon> = {
  claude: Sparkles,
  codex: Cpu,
  shell: Terminal,
}

function AgentGlyph({ agent }: { agent: string }) {
  const Icon = AGENT_ICONS[agent]
  if (Icon) return <Icon size={12} strokeWidth={2.25} aria-hidden="true" />
  return <span aria-hidden="true" className="text-[11px] font-mono">·</span>
}

function humanize(name: string): string {
  return (
    name
      .split(/[-_]/)
      .filter(Boolean)
      .map((s) => s.charAt(0).toUpperCase() + s.slice(1))
      .join(' ') || name
  )
}

interface Props {
  template: TemplateInfo
  onOpen: () => void
}

export function TemplateCard({ template: t, onOpen }: Props) {
  const title = t.displayName ?? humanize(t.name)
  return (
    <button
      type="button"
      onClick={onOpen}
      className="group rounded-lg border border-border bg-bg-secondary hover:bg-bg-tertiary/40 hover:border-border/80 transition-colors cursor-pointer p-4 flex flex-col gap-3 text-left"
    >
      <div className="flex items-start gap-2.5">
        <div className="flex-1 min-w-0">
          <div className="flex items-baseline gap-2">
            <h3 className="text-[14px] font-semibold text-text truncate" title={t.name}>
              {title}
            </h3>
            <span className="text-[11px] font-mono text-text-muted tabular-nums">
              v{t.version}
            </span>
          </div>
          {t.description && (
            <p className="text-[12px] text-text-muted line-clamp-3 mt-1">
              {t.description}
            </p>
          )}
        </div>
      </div>

      <div className="border-t border-border pt-3 flex items-center gap-3">
        <div className="text-[10px] uppercase tracking-wider text-text-muted/70">
          Default agents
        </div>
        <div className="flex items-center gap-2 text-text-muted">
          {t.defaultAgents.map((a) => (
            <span key={a} className="flex items-center gap-1 text-[11px]">
              <AgentGlyph agent={a} />
              <span>{a}</span>
            </span>
          ))}
        </div>
      </div>
    </button>
  )
}
