import { useState } from "react";
import "../../styles/ItemClassificationModal.css";
import { ITEM_GROUPS, ITEM_TYPES, ZONES, getItemTypeLabel } from "../constants/classifications";

export default function ItemClassificationModal({ itemName, onConfirm, onSkip }) {
  const [itemType, setItemType] = useState("");
  const [itemGroup, setItemGroup] = useState("");
  const [zone, setZone] = useState("");

  const handleItemTypeChange = (e) => {
    const newType = e.target.value;
    setItemType(newType);
    // Reset item group when type changes
    setItemGroup("");
  };

  const handleConfirm = () => {
    if (!itemType) {
      alert("Please select an item type");
      return;
    }

    if (!itemGroup) {
      alert("Please select an item group");
      return;
    }

    onConfirm({
      item_type: itemType,
      item_group: itemGroup,
      zone: zone || null
    });
  };

  const availableGroups = itemType ? ITEM_GROUPS[itemType] || [] : [];

  return (
    <div className="classification-modal-overlay">
      <div className="classification-modal-content">
        <h2 className="classification-modal-title">Classify Item</h2>
        <p className="classification-modal-subtitle">Help organize "{itemName}" in your list</p>

        <div className="classification-modal-field">
          <label>Item Type <span className="required">*</span></label>
          <select
            value={itemType}
            onChange={handleItemTypeChange}
            className="classification-modal-select"
          >
            <option value="">-- Select Type --</option>
            {Object.values(ITEM_TYPES).map((type) => (
              <option key={type} value={type}>
                {getItemTypeLabel(type)}
              </option>
            ))}
          </select>
        </div>

        {itemType && (
          <div className="classification-modal-field">
            <label>Item Group <span className="required">*</span></label>
            <select
              value={itemGroup}
              onChange={(e) => setItemGroup(e.target.value)}
              className="classification-modal-select"
            >
              <option value="">-- Select Group --</option>
              {availableGroups.map((group) => (
                <option key={group} value={group}>
                  {group}
                </option>
              ))}
            </select>
          </div>
        )}

        <div className="classification-modal-field">
          <label>Store Zone (Optional)</label>
          <select
            value={zone}
            onChange={(e) => setZone(e.target.value)}
            className="classification-modal-select"
          >
            <option value="">-- Select Zone --</option>
            {ZONES.map((z) => (
              <option key={z} value={z}>
                {z}
              </option>
            ))}
          </select>
        </div>

        <div className="classification-modal-actions">
          <button
            className="classification-modal-btn classification-modal-btn-skip"
            onClick={onSkip}
          >
            Skip for Now
          </button>
          <button
            className="classification-modal-btn classification-modal-btn-confirm"
            onClick={handleConfirm}
          >
            Confirm
          </button>
        </div>
      </div>
    </div>
  );
}