// room-modal.jsx — Add / Edit room

const ROOM_TYPES = ['Standard', 'Deluxe', 'Suite', 'Suite Panorama'];
const BED_OPTIONS = [
  '1 giường đôi', '2 giường đơn', '1 giường King', '2 giường Queen',
  '1 giường King + sofa', '1 giường Super King', '1 King + 1 đơn',
];
const FEATURE_SUGGESTIONS = [
  { g: 'View',    items: ['Hướng vườn', 'View núi', 'View thung lũng', 'View rừng thông', 'View hồ', 'View toàn cảnh'] },
  { g: 'Không gian', items: ['Ban công', 'Ban công lớn', 'Sân riêng', 'Sân thượng', 'Sân thượng ngắm sao'] },
  { g: 'Tiện nghi',  items: ['Bồn tắm', 'Bồn tắm ngoài trời', 'Jacuzzi', 'Vòi sen mưa', 'Bếp nhỏ', 'Bếp riêng'] },
  { g: 'Sưởi & TV',  items: ['Lò sưởi điện', 'Lò sưởi củi', 'Tivi 4K', 'Máy lạnh', 'Máy pha cà phê'] },
  { g: 'Làm việc',   items: ['Wi-Fi nhanh', 'Bàn làm việc', 'Phòng họp nhỏ'] },
  { g: 'Khác',       items: ['Pet-friendly', 'Family friendly', 'Honeymoon setup', 'Tủ lạnh mini'] },
];

const INITIAL_STATUSES = [
  { k: 'available',   l: 'Sẵn sàng đón khách', c: '#137333' },
  { k: 'cleaning',    l: 'Cần dọn',            c: '#f29900' },
  { k: 'maintenance', l: 'Bảo trì',             c: '#5f6368' },
];

