import React, { useEffect, useState } from 'react';
import axios from 'axios';
import { Link } from 'react-router-dom';

const AssetInventory = () => {
    const [assets, setAssets] = useState([]);
    const [searchQuery, setSearchQuery] = useState('');
    const [filteredAssets, setFilteredAssets] = useState([]);

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

    useEffect(() => {
        // Filter assets whenever searchQuery changes
        const filtered = assets.filter(asset => {
            return (
                (asset.assetId && asset.assetId.toString().toLowerCase().includes(searchQuery.toLowerCase())) ||
                (asset.vendor && asset.vendor.toLowerCase().includes(searchQuery.toLowerCase())) ||
                (asset.applicationName && asset.applicationName.toLowerCase().includes(searchQuery.toLowerCase())) ||
                (asset.serialNumber && asset.serialNumber.toLowerCase().includes(searchQuery.toLowerCase())) ||
                (asset.contactPerson && asset.contactPerson.toLowerCase().includes(searchQuery.toLowerCase())) ||
                (asset.location && asset.location.toLowerCase().includes(searchQuery.toLowerCase()))
            );
        });
        setFilteredAssets(filtered);
    }, [searchQuery, assets]);

    const fetchData = async () => {
        try {
            const response = await axios.get('/api/assets');
            setAssets(response.data);
            setFilteredAssets(response.data); // Set initial filtered assets
        } catch (error) {
            console.error('Error fetching assets:', error);
        }
    };

    const handleEditAsset = (assetId) => {
        window.location.href = `/edit-asset/${assetId}`;
    };

    const handleDeleteAsset = async (assetId) => {
        if (window.confirm('Are you sure you want to delete this asset?')) {
            try {
                await axios.delete(`/api/assets/${assetId}`);
                setAssets(assets.filter(asset => asset.assetId !== assetId));
                setFilteredAssets(filteredAssets.filter(asset => asset.assetId !== assetId));
                alert('Asset deleted successfully!');
            } catch (error) {
                console.error('Error deleting asset:', error);
            }
        }
    };

    return (
        <div className="bg-gray-100">
            <nav className="flex justify-between items-center p-4 bg-white shadow-md">
                <div className="space-x-4">
                    <a href="/admin-dashboard" className="text-blue-600 hover:text-gray-900">Home</a>
                </div>
                <div className="space-x-4">
                    <a href="/" className="text-blue-600 hover:text-gray-900">Logout</a>
                </div>
            </nav>

            <div className="container max-w-6xl mt-30 p-6 bg-gray-100 rounded-lg ml-40">
                <div className="text-2xl font-bold text-center mb-6 text-black">License Inventory Management</div>
                <div className="text-right mb-6">
                    <Link to="/add-newAsset">
                        <button className="bg-blue-400 text-white rounded px-4 py-2 hover:bg-blue-600">Add New License</button>
                    </Link>
                    <input
                        type="text"
                        placeholder="Search..."
                        value={searchQuery}
                        onChange={(e) => setSearchQuery(e.target.value)}
                        className="bg-gray-200 text-gray-800 rounded px-4 py-2 ml-2"
                    />
                </div>

                <div className="overflow-x-auto">
                    <table className="min-w-full bg-white rounded-lg overflow-hidden shadow-md">
                        <thead>
                            <tr className="bg-gray-100 text-left">
                            <th className="px-6 py-3 text-xs font-medium text-black uppercase tracking-wider">Line Item</th>
                            <th className="px-6 py-3 text-xs font-medium text-black uppercase tracking-wider">Application Name</th>
                            <th className="px-6 py-3 text-xs font-medium text-black uppercase tracking-wider">Quantity</th>
                          <th className="px-6 py-3 text-xs font-medium text-black uppercase tracking-wider">Start Date</th>
                          <th className="px-6 py-3 text-xs font-medium text-black uppercase tracking-wider">End Date</th>
                          <th className="px-6 py-3 text-xs font-medium text-black uppercase tracking-wider">Serial Number</th>
            <th className="px-6 py-3 text-xs font-medium text-black uppercase tracking-wider">Renewal Cost</th>
            <th className="px-6 py-3 text-xs font-medium text-black uppercase tracking-wider">Vendor</th>
            <th className="px-6 py-3 text-xs font-medium text-black uppercase tracking-wider">Contact Person</th>
            <th className="px-6 py-3 text-xs font-medium text-black uppercase tracking-wider">Email</th>
            <th className="px-6 py-3 text-xs font-medium text-black uppercase tracking-wider">Contact Number</th>
            <th className="px-6 py-3 text-xs font-medium text-black uppercase tracking-wider">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {filteredAssets.map(asset => (
                                <tr key={asset.assetId} className="border-b border-gray-200">
                                    <td className="px-6 py-4">{asset.assetId}</td>
                                    <td className="px-6 py-4">{asset.vendor}</td>
                                    <td className="px-6 py-4">{asset.applicationName}</td>
                                    <td className="px-6 py-4">{asset.qty}</td>
                                    <td className="px-6 py-4">{asset.used}</td>
                                    <td className="px-6 py-4">{asset.remaining}</td>
                                    <td className="px-6 py-4">{new Date(asset.startDate).toLocaleDateString()}</td>
                                    <td className="px-6 py-4">{new Date(asset.endDate).toLocaleDateString()}</td>
                                    <td className="px-6 py-4">{asset.contactPerson}</td>
                                    <td className="px-6 py-4">{asset.serialNumber}</td> {/* Display the serial number */}
                                    <td className="px-6 py-4">
                                        <div className='flex'>
                                            <button 
                                                className="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 focus:outline-none focus:bg-blue-600"
                                                onClick={() => handleEditAsset(asset.assetId)}>Edit</button>
                                            <button 
                                                className="bg-red-500 text-white px-4 py-2 rounded-md hover:bg-red-600 focus:outline-none focus:bg-red-600 ml-2"
                                                onClick={() => handleDeleteAsset(asset.assetId)}>Delete</button>
                                        </div>
                                    </td>
                                </tr>
                            ))}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    );
};

