"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";
import Link from "next/link";

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="57"
                      height="63"
                      viewBox="0 0 57 63"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M23.9525 2.67768C26.9343 1.0134 30.5657 1.0134 33.5475 2.67768L51.9225 12.9335C55.0381 14.6724 56.9688 17.9611 56.9688 21.529V41.471C56.9688 45.0389 55.0381 48.3276 51.9225 50.0665L33.5475 60.3223C30.5657 61.9866 26.9343 61.9866 23.9525 60.3223L5.57749 50.0665C2.46194 48.3276 0.53125 45.0389 0.53125 41.471V21.529C0.53125 17.9611 2.46194 14.6724 5.57749 12.9335L23.9525 2.67768Z"
                        fill="#00C153"
                      />
                      <path
                        d="M23.9525 2.67768C26.9343 1.0134 30.5657 1.0134 33.5475 2.67768L51.9225 12.9335C55.0381 14.6724 56.9688 17.9611 56.9688 21.529V41.471C56.9688 45.0389 55.0381 48.3276 51.9225 50.0665L33.5475 60.3223C30.5657 61.9866 26.9343 61.9866 23.9525 60.3223L5.57749 50.0665C2.46194 48.3276 0.53125 45.0389 0.53125 41.471V21.529C0.53125 17.9611 2.46194 14.6724 5.57749 12.9335L23.9525 2.67768Z"
                        fill="url(#paint0_linear_72_1573)"
                        fillOpacity="0.2"
                      />
                      <path
                        d="M24.912 4.39679C27.2975 3.06536 30.2025 3.06536 32.588 4.39679L50.963 14.6526C53.4554 16.0437 55 18.6747 55 21.529V41.471C55 44.3253 53.4554 46.9563 50.963 48.3474L32.588 58.6032C30.2025 59.9346 27.2975 59.9346 24.912 58.6032L6.53699 48.3474C4.04455 46.9563 2.5 44.3253 2.5 41.471V21.529C2.5 18.6747 4.04455 16.0437 6.53699 14.6526L24.912 4.39679Z"
                        stroke="url(#paint1_linear_72_1573)"
                        strokeOpacity="0.75"
                        strokeWidth="3.9375"
                      />
                      <path
                        d="M38.375 24.2812L25.1406 37.5156L19.125 31.5"
                        stroke="white"
                        strokeWidth="2.95312"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                      />
                      <defs>
                        <linearGradient
                          id="paint0_linear_72_1573"
                          x1="28.75"
                          y1="0"
                          x2="28.75"
                          y2="63"
                          gradientUnits="userSpaceOnUse"
                        >
                          <stop stopColor="white" stopOpacity="0" />
                          <stop offset="1" stopColor="white" />
                        </linearGradient>
                        <linearGradient
                          id="paint1_linear_72_1573"
                          x1="28.75"
                          y1="0"
                          x2="28.75"
                          y2="63"
                          gradientUnits="userSpaceOnUse"
                        >
                          <stop stopColor="#00C153" />
                          <stop offset="1" stopColor="#0BB84A" />
                        </linearGradient>
                      </defs>
                    </svg>

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

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

                    <div className="w-full py-2 px-4 border border-white/10 bg-white/10 rounded-md flex justify-between items-center gap-12">
                      <p className="text-base font-medium text-white">
                        View Txn
                      </p>

                      <p className="flex items-center gap-2 text-base font-medium text-white">
                        https://bscscan.com/{" "}
                        <Link href={"https://bscscan.com/"} target="_blank">
                          <svg
                            width="19"
                            height="18"
                            viewBox="0 0 19 18"
                            fill="none"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M16.25 6.75001V2.25001M16.25 2.25001H11.75M16.25 2.25001L9.5 9M8 2.25H6.35C5.08988 2.25 4.45982 2.25 3.97852 2.49524C3.55516 2.71095 3.21095 3.05516 2.99524 3.47852C2.75 3.95982 2.75 4.58988 2.75 5.85V12.15C2.75 13.4102 2.75 14.0401 2.99524 14.5215C3.21095 14.9449 3.55516 15.2891 3.97852 15.5048C4.45982 15.75 5.08988 15.75 6.35 15.75H12.65C13.9102 15.75 14.5401 15.75 15.0215 15.5048C15.4449 15.2891 15.7891 14.9449 16.0048 14.5215C16.25 14.0401 16.25 13.4102 16.25 12.15V10.5"
                              stroke="white"
                              strokeWidth="1.5"
                              strokeLinecap="round"
                              strokeLinejoin="round"
                            />
                          </svg>
                        </Link>
                      </p>
                    </div>
                  </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>
  );
}