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

function Customer (){
    const [customer, setCustomer] = useState([])
    const [ customerNumber, setCustomerNumber]= useState('')
    const [firstName, setFirstName] = useState('')
    const [lastName, setLastName]= useState('')
    const [telephone, setTelephone] = useState('')
    const [ addres, setAddres] = useState('')
    const [error, setError] = useState('')

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

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

    const handleCustomer = async (e) => {
        e.preventDefault()
        setError('')
        try{
await axios.post('http://localhost:5000/api/customer',{
    customerNumber:Number(customerNumber),
    firstName,
    lastName,
    telephone,
    addres

});
setCustomerNumber('')
setFirstName('')
setLastName('')
setTelephone('')
setAddres('')
fetchCustomer('')

        }catch(error){
setError("failed to create customer");
        }
    };
    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">Customer</h2>
                
                <form onSubmit={handleCustomer} 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">Customer Number</label>
                        <input type="number" value={customerNumber} required className="border border-slate-300 p-2 rounded" onChange={(e) => setCustomerNumber(e.target.value)}  />
                    </div>
                    <div className="flex flex-col gap-1">
                        <label className="text-sm font-semibold text-slate-600">Firts Name</label>
                        <input type="text" value={firstName} required className="border border-slate-300 p-2 rounded" onChange={(e) => setFirstName(e.target.value)}  />
                    </div>
                    <div className="flex flex-col gap-1">
                        <label className="text-sm font-semibold text-slate-600">Last Name</label>
                        <input type="text" value={lastName} required className="border border-slate-300 p-2 rounded" onChange={(e) => setLastName(e.target.value)}  />
                    </div>
                    <div className="flex flex-col gap-1">
                        <label className="text-sm font-semibold text-slate-600">Telephone N*</label>
                        <input type="text" value={telephone} required className="border border-slate-300 p-2 rounded" onChange={(e) => setTelephone(e.target.value)}  />
                    </div>
                    <div className="flex flex-col gap-1 lg:col-span-2">
                        <label className="text-sm font-semibold text-slate-600">Address</label>
                        <input type="text" value={addres} required className="border border-slate-300 p-2 rounded" onChange={(e) => setAddres(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">customerNumber</th>
                            <th className="p-3">firstName</th>
                            <th className="p-3">lastName</th>
                            <th className="p-3">telephone</th>
                            <th className="p-3">addres</th>
                        </tr>
                    </thead>
                    <tbody className="text-slate-600 text-sm divide-y divide-slate-100">
                        {Array.isArray (customer) && customer.map((cus) => (
                            <tr key={cus._id} className="hover:bg-slate-50">
                                <td className="p-3 font-semibold">{cus.customerNumber}</td>
                                <td className="p-3">{cus.firstName}</td>
                                <td className="p-3">{cus.lastName}</td>
                                <td className="p-3">{cus.telephone}</td>
                                <td className="p-3">{cus.addres}</td>
                            </tr>
                        ))}
                    </tbody>
                </table>
            </div>

        </div>
    )
}
export default Customer
