import React, { useState } from "react";
import { addProduct } from "../api/api";
import { useNavigate } from "react-router-dom";

export default function Products() {
  const navigate = useNavigate();
  const [loading, setLoading] = useState(false);

  async function handleSubmit(event) {
    event.preventDefault();
    setLoading(true);

    const formData = {
      ProductCode: event.target.ProductCode.value,
      ProductName: event.target.ProductName.value,
      Category: event.target.Category.value,
      QuantityInStock: Number(event.target.QuantityInStock.value),
      UnitPrice: event.target.UnitPrice.value,
      SupplierName: event.target.SupplierName.value,
    };

    try {
      await addProduct(formData);
      alert('Product added successfully');
      navigate('/warehouse');
    } catch (error) {
      alert(error.response?.data?.message || 'Failed to add product');
    } finally {
      setLoading(false);
    }
  }

  return (
    <div className="flex flex-col items-center">
      <h1 className="text-2xl font-bold text-gray-800 mb-6 hover:text-olive-600 cursor-pointer">Add Product</h1>
      <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6 w-full max-w-lg">
        <form onSubmit={handleSubmit} className="space-y-4">
          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Product Code</label>
              <input type="text" name="ProductCode" required placeholder="Enter p-Code" className="w-full border border-gray-300 rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-olive-500 focus:border-olive-500 outline-none transition" />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Product Name</label>
              <input type="text" name="ProductName" required placeholder="Enter p-Name" className="w-full border border-gray-300 rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-olive-500 focus:border-olive-500 outline-none transition" />
            </div>
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Category</label>
            <input type="text" name="Category" required placeholder="Enter Category" className="w-full border border-gray-300 rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-olive-500 focus:border-olive-500 outline-none transition" />
          </div>
          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Quantity</label>
              <input type="number" name="QuantityInStock" required placeholder="Enter QuantityInStock" className="w-full border border-gray-300 rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-olive-500 focus:border-olive-500 outline-none transition" />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Unit Price</label>
              <input type="number" step="0.01" name="UnitPrice" required placeholder="Enter Price" className="w-full border border-gray-300 rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-olive-500 focus:border-olive-500 outline-none transition" />
            </div>
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Supplier Name</label>
            <input type="text" name="SupplierName" required placeholder="Enter Supplier name" className="w-full border border-gray-300 rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-olive-500 focus:border-olive-500 outline-none transition" />
          </div>
          <button type="submit"  className="w-full bg-olive-600 hover:bg-olive-700 text-white h-10 rounded-lg font-medium ">
            Add
          </button>
        </form>
      </div>
    </div>
  );
}