"use client";

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

import { useQuery } from "@tanstack/react-query";

import { Copy, Play, Twitter } from "lucide-react";

import PostgrestError from "@/lib/config";

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

import { toast } from "sonner";

import { Separator } from "@/components/ui/separator";
import { Button, buttonVariants } from "@/components/ui/button";

import Spinner from "@/components/spinner";
import { Card } from "@/components/ui/card";

type ResponseAgentCardProps = {
  agentResponseId: string;
};

export default function ResponseAgentCard({
  agentResponseId,
}: ResponseAgentCardProps) {
  const {
    data: responseData,
    isLoading,
    error,
  } = useQuery({
    retry: 0,
    queryKey: ["agent-responses", agentResponseId],
    queryFn: async ({ signal }) => {
      const supabase = createClient();

      const response = await supabase
        .from("agent_responses")
        .select(
          `
            *,
            agents (
                agent_id:id,
                name,
                image_url
            )
        `
        )
        .eq("id", agentResponseId)
        .limit(1)
        .single();

      if (response.error) throw new PostgrestError(response.error);

      return response;
    },
  });

  if (error) return <p className="text-center">{error.message}</p>;

  if (isLoading || !responseData || !responseData.data)
    return <Spinner className="mx-auto" />;

  return <CardContent agentResponse={responseData.data} />;
}

const CardContent = ({
  agentResponse,
}: {
  agentResponse: Tables<"agent_responses"> & {
    agents: {
      agent_id: number;
      name: string;
      image_url: string;
    };
  };
}) => {
  const { id, agent_id, question, response, agents } = agentResponse;

  return (
    <Card className="relative z-20 bg-white p-6 border-primary rounded-none">
      <div className="flex items-center gap-3 mb-4">
        <figure className="relative h-16 w-16 rounded-full overflow-hidden">
          <Image
            src={agents.image_url}
            fill={true}
            alt="test"
            className="object-cover"
          />
        </figure>
        <div>
          <h1 className="text-primary">{agents.name}</h1>
          <p className="text-gray-400 text-sm">{id}</p>
        </div>
      </div>
      <Separator className="mb-3" />
      <h2 className="text-sm font-bold text-primary mb-2">Question: </h2>
      <p className="text-gray-500 text-sm mb-3">{question}</p>
      <h2 className="text-sm font-bold text-primary mb-2">Response: </h2>
      <p className="text-gray-500 text-sm mb-3">{response}</p>
      <div className="mt-24 grid grid-cols-3 gap-3">
        <Link
          href={encodeURI(`https://x.com/intent/post?text=${response}`)}
          target="blank"
          className={buttonVariants({ variant: "outline" })}
        >
          <svg
            width="16"
            height="16"
            viewBox="0 0 25 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
            className="mr-2"
          >
            <path
              d="M19.5582 0H23.2208L15.2208 10.1867L24.6666 24H17.2449L11.4618 15.6267L4.8112 24H1.14855L9.72687 13.12L0.666626 0H8.28108L13.5341 7.68L19.5582 0ZM18.257 21.5467H20.2811L7.17265 2.29333H4.95578L18.257 21.5467Z"
              fill="#222222"
            />
          </svg>
          Share on Twitter
        </Link>
        <Link
          href={`/agents/${agent_id}`}
          className={buttonVariants({ variant: "default" })}
        >
          <svg
            width="16"
            height="16"
            viewBox="0 0 17 20"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
            className="mr-2"
          >
            <path
              d="M16.5 10.0005C16.5006 10.2551 16.4353 10.5056 16.3105 10.7275C16.1856 10.9495 16.0055 11.1353 15.7875 11.267L2.28 19.5302C2.05227 19.6696 1.79144 19.7457 1.52445 19.7507C1.25746 19.7556 0.993989 19.6892 0.76125 19.5583C0.530728 19.4294 0.338696 19.2414 0.204904 19.0137C0.0711107 18.786 0.000385179 18.5268 0 18.2627V1.73828C0.000385179 1.47417 0.0711107 1.21493 0.204904 0.987222C0.338696 0.759511 0.530728 0.571545 0.76125 0.442655C0.993989 0.311732 1.25746 0.245313 1.52445 0.250257C1.79144 0.255201 2.05227 0.33133 2.28 0.470781L15.7875 8.7339C16.0055 8.8656 16.1856 9.05145 16.3105 9.2734C16.4353 9.49534 16.5006 9.74582 16.5 10.0005Z"
              fill="white"
            />
          </svg>
          Ask Another
        </Link>
        <Button
          variant={"outline"}
          onClick={() => {
            navigator.clipboard.writeText(window.location.href);
            toast.info("Copied to clipboard!");
          }}
        >
          <svg
            width="16"
            height="16"
            viewBox="0 0 19 18"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
            className="mr-2"
          >
            <path
              d="M15.3333 3.75V17.25C15.3333 17.4489 15.2542 17.6397 15.1136 17.7803C14.9729 17.921 14.7822 18 14.5833 18H1.08325C0.88434 18 0.693574 17.921 0.552922 17.7803C0.41227 17.6397 0.333252 17.4489 0.333252 17.25V3.75C0.333252 3.55109 0.41227 3.36032 0.552922 3.21967C0.693574 3.07902 0.88434 3 1.08325 3H14.5833C14.7822 3 14.9729 3.07902 15.1136 3.21967C15.2542 3.36032 15.3333 3.55109 15.3333 3.75ZM17.5833 0H4.08325C3.88434 0 3.69357 0.0790178 3.55292 0.21967C3.41227 0.360322 3.33325 0.551088 3.33325 0.75C3.33325 0.948912 3.41227 1.13968 3.55292 1.28033C3.69357 1.42098 3.88434 1.5 4.08325 1.5H16.8333V14.25C16.8333 14.4489 16.9123 14.6397 17.0529 14.7803C17.1936 14.921 17.3843 15 17.5833 15C17.7822 15 17.9729 14.921 18.1136 14.7803C18.2542 14.6397 18.3333 14.4489 18.3333 14.25V0.75C18.3333 0.551088 18.2542 0.360322 18.1136 0.21967C17.9729 0.0790178 17.7822 0 17.5833 0Z"
              fill="#222222"
            />
          </svg>
          Copy Link
        </Button>
      </div>
    </Card>
  );
};
