/* Apartment detail + booking modal */
const { useState: useStateD, useEffect: useEffectD } = React;

function range(n) { const r = []; for (let i = 0; i < n; i++) r.push(i); return r; }

function fmtPriceD(n) { return n.toLocaleString('ru-RU').replace(/,/g,' ') + ' ₸'; }

function Gallery({ images, title }) {
  const [i, setI] = useStateD(0);
  const [lightbox, setLightbox] = useStateD(false);

  useEffectD(() => {
    const onKey = (e) => {
      if (e.key === 'ArrowLeft') setI(prev => (prev - 1 + images.length) % images.length);
      else if (e.key === 'ArrowRight') setI(prev => (prev + 1) % images.length);
      else if (e.key === 'Escape' && lightbox) {
        e.stopPropagation();
        e.stopImmediatePropagation();
        setLightbox(false);
      }
    };
    // Capture phase so we can swallow Escape before the parent modal handler
    document.addEventListener('keydown', onKey, true);
    return () => document.removeEventListener('keydown', onKey, true);
  }, [images.length, lightbox]);

  const prev = () => setI((i - 1 + images.length) % images.length);
  const next = () => setI((i + 1) % images.length);

  return (
    <div className="d-gallery">
      <div className="d-gallery-main" onClick={() => setLightbox(true)} role="button" tabIndex={0}>
        <img src={images[i]} alt={title} />
        {images.length > 1 && (
          <>
            <button className="d-gal-nav d-gal-prev" onClick={(e) => { e.stopPropagation(); prev(); }} aria-label="Назад">‹</button>
            <button className="d-gal-nav d-gal-next" onClick={(e) => { e.stopPropagation(); next(); }} aria-label="Вперёд">›</button>
            <div className="d-gal-counter">{i + 1} / {images.length}</div>
          </>
        )}
        <div className="d-gal-zoom" aria-hidden="true">
          <svg viewBox="0 0 20 20" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.6">
            <circle cx="9" cy="9" r="6" /><path d="M14 14l4 4M7 9h4M9 7v4" strokeLinecap="round" />
          </svg>
        </div>
      </div>
      {images.length > 1 && (
        <div className="d-gallery-thumbs">
          {images.map((src, idx) => (
            <button key={idx} className={"d-thumb" + (i === idx ? " is-active" : "")}
              onClick={() => setI(idx)}>
              <img src={src} alt="" loading="lazy" />
            </button>
          ))}
        </div>
      )}

      {lightbox && (
        <div className="d-lightbox" onClick={() => setLightbox(false)}>
          <button className="d-lightbox-close" aria-label="Закрыть">×</button>
          <button className="d-lightbox-nav d-lightbox-prev" onClick={(e) => { e.stopPropagation(); prev(); }} aria-label="Назад">‹</button>
          <img src={images[i]} alt={title} onClick={(e) => e.stopPropagation()} />
          <button className="d-lightbox-nav d-lightbox-next" onClick={(e) => { e.stopPropagation(); next(); }} aria-label="Вперёд">›</button>
          <div className="d-lightbox-counter">{i + 1} / {images.length}</div>
        </div>
      )}
    </div>
  );
}

// Mini availability calendar
function MiniCal({ checkIn, checkOut, onPick }) {
  const today = new Date();
  const [month, setMonth] = useStateD({ y: today.getFullYear(), m: today.getMonth() });
  const monthName = new Date(month.y, month.m, 1).toLocaleDateString('ru-RU', { month: 'long', year: 'numeric' });
  const firstDow = (new Date(month.y, month.m, 1).getDay() + 6) % 7; // Mon=0
  const daysInMonth = new Date(month.y, month.m + 1, 0).getDate();
  const dayKey = (d) => `${month.y}-${String(month.m+1).padStart(2,'0')}-${String(d).padStart(2,'0')}`;
  // demo unavailable days (deterministic by month)
  const unavail = new Set();
  for (let i = 0; i < 7; i++) unavail.add(((month.m * 5 + i * 3) % daysInMonth) + 1);

  const inRange = (d) => {
    if (!checkIn || !checkOut) return false;
    const ts = new Date(month.y, month.m, d).getTime();
    return ts > new Date(checkIn).getTime() && ts < new Date(checkOut).getTime();
  };
  const isStart = (d) => checkIn === dayKey(d);
  const isEnd = (d) => checkOut === dayKey(d);

  return (
    <div className="d-cal">
      <div className="d-cal-head">
        <button onClick={() => setMonth({ y: month.m === 0 ? month.y - 1 : month.y, m: (month.m + 11) % 12 })}>‹</button>
        <span className="d-cal-month">{monthName}</span>
        <button onClick={() => setMonth({ y: month.m === 11 ? month.y + 1 : month.y, m: (month.m + 1) % 12 })}>›</button>
      </div>
      <div className="d-cal-grid">
        {['пн','вт','ср','чт','пт','сб','вс'].map(d => <div key={d} className="d-cal-dow">{d}</div>)}
        {range(firstDow).map(i => <div key={'e'+i} />)}
        {range(daysInMonth).map(i => {
          const d = i + 1;
          const isPast = new Date(month.y, month.m, d) < new Date(today.getFullYear(), today.getMonth(), today.getDate());
          const u = unavail.has(d) || isPast;
          return (
            <button key={d}
              className={[
                "d-cal-day",
                u ? "is-unavail" : "",
                isStart(d) ? "is-start" : "",
                isEnd(d) ? "is-end" : "",
                inRange(d) ? "is-in-range" : ""
              ].filter(Boolean).join(' ')}
              disabled={u}
              onClick={() => onPick(dayKey(d))}>
              {d}
            </button>
          );
        })}
      </div>
      <div className="d-cal-legend">
        <span className="dl-sw"></span>выбрано
        <span className="dl-sw dl-sw-un"></span>занято
      </div>
    </div>
  );
}

