"use client";
import { useState } from "react";
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";

export default function DashboardChat() {
  const [isOpen, setIsOpen] = useState<boolean>(true);

  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>

            <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">
                <p className="max-w-[660px] 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.
                </p>

                <div className="max-w-[660px] p-5 border border-white/10 bg-white/10 rounded-lg">
                  <div
                    onClick={() => {
                      setIsOpen(!isOpen);
                    }}
                    className="flex justify-between items-center cursor-pointer"
                  >
                    <div className="flex items-center gap-2">
                      <svg
                        width="24"
                        height="24"
                        viewBox="0 0 24 24"
                        fill="none"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M9.5 22H14.5M15 15.3264C17.3649 14.2029 19 11.7924 19 9C19 5.13401 15.866 2 12 2C8.13401 2 5 5.13401 5 9C5 11.7924 6.63505 14.2029 9 15.3264V16C9 16.9319 9 17.3978 9.15224 17.7654C9.35523 18.2554 9.74458 18.6448 10.2346 18.8478C10.6022 19 11.0681 19 12 19C12.9319 19 13.3978 19 13.7654 18.8478C14.2554 18.6448 14.6448 18.2554 14.8478 17.7654C15 17.3978 15 16.9319 15 16V15.3264Z"
                          stroke="white"
                          strokeWidth="2"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                        />
                      </svg>

                      <div>
                        <p className="font-medium text-white">
                          Title of the Dropdown appears in this section
                        </p>
                        <p className="text-xs text-white/50">
                          Collapse Details
                        </p>
                      </div>
                    </div>

                    <button
                      className={`${!isOpen ? "rotate-[180deg]" : ""} flex`}
                    >
                      <svg
                        width="12"
                        height="6"
                        viewBox="0 0 12 6"
                        fill="none"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M1.5 5.25L6 0.75L10.5 5.25"
                          stroke="white"
                          strokeWidth="1.5"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                        />
                      </svg>
                    </button>
                  </div>

                  {isOpen && (
                    <p className="mt-4 text-white">
                      Lorem ipsum odor amet, consectetuer adipiscing elit. Eros
                      platea molestie taciti amet class at dictum est. Conubia
                      pharetra maecenas iaculis dui litora convallis et nostra
                      leo. Pellentesque justo sapien amet rhoncus aliquet
                      torquent. Netus lobortis justo eleifend auctor nunc. Vel
                      ex montes commodo, sodales ex iaculis? Dictum habitant
                      duis nam; ridiculus gravida eleifend montes dignissim nam.{" "}
                      <br />
                      <br />
                      Nam fermentum id sociosqu curae lacinia felis. Nisl ac
                      cursus inceptos suscipit eros. Accumsan class vitae
                      pulvinar suscipit aliquet? Senectus semper feugiat
                      lobortis morbi vitae tempor. Faucibus nibh posuere blandit
                      himenaeos curabitur. Mauris tortor lorem id magnis tellus
                      senectus laoreet. Magnis elit hendrerit litora in faucibus
                      pharetra. Justo dui ultricies commodo tempus, mauris
                      eleifend nascetur. <br />
                      <br />
                      Ligula tempus purus nec congue, tellus hendrerit litora.
                      Nostra morbi natoque massa metus; bibendum tempus
                      malesuada. Fames donec ultricies metus; condimentum
                      feugiat tristique elementum. Nullam maecenas primis
                      bibendum eleifend hac viverra libero. Proin velit montes
                      netus lacus ante ornare porttitor justo. Quam lorem
                      volutpat accumsan, tristique proin at parturient.
                      Condimentum eu risus tincidunt pulvinar consequat natoque.
                      Vulputate sagittis quis ad tempor lobortis ultrices dolor
                      gravida? Tincidunt tempor rhoncus massa fermentum faucibus
                      fermentum nullam pretium. Diam habitant ex maximus odio
                      praesent semper ipsum ex.
                    </p>
                  )}
                </div>

                <div className="flex gap-3">
                  <button className="flex">
                    <svg
                      width="18"
                      height="18"
                      viewBox="0 0 18 18"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <g clipPath="url(#clip0_46_276)">
                        <path
                          d="M3.75 11.25C3.05109 11.25 2.70164 11.25 2.42597 11.1359C2.05844 10.9836 1.76642 10.6915 1.61418 10.324C1.5 10.0483 1.5 9.69893 1.5 9V3.9C1.5 3.05992 1.5 2.63988 1.66349 2.31902C1.8073 2.03677 2.03677 1.8073 2.31902 1.66349C2.63988 1.5 3.05992 1.5 3.9 1.5H9C9.69893 1.5 10.0483 1.5 10.324 1.61418C10.6915 1.76642 10.9836 2.05844 11.1359 2.42597C11.25 2.70164 11.25 3.05109 11.25 3.75M9.15 16.5H14.1C14.9401 16.5 15.3602 16.5 15.681 16.3365C15.9632 16.1927 16.1927 15.9632 16.3365 15.681C16.5 15.3602 16.5 14.9401 16.5 14.1V9.15C16.5 8.30992 16.5 7.88985 16.3365 7.569C16.1927 7.28677 15.9632 7.0573 15.681 6.91349C15.3602 6.75 14.9401 6.75 14.1 6.75H9.15C8.30992 6.75 7.88985 6.75 7.569 6.91349C7.28677 7.0573 7.0573 7.28677 6.91349 7.569C6.75 7.88985 6.75 8.30992 6.75 9.15V14.1C6.75 14.9401 6.75 15.3602 6.91349 15.681C7.0573 15.9632 7.28677 16.1927 7.569 16.3365C7.88985 16.5 8.30992 16.5 9.15 16.5Z"
                          stroke="white"
                          strokeWidth="1.25"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                        />
                      </g>
                      <defs>
                        <clipPath id="clip0_46_276">
                          <rect width="18" height="18" fill="white" />
                        </clipPath>
                      </defs>
                    </svg>
                  </button>

                  <button className="flex">
                    <svg
                      width="18"
                      height="18"
                      viewBox="0 0 18 18"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M6.41002 14.8256C8.20933 15.6239 10.3525 15.5805 12.1877 14.5209C15.2368 12.7605 16.2815 8.86164 14.5211 5.8125L14.3336 5.48773M3.47894 12.1876C1.71853 9.13847 2.76324 5.23958 5.81235 3.47917C7.64758 2.4196 9.79071 2.37625 11.59 3.17452M1.87012 12.2503L3.91915 12.7994L4.46819 10.7503M13.532 7.24936L14.0811 5.20033L16.1301 5.74936"
                        stroke="white"
                        strokeWidth="1.25"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                      />
                    </svg>
                  </button>

                  <button className="flex">
                    <svg
                      width="18"
                      height="18"
                      viewBox="0 0 18 18"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M5.25 16.5V8.25M1.5 9.75V15C1.5 15.8284 2.17157 16.5 3 16.5H13.0697C14.1803 16.5 15.1246 15.6898 15.2935 14.5921L16.1012 9.34215C16.3109 7.97917 15.2564 6.75 13.8774 6.75H11.25C10.8358 6.75 10.5 6.41421 10.5 6V3.34938C10.5 2.32799 9.672 1.5 8.65065 1.5C8.40697 1.5 8.18625 1.64348 8.08733 1.86609L5.44795 7.80458C5.32758 8.07548 5.05899 8.25 4.7626 8.25H3C2.17157 8.25 1.5 8.92155 1.5 9.75Z"
                        stroke="white"
                        strokeWidth="1.25"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                      />
                    </svg>
                  </button>

                  <button className="flex">
                    <svg
                      width="18"
                      height="18"
                      viewBox="0 0 18 18"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M12.7498 1.5V9.75M16.4998 7.35V3.9C16.4998 3.05992 16.4998 2.63988 16.3363 2.31902C16.1925 2.03677 15.9631 1.8073 15.6808 1.66349C15.3599 1.5 14.9399 1.5 14.0998 1.5H6.0883C4.99219 1.5 4.44414 1.5 4.00148 1.70057C3.61134 1.87736 3.27977 2.16181 3.04572 2.52054C2.78017 2.92754 2.69684 3.46923 2.53017 4.55259L2.13786 7.10259C1.91803 8.53148 1.80811 9.24593 2.02015 9.80183C2.20625 10.2898 2.55628 10.6978 3.01024 10.9559C3.52744 11.25 4.2503 11.25 5.696 11.25H6.29979C6.71984 11.25 6.92985 11.25 7.09029 11.3318C7.23141 11.4037 7.34615 11.5183 7.41805 11.6595C7.49983 11.8199 7.49983 12.0299 7.49983 12.45V14.6507C7.49983 15.672 8.32776 16.5 9.34918 16.5C9.59278 16.5 9.81358 16.3565 9.91251 16.1339L12.4331 10.4627C12.5477 10.2047 12.605 10.0757 12.6956 9.98115C12.7757 9.89752 12.8741 9.83363 12.983 9.7944C13.1062 9.75 13.2474 9.75 13.5296 9.75H14.0998C14.9399 9.75 15.3599 9.75 15.6808 9.5865C15.9631 9.44272 16.1925 9.21322 16.3363 8.931C16.4998 8.61015 16.4998 8.19008 16.4998 7.35Z"
                        stroke="white"
                        strokeWidth="1.25"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                      />
                    </svg>
                  </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>
  );
}
