/* eslint-disable */
;(function(){
/* eslint-disable */
// יפן 2026 — "גילוי" category-results screen (e.g. מסעדות).
const DSdisc = window.Ds2026DesignSystem_dc290c;
const { PlaceCard: PlaceCardD, EditButton, AddButton } = DSdisc;
const { useStore, Store } = window.JP2026Store;
const { EditSheetOverlay } = window.JP2026EditorKit;
const ASSET_D = './assets';

const CAT = { label:'מסעדות', icon:'🍜' };

// Category → emoji, so a place's icon refreshes when its category is edited.
const CAT_ICON = { 'מסעדה':'🍽️','בית קפה':'🍵','מאפייה':'🥐','מקדש':'⛩️','סדנה':'🎨','תצפית':'🌅','טבע':'🏞️','אתר':'🏮' };

// Category → chibi pose, keyed by the top-level browse category (data.js categories, plural form).
const CAT_CHIBI = { 'מסעדות':'eating', 'מאפיות':'bakery', 'בתי קפה':'cafe', 'מקדשים':'temple', 'סדנאות':'workshop', 'מתוקים':'sweets' };

const CITIES = [
  { id:'tokyo',  name:'טוקיו',  c:'var(--city-tokyo)',  t:'var(--city-tokyo-tint)',  d:'var(--city-tokyo-deep)' },
  { id:'hakone', name:'האקונה', c:'var(--city-hakone)', t:'var(--city-hakone-tint)', d:'var(--city-hakone-deep)' },
  { id:'kyoto',  name:'קיוטו',  c:'var(--city-kyoto)',  t:'var(--city-kyoto-tint)',  d:'var(--city-kyoto-deep)' },
  { id:'osaka',  name:'אוסקה',  c:'var(--city-osaka)',  t:'var(--city-osaka-tint)',  d:'var(--city-osaka-deep)' },
];

/* toggle switch */
function VeganToggle({ on, onClick }) {
  return (
    <button type="button" onClick={onClick} aria-pressed={on} style={{
      appearance:'none', border:'none', cursor:'pointer', display:'flex', alignItems:'center', gap:8,
      background:'transparent', padding:0 }}>
      <span style={{ width:44, height:26, borderRadius:999, background: on ? 'var(--vegan-full)' : 'var(--ink-300)',
        position:'relative', transition:'background var(--dur-base)', flex:'0 0 auto' }}>
        <span style={{ position:'absolute', top:3, insetInlineStart: on ? 21 : 3, width:20, height:20,
          borderRadius:'50%', background:'#fff', boxShadow:'0 1px 3px rgba(74,64,58,.3)',
          transition:'inset-inline-start var(--dur-base) var(--ease-soft)' }} />
      </span>
      <span style={{ fontFamily:'var(--font-ui)', fontSize:14, color: on ? 'var(--vegan-full)' : 'var(--ink-700)' }}>
        רק 100% טבעוני 🌱
      </span>
    </button>
  );
}

function CityChip({ city, active, onClick }) {
  return (
    <button type="button" onClick={onClick} style={{
      appearance:'none', cursor:'pointer', whiteSpace:'nowrap',
      fontFamily:'var(--font-ui)', fontSize:13, padding:'6px 14px', borderRadius:999,
      border: `1.5px solid ${active ? city.c : 'var(--hairline)'}`,
      background: active ? city.t : 'var(--surface-card)',
      color: active ? city.d : 'var(--ink-700)', transition:'all var(--dur-fast)' }}>
      {city.name}
    </button>
  );
}

function DiscoverScreen() {
  const [veganOnly, setVegan] = React.useState(false);
  const [city, setCity] = React.useState(null);
  const [sheet, setSheet] = React.useState(null);   // {init} for edit, {} for add, or null
  const places = useStore('places');
  const list = places.filter(p => (!veganOnly || p.vegan==='full') && (!city || p.city===city));

  const saveePlace = (form) => {
    const row = { ...form, icon: CAT_ICON[form.cat] || form.icon || '📍' };
    Store.upsert('places', row);
  };
  const deletePlace = (id) => Store.remove('places', id);

  return (
    <div style={{ paddingBottom:24 }}>
      <header style={{ position:'relative', padding:'16px 20px 8px' }}>
        <img src={`${ASSET_D}/chibi/chibi-${CAT_CHIBI[CAT.label] || 'eating'}.png`} alt="" style={{ position:'absolute', top:0,
          insetInlineEnd:12, height:64, borderRadius:'var(--r-md)' }} />
        <div style={{ fontFamily:'var(--font-ui)', fontSize:13, color:'var(--ink-500)' }}>גילוי · לפי קטגוריה</div>
        <h1 style={{ fontFamily:'var(--font-display)', fontSize:46, lineHeight:0.9, color:'var(--ink-900)', margin:'2px 0 0' }}>
          {CAT.label} {CAT.icon}
        </h1>
        <div style={{ fontFamily:'var(--font-ui)', fontSize:14, color:'var(--ink-500)', marginTop:2 }}>
          <span className="ltr">{list.length}</span> {list.length===1 ? 'מקום' : 'מקומות'}
        </div>
      </header>

      {/* Filter row */}
      <div style={{ padding:'6px 20px 4px' }}>
        <VeganToggle on={veganOnly} onClick={()=>setVegan(v=>!v)} />
      </div>
      <div style={{ display:'flex', gap:8, overflowX:'auto', padding:'10px 20px 12px' }} className="chiprow">
        <CityChip city={{name:'הכול', c:'var(--ink-700)', t:'var(--paper-cream-deep)', d:'var(--ink-900)'}}
          active={!city} onClick={()=>setCity(null)} />
        {CITIES.map(ci => <CityChip key={ci.id} city={ci} active={city===ci.id} onClick={()=>setCity(city===ci.id?null:ci.id)} />)}
      </div>

      {/* Results */}
      <div style={{ display:'flex', flexDirection:'column', gap:16, padding:'2px 20px 0' }}>
        {list.length ? list.map(p => (
          <div key={p.id} style={{ position:'relative' }}>
            <PlaceCardD name={p.name} city={p.city} rating={p.rating}
              reviews={p.reviews} vegan={p.vegan} hours={p.hours} open={p.open}
              category={{label:p.cat, icon:p.icon}} chips={(p.chips||[]).map(v=>({preset:v}))} />
            <div style={{ position:'absolute', insetInlineEnd:10, bottom:10 }}>
              <EditButton onClick={()=>setSheet({ init:p })} />
            </div>
          </div>
        )) : (
          <div style={{ textAlign:'center', padding:'30px 10px', color:'var(--ink-500)', fontFamily:'var(--font-ui)', fontSize:15 }}>
            🍃 אין מקומות שמתאימים לסינון
          </div>
        )}
        <div style={{ marginTop:4 }}>
          <AddButton label="הוספת מקום" variant="row" accent="var(--city-tokyo)"
            onClick={()=>setSheet({ init:{ city: city || 'tokyo' } })} />
        </div>
      </div>

      {sheet && (
        <EditSheetOverlay type="place" init={sheet.init || {}} onClose={()=>setSheet(null)}
          onSave={saveePlace} onDelete={deletePlace} />
      )}
    </div>
  );
}

window.JP2026Discover = DiscoverScreen;

})();