nexus/ui/src/components/SkillCard.tsx

import { Check, Download, RotateCcw, Star } from "lucide-react";
import { Link } from "@/lib/router";
import { cn } from "@/lib/utils";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
import type { SkillListItem } from "@/api/skillRegistry";

// TODO: hasUpdate detection requires backend enhancement — SkillListItem needs
// a hasUpdate field or the UI needs to compare activeVersionId against latest version.
// For now, hasUpdate is always passed as false from parent components.

export interface SkillCardProps {
  skill: SkillListItem;
  isInstalled?: boolean;
  hasUpdate?: boolean;
  onInstall?: () => void;
  onUpdate?: () => void;
  onRollback?: () => void;
  onUninstall?: () => void;
  isLoading?: boolean;
  isReadOnly?: boolean;
  source?: "managed" | "native";
  className?: string;
  compatibleAdapters?: string[];
}

export function SkillCard({
  skill,
  isInstalled = false,
  hasUpdate = false,
  onInstall,
  onUpdate,
  onRollback,
  onUninstall,
  isLoading = false,
  isReadOnly = false,
  source,
  className,
  compatibleAdapters,
}: SkillCardProps) {
  return (
    <Card className={cn("flex flex-col", className)}>
      <CardContent className="p-4 flex flex-col gap-2">

        {/* Row 1: name link (primary visual anchor) + update badge + native badge */}
        <div className="flex items-start justify-between gap-2">
          <Link
            to={`/skills/detail/${encodeURIComponent(skill.id)}`}
            className="text-sm font-medium hover:underline"
          >
            {skill.name}
          </Link>
          <div className="flex shrink-0 gap-1">
            {(isReadOnly || source === "native") && (
              <Badge
                variant="secondary"
                className="text-xs text-muted-foreground"
                aria-label="Native skill"
              >
                Native
              </Badge>
            )}
            {hasUpdate && !isReadOnly && (
              <Badge
                variant="outline"
                className="text-xs text-amber-600 border-amber-500"
                aria-label="Update available"
              >
                Update
              </Badge>
            )}
          </div>
        </div>

        {/* Row 2: description (2-line clamp) */}
        {skill.description && (
          <p className="text-xs text-muted-foreground line-clamp-2">{skill.description}</p>
        )}

        {/* Row 2b: compatible adapters (Browse/Trending only) */}
        {compatibleAdapters && compatibleAdapters.length > 0 && (
          <p className="text-[10px] text-muted-foreground mt-1">
            Works with: {compatibleAdapters.join(", ")}
          </p>
        )}

        {/* Row 3: source badge + rating + actions (push right) */}
        <div className="flex items-center gap-2 mt-auto pt-2">
          <Badge variant="secondary" className="text-xs">{skill.sourceId}</Badge>
          {skill.averageRating != null && (
            <span className="flex items-center gap-1 text-xs text-muted-foreground">
              <Star className="h-3 w-3 fill-amber-400 text-amber-400" />
              {skill.averageRating.toFixed(1)}
            </span>
          )}
          <div className="ml-auto flex gap-1">
            {!isReadOnly && isInstalled && onRollback && (
              <Tooltip>
                <TooltipTrigger asChild>
                  <Button
                    size="icon-sm"
                    variant="ghost"
                    onClick={onRollback}
                    disabled={isLoading}
                  >
                    <RotateCcw className="h-3.5 w-3.5" />
                  </Button>
                </TooltipTrigger>
                <TooltipContent>Rollback</TooltipContent>
              </Tooltip>
            )}
            {!isReadOnly && !isInstalled && (
              <Button
                size="sm"
                variant="outline"
                onClick={onInstall}
                disabled={isLoading}
              >
                <Download className="h-3.5 w-3.5 mr-1" />
                {isLoading ? "Installing\u2026" : "Install skill"}
              </Button>
            )}
            {!isReadOnly && isInstalled && hasUpdate && (
              <Button
                size="sm"
                variant="outline"
                onClick={onUpdate}
                disabled={isLoading}
              >
                {isLoading ? "Updating\u2026" : "Update skill"}
              </Button>
            )}
            {isInstalled && !hasUpdate && (
              <Button
                size="icon-sm"
                variant="ghost"
                disabled
                title="Installed"
              >
                <Check className="h-3.5 w-3.5 text-muted-foreground" />
              </Button>
            )}
          </div>
        </div>

      </CardContent>
    </Card>
  );
}