import { useState } from 'react';
import { createWarehouse } from '../services/apiService';

const WarehousePage = () => {
  const [formData, setFormData] = useState({
    warehouseCode: '',
    warehouseName: '',
    warehouseLocation: '',
  });
  const [error, setError] = useState('');
  const [success, setSuccess] = useState('');
  const [loading, setLoading] = useState(false);
  const [lastAdded, setLastAdded] = useState(null);

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData((prev) => ({ ...prev, [name]: value }));
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    setError('');
    setSuccess('');

    try {
      const response = await createWarehouse(formData);
      setSuccess('Warehouse created successfully!');
      setLastAdded(response.data.warehouse);
      setFormData({ warehouseCode: '', warehouseName: '', warehouseLocation: '' });
    } catch (err) {
      setError(err.response?.data?.message || 'Error creating warehouse');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="max-w-3xl mx-auto p-4 sm:p-6">
      <h2 className="text-2xl sm:text-3xl font-bold mb-6 text-gray-800">Warehouse Management</h2>

      <div className="bg-white rounded-lg shadow-md p-6">
        <h3 className="text-xl font-bold mb-4 text-gray-800">Add New Warehouse</h3>

        {error && (
          <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">{error}</div>
        )}
        {success && (
          <div className="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">{success}</div>
        )}

        <form onSubmit={handleSubmit} className="space-y-4">
          <div>
            <label className="block text-gray-700 text-sm font-bold mb-2">Warehouse Code</label>
            <input type="text" name="warehouseCode" value={formData.warehouseCode} onChange={handleChange}
              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500" required />
          </div>
          <div>
            <label className="block text-gray-700 text-sm font-bold mb-2">Warehouse Name</label>
            <input type="text" name="warehouseName" value={formData.warehouseName} onChange={handleChange}
              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500" required />
          </div>
          <div>
            <label className="block text-gray-700 text-sm font-bold mb-2">Warehouse Location</label>
            <input type="text" name="warehouseLocation" value={formData.warehouseLocation} onChange={handleChange}
              placeholder="e.g. Kigali City, Rwanda"
              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500" required />
          </div>
          <button type="submit" disabled={loading}
            className="w-full bg-blue-600 text-white font-bold py-2 rounded-lg hover:bg-blue-700 transition disabled:opacity-50">
            {loading ? 'Creating...' : 'Create Warehouse'}
          </button>
        </form>

        {lastAdded && (
          <div className="mt-6 p-4 bg-blue-50 rounded-lg border border-blue-200">
            <h4 className="font-bold text-gray-800 mb-2">Last Added Warehouse</h4>
            <p className="text-sm text-gray-700">
              {lastAdded.warehouseCode} — {lastAdded.warehouseName} ({lastAdded.warehouseLocation})
            </p>
          </div>
        )}
      </div>
    </div>
  );
};

export default WarehousePage;
