// demo-host.jsx
// Single-variation host. Picks SiteV1/V2/V3 based on the hosting script's
// data-variant attribute, wraps it in BrokerContext + TourContext, and
// attaches the same Tweaks panel used by the canvas view.

const { TweaksPanel, useTweaks, TweakSection, TweakText } = window;
const { BROKER_DEFAULT, BrokerContext, TOUR_URL_DEFAULT, TourContext } = window;

const __variant = document.documentElement.dataset.variant
  || (document.querySelector('script[data-variant]') && document.querySelector('script[data-variant]').dataset.variant)
  || 'v1';

const SiteComponent = { v1: window.SiteV1, v2: window.SiteV2, v3: window.SiteV3 }[__variant];

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "brokerName": "Kari King",
  "brokerRole": "Listing Broker · Dune Ridge",
  "brokerEmail": "kari.king@century21northland.com",
  "brokerPhone": "(231) 555-0142",
  "brokerFirm": "Century 21 Northland",
  "tourUrl": "https://kuula.co/share/collection/7M8zV?logo=1&info=0&fs=1&vr=1&sd=1&initload=0&thumbs=1"
}/*EDITMODE-END*/;

function DemoApp() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const broker = React.useMemo(() => ({
    name: t.brokerName || BROKER_DEFAULT.name,
    role: t.brokerRole || BROKER_DEFAULT.role,
    email: t.brokerEmail || BROKER_DEFAULT.email,
    phone: t.brokerPhone || BROKER_DEFAULT.phone,
    firm: t.brokerFirm || BROKER_DEFAULT.firm,
  }), [t.brokerName, t.brokerRole, t.brokerEmail, t.brokerPhone, t.brokerFirm]);
  const tourUrl = t.tourUrl || TOUR_URL_DEFAULT;

  return (
    <BrokerContext.Provider value={broker}>
      <TourContext.Provider value={tourUrl}>
        <SiteComponent />
        <TweaksPanel title="Tweaks">
          <TweakSection label="Listing Broker" />
          <TweakText label="Name"  value={t.brokerName}  onChange={(v) => setTweak('brokerName', v)} />
          <TweakText label="Role"  value={t.brokerRole}  onChange={(v) => setTweak('brokerRole', v)} />
          <TweakText label="Email" value={t.brokerEmail} onChange={(v) => setTweak('brokerEmail', v)} />
          <TweakText label="Phone" value={t.brokerPhone} onChange={(v) => setTweak('brokerPhone', v)} />
          <TweakText label="Brokerage" value={t.brokerFirm} onChange={(v) => setTweak('brokerFirm', v)} />
          <TweakSection label="Interactive tour" />
          <TweakText label="Kuula URL" value={t.tourUrl} onChange={(v) => setTweak('tourUrl', v)} />
        </TweaksPanel>
      </TourContext.Provider>
    </BrokerContext.Provider>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<DemoApp />);