import React, { useState } from 'react';
import './SettingsId.css';

export default function SettingsId() {
  const [formData, setFormData] = useState({
    name: 'San Miguel Presidencial',
    guests: '2',
    bedType: 'King size',
    hotelierId: '000001',
    amenities: {
      jacuzzi: true,
      airConditioning: true,
      hairdryer: true,
      telephone: false,
      minibar: false,
    }
  });

  const handleChange = (e) => {
    const { name, value, type, checked } = e.target;

    if (name in formData.amenities) {
      setFormData(prev => ({
        ...prev,
        amenities: {
          ...prev.amenities,
          [name]: checked,
        },
      }));
    } else {
      setFormData(prev => ({
        ...prev,
        [name]: value,
      }));
    }
  };

  const handleSave = () => {
    console.log('Saving room:', formData);
    alert('Room data saved!');
  };

  return (
    <div className="settings-id-container">
      <h2 className="page-title">{formData.name}</h2>

      <div className="form-card">
        <div className="form-id"><strong>ID #{'0000001'}</strong></div>

        <div className="form-grid">
          <div>
            <label>Room Name</label>
            <input
              type="text"
              name="name"
              value={formData.name}
              onChange={handleChange}
            />
          </div>

          <div>
            <label>Little hotelier ID</label>
            <input
              type="text"
              name="hotelierId"
              value={formData.hotelierId}
              onChange={handleChange}
            />
          </div>

          <div>
            <label>Bed type:</label>
            <input
              type="text"
              name="bedType"
              value={formData.bedType}
              onChange={handleChange}
            />
          </div>

          <div>
            <label>Guests:</label>
            <select
              name="guests"
              value={formData.guests}
              onChange={handleChange}
            >
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
            </select>
          </div>

          <div className="amenities-section">
            <label>Amenities:</label>
            <div className="amenities-list">
              <label>
                <input
                  type="checkbox"
                  name="jacuzzi"
                  checked={formData.amenities.jacuzzi}
                  onChange={handleChange}
                /> Private Jacuzzi
              </label>
              <label>
                <input
                  type="checkbox"
                  name="airConditioning"
                  checked={formData.amenities.airConditioning}
                  onChange={handleChange}
                /> Air-conditioning
              </label>
              <label>
                <input
                  type="checkbox"
                  name="hairdryer"
                  checked={formData.amenities.hairdryer}
                  onChange={handleChange}
                /> Hairdryer
              </label>
              <label>
                <input
                  type="checkbox"
                  name="telephone"
                  checked={formData.amenities.telephone}
                  onChange={handleChange}
                /> Telephone
              </label>
              <label>
                <input
                  type="checkbox"
                  name="minibar"
                  checked={formData.amenities.minibar}
                  onChange={handleChange}
                /> Minibar
              </label>
            </div>
          </div>
        </div>

        <div className="save-button-wrapper">
          <button className="save-button" onClick={handleSave}>
            Save
          </button>
        </div>
      </div>
    </div>
  );
}
