import { useState } from "react";
import "../../styles/components/AddItemWithDetailsModal.css";
import ClassificationSection from "../forms/ClassificationSection";
import useActionToast from "../../hooks/useActionToast";
import ImageUploadSection from "../forms/ImageUploadSection";

export default function AddItemWithDetailsModal({ itemName, onConfirm, onSkip, onCancel }) {
  const toast = useActionToast();
  const [selectedImage, setSelectedImage] = useState(null);
  const [imagePreview, setImagePreview] = useState(null);
  const [itemType, setItemType] = useState("");
  const [itemGroup, setItemGroup] = useState("");
  const [zone, setZone] = useState("");

  const handleImageChange = (file) => {
    setSelectedImage(file);
    const reader = new FileReader();
    reader.onloadend = () => {
      setImagePreview(reader.result);
    };
    reader.readAsDataURL(file);
  };

  const handleImageRemove = () => {
    setSelectedImage(null);
    setImagePreview(null);
  };

  const handleItemTypeChange = (newType) => {
    setItemType(newType);
    setItemGroup(""); // Reset group when type changes
  };

  const handleConfirm = () => {
    if (itemType && !itemGroup) {
      toast.error("Add item failed", `Add item failed: Select an item group for ${itemName}`);
      return;
    }

    const hasClassificationDetails = Boolean(itemType || itemGroup || zone);
    const classification = hasClassificationDetails ? {
      item_type: itemType,
      item_group: itemGroup || null,
      zone: zone || null
    } : null;

    onConfirm(selectedImage, classification);
  };

  const handleSkip = () => {
    onSkip();
  };

  return (
    <div className="add-item-details-overlay" onClick={onCancel}>
      <div className="add-item-details-modal" onClick={(e) => e.stopPropagation()}>
        <h2 className="add-item-details-title">Add Details for "{itemName}"</h2>
        <p className="add-item-details-subtitle">Add an image and classification to help organize your list</p>

        {/* Image Section */}
        <div className="add-item-details-section">
          <ImageUploadSection
            imagePreview={imagePreview}
            onImageChange={handleImageChange}
            onImageRemove={handleImageRemove}
          />
        </div>

        {/* Classification Section */}
        <div className="add-item-details-section">
          <ClassificationSection
            itemType={itemType}
            itemGroup={itemGroup}
            zone={zone}
            onItemTypeChange={handleItemTypeChange}
            onItemGroupChange={setItemGroup}
            onZoneChange={setZone}
            fieldClass="add-item-details-field"
            selectClass="add-item-details-select"
          />
        </div>

        {/* Actions */}
        <div className="add-item-details-actions">
          <button onClick={onCancel} className="add-item-details-btn cancel">
            Cancel
          </button>
          <button onClick={handleSkip} className="add-item-details-btn skip">
            Skip All
          </button>
          <button onClick={handleConfirm} className="add-item-details-btn confirm">
            Add Item
          </button>
        </div>
      </div>
    </div>
  );
}