/* eslint-disable */
;(function(){
/* eslint-disable */
// יפן 2026 — preview-only clock control.
//
// Lets you stand anywhere in the trip while previewing: pick a day and a time and the app
// re-renders as it will on the road. today.jsx already honours ?previewNow= and freezes its
// clock; this is the UI for setting it without restarting preview.sh.
//
// ⚠️ WHY THIS CANNOT REACH PRODUCTION: it renders null off loopback. The live app is served
//    from a Cloudflare Pages hostname, so LOOPBACK_HOSTS never matches there. The guard is the
//    hostname and nothing else — no build flag to forget, no env var to mis-set. It is the same
//    test today.jsx uses for previewNow, deliberately: one rule, one place to reason about.
//
// The value you type is TOKYO wall-clock, because that is the question being asked ("what does
// this look like at 9am in Kyoto"). A bare 'YYYY-MM-DDTHH:MM' is parsed by the browser in ITS
// OWN zone, so from Israel 09:00 would land at 15:00 in Tokyo and show the wrong part of the
// day. Both directions convert through UTC+9 here, matching preview.sh --at.
const LOOPBACK_HOSTS = ['localhost', '127.0.0.1'];
const TOKYO_OFFSET_MIN = 9 * 60;              // UTC+9 year-round; Japan has no DST
const PARAM = 'previewNow';
const { useState } = React;

const isLoopback = () => LOOPBACK_HOSTS.includes(window.location.hostname);

// 'YYYY-MM-DDTHH:MM' read as Tokyo -> absolute instant.
function tokyoInputToInstant(value) {
  const m = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})$/.exec(String(value || ''));
  if (!m) return null;
  const [, y, mo, d, h, mi] = m.map(Number);
  return new Date(Date.UTC(y, mo - 1, d, h, mi) - TOKYO_OFFSET_MIN * 60000);
}

// Absolute instant -> 'YYYY-MM-DDTHH:MM' in Tokyo, the shape <input type="datetime-local"> wants.
function instantToTokyoInput(date) {
  const shifted = new Date(date.getTime() + TOKYO_OFFSET_MIN * 60000);
  return shifted.toISOString().slice(0, 16);
}

function currentPreviewInstant() {
  const raw = new URLSearchParams(window.location.search).get(PARAM);
  if (!raw) return null;
  const parsed = new Date(raw);
  return Number.isNaN(parsed.getTime()) ? null : parsed;
}

// A reload, not a state update: initialTodayClock() reads the URL once at mount, and every
// screen derives its own "now". Re-running the whole app is the only way to be sure nothing is
// left showing the previous moment. Locally that costs nothing.
function applyInstant(instant) {
  const url = new URL(window.location.href);
  if (instant) url.searchParams.set(PARAM, instant.toISOString());
  else url.searchParams.delete(PARAM);
  window.location.href = url.toString();
}

// The moments actually worth checking. The Day-3 pair is the point of the whole feature: the
// birthday gate opens at 08:00 Asia/Tokyo, so 07:30 and 08:30 are the two states to eyeball.
const PRESETS = [
  { label:'יום 3 · לפני החשיפה', value:'2026-09-25T07:30' },
  { label:'יום 3 · אחרי החשיפה', value:'2026-09-25T08:30' },
  { label:'בוקר בקיוטו',          value:'2026-10-05T09:00' },
  { label:'ערב באוסקה',           value:'2026-10-09T19:30' },
];

const BAR = {
  position:'fixed', insetInlineStart:12, bottom:78, zIndex:60,
  fontFamily:'var(--font-ui)', fontSize:12, direction:'rtl',
};
const PILL = {
  display:'flex', alignItems:'center', gap:6, padding:'7px 12px', border:0,
  borderRadius:999, cursor:'pointer', color:'#fff', background:'rgba(24,24,27,0.88)',
  boxShadow:'0 6px 18px rgba(0,0,0,0.28)', backdropFilter:'blur(6px)', fontSize:12,
  fontFamily:'var(--font-ui)',
};
const PANEL = {
  marginBottom:8, padding:14, width:250, borderRadius:16, color:'#fff',
  background:'rgba(24,24,27,0.95)', boxShadow:'0 10px 30px rgba(0,0,0,0.35)',
  backdropFilter:'blur(8px)', display:'flex', flexDirection:'column', gap:10,
};
const PRESET_BTN = {
  textAlign:'start', padding:'7px 10px', borderRadius:10, cursor:'pointer',
  border:'1px solid rgba(255,255,255,0.16)', background:'transparent', color:'#fff',
  fontFamily:'var(--font-ui)', fontSize:12,
};

function PreviewClock() {
  const live = currentPreviewInstant();
  const [open, setOpen] = useState(false);
  const [draft, setDraft] = useState(() => instantToTokyoInput(live || new Date()));

  if (!isLoopback()) return null;

  const label = live
    ? `${instantToTokyoInput(live).replace('T', ' · ')}`
    : 'זמן אמת';

  return (
    <div style={BAR}>
      {open && (
        <div style={PANEL}>
          <div style={{ fontWeight:600 }}>שעון תצוגה מקדימה</div>
          <div style={{ opacity:0.65, lineHeight:1.5 }}>
            השעה היא שעון טוקיו. משנה את מסך היום, את הברכה ואת ״הבא בתור״.
          </div>

          <input type="datetime-local" value={draft} onChange={(e)=>setDraft(e.target.value)}
            style={{ padding:'7px 9px', borderRadius:10, border:'1px solid rgba(255,255,255,0.18)',
              background:'rgba(255,255,255,0.06)', color:'#fff', fontFamily:'var(--font-ui)',
              fontSize:12, colorScheme:'dark', direction:'ltr' }} />

          <button type="button" onClick={()=>{ const at = tokyoInputToInstant(draft); if (at) applyInstant(at); }}
            style={{ ...PRESET_BTN, textAlign:'center', background:'rgba(255,255,255,0.14)', fontWeight:600 }}>
            קפוץ לרגע הזה
          </button>

          <div style={{ display:'flex', flexDirection:'column', gap:5 }}>
            {PRESETS.map(p => (
              <button key={p.value} type="button" style={PRESET_BTN}
                onClick={()=>{ const at = tokyoInputToInstant(p.value); if (at) applyInstant(at); }}>
                {p.label}
              </button>
            ))}
          </div>

          {live && (
            <button type="button" onClick={()=>applyInstant(null)}
              style={{ ...PRESET_BTN, textAlign:'center', borderColor:'rgba(255,255,255,0.3)' }}>
              חזרה לזמן אמת
            </button>
          )}

          <div style={{ opacity:0.5, lineHeight:1.5 }}>
            ⚠️ התזכורות עדיין לפי הזמן האמיתי.
          </div>
        </div>
      )}

      <button type="button" onClick={()=>setOpen(o=>!o)} style={PILL}
        aria-label="שעון תצוגה מקדימה" title="נראה רק בתצוגה מקדימה מקומית">
        <span>{live ? '🕰️' : '🟢'}</span>
        <span style={{ direction:'ltr' }}>{label}</span>
      </button>
    </div>
  );
}

window.JP2026PreviewClock = PreviewClock;

})();