"use client";
import Image from "next/image";
import avatarImg1 from "@/assets/images/avatars/1.svg";
import Types from "../../Types";
import Sidebar from "@/components/Sidebar";
import { motion } from "motion/react";
import Loader from "@/components/Loader";
import { useEffect, useState } from "react";

export default function DashboardChat() {
  const [state, setState] = useState<number>(1);

  useEffect(() => {
    setTimeout(() => {
      setState(2);

      setTimeout(() => {
        setState(3);
      }, 2000);
    }, 3000);
  }, []);

  return (
    <div className="p-2.5 h-[100svh]">
      <main className="h-full flex">
        <Sidebar />

        <div
          className="flex-1 h-[calc(100svh-20px)] pt-10 pb-5 bg-[#121A15] rounded-xl flex flex-col justify-between items-center"
          style={{
            backgroundImage: `url("/images/body-bg.png")`,
            backgroundSize: "cover",
            backgroundPosition: "center",
          }}
        >
          <div className="hide-scrollbar flex-1 w-full max-w-[780px] pb-10 space-y-12 overflow-y-auto">
            <motion.p
              initial={{ y: -25, opacity: 0 }}
              whileInView={{ y: 0, opacity: 1 }}
              viewport={{ once: true }}
              transition={{ duration: 0.25, delay: 0.2 }}
              className="text-lg font-medium text-center text-white"
            >
              Title of the Chat comes in this section
            </motion.p>

            <motion.p
              initial={{ y: -25, opacity: 0 }}
              whileInView={{ y: 0, opacity: 1 }}
              viewport={{ once: true }}
              transition={{ duration: 0.25, delay: 0.4 }}
              className="ml-auto max-w-[500px] p-3 border border-white/10 bg-white/10 rounded-lg text-white"
            >
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
              enim ad minim veniam, quis nostrud exercitation ullamco laboris
              nisi ut aliquip ex ea commodo consequat.
            </motion.p>

            <Loader state={state} />

            {state === 3 && (
              <motion.div
                initial={{ y: -25, opacity: 0 }}
                whileInView={{ y: 0, opacity: 1 }}
                viewport={{ once: true }}
                transition={{ duration: 0.25, delay: 0.6 }}
                className="flex items-start gap-5"
              >
                <Image src={avatarImg1} alt="" className="w-[40px]" />

                <div className="space-y-3">
                  <div className="w-full p-5 border border-white/10 bg-white/10 rounded-lg flex flex-col items-center">
                    <svg
                      width="58"
                      height="63"
                      viewBox="0 0 58 63"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M24.2025 2.67768C27.1843 1.0134 30.8157 1.0134 33.7975 2.67768L52.1725 12.9335C55.2881 14.6724 57.2188 17.9611 57.2188 21.529V41.471C57.2188 45.0389 55.2881 48.3276 52.1725 50.0665L33.7975 60.3223C30.8157 61.9866 27.1843 61.9866 24.2025 60.3223L5.82749 50.0665C2.71194 48.3276 0.78125 45.0389 0.78125 41.471V21.529C0.78125 17.9611 2.71194 14.6724 5.82749 12.9335L24.2025 2.67768Z"
                        fill="#FF002E"
                      />
                      <path
                        d="M24.2025 2.67768C27.1843 1.0134 30.8157 1.0134 33.7975 2.67768L52.1725 12.9335C55.2881 14.6724 57.2188 17.9611 57.2188 21.529V41.471C57.2188 45.0389 55.2881 48.3276 52.1725 50.0665L33.7975 60.3223C30.8157 61.9866 27.1843 61.9866 24.2025 60.3223L5.82749 50.0665C2.71194 48.3276 0.78125 45.0389 0.78125 41.471V21.529C0.78125 17.9611 2.71194 14.6724 5.82749 12.9335L24.2025 2.67768Z"
                        fill="url(#paint0_linear_72_1722)"
                        fillOpacity="0.2"
                      />
                      <path
                        d="M25.162 4.39679C27.5475 3.06536 30.4525 3.06536 32.838 4.39679L51.213 14.6526C53.7054 16.0437 55.25 18.6747 55.25 21.529V41.471C55.25 44.3253 53.7054 46.9563 51.213 48.3474L32.838 58.6032C30.4525 59.9346 27.5475 59.9346 25.162 58.6032L6.78699 48.3474C4.29455 46.9563 2.75 44.3253 2.75 41.471V21.529C2.75 18.6747 4.29455 16.0437 6.78699 14.6526L25.162 4.39679Z"
                        stroke="url(#paint1_linear_72_1722)"
                        strokeOpacity="0.75"
                        strokeWidth="3.9375"
                      />
                      <path
                        d="M36.75 24.5L21.75 39.5M21.75 24.5L36.75 39.5"
                        stroke="white"
                        strokeWidth="3"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                      />
                      <defs>
                        <linearGradient
                          id="paint0_linear_72_1722"
                          x1="29"
                          y1="0"
                          x2="29"
                          y2="63"
                          gradientUnits="userSpaceOnUse"
                        >
                          <stop stopColor="white" stopOpacity="0" />
                          <stop offset="1" stopColor="white" />
                        </linearGradient>
                        <linearGradient
                          id="paint1_linear_72_1722"
                          x1="29"
                          y1="0"
                          x2="29"
                          y2="63"
                          gradientUnits="userSpaceOnUse"
                        >
                          <stop stopColor="#FF002E" />
                          <stop offset="1" stopColor="#7C0016" />
                        </linearGradient>
                      </defs>
                    </svg>

                    <h4 className="mt-3 mb-2 text-lg font-semibold text-center text-white">
                      Transactions Failed
                    </h4>

                    <div className="mb-3 w-full h-px bg-white/10"></div>

                    <button className="w-full py-1 px-4 border border-white/10 bg-white/10 hover:bg-white rounded-md flex justify-center items-center text-base font-medium text-white hover:text-[#212121] duration-200">
                      Retry
                    </button>
                  </div>
                </div>
              </motion.div>
            )}
          </div>

          <motion.div
            initial={{ y: -25, opacity: 0 }}
            whileInView={{ y: 0, opacity: 1 }}
            viewport={{ once: true }}
            transition={{ duration: 0.25, delay: 0.8 }}
            className="w-full max-w-[780px] space-y-2"
          >
            <div className="w-full flex justify-between items-center">
              <Types />

              <button className="py-1.5 px-2 border border-white/10 bg-[#121A15] rounded-xl flex items-center gap-1.5 text-base font-medium text-white">
                <svg
                  width="18"
                  height="18"
                  viewBox="0 0 18 18"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M9 10.125V5.625M6.75 7.875H11.25M5.25 13.5V15.2516C5.25 15.6513 5.25 15.8511 5.33192 15.9537C5.40317 16.043 5.5112 16.0949 5.6254 16.0948C5.75672 16.0946 5.91275 15.9698 6.22482 15.7201L8.0139 14.2888C8.37937 13.9965 8.56215 13.8503 8.76562 13.7464C8.94615 13.6541 9.1383 13.5867 9.3369 13.546C9.56077 13.5 9.79477 13.5 10.2628 13.5H12.15C13.4102 13.5 14.0401 13.5 14.5215 13.2548C14.9449 13.0391 15.2891 12.6949 15.5048 12.2715C15.75 11.7901 15.75 11.1601 15.75 9.9V5.85C15.75 4.58988 15.75 3.95982 15.5048 3.47852C15.2891 3.05516 14.9449 2.71095 14.5215 2.49524C14.0401 2.25 13.4102 2.25 12.15 2.25H5.85C4.58988 2.25 3.95982 2.25 3.47852 2.49524C3.05516 2.71095 2.71095 3.05516 2.49524 3.47852C2.25 3.95982 2.25 4.58988 2.25 5.85V10.5C2.25 11.1975 2.25 11.5462 2.32667 11.8324C2.53472 12.6088 3.1412 13.2153 3.91765 13.4234C4.20378 13.5 4.55252 13.5 5.25 13.5Z"
                    stroke="white"
                    strokeWidth="1.5"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                </svg>
                New Chat
              </button>
            </div>

            <div className="relative flex">
              <textarea
                placeholder="Ask me anything..."
                className="w-full h-[66px] p-5 resize-none outline-none border border-white/10 focus:border-[#09C04C] bg-[#121A15] rounded-2xl text-base text-white placeholder:text-white/75 duration-200"
              ></textarea>

              <div className="absolute top-1/2 right-0 -translate-y-1/2 w-fit px-5 flex justify-end">
                <button className="flex">
                  <svg
                    width="32"
                    height="32"
                    viewBox="0 0 32 32"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <rect width="32" height="32" rx="16" fill="#09C04C" />
                    <path
                      d="M16 24V8M16 8L10 14M16 8L22 14"
                      stroke="black"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    />
                  </svg>
                </button>
              </div>
            </div>
          </motion.div>
        </div>
      </main>

      <div className="absolute -z-10 -top-1/3 -left-[180px] w-[750px] h-[750px] bg-[#6B6700] blur-[150px] rounded-full"></div>
    </div>
  );
}
