import Link from "next/link";
import { AgentAvatar } from "@/components/AgentAvatar";
import { Badge } from "@/components/ui/badge";
import { Card } from "@/components/ui/card";
import { HoverLink } from "@/components/ui/hover-link";
import ModelBadge from "@/components/ui/model-badge";
import { cn } from "@/lib/utils";
import { Agent, agentPath } from "@/types";
import { AgentToolIcon } from "@/utils/agentToolIcons";
import { AgentToolIcons } from "./AgentToolIcons";

type AgentCardProps = {
  agent: Agent & { active_task_count?: number; tool_icons?: AgentToolIcon[] };
};

export default function AgentCard({ agent }: AgentCardProps) {
  return (
    <Link href={agentPath(agent)}>
      <div className="block h-full">
        <Card
          className={cn(
            "group relative flex h-full cursor-pointer flex-col justify-between overflow-hidden p-0 transition-all duration-300",
            "border border-zinc-200 dark:border-zinc-800",
            "bg-white dark:bg-zinc-900",
            "hover:shadow-lg hover:shadow-zinc-200/50 dark:hover:shadow-zinc-950/50",
            "hover:border-primary/20 dark:hover:border-primary/40",
            "hover:bg-white dark:hover:bg-zinc-800",
            "hover:-translate-y-0.5",
            "active:scale-[0.99]"
          )}
        >
          <div
            className="pointer-events-none absolute inset-0 opacity-[0.015] dark:opacity-[0.03]"
            style={{
              backgroundImage: `repeating-linear-gradient(
                -45deg,
                currentColor,
                currentColor 1px,
                transparent 1px,
                transparent 10px
              )`,
            }}
          />

          <div className="relative z-10 flex h-full flex-col justify-between">
            <div className="flex flex-col gap-2 px-[16px] py-[16px] md:px-[20px] lg:px-[24px]">
              <div className="flex items-start justify-between gap-3">
                <div className="min-w-0 flex-1 pt-0.5">
                  <div className="flex items-center gap-2">
                    <AgentAvatar agent={agent as any} size="sm" />
                    <h3 className="truncate text-[15px] font-medium leading-tight tracking-tight text-zinc-900 transition-colors duration-300 group-hover:text-primary dark:text-zinc-100 dark:group-hover:text-zinc-50">
                      {agent.name}
                    </h3>
                    {agent.active_task_count != null && agent.active_task_count > 0 && (
                      <Badge variant="blue" className="shrink-0 text-xs">
                        {agent.active_task_count}
                      </Badge>
                    )}
                  </div>
                  <div className="mt-1 flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
                    <ModelBadge
                      providerName={agent.model_info?.provider_name}
                      iconUrl={agent.model_info?.provider_icon_url}
                      modelDisplayName={agent.model_info?.model_display_name}
                      configName={agent.model_info?.config_name}
                    />
                    {agent.a2ui_enabled && (
                      <span className="rounded-full bg-blue-100 px-2 py-0.5 text-[10px] font-medium text-blue-700 dark:bg-blue-900/40 dark:text-blue-300">
                        A2UI
                      </span>
                    )}
                  </div>
                </div>
              </div>
            </div>

            <div
              className={cn(
                "relative overflow-hidden border-t",
                "border-zinc-200/60 dark:border-zinc-700/60",
                "pl-[16px] pr-[8px] py-[10px] md:pl-[20px] md:pr-[10px] lg:pl-[24px] lg:pr-[10px]",
                "transition-colors duration-500"
              )}
            >
              <div className="pointer-events-none absolute inset-0 bg-white opacity-0 transition-opacity duration-300 group-hover:opacity-100 dark:bg-zinc-800" />
              <div className="relative z-10 flex items-center justify-between">
                {agent.tool_icons && agent.tool_icons.length > 0 ? (
                  <AgentToolIcons maxDisplay={5} tools={agent.tool_icons} />
                ) : (
                  <span className="text-xs text-muted-foreground">No tools</span>
                )}
                <HoverLink text="View agent" />
              </div>
            </div>
          </div>
        </Card>
      </div>
    </Link>
  );
}
