import React, { useState } from 'react';
import { Trash2, Edit3, Save, X } from 'lucide-react';

const App = () => {
  const [properties, setProperties] = useState([]);
  const [property, setProperty] = useState({ name: '', address: '', rent: '' });
  const [editIndex, setEditIndex] = useState(null);
  const [filterRent, setFilterRent] = useState('');

  const addProperty = () => {
    if (property.name && property.address && property.rent) {
      setProperties([...properties, property]);
      setProperty({ name: '', address: '', rent: '' });
    }
  };

  const updateProperty = (index) => {
    const updatedProperties = properties.map((prop, i) =>
      i === index ? property : prop
    );
    setProperties(updatedProperties);
    setEditIndex(null);
    setProperty({ name: '', address: '', rent: '' });
  };

  const deleteProperty = (index) => {
    setProperties(properties.filter((_, i) => i !== index));
  };

  const filteredProperties = properties.filter((prop) =>
    filterRent ? prop.rent <= filterRent : true
  );

  return (
    <div className="min-h-screen bg-gray-100 p-8">
      <h1 className="text-3xl font-bold mb-6">Rental Property Manager</h1>
      <div className="bg-white p-6 rounded-lg shadow-md mb-6">
        <h2 className="text-xl font-semibold mb-4">
          {editIndex !== null ? 'Edit Property' : 'Add New Property'}
        </h2>
        <input
          type="text"
          placeholder="Property Name"
          value={property.name}
          onChange={(e) => setProperty({ ...property, name: e.target.value })}
          className="block w-full mb-2 p-2 border rounded"
        />
        <input
          type="text"
          placeholder="Address"
          value={property.address}
          onChange={(e) => setProperty({ ...property, address: e.target.value })}
          className="block w-full mb-2 p-2 border rounded"
        />
        <input
          type="number"
          placeholder="Rent"
          value={property.rent}
          onChange={(e) => setProperty({ ...property, rent: e.target.value })}
          className="block w-full mb-4 p-2 border rounded"
        />
        {editIndex !== null ? (
          <button
            onClick={() => updateProperty(editIndex)}
            className="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600 mr-2"
          >
            <Save className="inline-block mr-1" /> Save
          </button>
        ) : (
          <button
            onClick={addProperty}
            className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
          >
            Add Property
          </button>
        )}
        {editIndex !== null && (
          <button
            onClick={() => setEditIndex(null)}
            className="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600 ml-2"
          >
            <X className="inline-block mr-1" /> Cancel
          </button>
        )}
      </div>
      <div className="bg-white p-6 rounded-lg shadow-md mb-6">
        <h2 className="text-xl font-semibold mb-4">Filter Properties by Rent</h2>
        <input
          type="number"
          placeholder="Max Rent"
          value={filterRent}
          onChange={(e) => setFilterRent(e.target.value)}
          className="block w-full mb-4 p-2 border rounded"
        />
      </div>
      <div className="bg-white p-6 rounded-lg shadow-md">
        <h2 className="text-xl font-semibold mb-4">Properties</h2>
        {filteredProperties.length === 0 ? (
          <p>No properties match the criteria.</p>
        ) : (
          <ul>
            {filteredProperties.map((prop, index) => (
              <li key={index} className="flex justify-between items-center mb-2">
                <div>
                  <p className="font-semibold">{prop.name}</p>
                  <p>{prop.address}</p>
                  <p>${prop.rent}/month</p>
                </div>
                <div>
                  <button
                    onClick={() => {
                      setEditIndex(index);
                      setProperty(prop);
                    }}
                    className="text-blue-500 hover:text-blue-700 mr-2"
                  >
                    <Edit3 />
                  </button>
                  <button
                    onClick={() => deleteProperty(index)}
                    className="text-red-500 hover:text-red-700"
                  >
                    <Trash2 />
                  </button>
                </div>
              </li>
            ))}
          </ul>
        )}
      </div>
    </div>
  );
};

export default App;