import { useState } from "react";
import { useNavigate } from "react-router";
import { toast } from "react-toastify";
import usePaginatedList from "../../../hooks/usePaginatedList";
import { fetchWorkOrdersPaged } from "./api";
import Table from "./Table";
import DeleteModal from "../../../components/DeleteModal";
import ActionBar from "../../../components/ActionBar";
import "./styles.css";

export default function WorkOrdersList() {
  const navigate = useNavigate();
  const {
    rows,
    search,
    setSearch,
    page,
    setPage,
    pageSize,
    setPageSize,
    totalCount,
    loading,
    err
  } = usePaginatedList(fetchWorkOrdersPaged);

  const [viewMode, setViewMode] = useState("list");
  const [deleteModal, setDeleteModal] = useState({
    isOpen: false,
    item: null,
    loading: false
  });

  const totalPages = Math.max(1, Math.ceil(totalCount / pageSize));

  const handleDeleteClick = (item) => {
    setDeleteModal({ isOpen: true, item, loading: false });
  };

  const handleDeleteConfirm = async () => {
    setDeleteModal((prev) => ({ ...prev, loading: true }));
    try {
      await new Promise((resolve) => setTimeout(resolve, 500));
      toast.success("Work Order deleted successfully!");
      setDeleteModal({ isOpen: false, item: null, loading: false });
    } catch {
      toast.error("Failed to delete work order");
      setDeleteModal((prev) => ({ ...prev, loading: false }));
    }
  };

  return (
    <>
      <ActionBar
        moduleName="Work Orders"
        moduleIcon="fa-clipboard"
        onNew={() => navigate("/workorders/new")}
        onBulkEdit={() => console.log("Bulk edit")}
        selectedCount={0}
      />

      <section className="listPage">
        <div className="breadcrumb">
          <span className="breadcrumbItem active">Work Orders</span>
        </div>

        <div className="searchSection">
          <div className="searchHeader">
            <h3 className="searchHeading">
              <span className="fa-stack iconStack">
                <i className="fa fa-square fa-stack-2x text-primary"></i>
                <i className="fa fa-clipboard fa-stack-1x fa-inverse"></i>
              </span>
              <span>Search for Work Orders</span>
            </h3>
            <span className="searchSubheading">Use the settings menu to adjust how to filter the list, and which columns to display.</span>
          </div>

          <div className="searchControls">
            <div className="searchLeft">
              <div className="searchInputGroup">
                <select className="searchDropdown" defaultValue="Title">
                  <option>Title</option>
                  <option>WO #</option>
                  <option>Location</option>
                  <option>Status</option>
                </select>
                <input
                  className="searchInput"
                  value={search}
                  onChange={(e) => setSearch(e.target.value)}
                  placeholder="Enter search criteria here..."
                />
                <button className="searchButton">Search!</button>
              </div>
              <div className="viewToggle">
                <button
                  className={`viewBtn ${viewMode === "list" ? "active" : ""}`}
                  title="List view"
                  onClick={() => setViewMode("list")}
                >
                  <i className="fa fa-navicon"></i>
                </button>
                <button
                  className={`viewBtn ${viewMode === "card" ? "active" : ""}`}
                  title="Card view"
                  onClick={() => setViewMode("card")}
                >
                  <i className="fa fa-th-large"></i>
                </button>
              </div>
            </div>

            <div className="searchRight">
              <div className="paginationTop">
                <button
                  className="pageBtn"
                  disabled={page === 1}
                  onClick={() => setPage(page - 1)}
                >
                  «
                </button>
                <span className="pageNumber">{page}</span>
                <button
                  className="pageBtn"
                  disabled={page >= totalPages}
                  onClick={() => setPage(page + 1)}
                >
                  »
                </button>
              </div>
            </div>
          </div>
        </div>

        <Table
          loading={loading}
          error={err}
          rows={rows}
          onEdit={(item) => navigate(`/workorders/edit/${item.id}`)}
          onDelete={handleDeleteClick}
          page={page}
          setPage={setPage}
          pageSize={pageSize}
          setPageSize={setPageSize}
          totalCount={totalCount}
          totalPages={totalPages}
        />

        <DeleteModal
          isOpen={deleteModal.isOpen}
          onClose={() =>
            setDeleteModal({ isOpen: false, item: null, loading: false })
          }
          onConfirm={handleDeleteConfirm}
          title="Delete Work Order"
          message={`Are you sure you want to delete "${deleteModal.item?.title}"? This action cannot be undone.`}
          loading={deleteModal.loading}
        />
      </section>
    </>
  );
}