 import { useState, useEffect } from "react";
import axios from "../axiosInstance";

function Warehouse () {
    const [warehouse, setWarehouse] = useState([]); // Keeps original array state safely
    const [warehouseCode, setWarehouseCode] = useState('');
    const [warehouseName, setWarehouseName] = useState('');
    const [warehouseLocation, setWarehouseLocation] = useState('');
    const [error, setError] = useState('');

    const fetchWarehouse = async() => {
        try {
            // Fixed typo: changed hhtp to http
            const res = await axios.get('http://localhost:5000/api/warehouse');
            setWarehouse(res.data); // Fixed: save data to state instead of blank string
        } catch(error) {
            setError("Failed to fetch warehouse data.");
        }
    };

    useEffect(() => {
        fetchWarehouse();
    }, []);

    const handleWarehouse = async (e) => {
        e.preventDefault();
        setError('');
        try {
            await axios.post('http://localhost:5000/api/warehouse', {
                warehouseCode,
                warehouseName,
                warehouseLocation
            });
            setWarehouseCode('');
            setWarehouseName('');
            setWarehouseLocation('');
            fetchWarehouse();
        } catch(error) {
            setError("Failed to add warehouse.");
        }
    };

    return (
        <div className="p-6 bg-slate-50 min-h-screen flex flex-col gap-6">
            
            {/* Form Section */}
            <div className="bg-white p-6 rounded shadow-sm border border-slate-200">
                <h2 className="text-xl font-bold text-slate-700 mb-4">Warehouse Management</h2>
                
                <form onSubmit={handleWarehouse} className="grid grid-cols-1 md:grid-cols-3 gap-4 items-end">
                    <div className="flex flex-col gap-1">
                        <label className="text-sm font-semibold text-slate-600">Warehouse Code</label>
                        <input 
                            type="text" 
                            value={warehouseCode} 
                            required
                            className="border border-slate-300 p-2 rounded focus:outline-none focus:border-blue-500"
                            onChange={(e) => setWarehouseCode(e.target.value)} 
                        />
                    </div>

                    <div className="flex flex-col gap-1">
                        <label className="text-sm font-semibold text-slate-600">Warehouse Name</label>
                        <input 
                            type="text" 
                            value={warehouseName} 
                            required
                            className="border border-slate-300 p-2 rounded focus:outline-none focus:border-blue-500"
                            onChange={(e) => setWarehouseName(e.target.value)} 
                        />
                    </div> 

                    <div className="flex flex-col gap-1">
                        <label className="text-sm font-semibold text-slate-600">Warehouse Location</label>
                        <input 
                            type="text" 
                            value={warehouseLocation} 
                            required
                            className="border border-slate-300 p-2 rounded focus:outline-none focus:border-blue-500"
                            onChange={(e) => setWarehouseLocation(e.target.value)} 
                        />
                    </div>

                    <div className="md:col-span-3 flex justify-end mt-2">
                        <button 
                            type="submit" 
                            className="bg-blue-500 text-white font-bold px-6 py-2 rounded hover:bg-blue-600 transition"
                        >
                            Add Warehouse
                        </button> 
                    </div>
                </form>

                {error && (
                    <p className="text-red-500 bg-red-100 p-2 rounded text-sm font-semibold mt-4 text-center">{error}</p>
                )}
            </div>

            {/* Table Section */}
            <div className="bg-white rounded shadow-sm border border-slate-200 overflow-x-auto">
                <table className="w-full text-left border-collapse">
                    <thead>
                        <tr className="bg-slate-100 border-b border-slate-200 text-slate-700 text-sm font-bold">
                            <th className="p-3">Warehouse Code</th>
                            <th className="p-3">Warehouse Name</th>
                            <th className="p-3">Warehouse Location</th>
                        </tr>
                    </thead>
                    <tbody className="text-slate-600 text-sm divide-y divide-slate-100">
                        {Array.isArray(warehouse) && warehouse.map((wh) => (
                            <tr key={wh._id} className="hover:bg-slate-50">
                                <td className="p-3 font-semibold text-slate-700">{wh.warehouseCode}</td>
                                <td className="p-3">{wh.warehouseName}</td>
                                <td className="p-3">{wh.warehouseLocation}</td>
                            </tr>
                        ))}
                    </tbody>
                </table>
            </div>

        </div>
    );
}

export default Warehouse;
