import { ArrowDownTrayIcon, ClipboardIcon } from "@heroicons/react/24/outline";
import axios from "axios";
import { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import { toast } from "react-toastify";
import { Ji } from "../type/JiType";

function Immersion() {
  const { id } = useParams();
  const [ji, setJi] = useState<Ji>();

  const copyText = (copy: string) => {
    navigator.clipboard.writeText(copy);
    toast.success("Copied!", {
      draggable: true,
      theme: localStorage.getItem("theme") || "dark",
    });
  };

  useEffect(() => {
    axios.get(`/api/ji/${id}`).then((res) => {
      setJi(res.data);
    });
  }, [id]);

  return (
    <>
      {ji && (
        <>
          <h1 className="text-3xl font-bold mb-2 ms-10">{ji.name}</h1>
          <div className="px-6">
            <div className="flex flex-col lg:flex-row">
              <div className="lg:w-1/3 px-4">
                <div className="bg-base-200 p-6 rounded-lg shadow-md mt-4">
                  <h2 className="text-2xl font-semibold text-blue-600 mb-2">
                    {ji.name} - Information
                  </h2>
                  <ul className="space-y-4">
                    <li>{ji.description}</li>
                    <li className="flex justify-between">
                      <span>Description:</span>
                      <span className="font-medium">{ji.description}</span>
                    </li>
                    <li className="flex justify-between">
                      <span>Tools Used:</span>
                      <span className="font-medium">Python, SSH, Vim</span>
                    </li>
                    <li className="flex justify-between">
                      <span>Difficulty:</span>
                      <span className="font-medium">Beginner</span>
                    </li>
                    <li className="flex justify-between">
                      <span>Date:</span>
                      <span className="font-medium">{ji.date}</span>
                    </li>
                  </ul>
                </div>
                <div className="bg-base-200 p-6 rounded-lg shadow-md mt-6">
                  <h2 className="text-2xl font-semibold text-blue-600 mb-2">
                    Resources
                  </h2>
                  <ul className="space-y-2">
                    <li className="flex justify-between align-middle items-center">
                      <span>SSH:</span>
                      <div
                        className="flex gap-2 items-center"
                        onClick={() => copyText(ji.ssh)}
                      >
                        <span className="font-medium">{ji.ssh}</span>
                        <div className="h-8 w-8 hover:bg-base-100 align-middle cursor-pointer flex items-center justify-center rounded">
                          <ClipboardIcon className="size-6" />
                        </div>
                      </div>
                    </li>
                    <li className="flex justify-between align-middle items-center">
                      <span>Port:</span>
                      <div
                        className="flex gap-2 items-center"
                        onClick={() => copyText(ji.port)}
                      >
                        <span className="font-medium">{ji.port}</span>
                        <div className="h-8 w-8 hover:bg-base-100 align-middle cursor-pointer flex items-center justify-center rounded">
                          <ClipboardIcon className="size-6" />
                        </div>
                      </div>
                    </li>
                    <li className="flex justify-between align-middle items-center">
                      <span>Password:</span>
                      <div
                        className="flex gap-2 items-center"
                        onClick={() => copyText(ji.pwd)}
                      >
                        <span className="font-normal">{ji.pwd}</span>
                        <div className="h-8 w-8 hover:bg-base-100 align-middle cursor-pointer flex items-center justify-center rounded">
                          <ClipboardIcon className="size-6" />
                        </div>
                      </div>
                    </li>
                  </ul>
                </div>
                <a
                  href={ji.pdfLink}
                  target="_blank"
                  className="card w-full bg-base-200 shadow-md hover:shadow-lg transition-shadow rounded-lg mt-6"
                >
                  <div className="card-body flex-row justify-between items-center">
                    <div>
                      <div className="card-title text-lg font-bold">
                        Subject
                      </div>
                      <p className="text-base-content">Download</p>
                    </div>
                    <ArrowDownTrayIcon className="size-6" />
                  </div>
                </a>
              </div>
            </div>
          </div>
        </>
      )}
    </>
  );
}

export default Immersion;