/* eslint-disable */
;(function(){
/* eslint-disable */
// יפן 2026 — "תצוגת יום" single-day view. Shared by the היום tab and by
// tapping a day in המסלול. Day 3 is a private birthday surprise (cover only).
const DSday = window.Ds2026DesignSystem_dc290c;
const { VeganBadge: VeganBadgeDV, StatusChip: StatusChipDV, EditButton, AddButton, ReorderHandle } = DSday;
const { useStore, Store } = window.JP2026Store;
const { EditSheetOverlay } = window.JP2026EditorKit;
const ASSET_DV = './assets';

const CMAP_DV = {
  tokyo:  ['var(--city-tokyo)','var(--city-tokyo-tint)','var(--city-tokyo-deep)'],
  hakone: ['var(--city-hakone)','var(--city-hakone-tint)','var(--city-hakone-deep)'],
  kyoto:  ['var(--city-kyoto)','var(--city-kyoto-tint)','var(--city-kyoto-deep)'],
  osaka:  ['var(--city-osaka)','var(--city-osaka-tint)','var(--city-osaka-deep)'],
};

// Store item (chips as plain values) -> TLItem's expected act (chips as {preset}).
const toAct = (it) => ({ ...it, chips:(it.chips||[]).map(v=>({preset:v})) });

function Time({ children }) {
  return <span className="time-range" style={{ fontFamily:'var(--font-ui)', fontSize:14, color:'var(--ink-900)', letterSpacing:0.3 }}>{children}</span>;
}

function TLItem({ act, accent, tint, deep, last }) {
  const booking = act.kind==='booking';
  return (
    <div style={{ display:'flex', gap:12 }}>
      <div style={{ position:'relative', flex:'0 0 44px', textAlign:'center' }}>
        <Time>{act.time}</Time>
        <div style={{ position:'absolute', top:26, bottom:-16, insetInlineStart:'50%', width:0,
          borderInlineStart: last ? 'none' : '2px dotted var(--route-dot)', transform:'translateX(50%)' }} />
        <div style={{ position:'absolute', top:24, insetInlineStart:'50%', transform:'translate(50%,0)',
          width:12, height:12, borderRadius:'50%', background:accent, border:'2px solid var(--surface-card)', zIndex:1 }} />
      </div>
      <div style={{ flex:1, minWidth:0, marginBottom:16, background:'var(--surface-card)',
        border: booking ? `1.5px solid ${accent}` : 'var(--border-card)', borderRadius:'var(--r-md)',
        padding:'11px 13px', boxShadow:'var(--shadow-sm)' }}>
        <div style={{ display:'flex', alignItems:'center', gap:7 }}>
          <span aria-hidden="true" style={{ fontSize:16 }}>{act.icon}</span>
          <span style={{ fontFamily:'var(--font-ui)', fontSize:16, color:'var(--ink-900)' }}>{act.label}</span>
          {booking && <span style={{ marginInlineStart:'auto', fontSize:11, color:deep, background:tint, padding:'2px 8px', borderRadius:999 }}>הזמנה 🎟️</span>}
        </div>
        <div style={{ display:'flex', alignItems:'center', gap:8, marginTop:3, flexWrap:'wrap' }}>
          <span className="ltr" style={{ fontSize:12.5, color:'var(--ink-500)' }}>{act.place}</span>
          <span style={{ fontSize:11, color:deep }}>· {act.cat}</span>
        </div>
        {(act.vegan || act.chips) && (
          <div style={{ display:'flex', gap:6, marginTop:8, flexWrap:'wrap' }}>
            {act.vegan && <VeganBadgeDV status={act.vegan} />}
            {(act.chips||[]).map((c,i)=><StatusChipDV key={i} preset={c.preset} />)}
          </div>
        )}
      </div>
    </div>
  );
}

/* Birthday surprise — cover only, no plan */
function SurpriseCover({ d, accent, tint, deep }) {
  return (
    <div style={{ padding:'8px 20px 0' }}>
      <div style={{ position:'relative', borderRadius:'var(--r-xl)', overflow:'hidden',
        background:tint, boxShadow:'var(--shadow-card)', padding:'34px 24px 30px', textAlign:'center' }}>
        <DSday.Washi color={accent} width={96} height={24} rotate={-4}
          style={{ position:'absolute', top:-11, insetInlineStart:'50%', marginInlineStart:-48, zIndex:3 }} />
        <img src={`${ASSET_DV}/chibi/chibi-highfive.png`} alt="" style={{ height:120, width:'auto', margin:'0 auto',
          display:'block', borderRadius:'var(--r-lg)', boxShadow:'0 2px 8px rgba(74,64,58,.18)' }} />
        <h2 style={{ fontFamily:'var(--font-display)', fontSize:40, lineHeight:0.95, color:deep, margin:'12px 0 0' }}>
          יום ההולדת של משה
        </h2>
        <div style={{ fontFamily:'var(--font-ui)', fontSize:15, color:'var(--ink-700)', marginTop:10 }}>
          🤫 הפתעה — התוכנית של היום שמורה בסוד
        </div>
        <div style={{ display:'inline-flex', alignItems:'center', gap:6, marginTop:18, padding:'8px 16px',
          borderRadius:999, background:'rgba(255,255,255,.6)', fontFamily:'var(--font-ui)', fontSize:13, color:deep }}>
          🔒 ייחשף בבוקר של <span className="date-ltr">{d.date}</span>
        </div>
      </div>
    </div>
  );
}

/* Store-backed, editable, reorderable timeline for one (non-surprise) day. */
function DayTimeline({ day, accent, tint, deep }) {
  const items = useStore('itinerary_items');
  const dayItems = items.filter(it => it.day_n === day.n).sort((a,b)=>a.sort_order-b.sort_order);
  const byId = Object.fromEntries(dayItems.map(it=>[it.id, it]));
  const [order, setOrder] = React.useState(dayItems.map(it=>it.id));
  const [sheet, setSheet] = React.useState(null);
  // Resync local drag order when the day's item SET changes (add/remove/day switch).
  React.useEffect(()=>{ setOrder(dayItems.map(it=>it.id)); }, [day.n, dayItems.length]);
  const ordered = order.map(id=>byId[id]).filter(Boolean);

  const drag = React.useRef(null);
  const onDown = (idx)=>(e)=>{ drag.current={idx,y:e.clientY}; e.target.setPointerCapture&&e.target.setPointerCapture(e.pointerId); };
  const onMove = (e)=>{ const dc=drag.current; if(!dc) return; const dy=e.clientY-dc.y;
    if(Math.abs(dy)>60){ const j=dc.idx+(dy>0?1:-1); if(j>=0&&j<order.length){
      setOrder(o=>{const n=o.slice(); [n[dc.idx],n[j]]=[n[j],n[dc.idx]]; return n;}); drag.current={idx:j,y:e.clientY}; } } };
  const onUp = ()=>{ if(drag.current){ order.forEach((id,i)=>{ const it=byId[id]; if(it && it.sort_order!==i+1) Store.upsert('itinerary_items',{...it,sort_order:i+1}); }); } drag.current=null; };

  const saveActivity = (form)=> Store.upsert('itinerary_items', { day_n:day.n, ...form });
  const delActivity  = (id)=> Store.remove('itinerary_items', id);

  return (
    <>
      <h2 style={{ fontFamily:'var(--font-display)', fontSize:26, color:'var(--ink-700)', margin:'18px 20px 12px', letterSpacing:0.5 }}>מסלול היום 🗓️</h2>
      <div style={{ padding:'0 20px' }} onPointerMove={onMove} onPointerUp={onUp}>
        {ordered.map((it,i)=>(
          <div key={it.id} style={{ display:'flex', alignItems:'flex-start', gap:2 }}>
            <div style={{ paddingTop:22 }}><ReorderHandle onPointerDown={onDown(i)} /></div>
            <div style={{ flex:1, minWidth:0, position:'relative' }}>
              <TLItem act={toAct(it)} accent={accent} tint={tint} deep={deep} last={i===ordered.length-1} />
              <div style={{ position:'absolute', insetInlineEnd:6, top:22 }}>
                <EditButton size={28} onClick={()=>setSheet({ init:it })} />
              </div>
            </div>
          </div>
        ))}
        <div style={{ marginTop:4 }}>
          <AddButton label="הוספת פעילות" variant="row" accent={accent}
            onClick={()=>setSheet({ init:{ day_n:day.n, sort_order:order.length+1 } })} />
        </div>
      </div>
      {sheet && (
        <EditSheetOverlay type="activity" init={sheet.init || {}} onClose={()=>setSheet(null)}
          onSave={saveActivity} onDelete={delActivity} />
      )}
    </>
  );
}

// index/onNav = the ימים tab (prev/next). dayNumber = opened from citystay
// (a specific day; no prev/next — back returns to the city stay).
function DayView({ index=1, onNav, dayNumber=null }) {
  const days = useStore('days');
  const sorted = [...days].sort((a,b)=>a.n-b.n);
  const standalone = dayNumber != null;
  const d = standalone ? sorted.find(x=>x.n===dayNumber) : (sorted[index] || sorted[0]);
  if (!d) return null;
  const [accent, tint, deep] = CMAP_DV[d.city];
  const spacer = <span aria-hidden="true" style={{ width:34, height:34, flex:'0 0 34px' }} />;
  return (
    <div style={{ paddingBottom:24 }}>
      {/* Day header */}
      <header style={{ background:tint, padding:'16px 20px 18px', position:'relative' }}>
        <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between' }}>
          {standalone ? spacer : (
            <button type="button" onClick={()=>onNav && onNav(-1)} disabled={index===0} aria-label="יום קודם"
              style={{ appearance:'none', border:'none', background:'rgba(255,255,255,.55)', width:34, height:34,
                borderRadius:999, cursor: index===0?'default':'pointer', color:'var(--ink-700)', fontSize:18, opacity:index===0?0.4:1 }}>‹</button>
          )}
          <div style={{ fontFamily:'var(--font-ui)', fontSize:13, color:deep }}>
            {d.weekday} · <span className="date-ltr">{d.date}</span>
          </div>
          {standalone ? spacer : (
            <button type="button" onClick={()=>onNav && onNav(1)} disabled={index===days.length-1} aria-label="יום הבא"
              style={{ appearance:'none', border:'none', background:'rgba(255,255,255,.55)', width:34, height:34,
                borderRadius:999, cursor: index===days.length-1?'default':'pointer', color:'var(--ink-700)', fontSize:18, opacity:index===days.length-1?0.4:1 }}>›</button>
          )}
        </div>
        <h1 style={{ fontFamily:'var(--font-display)', fontSize:44, lineHeight:0.9, color:'var(--ink-900)', margin:'10px 0 0', textAlign:'center' }}>
          יום {d.n} · {d.cityName}
        </h1>
        <div style={{ fontFamily:'var(--font-ui)', fontSize:12, color:deep, textAlign:'center', marginTop:2 }}>יום {d.n} מתוך {d.total}</div>
        <div style={{ fontFamily:'var(--font-ui)', fontSize:14, color:'var(--ink-700)', textAlign:'center', marginTop:6 }}>{d.theme}</div>
      </header>

      {d.surprise ? (
        <SurpriseCover d={d} accent={accent} tint={tint} deep={deep} />
      ) : (
        <DayTimeline day={d} accent={accent} tint={tint} deep={deep} />
      )}
    </div>
  );
}

window.JP2026DayView = DayView;

})();