/* eslint-disable */
;(function(){
/* eslint-disable */
// יפן 2026 — "תחנה" City-Stay day list. Opened from a city-stay card on the
// מפה route screen; tapping a day opens DayView. Store-backed (DL-002).
// The host (index.html) provides the shared TopBar + scroll — this renders the
// header band + היומן list only.
const DSstay = window.Ds2026DesignSystem_dc290c;
const { VeganBadge: VeganBadgeS } = DSstay;
const { useStore } = window.JP2026Store;
const ASSET_S2 = './assets';

const CMAP_S = {
  tokyo:  { c:'var(--city-tokyo)',  t:'var(--city-tokyo-tint)',  d:'var(--city-tokyo-deep)',  motif:'🗼' },
  hakone: { c:'var(--city-hakone)', t:'var(--city-hakone-tint)', d:'var(--city-hakone-deep)', motif:'♨️' },
  kyoto:  { c:'var(--city-kyoto)',  t:'var(--city-kyoto-tint)',  d:'var(--city-kyoto-deep)',  motif:'⛩️' },
  osaka:  { c:'var(--city-osaka)',  t:'var(--city-osaka-tint)',  d:'var(--city-osaka-deep)',  motif:'🏯' },
};

/* Locked birthday-surprise row (Day 3) — never the real plan. */
function SurpriseRow({ onClick }) {
  return (
    <button type="button" onClick={onClick} style={{
      appearance:'none', textAlign:'start', width:'100%', display:'flex', alignItems:'center', gap:'var(--sp-3)',
      padding:'var(--sp-3)', background:'var(--city-tokyo-tint)', border:'1.5px solid var(--city-tokyo)',
      borderRadius:'var(--r-md)', boxShadow:'var(--shadow-sm)', cursor:'pointer' }}>
      <span style={{ flex:'0 0 auto', width:44, height:44, display:'grid', placeItems:'center',
        borderRadius:'var(--r-md)', background:'var(--city-tokyo)', fontSize:24,
        boxShadow:'inset 0 -2px 0 rgba(0,0,0,.08)' }}>🎂</span>
      <div style={{ flex:1, minWidth:0 }}>
        <span style={{ display:'block', fontFamily:'var(--font-ui)', fontSize:'var(--fs-md)', color:'var(--ink-900)' }}>יום ההולדת של משה</span>
        <span style={{ display:'block', fontFamily:'var(--font-ui)', fontSize:'var(--fs-xs)', color:'var(--city-tokyo-deep)' }}>
          🤫 הפתעה — שמור בסוד · ייחשף ב־<bdi>25.9</bdi>
        </span>
      </div>
      <span aria-hidden="true" style={{ fontSize:16 }}>🔒</span>
    </button>
  );
}

/* Enriched day row (matches DayRow's visual language). */
function StayDayRow({ d, preview, count, hasVegan, onClick }) {
  const c = CMAP_S[d.city];
  return (
    <button type="button" onClick={onClick} style={{
      appearance:'none', textAlign:'start', width:'100%', display:'flex', alignItems:'stretch', gap:'var(--sp-3)',
      padding:'var(--sp-3)', background:'var(--surface-card)', border:'var(--border-card)',
      borderRadius:'var(--r-md)', boxShadow:'var(--shadow-sm)', borderInlineStart:`4px solid ${c.c}`, cursor:'pointer' }}>
      <span style={{ flex:'0 0 auto', width:44, height:44, display:'grid', placeItems:'center',
        borderRadius:'var(--r-md)', background:c.c, color:'var(--surface-white)', alignSelf:'flex-start',
        fontFamily:'var(--font-display)', fontSize:26, lineHeight:1, boxShadow:'inset 0 -2px 0 rgba(0,0,0,.08)' }}>
        <bdi>{d.n}</bdi>
      </span>
      <div style={{ flex:1, minWidth:0 }}>
        <div style={{ display:'flex', alignItems:'baseline', gap:8, flexWrap:'wrap' }}>
          <span style={{ fontFamily:'var(--font-ui)', fontSize:'var(--fs-md)', color:'var(--ink-900)' }}>יום <bdi>{d.n}</bdi></span>
          <span style={{ fontSize:'var(--fs-xs)', color:'var(--ink-500)' }}>{d.weekday}</span>
          <span className="date-ltr" style={{ fontSize:'var(--fs-xs)', color:'var(--ink-500)' }}>{d.date}</span>
        </div>
        <div style={{ fontFamily:'var(--font-ui)', fontSize:'var(--fs-sm)', color:c.d, marginTop:2 }}>{d.theme}</div>
        {!d.rest && preview.length > 0 && (
          <div style={{ display:'flex', flexWrap:'wrap', gap:8, marginTop:8 }}>
            {preview.map((a,i)=>(
              <span key={i} style={{ display:'inline-flex', alignItems:'center', gap:4,
                fontSize:'var(--fs-2xs)', color:'var(--ink-700)', background:'var(--surface-card-2)',
                padding:'3px 8px', borderRadius:'var(--r-pill)' }}>
                <span aria-hidden="true">{a.icon}</span><bdi className="ltr">{a.place}</bdi>
              </span>
            ))}
          </div>
        )}
        <div style={{ display:'flex', alignItems:'center', gap:8, marginTop:8, flexWrap:'wrap' }}>
          {!d.rest && <span style={{ fontSize:'var(--fs-2xs)', color:'var(--ink-500)' }}><bdi>{count}</bdi> פעילויות</span>}
          {hasVegan && <VeganBadgeS status="full" />}
        </div>
      </div>
      <span aria-hidden="true" style={{ color:'var(--ink-300)', fontSize:20, alignSelf:'center' }}>‹</span>
    </button>
  );
}

/* Screen — header band + היומן list. TopBar/scroll come from the host. */
// Joined on `stayPin` (stable travel-order 1..5, present in every stay's data in BOTH
// backends), NOT the row id — Supabase gives each stay a random uuid `id`, so the old
// id-join silently fell back to the first Tokyo. See DL-006 / map.jsx.
function CityStayScreen({ stayPin=3, onOpenDay }) {
  const stays = useStore('stays');
  const days = useStore('days');
  const items = useStore('itinerary_items');
  // No silent `|| stays[0]` fallback: that quietly showed the WRONG city when the lookup
  // missed — the last-Tokyo→first-Tokyo bug. Fail visibly: blank while stays load, a clear
  // notice if truly missing.
  const stay = stays.find(s => s.pin === stayPin);
  if (!stay) {
    if (stays.length) console.warn('[citystay] no stay for pin', JSON.stringify(stayPin), '— have pins:', stays.map(s => s.pin));
    return stays.length
      ? <div style={{ padding:'28px 20px', fontFamily:'var(--font-ui)', fontSize:15, color:'var(--ink-500)' }}>לא נמצאה תחנה מתאימה 🗺️</div>
      : null;
  }
  const c = CMAP_S[stay.city];
  const stayDays = days.filter(d => stay.dayNumbers.includes(d.n)).sort((a,b)=>a.n-b.n);
  const first = stay.dayNumbers[0], last = stay.dayNumbers[stay.dayNumbers.length-1];

  return (
    <div style={{ paddingBottom:20 }}>
      {/* Header band — <header> so the sticky-freeze rule (main.scroll > div > header) applies */}
      <header style={{ position:'relative', background:c.t, padding:'20px 20px 22px', overflow:'hidden' }}>
        <div aria-hidden="true" style={{ position:'absolute', insetInlineStart:16, bottom:12, fontSize:60, opacity:0.42 }}>{c.motif}</div>
        <img src={`${ASSET_S2}/chibi/chibi-explore.png`} alt="" style={{ position:'absolute', top:8,
          insetInlineStart:14, height:70, borderRadius:'var(--r-md)', boxShadow:'0 2px 6px rgba(74,64,58,.18)' }} />
        <div style={{ display:'flex', alignItems:'center', gap:'var(--sp-3)', justifyContent:'flex-end' }}>
          <div style={{ textAlign:'end' }}>
            <h1 style={{ fontFamily:'var(--font-display)', fontSize:'var(--fs-title)', lineHeight:0.9, color:'var(--ink-900)', margin:0 }}>
              {stay.cityName}{stay.ret && <span style={{ fontSize:'var(--fs-section)', color:c.d }}> · חזרה</span>}
            </h1>
            <div style={{ fontFamily:'var(--font-ui)', fontSize:'var(--fs-sm)', color:c.d, marginTop:4 }}>
              <bdi>{stay.nights}</bdi> לילות · <bdi className="date-ltr">{stay.dateRange}</bdi>
            </div>
            <div style={{ fontFamily:'var(--font-ui)', fontSize:'var(--fs-xs)', color:'var(--ink-500)', marginTop:2 }}>
              ימים <bdi>{first}</bdi>–<bdi>{last}</bdi>
            </div>
          </div>
          <span style={{ flex:'0 0 auto', width:52, height:52, display:'grid', placeItems:'center',
            borderRadius:'50% 50% 50% 0', transform:'rotate(-45deg)', background:c.c,
            border:'2px solid var(--surface-white)', boxShadow:'0 3px 6px rgba(74,64,58,.3)' }}>
            <bdi style={{ transform:'rotate(45deg)', color:'#fff', fontFamily:'var(--font-display)', fontSize:26, lineHeight:1 }}>{stay.pin}</bdi>
          </span>
        </div>
      </header>

      {/* Journal */}
      <h2 style={{ fontFamily:'var(--font-display)', fontSize:'var(--fs-section)', color:'var(--ink-700)', margin:'18px 20px 12px', letterSpacing:'var(--tracking-display)' }}>היומן 📖</h2>
      <div style={{ display:'flex', flexDirection:'column', gap:12, padding:'0 20px' }}>
        {stayDays.map(d => {
          if (d.surprise) return <SurpriseRow key={d.id} onClick={()=>onOpenDay && onOpenDay(d.n)} />;
          const dayItems = items.filter(it => it.day_n === d.n).sort((a,b)=>a.sort_order-b.sort_order);
          const hasVegan = dayItems.some(it => it.vegan === 'full');
          return <StayDayRow key={d.id} d={d} preview={dayItems.slice(0,3)} count={dayItems.length}
                    hasVegan={hasVegan} onClick={()=>onOpenDay && onOpenDay(d.n)} />;
        })}
      </div>
    </div>
  );
}

window.JP2026CityStay = CityStayScreen;

})();