/* ============================================================
   $LAND — app shell (state, layout, tweaks)
   ============================================================ */
(function () {
  const D = window.LandData, F = D.fmt;
  const { Tile } = window.Land;
  const { Header, PayoutPanel, ClaimBar, LandMap, RarityLegend, RoundsLedger, HoldersPanel, BuildingsSection } = window;
  const { ParcelModal, BuildingModal, AcquireModal } = window.Modals;
  const { useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakSlider, TweakColor } = window;

  const FONTS = {
    'Grotesk': { d: "'Space Grotesk',sans-serif", b: "'Space Grotesk',sans-serif", m: "'JetBrains Mono',monospace" },
    'Sora': { d: "'Sora',sans-serif", b: "'Sora',sans-serif", m: "'JetBrains Mono',monospace" },
    'Mix': { d: "'Space Grotesk',sans-serif", b: "'Sora',sans-serif", m: "'JetBrains Mono',monospace" },
  };
  const RARITY_PALETTES = {
    'Classic': ['#69a255', '#4f9f7a', '#3f86b8', '#7a6bd0', '#d9b24a'],
    'Gemstone': ['#5aa06d', '#3f9bb8', '#5a6bd0', '#b061c0', '#d9b24a'],
    'Warm': ['#7ba24f', '#9a9b3f', '#cf9a3a', '#cf6f3a', '#d9b24a'],
  };

  const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
    "font": "Grotesk",
    "hero": "map-left",
    "density": 20,
    "rarity": "Classic"
  }/*EDITMODE-END*/;

  // ---- tiny hash router (no deps): '' | 'buildings' | 'holders' | 'rounds' ----
  function currentRoute() {
    const h = (window.location.hash || '').replace(/^#\/?/, '');
    return ['buildings', 'holders', 'rounds'].includes(h) ? h : '';
  }
  function navigate(id) {
    if (['buildings', 'holders', 'rounds'].includes(id)) window.location.hash = '#/' + id;
    else window.location.hash = '';
  }

  function App() {
    // subscribe to live data — re-renders whenever LandData.refresh() lands.
    window.useLandData();
    const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
    const [wallet, setWallet] = React.useState(null);
    const [parcel, setParcel] = React.useState(null);
    const [building, setBuilding] = React.useState(null);
    const [acquire, setAcquire] = React.useState(false);
    const [route, setRoute] = React.useState(currentRoute());
    React.useEffect(() => {
      const onHash = () => { setRoute(currentRoute()); window.scrollTo(0, 0); };
      window.addEventListener('hashchange', onHash);
      return () => window.removeEventListener('hashchange', onHash);
    }, []);

    // apply tweaks -> css vars
    React.useEffect(() => {
      const f = FONTS[t.font] || FONTS['Grotesk'];
      const root = document.documentElement.style;
      root.setProperty('--font-display', f.d);
      root.setProperty('--font-body', f.b);
      root.setProperty('--font-mono', f.m);
    }, [t.font]);
    React.useEffect(() => {
      const p = RARITY_PALETTES[t.rarity] || RARITY_PALETTES['Classic'];
      const root = document.documentElement.style;
      ['common', 'uncommon', 'rare', 'epic', 'legendary'].forEach((k, i) => root.setProperty('--r-' + k, p[i]));
    }, [t.rarity]);

    // --- REAL Phantom wallet connect (no mock) ---
    const getProvider = () => {
      const p = window.phantom?.solana || window.solana;
      return (p && p.isPhantom) ? p : null;
    };
    const connect = async () => {
      const provider = getProvider();
      if (!provider) { window.open('https://phantom.app/', '_blank'); return; }
      try {
        const res = await provider.connect();
        setWallet(res.publicKey.toString());
      } catch (e) { /* user rejected */ }
    };
    const disconnect = async () => {
      const provider = getProvider();
      try { await provider?.disconnect(); } catch (e) {}
      setWallet(null);
    };
    // auto-reconnect if already trusted; track account changes.
    React.useEffect(() => {
      const provider = getProvider();
      if (!provider) return;
      provider.connect({ onlyIfTrusted: true })
        .then((res) => setWallet(res.publicKey.toString()))
        .catch(() => {});
      const onAcct = (pk) => setWallet(pk ? pk.toString() : null);
      provider.on && provider.on('accountChanged', onAcct);
      return () => { provider.off && provider.off('accountChanged', onAcct); };
    }, []);

    const openAcquire = () => { setAcquire(true); };

    const MapCard = (
      <div className="card" style={{ overflow: 'hidden', display: 'flex', flexDirection: 'column', flex: 1, minHeight: 0 }}>
        <div style={{ padding: '12px 16px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 10, flexShrink: 0 }}>
          <div>
            <div className="eyebrow">Ownership map · top-down</div>
            <h2 style={{ fontSize: 18, marginTop: 3 }}>{D.stats.ownedCells} cells claimed · {D.stats.claimedPct}% taken</h2>
          </div>
          <RarityLegend />
        </div>
        <div className="hr"></div>
        <div style={{ padding: 8, flex: 1, minHeight: 0, overflow: 'hidden' }}>
          <LandMap onSelect={setParcel} density={t.density} />
        </div>
      </div>
    );

    return (
      <div id="top" style={{ height: '100vh', display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
        <Header wallet={wallet} onConnect={connect} onDisconnect={disconnect} onAcquire={openAcquire} onNav={navigate} route={route} />

        {route === '' && <>
        {/* minimal subtitle line */}
        <div className="wrap" style={{ paddingTop: 8, paddingBottom: 8, flexShrink: 0 }}>
          <span className="mono faint" style={{ fontSize: 11.5, letterSpacing: '.04em' }}>Wrap $LAND into territory · more tokens → more land → bigger share of daily SOL payouts · the map is finite, land is non-renewable.</span>
        </div>

        {/* ONE-SCREEN DASHBOARD — height-capped + vertically centred so big screens
            don't stretch the map into an ugly tall sliver. */}
        <div style={{ flex: 1, minHeight: 0, display: 'flex', alignItems: 'center', paddingBottom: 14 }}>
          <div className="wrap" style={{ width: '100%', height: '100%', maxHeight: 820, display: 'grid', gridTemplateColumns: '272px minmax(0,1fr) 320px', gap: 12 }}>
            {/* LEFT: payout panel + claim + buildings */}
            <div style={{ minHeight: 0, overflow: 'auto', display: 'grid', gap: 12, alignContent: 'start' }} className="scroll">
              <PayoutPanel onAcquire={openAcquire} onReturn={openAcquire} />
              <ClaimBar />
              <BuildingsSection onSelect={setBuilding} compact />
            </div>
            {/* CENTER: the map dominates */}
            <div style={{ minHeight: 0, display: 'flex' }}>{MapCard}</div>
            {/* RIGHT: holders + rounds ledger */}
            <div style={{ minHeight: 0, display: 'grid', gridTemplateRows: 'minmax(0,1fr) minmax(0,1fr)', gap: 12 }}>
              <div style={{ minHeight: 0, display: 'flex' }}><HoldersPanel onSelect={setParcel} /></div>
              <div style={{ minHeight: 0, display: 'flex' }}><RoundsLedger /></div>
            </div>
          </div>
        </div>
        </>}

        {route === 'buildings' && <BuildingsPage onSelect={setBuilding} onNav={navigate} />}
        {route === 'holders' && <HoldersPage onSelect={setParcel} onNav={navigate} />}
        {route === 'rounds' && <RoundsPage onNav={navigate} />}

        {/* MODALS */}
        {parcel && <ParcelModal holder={parcel} onClose={() => setParcel(null)} />}
        {building && <BuildingModal building={building} onClose={() => setBuilding(null)} />}
        {acquire && <AcquireModal wallet={wallet} onConnect={connect} onClose={() => setAcquire(false)} />}

        {/* TWEAKS */}
        <TweaksPanel title="Tweaks">
          <TweakSection label="Typography" />
          <TweakRadio label="Font" value={t.font} options={Object.keys(FONTS)} onChange={(v) => setTweak('font', v)} />
          <TweakSection label="Hero layout" />
          <TweakRadio label="Map / panel" value={t.hero} options={['map-left', 'map-right', 'stacked']} onChange={(v) => setTweak('hero', v)} />
          <TweakSection label="Map" />
          <TweakSlider label="Cell size" value={t.density} min={16} max={40} step={1} unit="px" onChange={(v) => setTweak('density', v)} />
          <TweakSection label="Rarity palette" />
          <TweakRadio label="Set" value={t.rarity} options={Object.keys(RARITY_PALETTES)} onChange={(v) => setTweak('rarity', v)} />
          <TweakColor label="Preview" value={RARITY_PALETTES[t.rarity]} options={Object.values(RARITY_PALETTES)} onChange={() => { }} />
        </TweaksPanel>
      </div>
    );
  }

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