import React, { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import './PropertyDetailPage.css';

export default function PropertyDetailPage() {
  const { id } = useParams();

  // Simulación de datos por ID
  const [property, setProperty] = useState(null);

  useEffect(() => {
    // Aquí normalmente iría un fetch a backend con el id
    // Simulamos los datos por ahora
    const mockData = {
      propertyId: id,
      name: 'Hacienda San Angel',
      rfc: 'XAXX010101000',
      phone: '33-33-33-33-33',
      address: 'Example 110, Puerto Vallarta, Jalisco',
      areas: ['Hotel', 'Restaurant'],
      mainArea: 'Hotel',
      services: [
        { name: 'ELECTRICITY', percent: 80 },
        { name: 'WATER', percent: 90 },
        { name: 'GAS', percent: 60 },
      ],
    };
    setProperty(mockData);
  }, [id]);

  const handleAddService = () => {
    const newService = { name: 'NEW SERVICE', percent: 50 };
    setProperty((prev) => ({
      ...prev,
      services: [...prev.services, newService],
    }));
  };

  if (!property) return <p>Loading...</p>;

  return (
    <div className="property-detail-container">
      <h2>Property {property.propertyId}</h2>

      <div className="property-info-box">
        <div className="property-info">
          <p><strong>ID:</strong> #{property.propertyId}</p>
          <p><strong>{property.name}</strong></p>
          <p><strong>RFC:</strong> <input type="text" defaultValue={property.rfc} /></p>
          <p><strong>Areas:</strong>
            <select multiple defaultValue={property.areas}>
              <option>Hotel</option>
              <option>Restaurant</option>
              <option>Bar</option>
              <option>Spa</option>
            </select>
          </p>
          <p><strong>Main area:</strong>
            <select defaultValue={property.mainArea}>
              <option>Hotel</option>
              <option>Restaurant</option>
              <option>Bar</option>
              <option>Spa</option>
            </select>
          </p>
        </div>

        <div className="property-contact">
          <p><strong>Phone number:</strong> <input type="text" defaultValue={property.phone} /></p>
          <p><strong>Address:</strong> {property.address}</p>
          <button className="save-button">Save</button>
        </div>
      </div>

      <table className="custom-table">
        <thead>
          <tr>
            <th>SERVICE</th>
            <th>%</th>
          </tr>
        </thead>
        <tbody>
          {property.services.map((service, idx) => (
            <tr key={idx}>
              <td>{service.name}</td>
              <td>{service.percent}</td>
            </tr>
          ))}
          <tr>
            <td>
              <button onClick={handleAddService} className="add-button">
                + Add service…
              </button>
            </td>
            <td></td>
          </tr>
        </tbody>
      </table>
    </div>
  );
}
