"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="max-w-[450px] space-y-3">
                  <div className="w-full p-5 border border-white/10 bg-white/10 rounded-lg">
                    <div className="mb-3.5 pb-2 border-b border-white/10 flex justify-between items-center">
                      <h4 className="text-lg font-semibold text-white">
                        Approve Stake
                      </h4>
                    </div>

                    <div className="mb-4 w-full p-3 border border-white/25 bg-white/10 hover:bg-white/15 rounded-lg flex justify-between items-center cursor-pointer duration-200">
                      <div className="flex items-center gap-2.5">
                        <svg
                          width="30"
                          height="30"
                          viewBox="0 0 30 30"
                          fill="none"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            fillRule="evenodd"
                            clipRule="evenodd"
                            d="M15 0C23.2849 0 30 6.71515 30 15C30 23.2849 23.2849 30 15 30C6.71515 30 0 23.2849 0 15C0 6.71515 6.71515 0 15 0Z"
                            fill="#F0B90B"
                          />
                          <path
                            d="M8.24399 15L8.25481 18.9664L11.625 20.9495V23.2717L6.28245 20.1382V13.8402L8.24399 15ZM8.24399 11.0337V13.345L6.28125 12.1839V9.87261L8.24399 8.71155L10.2164 9.87261L8.24399 11.0337ZM13.0325 9.87261L14.9952 8.71155L16.9676 9.87261L14.9952 11.0337L13.0325 9.87261Z"
                            fill="white"
                          />
                          <path
                            d="M9.66211 18.1443V15.8221L11.6249 16.9832V19.2945L9.66211 18.1443ZM13.0323 21.7813L14.995 22.9423L16.9674 21.7813V24.0926L14.995 25.2536L13.0323 24.0926V21.7813ZM19.7823 9.87261L21.7451 8.71155L23.7174 9.87261V12.1839L21.7451 13.345V11.0337L19.7823 9.87261ZM21.7451 18.9664L21.7559 15L23.7186 13.839V20.137L18.3761 23.2705V20.9483L21.7451 18.9664Z"
                            fill="white"
                          />
                          <path
                            d="M20.3377 18.1443L18.375 19.2945V16.9832L20.3377 15.8221V18.1443Z"
                            fill="white"
                          />
                          <path
                            d="M20.3376 11.8558L20.3484 14.178L16.9686 16.1611V20.1371L15.0059 21.2873L13.0431 20.1371V16.1611L9.66331 14.178V11.8558L11.6345 10.6948L14.9938 12.6876L18.3737 10.6948L20.346 11.8558H20.3376ZM9.66211 7.8907L14.995 4.74646L20.3376 7.8907L18.3749 9.05175L14.995 7.05896L11.6249 9.05175L9.66211 7.8907Z"
                            fill="white"
                          />
                        </svg>

                        <div>
                          <p className="font-medium text-white">BNB</p>

                          <p className="text-sm font-medium text-white/50">
                            BNB
                          </p>
                        </div>
                      </div>

                      <div>
                        <p className="font-medium text-white">BNB</p>

                        <p className="text-sm font-medium text-white/50">
                          600 USD
                        </p>
                      </div>
                    </div>

                    <p className="mb-4 text-sm text-white/75">
                      Note : any required text for staking or any information
                      can appear in this section right here
                    </p>

                    <div className="grid grid-cols-2 gap-4">
                      <button className="py-2 px-6 border border-[#FF002E] hover:bg-[#FF002E]/10 rounded-lg flex justify-center items-center gap-2 font-dm text-base font-semibold text-white duration-200">
                        <svg
                          width="18"
                          height="18"
                          viewBox="0 0 18 18"
                          fill="none"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M13.125 4.875L4.875 13.125M4.875 4.875L13.125 13.125"
                            stroke="white"
                            strokeWidth="1.375"
                            strokeLinecap="round"
                            strokeLinejoin="round"
                          />
                        </svg>
                        Deny
                      </button>

                      <button className="btn-bg py-2 px-6 rounded-lg flex justify-center items-center gap-2 font-dm text-base font-semibold text-white duration-200">
                        <svg
                          width="18"
                          height="18"
                          viewBox="0 0 18 18"
                          fill="none"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M15.875 9C15.875 5.20304 12.7969 2.125 9 2.125C5.20304 2.125 2.125 5.20304 2.125 9C2.125 12.7969 5.20304 15.875 9 15.875C12.7969 15.875 15.875 12.7969 15.875 9Z"
                            stroke="white"
                            strokeWidth="1.03125"
                          />
                          <path
                            d="M6.25 9.34375L7.96875 11.0625L11.75 6.9375"
                            stroke="white"
                            strokeWidth="1.03125"
                            strokeLinecap="round"
                            strokeLinejoin="round"
                          />
                        </svg>
                        Approve
                      </button>
                    </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>
  );
}