function ApartmentDetail({ apt, onClose, onBook }) {
  const images = (apt.images && apt.images.length) ? apt.images : [apt.cover];

  const [checkIn, setCheckIn] = useStateD(null);
  const [checkOut, setCheckOut] = useStateD(null);

  const pickDate = (d) => {
    if (!checkIn || (checkIn && checkOut)) {
      setCheckIn(d); setCheckOut(null);
    } else if (new Date(d) > new Date(checkIn)) {
      setCheckOut(d);
    } else {
      setCheckIn(d);
    }
  };

  const nights = (checkIn && checkOut)
    ? Math.round((new Date(checkOut) - new Date(checkIn)) / 86400000)
    : 0;
  const subtotal = nights * apt.price;
  const cleaning = 5000;
  const deposit = 10000; // returned
  const total = subtotal + cleaning;

  useEffectD(() => {
    const onKey = e => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => {
      document.removeEventListener('keydown', onKey);
      document.body.style.overflow = '';
    };
  }, []);

  return (
    <div className="d-overlay" onClick={onClose}>
      <div className="d-modal" onClick={e => e.stopPropagation()}>
        <button className="d-close" onClick={onClose} aria-label="Закрыть">×</button>

        <div className="d-grid">
          <div className="d-left">
            <Gallery images={images} title={apt.title} />

            <div className="d-info">
              <div className="d-eyebrow">{apt.building} · {apt.address}</div>
              <h2 className="d-title">{apt.title}</h2>

              <div className="d-stats">
                <div className="d-stat"><span className="ds-num">{apt.area}</span><span className="ds-lbl">м²</span></div>
                <div className="d-stat"><span className="ds-num">{apt.guests}</span><span className="ds-lbl">гостей</span></div>
                <div className="d-stat"><span className="ds-num">{apt.type}</span><span className="ds-lbl">планировка</span></div>
              </div>

              <div className="d-section">
                <h4>Спальные места</h4>
                <p>{apt.beds}</p>
              </div>

              <div className="d-section">
                <h4>Удобства</h4>
                <ul className="d-amen">
                  <li>Wi-Fi</li>
                  <li>Кухня</li>
                  <li>Стиральная машина</li>
                  <li>ТВ</li>
                  <li>Кондиционер</li>
                  <li>Постельное бельё</li>
                  <li>Полотенца</li>
                  <li>Тёплый пол</li>
                </ul>
              </div>

              <div className="d-section">
                <h4>Заезд / выезд</h4>
                <p>Заезд после 14:00 · Выезд до 12:00 · Депозит 10&nbsp;000&nbsp;₸ возвращается до&nbsp;17:00 в день выезда.</p>
              </div>
            </div>
          </div>

          <aside className="d-right">
            <div className="d-book">
              <div className="d-price-head">
                <span className="d-price-num">{fmtPriceD(apt.price)}</span>
                <span className="d-price-per">/ ночь</span>
              </div>

              <MiniCal checkIn={checkIn} checkOut={checkOut} onPick={pickDate} />

              <div className="d-dates-row">
                <div className="d-dates-cell">
                  <div className="d-dates-lbl">Заезд</div>
                  <div className="d-dates-val">{checkIn ? new Date(checkIn).toLocaleDateString('ru-RU', { day: '2-digit', month: 'short' }) : '—'}</div>
                </div>
                <div className="d-dates-cell">
                  <div className="d-dates-lbl">Выезд</div>
                  <div className="d-dates-val">{checkOut ? new Date(checkOut).toLocaleDateString('ru-RU', { day: '2-digit', month: 'short' }) : '—'}</div>
                </div>
                <div className="d-dates-cell">
                  <div className="d-dates-lbl">Гости</div>
                  <div className="d-dates-val">2 взр.</div>
                </div>
              </div>

              {nights > 0 && (
                <div className="d-breakdown">
                  <div className="d-bd-row">
                    <span>{fmtPriceD(apt.price)} × {nights} {nights === 1 ? 'ночь' : nights < 5 ? 'ночи' : 'ночей'}</span>
                    <span>{fmtPriceD(subtotal)}</span>
                  </div>
                  <div className="d-bd-row">
                    <span>Уборка</span>
                    <span>{fmtPriceD(cleaning)}</span>
                  </div>
                  <div className="d-bd-row d-bd-muted">
                    <span>Депозит (возвращается)</span>
                    <span>{fmtPriceD(deposit)}</span>
                  </div>
                  <div className="d-bd-total">
                    <span>Итого</span>
                    <span>{fmtPriceD(total)}</span>
                  </div>
                </div>
              )}

              <button className="d-book-cta" disabled={nights === 0}
                onClick={() => onBook({ apt, checkIn, checkOut, nights, total })}>
                {nights === 0 ? 'Выберите даты' : 'Забронировать →'}
              </button>

              <div className="d-trust">
                <span>✓ Подтверждение в течение 1 часа</span>
                <span>✓ Без комиссий за бронирование</span>
              </div>
            </div>
          </aside>
        </div>
      </div>
    </div>
  );
}

window.ApartmentDetail = ApartmentDetail;