/**
 * One library template, as a browsable card.
 *
 * The three facts on it that are not the title are the ones that decide
 * whether it is worth opening: who can see it, how many engagements have
 * already used it, and whether it came back out of one. Usage is the closest
 * thing the library has to a quality signal — a v3 used eleven times is
 * tested, a v1 used never is a draft somebody left — and hiding it behind a
 * click is what turns a library into a folder.
 */
import { Link } from 'react-router-dom';
import { Lock, Sparkles, Users } from 'lucide-react';
import { DEMAND_STAGE_LABELS } from '@pig/core';
import { Badge, Card, cn } from '@/components/ui';
import { MotionKindBadge } from './MotionKindBadge';
import type { MotionTemplateView } from './model';
import type { ReactNode } from 'react';

export function TemplateCard({
  template,
  to,
  footer,
  className,
}: {
  template: MotionTemplateView;
  /** Defaults to the template's own page; pass a filtered return path instead. */
  to?: string;
  /** Actions belonging to the calling page — instantiate, publish, fork. */
  footer?: ReactNode;
  className?: string;
}) {
  return (
    <Card className={cn('flex min-w-0 flex-col gap-3 p-4', className)}>
      <div className="flex min-w-0 flex-wrap items-center gap-1.5">
        <MotionKindBadge kind={template.kind} />
        <Badge tone="neutral" className="min-w-0">
          <span className="truncate">{DEMAND_STAGE_LABELS[template.stage]}</span>
        </Badge>
        {template.visibility === 'private' ? (
          <Badge tone="warning" title="Only you and a platform admin can see this">
            <Lock className="size-3 shrink-0" aria-hidden />
            Private
          </Badge>
        ) : null}
        {template.isSystem ? (
          <Badge tone="neutral" title="Shipped with PIG rather than authored here">
            <Sparkles className="size-3 shrink-0" aria-hidden />
            Starter
          </Badge>
        ) : null}
      </div>

      <div className="min-w-0">
        {/* break-words, not truncate: the title is the only way to tell two
            versions of the same lineage apart, and an unbroken word at 393px
            is what drags the whole page sideways. */}
        <h3 className="min-w-0 break-words font-semibold leading-snug">
          <Link
            to={to ?? `/motion/library/${template.id}`}
            className="underline-offset-4 hover:text-accent-fg hover:underline"
          >
            {template.title}
          </Link>
        </h3>
        {template.summary ? (
          <p className="mt-1 line-clamp-2 min-w-0 break-words text-sm leading-6 text-muted">
            {template.summary}
          </p>
        ) : null}
      </div>

      <div className="mt-auto flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted">
        <span className="nums whitespace-nowrap">v{template.version}</span>
        <span className="nums inline-flex min-w-0 items-center gap-1 whitespace-nowrap">
          <Users className="size-3 shrink-0" aria-hidden />
          {template.usageCount === 1 ? 'Used once' : `Used ${template.usageCount} times`}
        </span>
        {template.originArtifactId ? (
          // The loop, made visible. This row exists because an engagement
          // proved it, which is the whole argument for the feature.
          <span className="min-w-0 truncate">Promoted from an engagement</span>
        ) : null}
      </div>

      {footer ? <div className="flex min-w-0 flex-wrap items-center gap-2">{footer}</div> : null}
    </Card>
  );
}
