import Link from "next/link";
import { LogoMark } from "./ui/logo-mark";
import { Badge } from "./ui/badge";
import { label, fmtDate } from "@/lib/utils";
import type { ToolCard as T } from "@/lib/public/queries";
import { ShieldCheck, BookOpenText } from "lucide-react";

export function ToolCard({ t, blurb, className = "" }: { t: T; blurb?: string | null; className?: string }) {
  return (
    <article className={`card group relative flex flex-col p-4 ${className}`}>
      <div className="flex items-start gap-3">
        <LogoMark name={t.name} size={44} />
        <div className="min-w-0 flex-1">
          <h3 className="truncate text-[1.02rem] font-semibold leading-tight tracking-tight">
            <Link href={`/tools/${t.slug}`} className="after:absolute after:inset-0 after:rounded-2xl focus-visible:outline-none">{t.name}</Link>
          </h3>
          <p className="truncate text-xs text-fg-3">{t.vendorName ?? label(t.productType)}{t.primaryCategory ? ` · ${t.primaryCategory.name}` : ""}</p>
        </div>
        {t.depth === "deep" && <span title="In-depth editorial entry" className="text-accent"><BookOpenText className="h-4 w-4" aria-hidden /><span className="sr-only">In-depth entry</span></span>}
      </div>
      <p className="mt-3 line-clamp-3 text-sm leading-relaxed text-fg-2">{blurb ?? t.summary}</p>
      <div className="mt-auto flex flex-wrap items-center gap-1.5 pt-3">
        <Badge tone={t.sourceModel === "open-source" ? "ok" : "neutral"}>{t.licenseSpdx ?? label(t.sourceModel)}</Badge>
        {t.pricingModel.slice(0, 2).map((p) => <Badge key={p}>{label(p)}</Badge>)}
        {t.executionModes.includes("local") && <Badge tone="info">Local</Badge>}
        {t.executionModes.includes("self-hosted") && <Badge tone="info">Self-hosted</Badge>}
        {t.productStatus !== "active" && <Badge tone={t.productStatus === "unknown" ? "warn" : "bad"}>{label(t.productStatus)}</Badge>}
        <span className="ml-auto inline-flex items-center gap-1 text-[11px] text-fg-3" title={t.linkState === "ok" ? `Links verified ${fmtDate(t.checkedAt)}` : label(t.linkState)}>
          <ShieldCheck className={`h-3.5 w-3.5 ${t.linkState === "ok" ? "text-ok" : t.linkState === "broken" ? "text-bad" : "text-fg-3"}`} aria-hidden />{t.linkState === "ok" ? fmtDate(t.checkedAt) : label(t.linkState)}
        </span>
      </div>
    </article>
  );
}