"use client";
import { useState, useEffect } from "react";
import { useParams } from "next/navigation";
import { JobDetailDataType } from "@/types/job";
import { fetchJobDetail } from "@/api/apiService";

const JobDetails = () => {
  const [JobDetail, setJobDetail] = useState<JobDetailDataType | null>(null);
  const [activeTab, setActiveTab] = useState("#info");
  const { slug } = useParams();

  const showTab = (tab: string) => {
    setActiveTab(tab);
  };

  useEffect(() => {
    if (typeof slug === "string") {
      const getJobDetail = async () => {
        const data = await fetchJobDetail(slug);
        setJobDetail(data[0]);
      };
      getJobDetail();
    }
  }, [slug]);

  return (
    <div className="page-job detail">
      {JobDetail ? (
        <div className="container-job">
          <h2 className="title">{JobDetail.title}</h2>
          <div className="content-job flex">
            <div className="left-job">
              <div className="item">
                <p>Địa điểm</p>
                <b>{JobDetail.location}</b>
              </div>
              <div className="item">
                <p>Hình thức làm việc</p>
                <b>Toàn thời gian cố định</b>
              </div>
              <div className="item">
                <p>Số lượng tuyển</p>
                <b>{JobDetail.applicant_count}</b>
              </div>
            </div>
            <div className="right-job">
              <div className="list-tab flex items-center">
                <div
                  onClick={() => showTab("#info")}
                  data-id="#info"
                  className={`item-tab ${
                    activeTab === "#info" ? "active" : ""
                  }`}
                >
                  Chi tiết
                </div>
                <div
                  onClick={() => showTab("#formjob")}
                  data-id="#formjob"
                  className={`item-tab ${
                    activeTab === "#formjob" ? "active" : ""
                  }`}
                >
                  Nộp hồ sơ
                </div>
              </div>
              <div
                className={`content-tab ${
                  activeTab === "#info" ? "active" : ""
                }`}
                id="info"
              >
                <div
                  dangerouslySetInnerHTML={{ __html: JobDetail.description }}
                />
                <a
                  href="javascript:void(0)"
                  onClick={() => showTab("#formjob")}
                  className="btn apply-job"
                >
                  Ứng tuyển ngay
                </a>
              </div>
              <div
                className={`content-tab ${
                  activeTab === "#formjob" ? "active" : ""
                }`}
                id="formjob"
              >
                <input type="hidden" id="js-job_id" value="13" />
                <div className="item-upload d-flex flex-wrap align-items">
                  <div className="upload-left">
                    <div className="d-flex align-items">
                      <i className="fa-solid fa-cloud-arrow-up"></i>
                      <p className="name-up">Tải lên sơ yếu lý lịch</p>
                    </div>
                    <p className="gray">
                      Tải sơ yếu lý lịch của bạn lên đây để tự động điền các
                      thông tin chính.
                    </p>
                  </div>
                  <div className="upload-right">
                    <input id="js-file-upload-id" type="hidden" value="" />
                    <div id="js-container-selector">
                      <a
                        id="js-select-file"
                        href="#"
                        className="btn-upload d-block dz-clickable"
                      >
                        Upload file
                      </a>
                    </div>
                  </div>
                  <div className="pd-preview-file-upload">
                    <div id="js-file-uploaded-list"></div>
                    <div id="js-preview-file-upload"></div>
                  </div>
                </div>
                <div className="item-form">
                  <label>
                    Tên <span>*</span>
                  </label>
                  <input
                    type="text"
                    className="input-item"
                    name="name"
                    id="js-user_name"
                    placeholder="Nhập họ và tên"
                  />
                  <div className="note-error"></div>
                </div>
                <div className="item-form">
                  <label>
                    Email <span>*</span>
                  </label>
                  <input
                    type="text"
                    className="input-item"
                    name="email"
                    id="js-user_email"
                    placeholder="Nhập địa chỉ email"
                  />
                  <div className="note-error"></div>
                </div>
                <div className="item-form">
                  <label>
                    Số điện thoại <span>*</span>
                  </label>
                  <input
                    type="text"
                    className="input-item"
                    name="phone"
                    id="js-user_mobile"
                    placeholder="Nhập số điện thoại"
                  />
                  <div className="note-error"></div>
                </div>
                <div className="item-form">
                  <label>Thông tin bổ sung</label>
                  <span className="ghichu">
                    Vui lòng chia sẻ bất kỳ điều gì khác bạn muốn chúng tôi
                    biết, chẳng hạn như động lực của bạn khi ứng tuyển hoặc các
                    bối cảnh bổ sung liên quan đến hồ sơ của bạn.
                  </span>
                  <textarea
                    className="input-item"
                    name="messenger"
                    id="js-user_note"
                    placeholder="Nhập nội dung bổ sung"
                  ></textarea>
                </div>
                <a href="javascript:void(0)" className="btn btn-submit">
                  Nộp đơn <i className="fa-regular fa-paper-plane"></i>
                </a>
              </div>
            </div>
          </div>
        </div>
      ) : (
        <div className="container-job">
          <div className="text-center text-2xl py-[50px] font-bold italic">
            Không có công việc nào.
          </div>
        </div>
      )}
    </div>
  );
};

export default JobDetails;
