/* eslint-disable */
;(function(){
/* eslint-disable */
// יפן 2026 — "מלונות ולוגיסטיקה" screen (under עוד). Works offline.
const DSlog = window.Ds2026DesignSystem_dc290c;
const { TaxiAddress: TaxiAddressL, TicketCard: TicketCardL, EditButton, AddButton } = DSlog;
const { useStore, Store } = window.JP2026Store;
const { EditSheetOverlay } = window.JP2026EditorKit;
const ASSET_L = './assets';

const CMAP_L = {
  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)','אוסקה'],
};

function SectionTitleL({ children }) {
  return <h2 style={{ fontFamily:'var(--font-display)', fontSize:28, color:'var(--ink-700)', margin:'22px 20px 12px', letterSpacing:0.5 }}>{children}</h2>;
}

function TaxiOverlayL({ hotel, onClose }) {
  const [, tint, deep] = CMAP_L[hotel.city];
  return (
    <div onClick={onClose} style={{ position:'absolute', inset:0, zIndex:60, background:tint,
      display:'flex', flexDirection:'column', animation:'fadeL .2s ease' }}>
      <style>{`@keyframes fadeL{from{opacity:0}to{opacity:1}}`}</style>
      <div style={{ padding:'18px 20px', display:'flex', justifyContent:'space-between', alignItems:'center' }}>
        <span style={{ fontFamily:'var(--font-display)', fontSize:26, color:deep }}>הראה לנהג 🚕</span>
        <button type="button" onClick={onClose} style={{ appearance:'none', border:'none', background:'rgba(255,255,255,.6)',
          width:38, height:38, borderRadius:999, fontSize:18, color:'var(--ink-700)', cursor:'pointer' }}>✕</button>
      </div>
      <div style={{ flex:1, display:'flex', alignItems:'center', justifyContent:'center', padding:'0 22px' }}>
        <div style={{ background:'var(--surface-white)', borderRadius:'var(--r-xl)', padding:'28px 24px',
          boxShadow:'var(--shadow-lift)', textAlign:'center', width:'100%' }}>
          <div style={{ fontFamily:'var(--font-ui)', fontSize:13, color:'var(--ink-500)', marginBottom:14 }}>{hotel.name} · <span className="ltr">{hotel.latin}</span></div>
          <div className="jp-address" style={{ fontSize:30, lineHeight:1.5, color:'var(--ink-900)', textAlign:'center' }}>
            <div style={{ fontSize:18, color:'var(--ink-500)', marginBottom:6 }}>〒{hotel.postal}</div>
            {hotel.addr}
          </div>
        </div>
      </div>
      <div style={{ padding:'0 22px 30px', textAlign:'center', fontFamily:'var(--font-ui)', fontSize:13, color:'var(--ink-500)' }}>געו במסך כדי לסגור</div>
    </div>
  );
}

function HotelCard({ h, onTaxi, onEdit }) {
  const [accent, tint, deep, cityName] = CMAP_L[h.city];
  return (
    <div style={{ position:'relative', background:'var(--surface-card)', borderRadius:'var(--r-lg)', boxShadow:'var(--shadow-card)',
      borderInlineStart:`4px solid ${accent}`, padding:'14px 16px', display:'flex', flexDirection:'column', gap:12 }}>
      <div style={{ position:'absolute', insetInlineEnd:10, top:10 }}>
        <EditButton size={28} onClick={onEdit} />
      </div>
      <div>
        <div style={{ display:'flex', alignItems:'baseline', gap:8, flexWrap:'wrap', paddingInlineEnd:34 }}>
          <span style={{ fontFamily:'var(--font-display)', fontSize:28, lineHeight:0.9, color:'var(--ink-900)' }}>{h.name}</span>
          <span style={{ fontSize:12, color:deep, background:tint, padding:'2px 10px', borderRadius:999 }}>📍 {cityName}</span>
        </div>
        <div className="ltr" style={{ fontFamily:'var(--font-ui)', fontSize:13, color:'var(--ink-500)', marginTop:2 }}>{h.latin}</div>
        <div style={{ fontFamily:'var(--font-ui)', fontSize:13, color:'var(--ink-700)', marginTop:6 }}>
          🗓️ <span className="date-ltr">{h.inD}</span> <span style={{color:'var(--ink-300)'}}>←</span> <span className="date-ltr">{h.outD}</span>
          <span style={{ color:'var(--ink-500)' }}> · {h.nights} לילות</span>
        </div>
      </div>
      <TaxiAddressL address={h.addr} postal={h.postal} onShow={()=>onTaxi(h)} />
    </div>
  );
}

// Transfer store row (from/to are {code,city}) <-> flat editor form.
const transferToForm = (t) => ({ id:t.id, line:t.line, from:t.from.city, to:t.to.city, date:t.date, time:t.time });
const formToTransfer = (row, form) => ({ ...row,
  line:form.line, date:form.date, time:form.time,
  from:{ ...(row.from||{}), city:form.from }, to:{ ...(row.to||{}), city:form.to } });

function HotelsLogScreen() {
  const [taxi, setTaxi] = React.useState(null);
  const [sheet, setSheet] = React.useState(null);   // {type:'hotel'|'transfer', row}
  const hotels = useStore('hotels');
  const transfers = useStore('transfers');
  const luggage = useStore('luggage');

  const saveHotel = (form)=> Store.upsert('hotels', form);
  const delHotel  = (id)=> Store.remove('hotels', id);
  const saveTransfer = (form)=> Store.upsert('transfers', formToTransfer(sheet.row || {}, form));
  const delTransfer  = (id)=> Store.remove('transfers', id);

  return (
    <div style={{ paddingBottom:28 }}>
      <header style={{ position:'relative', padding:'16px 20px 6px' }}>
        <img src={`${ASSET_L}/chibi/chibi-tablet.png`} alt="" style={{ position:'absolute', top:0,
          insetInlineEnd:12, height:66, borderRadius:'var(--r-md)' }} />
        <div style={{ fontFamily:'var(--font-ui)', fontSize:13, color:'var(--ink-500)' }}>עוד · לוגיסטיקה</div>
        <h1 style={{ fontFamily:'var(--font-display)', fontSize:42, lineHeight:0.9, color:'var(--ink-900)', margin:'2px 0 0' }}>מלונות ולוגיסטיקה</h1>
        <div style={{ fontFamily:'var(--font-ui)', fontSize:13, color:'var(--ink-500)', marginTop:2 }}>הכול שמור לצפייה גם ללא אינטרנט 📶</div>
      </header>

      <SectionTitleL>מלונות 🛏️</SectionTitleL>
      <div style={{ display:'flex', flexDirection:'column', gap:14, padding:'0 20px' }}>
        {hotels.map(h=><HotelCard key={h.id} h={h} onTaxi={setTaxi} onEdit={()=>setSheet({type:'hotel', row:h})} />)}
        <AddButton label="הוספת מלון" variant="row" accent="var(--city-kyoto)"
          onClick={()=>setSheet({type:'hotel', row:{}})} />
      </div>

      <SectionTitleL>מעברים בין ערים 🚄</SectionTitleL>
      <div style={{ display:'flex', flexDirection:'column', gap:14, padding:'0 20px' }}>
        {transfers.map(t=>(
          <div key={t.id} style={{ position:'relative' }}>
            <TicketCardL kind="train" carrier={t.line} from={t.from} to={t.to}
              date={t.date} time={t.time} code={'—'} accent={t.accent} />
            <div style={{ position:'absolute', insetInlineEnd:10, top:10 }}>
              <EditButton size={28} onClick={()=>setSheet({type:'transfer', row:t})} />
            </div>
          </div>
        ))}
      </div>

      <SectionTitleL>העברת מזוודות 🧳</SectionTitleL>
      <div style={{ display:'flex', flexDirection:'column', gap:12, padding:'0 20px' }}>
        {luggage.map(l=>(
          <div key={l.id} style={{ background:'var(--sun-tint)', borderRadius:'var(--r-md)', padding:'12px 15px' }}>
            <div style={{ fontFamily:'var(--font-ui)', fontSize:15, color:'var(--ink-900)' }}>🧳 {l.route}</div>
            <div style={{ fontFamily:'var(--font-ui)', fontSize:13.5, color:'var(--ink-700)', marginTop:4, lineHeight:'var(--lh-body)' }}>{l.note}</div>
          </div>
        ))}
      </div>

      {taxi && <TaxiOverlayL hotel={taxi} onClose={()=>setTaxi(null)} />}
      {sheet && sheet.type==='hotel' && (
        <EditSheetOverlay type="hotel" init={sheet.row || {}} onClose={()=>setSheet(null)}
          onSave={saveHotel} onDelete={delHotel} />
      )}
      {sheet && sheet.type==='transfer' && (
        <EditSheetOverlay type="transfer" init={transferToForm(sheet.row)} onClose={()=>setSheet(null)}
          onSave={saveTransfer} onDelete={delTransfer} />
      )}
    </div>
  );
}

window.JP2026HotelsLog = HotelsLogScreen;

})();