---
import Icon from './Icon.astro';
import { PLATFORM_ICONS } from '../lib/site';
import type { Plugin } from '../lib/db';

interface Props {
  plugin: Plugin;
}

const { plugin } = Astro.props;

const search = [
  plugin.name,
  plugin.description,
  plugin.publisherName,
  plugin.category,
  ...plugin.routes,
  ...plugin.platforms,
]
  .join(' ')
  .toLowerCase();

const published = Boolean(plugin.sha256);
const cli = `openrom-core --install-plugin ${plugin.id}`;
---

<article
  class="plugin-card group relative flex flex-col gap-4 rounded-xl border border-zinc-800/80 bg-zinc-900/40 p-5 transition hover:border-zinc-700 hover:bg-zinc-900/70"
  data-plugin-id={plugin.id}
  data-category={plugin.category}
  data-platforms={plugin.platforms.join('|')}
  data-downloads={plugin.downloads}
  data-created={plugin.createdAt}
  data-search={search}
>
  <div class="flex items-start gap-3">
    <span
      class="grid h-11 w-11 shrink-0 place-items-center rounded-lg bg-gradient-to-br from-cyan-400/15 to-purple-500/15 text-cyan-300 ring-1 ring-inset ring-zinc-700/60"
    >
      <Icon name={plugin.icon} class="h-5.5 w-5.5" />
    </span>

    <div class="min-w-0 flex-1">
      <div class="flex items-center gap-1.5">
        <h3 class="truncate text-sm font-semibold text-zinc-100">
          <a
            href={`/plugin/${plugin.id}`}
            class="after:absolute after:inset-0 after:content-['']"
          >
            {plugin.name}
          </a>
        </h3>
        {
          plugin.publisherVerified && (
            <Icon name="badge-check" class="h-4 w-4 shrink-0 text-cyan-400" />
          )
        }
      </div>
      <p class="mt-0.5 flex flex-wrap items-center gap-x-2 text-xs text-zinc-500">
        {
          plugin.publisherId ? (
            <a
              href={`/publisher/${plugin.publisherId}`}
              class="relative z-10 transition hover:text-cyan-300"
              title={`View ${plugin.publisherName}'s profile`}
            >
              {plugin.publisherName}
            </a>
          ) : (
            <span>{plugin.publisherName}</span>
          )
        }
        <span aria-hidden="true">·</span>
        <span class="font-mono">v{plugin.version}</span>
      </p>
    </div>

    <span
      class="shrink-0 rounded-md border border-zinc-800 bg-zinc-950/60 px-2 py-0.5 text-[0.7rem] font-medium text-zinc-400"
    >
      {plugin.category}
    </span>
  </div>

  <p class="line-clamp-2 text-sm leading-relaxed text-zinc-400">{plugin.description}</p>

  {
    plugin.routes.length > 0 && (
      <div class="flex flex-wrap gap-1.5">
        {plugin.routes.slice(0, 3).map((route) => (
          <span class="rounded-md bg-zinc-950/70 px-2 py-0.5 font-mono text-[0.7rem] text-zinc-400 ring-1 ring-inset ring-zinc-800">
            {route}
          </span>
        ))}
      </div>
    )
  }

  <div class="mt-auto flex items-center justify-between border-t border-zinc-800/70 pt-4">
    <div class="flex items-center gap-3 text-xs text-zinc-500">
      <span class="inline-flex items-center gap-1.5" title="Real downloads">
        <Icon name="download" class="h-3.5 w-3.5" />
        {plugin.downloads.toLocaleString()}
      </span>
      <span class="flex items-center gap-1.5">
        {
          plugin.platforms.map((platform) => (
            <span title={platform}>
              <Icon name={PLATFORM_ICONS[platform] ?? 'package'} class="h-3.5 w-3.5" />
            </span>
          ))
        }
      </span>
    </div>

    <div class="relative z-10 flex items-center gap-2">
      <button
        type="button"
        data-copy-cli={cli}
        title="Copy install command"
        aria-label="Copy install command"
        class="grid h-8 w-8 place-items-center rounded-lg border border-zinc-800 text-zinc-400 transition hover:border-zinc-700 hover:text-cyan-300"
      >
        <Icon name="copy" class="h-4 w-4" />
      </button>
      <a
        href={`/plugin/${plugin.id}`}
        class="inline-flex h-8 items-center gap-1.5 rounded-lg border border-zinc-800 px-3 text-xs font-medium text-zinc-300 transition hover:border-cyan-500/40 hover:text-cyan-300"
      >
        Details
        <Icon name="chevron-right" class="h-3.5 w-3.5" />
      </a>
      {
        published ? (
          <a
            href={`/api/download/${plugin.id}`}
            class="inline-flex h-8 items-center gap-1.5 rounded-lg bg-cyan-500/90 px-3 text-xs font-semibold text-zinc-950 transition hover:bg-cyan-400"
          >
            <Icon name="download" class="h-3.5 w-3.5" />
            Get
          </a>
        ) : (
          <span
            title="No .orplug bundle has been published for this extension yet"
            class="inline-flex h-8 cursor-not-allowed items-center gap-1.5 rounded-lg border border-zinc-800 px-3 text-xs font-medium text-zinc-500"
          >
            Not published
          </span>
        )
      }
    </div>
  </div>
</article>