function RoomModal({ room, existingRooms, onClose, onSave, onDelete }) {
  const isEdit = !!room;
  const [form, setForm] = React.useState(() => {
    if (room) return { ...room, features: room.features ? [...room.features] : [] };
    // Default for new room — auto-suggest next number based on highest floor
    const maxNum = existingRooms.reduce((mx, r) => Math.max(mx, parseInt(r.number) || 0), 0);
    return {
      number: maxNum > 0 ? String(maxNum + 1) : '101',
      name: '',
      floor: maxNum > 0 ? Math.floor(maxNum / 100) || 1 : 1,
      type: 'Standard',
      bed: '1 giường đôi',
      cap: 2,
      price: 850000,
      status: 'available',
      features: [],
    };
  });

  const [customFeature, setCustomFeature] = React.useState('');
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));

  const toggleFeature = (f) => {
    setForm(curr => ({
      ...curr,
      features: curr.features.includes(f)
        ? curr.features.filter(x => x !== f)
        : [...curr.features, f],
    }));
  };
  const addCustomFeature = () => {
    const v = customFeature.trim();
    if (!v) return;
    if (!form.features.includes(v)) setForm(curr => ({ ...curr, features: [...curr.features, v] }));
    setCustomFeature('');
  };

  // Duplicate number check
  const numConflict = existingRooms.some(r => r.number === form.number && r.id !== form.id);
  const canSave = form.number && !numConflict && form.bed && form.price > 0;

  const handleSave = () => {
    if (!canSave) return;
    const id = form.id || ('r' + form.number);
    onSave({ ...form, id, price: Number(form.price), cap: Number(form.cap), floor: Number(form.floor) });
  };

  // Preview card
  const previewType = form.type.startsWith('Suite') ? 'Suite' : form.type;

  return (
    <div className="scrim" onClick={onClose}>
      <div className="modal room-modal" onClick={(e) => e.stopPropagation()} style={{ width: 760 }}>
        <div className="modal-hd">
          <div>
            <h2>{isEdit ? 'Sửa phòng' : 'Thêm phòng mới'}</h2>
            <div className="sub">
              {isEdit ? `Phòng ${room.number} · ${room.name || room.type}` : 'Tạo phòng cho Windy Hill Homestay'}
            </div>
          </div>
          <button className="modal-x" onClick={onClose} aria-label="Đóng">
            <Icon name="x" size={20} />
          </button>
        </div>

        <div className="modal-body" style={{ display: 'grid', gridTemplateColumns: '1fr 260px', gap: 22 }}>
          {/* Form */}
          <div>
            <div className="field-row-3">
              <div className="field">
                <label>Số phòng <span className="req">*</span></label>
                <input
                  type="text"
                  value={form.number}
                  onChange={(e) => set('number', e.target.value.trim())}
                  placeholder="101"
                />
                {numConflict && (
                  <div className="hint" style={{ color: 'var(--status-cancel)' }}>
                    Số phòng đã tồn tại
                  </div>
                )}
              </div>
              <div className="field">
                <label>Tầng</label>
                <input
                  type="number"
                  min="0" max="20"
                  value={form.floor}
                  onChange={(e) => set('floor', +e.target.value || 1)}
                />
              </div>
              <div className="field">
                <label>Sức chứa</label>
                <input
                  type="number"
                  min="1" max="10"
                  value={form.cap}
                  onChange={(e) => set('cap', +e.target.value || 1)}
                />
                <div className="hint">khách tối đa</div>
              </div>
            </div>

            <div className="field">
              <label>Tên phòng <span style={{ color: 'var(--ink-4)', fontWeight: 400 }}>· tùy chọn</span></label>
              <input
                type="text"
                value={form.name}
                onChange={(e) => set('name', e.target.value)}
                placeholder="VD: Phòng Mây, Suite Đỉnh Núi, Hidden Garden…"
              />
              <div className="hint">Đặt tên gợi cảm để khách dễ nhớ — bỏ trống thì hiển thị "Phòng {form.number}"</div>
            </div>

            <div className="field-row">
              <div className="field">
                <label>Loại phòng</label>
                <select value={form.type} onChange={(e) => set('type', e.target.value)}>
                  {ROOM_TYPES.map(t => <option key={t} value={t}>{t}</option>)}
                </select>
              </div>
              <div className="field">
                <label>Loại giường</label>
                <select value={form.bed} onChange={(e) => set('bed', e.target.value)}>
                  {BED_OPTIONS.map(b => <option key={b} value={b}>{b}</option>)}
                </select>
              </div>
            </div>

            <div className="field-row">
              <div className="field">
                <label>Giá / đêm (VNĐ)</label>
                <input
                  type="number"
                  min="0" step="50000"
                  value={form.price}
                  onChange={(e) => set('price', +e.target.value || 0)}
                />
                <div className="hint">
                  Hiển thị: <b>{VND(form.price)}</b>
                </div>
              </div>
              <div className="field">
                <label>Trạng thái khởi đầu</label>
                <select value={form.status} onChange={(e) => set('status', e.target.value)}>
                  {INITIAL_STATUSES.map(s => <option key={s.k} value={s.k}>{s.l}</option>)}
                </select>
              </div>
            </div>

            <div className="field" style={{ marginTop: 6 }}>
              <label>Tính năng & tiện nghi</label>
              <div className="hint" style={{ marginBottom: 8 }}>
                Bấm chip để chọn · {form.features.length} đã chọn
              </div>
              {FEATURE_SUGGESTIONS.map(g => (
                <div key={g.g} style={{ marginBottom: 10 }}>
                  <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--ink-3)', marginBottom: 5, letterSpacing: '.04em', textTransform: 'uppercase' }}>
                    {g.g}
                  </div>
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 5 }}>
                    {g.items.map(f => (
                      <button
                        key={f}
                        type="button"
                        onClick={() => toggleFeature(f)}
                        className={`feat-chip ${form.features.includes(f) ? 'on' : ''}`}
                      >
                        {form.features.includes(f) && <Icon name="check" size={11} stroke={2.5} />}
                        {f}
                      </button>
                    ))}
                  </div>
                </div>
              ))}
              <div style={{ display: 'flex', gap: 6, marginTop: 10 }}>
                <input
                  type="text"
                  placeholder="Thêm tính năng tùy chỉnh…"
                  value={customFeature}
                  onChange={(e) => setCustomFeature(e.target.value)}
                  onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); addCustomFeature(); } }}
                  style={{ flex: 1, border: '1px solid var(--line-strong)', padding: '8px 11px', borderRadius: 'var(--r-sm)', fontSize: 13, background: 'var(--bg)', color: 'var(--ink)' }}
                />
                <button className="btn-outline" onClick={addCustomFeature} disabled={!customFeature.trim()}>
                  <Icon name="plus" size={13} stroke={2.5} /> Thêm
                </button>
              </div>
            </div>
          </div>

          {/* Live preview */}
          <div style={{ position: 'sticky', top: 0 }}>
            <div className="lbl-strong" style={{ marginBottom: 10, fontSize: 11, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '.05em' }}>
              Xem trước card
            </div>
            <div className="room-card" data-type={previewType} style={{ cursor: 'default' }}>
              <div className="room-banner">
                <svg className="b-art" viewBox="0 0 320 100" preserveAspectRatio="none">
                  {previewType === 'Suite' ? (
                    <>
                      <path d="M0 80 L60 30 L100 50 L160 10 L220 40 L280 20 L320 50 L320 100 L0 100 Z" fill="white" opacity=".22"/>
                      <circle cx="260" cy="22" r="6" fill="white" opacity=".4"/>
                    </>
                  ) : previewType === 'Deluxe' ? (
                    <path d="M0 70 L80 25 L150 55 L220 20 L320 60 L320 100 L0 100 Z" fill="white" opacity=".22"/>
                  ) : (
                    <path d="M0 75 Q80 50 160 70 T320 60 L320 100 L0 100 Z" fill="white" opacity=".2"/>
                  )}
                </svg>
                <span className="b-num">P.{form.number || '—'} · Tầng {form.floor}</span>
                <span className="b-status">
                  <span className="pill-dot" style={{ background: INITIAL_STATUSES.find(s => s.k === form.status)?.c }} />
                  {INITIAL_STATUSES.find(s => s.k === form.status)?.l.split(' ')[0]}
                </span>
                <div className="b-name">{form.name || ('Phòng ' + (form.number || '?'))}</div>
              </div>
              <div className="room-body">
                <div className="room-meta">
                  <span className="m-it"><Icon name="bed" size={14} /> {form.bed}</span>
                  <span className="m-it"><Icon name="users" size={14} /> {form.cap}</span>
                  <span className="room-price">{VNDshort(form.price)}đ<span className="per">/đêm</span></span>
                </div>
                {form.features.length > 0 && (
                  <div className="room-features">
                    {form.features.slice(0, 4).map((f, i) => (
                      <span key={i} className="room-feature">{f}</span>
                    ))}
                    {form.features.length > 4 && <span className="room-feature">+{form.features.length - 4}</span>}
                  </div>
                )}
              </div>
            </div>
            {isEdit && onDelete && (
              <button
                className="btn-danger"
                style={{ marginTop: 14, width: '100%' }}
                onClick={() => {
                  if (confirm(`Xóa phòng ${form.number} (${form.name || form.type})?\nLưu ý: các đặt phòng cho phòng này sẽ bị mất.`)) {
                    onDelete(room.id);
                  }
                }}
              >
                <Icon name="trash" size={13} style={{ verticalAlign: '-2px', marginRight: 4 }} />
                Xóa phòng này
              </button>
            )}
          </div>
        </div>

        <div className="modal-ft">
          <div style={{ fontSize: 12, color: 'var(--ink-3)' }}>
            {isEdit ? `Sửa đổi: P.${form.number} · ${form.type}` : 'Phòng mới sẽ xuất hiện trên Timeline và trang Quản lý phòng'}
          </div>
          <div className="sp" />
          <button className="btn-ghost" onClick={onClose}>Hủy</button>
          <button className="btn-primary" onClick={handleSave} disabled={!canSave}>
            {isEdit ? 'Lưu thay đổi' : '+ Thêm phòng'}
          </button>
        </div>
      </div>
    </div>
  );
}

window.RoomModal = RoomModal;