"use client";

import { useRouter } from "next/navigation";
import Image from "next/image";
import { AiAgentAvatar } from "@/features/ai/components/ai-agent-avatar";
import type { AiAgent } from "@/features/ai/types";
import { aiDict } from "@/features/ai/dict";
import { getAgentIconPath } from "@/features/ai/utils/agent-helpers";

type AiAgentCardProps = {
  agent: AiAgent;
};

export function AiAgentCard({ agent }: AiAgentCardProps) {
  const router = useRouter();
  const bgImagePath = getAgentIconPath(agent.details);

  return (
    <button
      type="button"
      onClick={() => router.push(`/panel/ai/chat/${agent.id}`)}
      className="relative flex w-full flex-col gap-3 overflow-hidden rounded-3xl bg-card p-5 text-start shadow-soft-sm transition-transform hover:scale-[1.01] active:scale-[0.99]"
    >
      {bgImagePath ? (
        <div className="pointer-events-none absolute inset-0 select-none">
          <Image
            src={bgImagePath}
            alt=""
            fill
            className="object-cover opacity-[0.08]"
            sizes="(max-width: 768px) 100vw, 720px"
          />
          <div className="absolute inset-0 bg-gradient-to-l from-transparent via-card/95 to-card" />
        </div>
      ) : null}

      <div className="relative z-10 flex items-start gap-3">
        <AiAgentAvatar details={agent.details} />

        <div className="min-w-0 flex-1 space-y-1">
          <div className="flex-1">
            <h2 className="text-base font-bold text-card-foreground">
              {agent.name}
            </h2>
            {agent.description ? (
              <p className="text-sm leading-6 text-muted-foreground">
                {agent.description}
              </p>
            ) : null}
          </div>
          <span className="relative z-10 inline-flex h-10 mt-2 items-center justify-center self-start rounded-2xl bg-primary/10 px-4 text-sm font-semibold text-primary">
            {aiDict.startChat}
          </span>
        </div>
      </div>
    </button>
  );
}