export default AssetInventory;   in thid the things are not working perferclty as we fill the form of    
import React, { useState } from 'react';

const AddNewAsset = () => {
    const [assetData, setAssetData] = useState({
        serialNumber: '',                // Optional but unique
        assetId: '',                     // Required
        vendor: '',                      // Required
        applicationName: '',             // Required
        qty: '',                         // Required
        used: '',                        // Optional
        remaining: '',                   // Optional
        renewalCost: '',                 // Optional
        startDate: '',                   // Required
        endDate: '',                     // Required
        contactPerson: '',               // Required
        emailId: '',                     // Required
        contactNumber: ''                // Required
    });

    const handleInputChange = (event) => {
        const { name, value } = event.target;
        setAssetData({
            ...assetData,
            [name]: value,
        });
    };

    const handleSubmit = async (event) => {
        event.preventDefault();

        try {
            const response = await fetch('/api/assets', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(assetData),
            });

            if (!response.ok) {
                throw new Error('Failed to add asset');
            }

            // Clear form fields on successful submission (optional)
            setAssetData({
                serialNumber: '',                // Reset serial number
                assetId: '',
                vendor: '',
                applicationName: '',
                qty: '',
                used: '',
                remaining: '',
                renewalCost: '',
                startDate: '',
                endDate: '',
                contactPerson: '',
                emailId: '',
                contactNumber: ''
            });

            // Redirect or show success message
            alert('Asset added successfully');
            window.location.href = '/asset-inventory'; // Redirect to asset inventory page
        } catch (error) {
            console.error('Error adding asset:', error);
            alert('Failed to add asset. Please try again.');
        }
    };

    return (
        <div className="container mx-auto p-4 w-1/2 mt-10 p-6 bg-gray-100 rounded-lg">
            <div className="text-2xl text-center font-bold mb-4 text-black">Add New License</div>
            <form onSubmit={handleSubmit} className="max-w-md mx-auto" id="assetForm">
                <div className="mb-4">
                    <label htmlFor="assetId" className="block text-sm font-medium text-gray-700">Line Item:</label>
                    <input
                        type="text"
                        id="assetId"
                        name="assetId"
                        placeholder="Enter asset ID"
                        value={assetData.assetId}
                        onChange={handleInputChange}
                        className="mt-1 block w-full border border-gray-400 rounded-md px-3 py-2 focus:outline-none focus:border-blue-500"
                        required
                    />
                </div>
                <div className="mb-4">
                    <label htmlFor="applicationName" className="block text-sm font-medium text-gray-700">Application Name:</label>
                    <input
                        type="text"
                        id="applicationName"
                        name="applicationName"
                        placeholder="Enter application name"
                        value={assetData.applicationName}
                        onChange={handleInputChange}
                        className="mt-1 block w-full border border-gray-400 rounded-md px-3 py-2 focus:outline-none focus:border-blue-500"
                        required
                    />
                </div>
                <div className="mb-4">
                    <label htmlFor="qty" className="block text-sm font-medium text-gray-700">Quantity:</label>
                    <input
                        type="number"
                        id="qty"
                        name="qty"
                        placeholder="Enter quantity"
                        value={assetData.qty}
                        onChange={handleInputChange}
                        className="mt-1 block w-full border border-gray-400 rounded-md px-3 py-2 focus:outline-none focus:border-blue-500"
                        required
                    />
                </div>
                <div className="mb-4">
                    <label htmlFor="startDate" className="block text-sm font-medium text-gray-700">Start Date:</label>
                    <input
                        type="date"
                        id="startDate"
                        name="startDate"
                        value={assetData.startDate}
                        onChange={handleInputChange}
                        className="mt-1 block w-full border border-gray-400 rounded-md px-3 py-2 focus:outline-none focus:border-blue-500"
                        required
                    />
                </div>
                <div className="mb-4">
                    <label htmlFor="endDate" className="block text-sm font-medium text-gray-700">End Date:</label>
                    <input
                        type="date"
                        id="endDate"
                        name="endDate"
                        value={assetData.endDate}
                        onChange={handleInputChange}
                        className="mt-1 block w-full border border-gray-400 rounded-md px-3 py-2 focus:outline-none focus:border-blue-500"
                        required
                    />
                </div>
                <div className="mb-4">
                    <label htmlFor="serialNumber" className="block text-sm font-medium text-gray-700">Serial Number:</label>
                    <input
                        type="text"
                        id="serialNumber"
                        name="serialNumber"
                        placeholder="Enter serial number (optional, must be unique)"
                        value={assetData.serialNumber}
                        onChange={handleInputChange}
                        className="mt-1 block w-full border border-gray-400 rounded-md px-3 py-2 focus:outline-none focus:border-blue-500"
                    />
                </div>
                <div className="mb-4">
                    <label htmlFor="renewalCost" className="block text-sm font-medium text-gray-700">Renewal Cost:</label>
                    <input
                        type="number"
                        id="renewalCost"
                        name="renewalCost"
                        placeholder="Enter renewal cost (optional)"
                        value={assetData.renewalCost}
                        onChange={handleInputChange}
                        className="mt-1 block w-full border border-gray-400 rounded-md px-3 py-2 focus:outline-none focus:border-blue-500"
                    />
                </div>
                <div className="mb-4">
                    <label htmlFor="vendor" className="block text-sm font-medium text-gray-700">Vendor Name:</label>
                    <input
                        type="text"
                        id="vendor"
                        name="vendor"
                        placeholder="Enter vendor name"
                        value={assetData.vendor}
                        onChange={handleInputChange}
                        className="mt-1 block w-full border border-gray-400 rounded-md px-3 py-2 focus:outline-none focus:border-blue-500"
                        required
                    />
                </div>
                <div className="mb-4">
                    <label htmlFor="contactPerson" className="block text-sm font-medium text-gray-700">Contact Person:</label>
                    <input
                        type="text"
                        id="contactPerson"
                        name="contactPerson"
                        placeholder="Enter contact person"
                        value={assetData.contactPerson}
                        onChange={handleInputChange}
                        className="mt-1 block w-full border border-gray-400 rounded-md px-3 py-2 focus:outline-none focus:border-blue-500"
                        required
                    />
                </div>
                <div className="mb-4">
                    <label htmlFor="emailId" className="block text-sm font-medium text-gray-700">Email ID:</label>
                    <input
                        type="email"
                        id="emailId"
                        name="emailId"
                        placeholder="Enter email ID"
                        value={assetData.emailId}
                        onChange={handleInputChange}
                        className="mt-1 block w-full border border-gray-400 rounded-md px-3 py-2 focus:outline-none focus:border-blue-500"
                        required
                    />
                </div>
                <div className="mb-4">
                    <label htmlFor="contactNumber" className="block text-sm font-medium text-gray-700">Contact Number:</label>
                    <input
                        type="text"
                        id="contactNumber"
                        name="contactNumber"
                        placeholder="Enter contact number"
                        value={assetData.contactNumber}
                        onChange={handleInputChange}
                        className="mt-1 block w-full border border-gray-400 rounded-md px-3 py-2 focus:outline-none focus:border-blue-500"
                        required
                    />
                </div>

                <div className="flex justify-center">
                    <button
                        type="submit"
                        className="bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 focus:outline-none focus:bg-blue-600"
                    >
                        Save
                    </button>
                    <button
                        type="button"
                        className="bg-gray-400 text-gray-700 py-2 px-4 ml-2 rounded-md hover:bg-gray-300 focus:outline-none focus:bg-gray-300"
                        onClick={() => {
                            window.location.href = '/asset-inventory'; 
                        }}
                    >
                        Cancel
                    </button>
                </div>
            </form>
        </div>
    );
};

export default AddNewAsset;   means not line up perefctly brlow the correct fields in inventory page