/* Аренда — пространства, галерея, бронь (Cal.com-стиль) */

/* ============================================================
   ПОДКЛЮЧЕНИЕ НАСТОЯЩЕЙ БРОНИ Cal.com
   ------------------------------------------------------------
   Это официальный встраиваемый виджет Cal.com (embed.js) — он
   работает в обычном HTML, в отличие от @calcom/atoms (тот нужен
   для платформенного плана + сборка + API-ключ).

   Чтобы подключить запись к пространству — впишите его ссылку
   Cal.com в поле calLink в js/data.js. Подходят и личные
   ('dzagli/event'), и командные ('team/dzagli-tbilisi/event').
   Пока поле пустое — показывается демо-виджет ниже.
   ============================================================ */
const CAL_BRAND = { light: { 'cal-brand': '#053700' }, dark: { 'cal-brand': '#419412' } };

/* Кнопка брони — открывает Cal.com во всплывающем окне (popup) */
function CalBooker({ calLink, label }) {
  const ref = useRef(null);
  useEffect(() => {
    if (!calLink) return;
    /* загрузчик embed.js (официальный сниппет Cal.com) */
    (function (C, A, L) { let p = function (a, ar) { a.q.push(ar); }; let d = C.document; C.Cal = C.Cal || function () { let cal = C.Cal; let ar = arguments; if (!cal.loaded) { cal.ns = {}; cal.q = cal.q || []; d.head.appendChild(d.createElement("script")).src = A; cal.loaded = true; } if (ar[0] === L) { const api = function () { p(api, arguments); }; const namespace = ar[1]; api.q = api.q || []; if (typeof namespace === "string") { cal.ns[namespace] = cal.ns[namespace] || api; p(cal.ns[namespace], ar); p(cal, ["initNamespace", namespace]); } else p(cal, ar); return; } p(cal, ar); }; })(window, "https://app.cal.com/embed/embed.js", "init");
    const ns = calLink.replace(/[^a-z0-9]/gi, '_');
    window.Cal("init", ns, { origin: "https://app.cal.com" });
    window.Cal.ns[ns]("ui", { cssVarsPerTheme: CAL_BRAND, hideEventTypeDetails: false, layout: "week_view" });
  }, [calLink]);
  const ns = calLink.replace(/[^a-z0-9]/gi, '_');
  return (
    <button ref={ref} className="btn btn--green" style={{ width: '100%', justifyContent: 'center', marginTop: 26 }}
      data-cal-namespace={ns}
      data-cal-link={calLink}
      data-cal-config='{"layout":"week_view","useSlotsViewOnSmallScreen":"true"}'>
      {label || 'Забронировать'} <Arrow className="arr" />
    </button>
  );
}

