"use client";

import { ArrowRight, Database, Sparkles } from "lucide-react";

import { Badge } from "@/components/ui/Badge";
import type { ToolDescriptorView } from "@/lib/api/types";
import { cardClass } from "@/lib/ui/variants";

interface ToolCardProps {
  tool: ToolDescriptorView;
  // 点击：legacy 工具导航到现有页面；新工具开 GeneratorRunner。
  onOpen: (tool: ToolDescriptorView) => void;
}

// 工具箱卡片（对齐 ProjectCard 纸感视觉）：标题 + 副标题 + 题材徽标 + NEW/可入库标。
// 纯展示；点击交由 ToolboxPage 分派（legacy 跳转 / 新工具开 runner）。
export function ToolCard({ tool, onOpen }: ToolCardProps) {
  return (
    <button
      type="button"
      onClick={() => onOpen(tool)}
      className={cardClass(
        "group flex h-full min-h-[164px] flex-col p-5 text-left transition-colors hover:border-cinnabar focus-visible:border-cinnabar focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cinnabar/30",
      )}
    >
      <div className="mb-2 flex flex-wrap items-center gap-2">
        <h2 className="font-serif text-xl text-ink">{tool.title}</h2>
        {tool.genre ? <Badge>{tool.genre}</Badge> : null}
        {tool.is_legacy ? null : <Badge variant="accent">新</Badge>}
        {tool.ingestable ? (
          <Badge variant="info">
            <Database className="h-3 w-3" aria-hidden="true" />
            可入库
          </Badge>
        ) : null}
      </div>
      <p className="line-clamp-2 text-sm text-ink-soft">{tool.subtitle}</p>
      <div className="mt-auto flex items-center gap-2 pt-4 text-xs text-ink-soft">
        <Sparkles className="h-3.5 w-3.5 text-cinnabar" aria-hidden="true" />
        <span className="truncate">
          {tool.input_fields?.[0]?.label ?? "现有页面"} → 结构化预览
        </span>
        <ArrowRight
          className="ml-auto h-3.5 w-3.5 text-cinnabar opacity-0 transition-opacity group-hover:opacity-100"
          aria-hidden="true"
        />
      </div>
    </button>
  );
}