import React, { useState } from 'react';

export default function WorkCategoryTool() {
  const [categories] = useState([
    { id: 1, name: "Clarifications" },
    { id: 2, name: "02-05 Demolition" },
    { id: 3, name: "02-10 Remediation/Abatement" },
    { id: 4, name: "03-05 Concrete" },
    { id: 5, name: "03-10 Reinforcing Steel" },
    // Add more categories as needed...
  ]);

  const [selectedCategories, setSelectedCategories] = useState([]);

  const handleSelectCategory = (category) => {
    if (!selectedCategories.includes(category)) {
      const updatedCategories = [...selectedCategories, category]
        .sort((a, b) => a.name.localeCompare(b.name));

      const clarification = updatedCategories.find(
        (cat) => cat.name === "Clarifications"
      );

      const withoutClarifications = updatedCategories.filter(
        (cat) => cat.name !== "Clarifications"
      );

      setSelectedCategories(
        clarification ? [clarification, ...withoutClarifications] : updatedCategories
      );
    }
  };

  const handleRemoveCategory = (id) => {
    setSelectedCategories(selectedCategories.filter((category) => category.id !== id));
  };

  const handleSelectAll = () => {
    const sortedCategories = [...categories].sort((a, b) => a.name.localeCompare(b.name));
    const clarification = sortedCategories.find(
      (cat) => cat.name === "Clarifications"
    );

    const withoutClarifications = sortedCategories.filter(
      (cat) => cat.name !== "Clarifications"
    );

    setSelectedCategories(
      clarification ? [clarification, ...withoutClarifications] : sortedCategories
    );
  };

  const handleAssembleDescriptions = () => {
    alert("Assembled descriptions: " + selectedCategories.map((cat) => cat.name).join(", "));
  };

  return (
    <div className="p-4 space-y-6">
      <h1 className="text-2xl font-bold">Work Category Tool</h1>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div>
          <h2 className="text-xl font-semibold mb-2">Available Categories</h2>
          <ul className="space-y-2">
            {categories.map((category) => (
              <li
                key={category.id}
                onClick={() => handleSelectCategory(category)}
                className="cursor-pointer p-2 border rounded hover:bg-gray-100"
              >
                {category.name}
              </li>
            ))}
          </ul>
          <button
            onClick={handleSelectAll}
            className="mt-4 bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600"
          >
            Select All
          </button>
        </div>

        <div>
          <h2 className="text-xl font-semibold mb-2">Selected Categories</h2>
          <ul className="space-y-2">
            {selectedCategories.map((category) => (
              <li
                key={category.id}
                className="p-2 border rounded bg-gray-50 flex justify-between items-center"
              >
                {category.name}
                <button
                  onClick={() => handleRemoveCategory(category.id)}
                  className="text-red-500 hover:underline"
                >
                  Remove
                </button>
              </li>
            ))}
          </ul>
        </div>
      </div>

      <div className="text-center mt-6">
        <button
          onClick={handleAssembleDescriptions}
          className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
          disabled={selectedCategories.length === 0}
        >
          Assemble Work Category Descriptions
        </button>
      </div>
    </div>
  );
}
import React, { useState } from 'react';

export default function WorkCategoryTool() {
  const [categories] = useState([
    { id: 1, name: "Clarifications" },
    { id: 2, name: "02-05 Demolition" },
    { id: 3, name: "02-10 Remediation/Abatement" },
    { id: 4, name: "03-05 Concrete" },
    { id: 5, name: "03-10 Reinforcing Steel" },
    // Add more categories as needed...
  ]);

  const [selectedCategories, setSelectedCategories] = useState([]);

  const handleSelectCategory = (category) => {
    if (!selectedCategories.includes(category)) {
      const updatedCategories = [...selectedCategories, category]
        .sort((a, b) => a.name.localeCompare(b.name));

      const clarification = updatedCategories.find(
        (cat) => cat.name === "Clarifications"
      );

      const withoutClarifications = updatedCategories.filter(
        (cat) => cat.name !== "Clarifications"
      );

      setSelectedCategories(
        clarification ? [clarification, ...withoutClarifications] : updatedCategories
      );
    }
  };

  const handleRemoveCategory = (id) => {
    setSelectedCategories(selectedCategories.filter((category) => category.id !== id));
  };

  const handleSelectAll = () => {
    const sortedCategories = [...categories].sort((a, b) => a.name.localeCompare(b.name));
    const clarification = sortedCategories.find(
      (cat) => cat.name === "Clarifications"
    );

    const withoutClarifications = sortedCategories.filter(
      (cat) => cat.name !== "Clarifications"
    );

    setSelectedCategories(
      clarification ? [clarification, ...withoutClarifications] : sortedCategories
    );
  };

  const handleAssembleDescriptions = () => {
    alert("Assembled descriptions: " + selectedCategories.map((cat) => cat.name).join(", "));
  };

  return (
    <div className="p-4 space-y-6">
      <h1 className="text-2xl font-bold">Work Category Tool</h1>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div>
          <h2 className="text-xl font-semibold mb-2">Available Categories</h2>
          <ul className="space-y-2">
            {categories.map((category) => (
              <li
                key={category.id}
                onClick={() => handleSelectCategory(category)}
                className="cursor-pointer p-2 border rounded hover:bg-gray-100"
              >
                {category.name}
              </li>
            ))}
          </ul>
          <button
            onClick={handleSelectAll}
            className="mt-4 bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600"
          >
            Select All
          </button>
        </div>

        <div>
          <h2 className="text-xl font-semibold mb-2">Selected Categories</h2>
          <ul className="space-y-2">
            {selectedCategories.map((category) => (
              <li
                key={category.id}
                className="p-2 border rounded bg-gray-50 flex justify-between items-center"
              >
                {category.name}
                <button
                  onClick={() => handleRemoveCategory(category.id)}
                  className="text-red-500 hover:underline"
                >
                  Remove
                </button>
              </li>
            ))}
          </ul>
        </div>
      </div>

      <div className="text-center mt-6">
        <button
          onClick={handleAssembleDescriptions}
          className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
          disabled={selectedCategories.length === 0}
        >
          Assemble Work Category Descriptions
        </button>
      </div>
    </div>
  );
}