function Rental({ go }) {
  const D = window.DATA;
  const ready = D.spaces.filter(s => !s.soon);
  const [active, setActive] = useState(ready[0].id);
  const sp = D.spaces.find(s => s.id===active);
  const [gi, setGi] = useState(0);
  useEffect(()=>{ setGi(0); }, [active]);

  return (
    <div className="wrap section-pad">
      <SectionHead index="04" kicker="аренда"
        title="Снять пространство"
        intro="Два готовых пространства под аренду — приватный кабинет для индивидуальных встреч и театральный зал-трансформер. Ещё несколько площадок готовим к открытию. Выберите помещение, посмотрите условия и забронируйте слот." />

      {/* выбор помещения */}
      <div className="flex gap-s" style={{ flexWrap:'wrap', marginBottom:28 }}>
        {D.spaces.map(s => (
          <button key={s.id} className={'chip'+(active===s.id?' is-on':'')+(s.soon?' chip--soon':'')} onClick={()=>setActive(s.id)}>
            {s.name}{s.soon && <span className="chip__soon">скоро</span>}
          </button>
        ))}
      </div>

      {sp.soon ? (
        <div className="space-soon">
          <span className="mono eyebrow eyebrow--green" style={{ marginBottom:14 }}>в разработке</span>
          <h3 style={{ fontSize:'clamp(30px,4.4vw,52px)' }}>{sp.name}</h3>
          <p className="muted prettyw" style={{ marginTop:14, maxWidth:'38ch', fontSize:17 }}>
            Это пространство мы ещё готовим к аренде. Хотите забронировать его одним из первых — напишите нам, сообщим, как только откроем.
          </p>
          <button className="btn btn--solid" style={{ marginTop:22 }} onClick={()=>go('feed')}>Написать нам <Arrow className="arr"/></button>
        </div>
      ) : (
      <div className="rental-grid">
        {/* галерея */}
        <div>
          {sp.photos && sp.photos[gi]
            ? <div className="ph" style={{ aspectRatio:'16/10' }}><img src={sp.photos[gi]} alt={sp.gallery[gi]} /><span className="ph__label">{sp.gallery[gi]}</span></div>
            : <Ph label={sp.gallery[gi]} ratio="16/10" />}
          <div className="thumbs">
            {sp.gallery.map((g,i)=>(
              <button key={i} className={'thumb'+(gi===i?' is-on':'')} onClick={()=>setGi(i)}>
                {sp.photos && sp.photos[i]
                  ? <div className="ph" style={{ aspectRatio:'4/3' }}><img src={sp.photos[i]} alt="" /></div>
                  : <Ph label={'0'+(i+1)} ratio="4/3" />}
              </button>
            ))}
          </div>
        </div>

        {/* инфо + бронь */}
        <div>
          <div className="flex between" style={{ alignItems:'baseline', gap:14 }}>
            <h3 style={{ fontSize:'clamp(30px,4vw,48px)' }}>{sp.name}</h3>
            <span className="serif rust" style={{ fontSize:'clamp(20px,2.6vw,28px)', whiteSpace:'nowrap' }}>{sp.price}</span>
          </div>
          <div className="flex gap-m mono faint" style={{ fontSize:12.5, marginTop:8, marginBottom:18 }}>
            <span>{sp.cap}</span><span>·</span><span>{sp.area}</span>
          </div>
          <p className="prettyw" style={{ fontSize:17, maxWidth:'46ch', whiteSpace:'pre-line' }}>{sp.desc}</p>
          <div className="flex gap-s" style={{ flexWrap:'wrap', marginTop:18 }}>
            {sp.tags.map(t => <span key={t} className="amenity mono">{t}</span>)}
          </div>

          {/* тарифы */}
          {sp.rates && (
            <div className="rates">
              <div className="mono eyebrow" style={{ color:'var(--green)', marginBottom:12 }}>условия аренды</div>
              {sp.rates.map(([price,note],i)=>(
                <div key={i} className="rate">
                  <span className="serif rate__price">{price}</span>
                  <span className="prettyw rate__note muted">{note}</span>
                </div>
              ))}
            </div>
          )}

          {/* бронь: кнопка-popup Cal.com если задана ссылка, иначе демо */}
          {sp.calLink
            ? <CalBooker calLink={sp.calLink} label={'Забронировать · ' + sp.name} />
            : <Booking sp={sp} />}
        </div>
      </div>
      )}

      {/* карта */}
      <div className="map-block">
        <div className="map-info">
          <div className="mono eyebrow eyebrow--green" style={{ marginBottom:12 }}>как добраться</div>
          <h3 style={{ fontSize:'clamp(26px,3.4vw,38px)', maxWidth:'14ch' }} className="wrapb">Две квартиры и двор в центре Тбилиси</h3>
          <p className="muted prettyw" style={{ marginTop:14, maxWidth:'38ch' }}>
            Район Сололаки, тихий двор в пешей доступности от метро. Точный адрес и код двери пришлём после брони.
          </p>
          <div className="flex col" style={{ gap:6, marginTop:18 }}>
            <span className="mono" style={{ fontSize:13 }}>ул. Бесики, Тбилиси</span>
            <span className="mono faint" style={{ fontSize:12.5 }}>каждый день · 10:00–22:00</span>
          </div>
        </div>
        <Ph label="карта · Сололаки, Тбилиси" ratio="16/9" className="map-ph" />
      </div>
    </div>
  );
}

function Booking({ sp }) {
  const days = [
    {d:'12',w:'чт'},{d:'13',w:'пт'},{d:'14',w:'сб'},{d:'15',w:'вс'},{d:'16',w:'пн'},{d:'17',w:'вт'},{d:'18',w:'ср'}
  ];
  const slots = ['10:00','12:00','14:00','16:00','18:00','20:00'];
  const [day, setDay] = useState('14');
  const [slot, setSlot] = useState(null);
  const [done, setDone] = useState(false);
  useEffect(()=>{ setSlot(null); setDone(false); }, [sp.id]);

  return (
    <div className="booking">
      <div className="flex between center" style={{ marginBottom:14 }}>
        <span className="mono" style={{ fontSize:12, letterSpacing:'0.08em', textTransform:'uppercase', color:'var(--green)' }}>бронь · Cal.com</span>
        <span className="mono faint" style={{ fontSize:11.5 }}>июнь 2026</span>
      </div>
      <div className="booking__days">
        {days.map(x => (
          <button key={x.d} className={'bday'+(day===x.d?' is-on':'')} onClick={()=>{setDay(x.d); setDone(false);}}>
            <span className="mono bday__w">{x.w}</span>
            <span className="serif bday__d">{x.d}</span>
          </button>
        ))}
      </div>
      <div className="booking__slots">
        {slots.map(s => (
          <button key={s} className={'bslot'+(slot===s?' is-on':'')} onClick={()=>{setSlot(s); setDone(false);}}>{s}</button>
        ))}
      </div>
      {done ? (
        <div className="booking__done mono">
          ✦ Заявка отправлена — {day} июня, {slot}. Напишем в Telegram для подтверждения.
        </div>
      ) : (
        <button className="btn btn--green" style={{ width:'100%', justifyContent:'center', marginTop:6, opacity: slot?1:0.5 }}
          disabled={!slot} onClick={()=>{ if(slot) setDone(true); }}>
          {slot ? `Забронировать ${day} июня · ${slot}` : 'Выберите время'} {slot && <Arrow className="arr"/>}
        </button>
      )}
    </div>
  );
}
Object.assign(window, { Rental });