---
interface TemplateFile {
  path: string;
  content: string;
}

interface Props {
  name: string;
  type: string;
  description: string;
  content?: string;
  files?: TemplateFile[];
  downloadUrl?: string;
  size?: number;
}

const { name, type, description, content = '', files, downloadUrl, rawUrl, size } = Astro.props as any;
const filesJson = files ? JSON.stringify(files) : '';

const icons: Record<string, string> = {
  agent: 'ph-robot',
  command: 'ph-terminal',
  mcp: 'ph-plug',
  setting: 'ph-gear',
  hook: 'ph-webhooks-logo',
  skill: 'ph-magic-wand',
};

const badgeClasses: Record<string, string> = {
  agent: 'badge-agent',
  command: 'badge-command',
  mcp: 'badge-mcp',
  setting: 'badge-setting',
  hook: 'badge-hook',
  skill: 'badge-skill',
};

const icon = icons[type] || 'ph-package';
const badgeClass = badgeClasses[type] || 'badge-setting';
const command = `npx vibery install ${name}`;
const fileExt = ['mcp', 'setting', 'hook'].includes(type) ? 'json' : 'md';
---

<a
  href={`/templates/${type}s/${name}`}
  class="template-card elevated-card group p-5 block transition-all duration-300 hover:scale-[1.02] animate-fade-in"
  data-name={name}
  data-type={type}
  data-content={content}
  data-files={filesJson}
  data-download-url={downloadUrl || ''}
  data-raw-url={rawUrl || ''}
  data-size={size || 0}
>
  <div class="flex items-start justify-between mb-4">
    <div class="flex items-center justify-center w-11 h-11 bg-warm-bg-elevated rounded-lg text-warm-text-secondary border border-warm-border-subtle group-hover:border-warm-accent/50 group-hover:text-warm-accent transition-all">
      <i class={`ph-bold ${icon} text-xl`}></i>
    </div>
    <span class={`${badgeClass} font-semibold`}>
      {type}
    </span>
  </div>

  <h3 class="text-base font-semibold mb-2 text-warm-text-primary group-hover:text-warm-accent transition-colors">
    {name}
  </h3>
  <p class="text-warm-text-secondary text-sm leading-relaxed mb-4 line-clamp-2">
    {description}
  </p>

  <div class="flex items-center justify-between">
    <div class="flex items-center gap-2">
      <code class="text-xs font-mono text-warm-text-tertiary truncate max-w-[160px] bg-warm-bg-elevated px-2 py-1 rounded border border-warm-border-subtle">
        {command}
      </code>
      <!-- Usage badge injected by TemplateInteractions.vue -->
    </div>
    <div class="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-all duration-200">
      <button
        class="icon-btn copy-btn"
        data-command={command}
        data-name={name}
        aria-label={`Copy install command`}
        title="Copy install command"
      >
        <i class="ph-bold ph-copy text-sm"></i>
      </button>
      {(rawUrl || downloadUrl) ? (
        <a
          href={rawUrl || downloadUrl}
          class="icon-btn"
          download={rawUrl ? `${name}.${type === 'mcp' || type === 'setting' || type === 'hook' ? 'json' : 'md'}` : `${type}--${name}.tar.gz`}
          aria-label={`Download ${name}`}
          title={rawUrl ? 'Download file' : 'Download archive'}
        >
          <i class="ph-bold ph-download-simple text-sm"></i>
        </a>
      ) : (
        <button
          class="icon-btn download-btn"
          data-content={content}
          data-name={name}
          data-ext={fileExt}
          aria-label={`Download ${name}`}
          title="Download"
        >
          <i class="ph-bold ph-download-simple text-sm"></i>
        </button>
      )}
      <button
        class="icon-btn card-add-btn"
        data-name={name}
        data-type={type}
        data-description={description}
        aria-label={`Add ${name} to cart`}
        title="Add to stack"
      >
        <i class="ph-bold ph-plus text-sm"></i>
      </button>
    </div>
  </div>
</a>