import React, { createContext, useContext, useEffect, useState } from "react";
import JobList from "./JobList";
import { useNavigate } from "react-router-dom";
import { useServiceProjects } from "../../hooks/useServiceProject";
import { ITEMS_PER_PAGE } from "../../utils/constants";
import OffcanvasComponent from "../common/OffcanvasComponent";
import showToast from "../../services/toastService";
import ManageJob from "./ServiceProjectJob/ManageJob";
import ManageJobTicket from "./ServiceProjectJob/ManageJobTicket";
import GlobalModel from "../common/GlobalModel";
import PreviewDocument from "../Expenses/PreviewDocument";

export const JonContext = createContext();
export const useServiceProjectJobContext = () => {
  const context = useContext(JonContext);
  if (!context) {
    showToast("Something went wrong", "warning");
    window.location = "/dashboard";
  }
  return context;
};
const Jobs = () => {
  const [manageJob, setManageJob] = useState({ isOpen: false, jobId: null });
  const [showArchive, setShowArchive] = useState(false);

  const [showCanvas, setShowCanvas] = useState(false);
  const [selectedProject, setSelectedProject] = useState(null);
  const [selectJob, setSelectedJob] = useState({
    showCanvas: false,
    job: null,
  });
  const navigate = useNavigate();
  const { data } = useServiceProjects(ITEMS_PER_PAGE, 1);

  const contextProvider = {
    setSelectedJob,
    setSelectedProject,
    setManageJob,
    manageJob,
  };
  return (
    <>
      <JonContext.Provider value={contextProvider}>
        <OffcanvasComponent
          id="customCanvas"
          title="Job"
          placement="end"
          show={selectJob.showCanvas}
          onClose={() => setSelectedJob({ showCanvas: false, job: null })}
        >
          <ManageJobTicket Job={selectJob} />
        </OffcanvasComponent>
        <OffcanvasComponent
          id="customCanvas1"
          title={`${manageJob.jobId ? "Update a Job" : "Create a new Job"} `}
          placement="end"
          show={manageJob.isOpen}
          onClose={() => setManageJob({ isOpen: false, jobId: null })}
        >
          <ManageJob Job={manageJob.jobId} />
        </OffcanvasComponent>
        <div className="card page-min-h my-2 px-7 pb-4">
          <div className="row align-items-center py-4">

            {/* LEFT — Archive / Unarchive Toggle */}
            <div className="col-12 col-md-6 text-start">
              <div className="d-inline-flex border rounded-pill overflow-hidden shadow-none">
                <button
                  type="button"
                  className={`btn px-3 py-1 rounded-0 text-tiny ${!showArchive ? "btn-primary text-white" : ""
                    }`}
                  onClick={() => setShowArchive(false)}
                >
                  <i className="bx bx-archive-out me-1"></i> Active Jobs
                </button>

                <button
                  type="button"
                  className={`btn px-3 py-1 rounded-0 text-tiny ${showArchive ? "btn-primary text-white" : ""
                    }`}
                  onClick={() => setShowArchive(true)}
                >
                  <i className="bx bx-archive me-1"></i> Archived
                </button>
              </div>
            </div>

            {/* RIGHT — New Job button */}
            <div className="col-12 col-md-6 d-flex justify-content-md-end mt-2 mt-md-0">
              <button
                className="btn btn-sm btn-primary"
                onClick={() => setManageJob({ isOpen: true, jobId: null })}
              >
                <i className="bx bx-plus-circle bx-md me-2"></i> New Job
              </button>
            </div>

          </div>

          {/* Job List */}
          <JobList filterByProject={selectedProject} isArchive={showArchive} />
        </div>

      </JonContext.Provider>
    </>
  );
};

export default Jobs;