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

function Product(){
    const [product, setProduct] = useState([])
    const [productCode, setProductCode] = useState('')
    const [productName, setProductName] = useState('')
    const [quantitySold, setQuantitySold] = useState('')
    const [unitPrice,setUnitPrice] = useState('')
    const [error, setError] = useState('')

    const fetchProduct = async() => {
        try{
const res = await axios.get('http://localhost:5000/api/product')
setProduct(res.data);
        }catch(error){
setError("failed to fetch product");
        }
    };

    useEffect(()=>{
        fetchProduct()
    },[])

    const handleProduct = async (e) => {
        e.preventDefault()
        setError('')
        try{
await axios.post('http://localhost:5000/api/product',{
    productCode,
    productName,
    quantitySold:Number(quantitySold),
    unitPrice
});
setProductCode('')
setProductName('')
setQuantitySold('')
setUnitPrice('')
fetchProduct()
        }catch(error){
setError("failed to create Product")
        }
    }
    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">PRODUCTS</h2>
                
                <form onSubmit={handleProduct} className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    <div className="flex flex-col gap-1">
                        <label className="text-sm font-semibold text-slate-600">Product Code</label>
                        <input type="text" value={productCode} required className="border border-slate-300 p-2 rounded" onChange={(e) => setProductCode(e.target.value)} />
                    </div>
                    <div className="flex flex-col gap-1">
                        <label className="text-sm font-semibold text-slate-600">Product Name</label>
                        <input type="text" value={productName} required className="border border-slate-300 p-2 rounded" onChange={(e) => setProductName(e.target.value)} />
                    </div>
                    <div className="flex flex-col gap-1">
                        <label className="text-sm font-semibold text-slate-600">Quantity Sold</label>
                        <input type="number" value={quantitySold} required className="border border-slate-300 p-2 rounded" onChange={(e) => setQuantitySold(e.target.value)} />
                    </div>
                    <div className="flex flex-col gap-1 lg:col-span-2">
                        <label className="text-sm font-semibold text-slate-600">Unit Price</label>
                        <input type="text" value={unitPrice} required className="border border-slate-300 p-2 rounded" onChange={(e) => setUnitPrice(e.target.value)} />
                    </div>
                    <div className="flex items-end">
                        <button type="submit" className="w-full bg-blue-500 text-white font-bold p-2 rounded hover:bg-blue-600 transition h-10">Add</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">Product Code</th>
                            <th className="p-3">productName</th>
                            <th className="p-3">quantitySold</th>
                            <th className="p-3">unitPrice</th>
                        </tr>
                    </thead>
                    <tbody className="text-slate-600 text-sm divide-y divide-slate-100">
                        {Array.isArray(product) && product.map((pr) => (
                            <tr key={pr._id} className="hover:bg-slate-50">
                                <td className="p-3 font-semibold">{pr.productCode}</td>
                                <td className="p-3">{pr.productName}</td>
                                <td className="p-3">{pr.quantitySold}</td>
                                <td className="p-3">${pr.unitPrice}</td>
                            </tr>
                        ))}
                    </tbody>
                </table>
            </div>

        </div>
    )
}
export default Product
