import React from "react";

import Link from "next/link";
import Image from "next/image";

import { motion } from "framer-motion";

import { Play, Share, Share2 } from "lucide-react";

import { formatDate } from "@/lib/utils";

import { Tables } from "@/utils/supabase/database.types";

import { Badge } from "@/components/ui/badge";
import { Button, buttonVariants } from "@/components/ui/button";
import { toast } from "sonner";

const ease = [0.16, 1, 0.3, 1];

type AgentCardProps = { data: Tables<"agents">; idx: number };

export default function AgentCard(props: AgentCardProps) {
  const {
    id,
    image_url,
    name,
    description,
    model_type,
    created_at,
    conversation,
    last_conv,
  } = props.data;

  return (
    <motion.li
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{
        duration: 0.8,
        delay: props.idx * 0.2,
        ease,
      }}
      className="flex flex-col rounded-lg p-4 border border-accent-foreground hover:shadow-sm transition-shadow duration-200"
    >
      <figure className="overflow-hidden relative rounded-lg object-cover border mb-3 w-full h-[200px]">
        <Image
          className="w-full object-cover"
          src={image_url ? image_url : "/placeholder.png"}
          fill={true}
          alt={name}
        />
        <div className="h-full w-full absolute top-0 left-0" />
      </figure>
      <div className="flex items-center justify-between">
        <Badge className="mb-2" variant={"secondary"}>
          {conversation} chats
        </Badge>
        <p className="mb-2 text-primary">
          <time dateTime={created_at} className="text-xs">
            Last Active:{" "}
            <span className="font-bold">
              {last_conv ? formatDate(last_conv) : "-"}
            </span>
          </time>
        </p>
      </div>
      <h3 className="text-xl font-semibold mb-2 truncate">{name}</h3>
      <p className="text-sm text-foreground line-clamp-3 mb-4">{description}</p>
      <div className="mt-auto grid sm:grid-cols-2 gap-2">
        <Button
          variant={"outline"}
          onClick={() => {
            navigator.clipboard.writeText(`https://beactio.ai/agents/${id}`);
            // navigator.clipboard.writeText(`http://localhost:3000/agents/${id}`);
            toast.info("Copied to clipboard!");
          }}
        >
          <Share2 className="h-4 w-4 mr-2" />
          <span>Share</span>
        </Button>
        <Link
          href={`/agents/${id}`}
          target="blank"
          className={buttonVariants({ variant: "default" })}
        >
          <Play className="h-4 w-4 mr-2" />
          <span>Try it</span>
        </Link>
      </div>
    </motion.li>
  );
}
