// unified-app.jsx — powłoka łącząca oba światy (oficjalny + społeczność)
const { useState: uUA, useEffect: uUE, useRef: uUR } = React;

const U_SCREENS = {
  // oficjalne
  pulpit: PulpitUnified, ogloszenia: Ogloszenia, ogloszenie: OgloszenieDetail,
  usterki: Usterki, usterka: UsterkaDetail, 'nowa-usterka': NowaUsterka, plan: PlanOsiedla,
  rezerwacje: Rezerwacje, uchwala: Uchwala, powiadomienia: Powiadomienia,
  dokumenty: Dokumenty, kontakty: Kontakty, wiecej: WiecejUnified,
  // społeczność
  tablica: Feed, post: PostDetail, market: Marketplace, wydarzenia: Events, event: EventDetail, zwierzaki: Pets,
};
// ekrany pokazujące dolną nawigację (reszta = wepchnięte z przyciskiem wstecz)
const U_NAV_TABS = ['pulpit', 'ogloszenia', 'tablica', 'market', 'wydarzenia', 'zwierzaki', 'wiecej'];
const U_SOCIAL = ['tablica', 'market', 'wydarzenia', 'zwierzaki'];

const U_NAV = [
  { id: 'pulpit', icon: 'home', label: 'Pulpit' },
  { id: 'ogloszenia', icon: 'megaphone', label: 'Ogłoszenia' },
  { id: '__create', icon: 'plus', label: 'Dodaj' },
  { id: 'tablica', icon: 'users', label: 'Społeczność' },
  { id: 'wiecej', icon: 'grid', label: 'Więcej' },
];

function UBottomNav({ tab, onTab, onCreate }) {
  return (
    <nav className="absolute bottom-0 left-0 right-0 z-40 pt-2 px-2 bg-surface/85 backdrop-blur-xl border-t border-border" style={{ paddingBottom: 26 }}>
      <div className="flex items-end justify-around">
        {U_NAV.map(it => {
          if (it.id === '__create') return (
            <button key="c" onClick={onCreate} aria-label="Dodaj nowy" className="focusable flex flex-col items-center -mt-7 active:scale-90 transition">
              <span className="w-14 h-14 rounded-pill bg-brand text-brand-fg flex items-center justify-center shadow-md border-4 border-surface"><Icon name="plus" size={28} stroke={2.6} /></span>
              <span className="text-[10px] font-display font-700 text-brand mt-1">Dodaj</span>
            </button>
          );
          const active = it.id === 'tablica' ? U_SOCIAL.includes(tab) : tab === it.id;
          return (
            <button key={it.id} onClick={() => onTab(it.id)} aria-current={active ? 'page' : undefined} className={`focusable flex flex-col items-center gap-1 w-16 py-1 transition active:scale-90 ${active ? 'text-brand' : 'text-text-muted'}`}>
              <Icon name={it.icon} size={23} stroke={active ? 2.4 : 2} /><span className={`text-[10px] font-display ${active ? 'font-700' : 'font-600'}`}>{it.label}</span>
            </button>
          );
        })}
      </div>
    </nav>
  );
}

// arkusz tworzenia (łączy oba przepływy)
function CreateSheet({ ctx, onClose }) {
  const Opt = ({ icon, t, label, sub, onClick }) => (
    <button onClick={() => { onClose(); onClick(); }} className="focusable w-full flex items-center gap-3.5 p-3.5 rounded-xl border border-border bg-surface hover:bg-surface-muted transition active:scale-[.99] text-left">
      <span className={`w-12 h-12 rounded-[14px] flex items-center justify-center shrink-0 ${tone(t).bg} ${tone(t).text}`}><Icon name={icon} size={24} /></span>
      <div className="flex-1"><p className="font-display font-700 text-text text-[15px]">{label}</p><p className="text-[12.5px] text-text-muted">{sub}</p></div>
      <Icon name="chevronRight" size={18} className="text-text-muted" />
    </button>
  );
  return (
    <div className="space-y-2.5 pb-1">
      <Opt icon="wrench" t="cat-winda" label="Zgłoś usterkę" sub="Awaria, naprawa, część wspólna" onClick={() => ctx.go('nowa-usterka')} />
      <Opt icon="megaphone" t="brand" label="Napisz post" sub="Pytanie, polecam, dyskusja, marketplace" onClick={() => ctx.openComposer()} />
      <Opt icon="calendar" t="accent" label="Nowa rezerwacja" sub="Sala, grill, boisko, parking gościnny" onClick={() => ctx.go('rezerwacje')} />
    </div>
  );
}

function UnifiedApp() {
  const [theme, setTheme] = uUA(() => localStorage.getItem('osiedle-theme') || 'light');
  const [tab, setTab] = uUA('pulpit');
  const [stack, setStack] = uUA([]);
  const [dir, setDir] = uUA('tab');
  const [toast, setToast] = uUA(null);
  const [celebrate, setCelebrate] = uUA(0);
  const [acked, setAcked] = uUA({});
  const [vote, setVote] = uUA(null);
  const [rating, setRating] = uUA({});
  const [reactions, setReactions] = uUA({});
  const [reported, setReported] = uUA({});
  const [composer, setComposer] = uUA(null);
  const [create, setCreate] = uUA(false);
  const [flags, setFlags] = uUA({ fresh: false, offline: false, loading: false, emptyFeed: false, petAlert: true });
  const [scale, setScale] = uUA(1);
  // tryb telefonu: pełny ekran bez ramki i paska sterującego (param ?phone lub wąski ekran dotykowy)
  const [phone] = uUA(() => {
    try { const p = new URLSearchParams(location.search); if (p.has('phone')) return p.get('phone') !== '0'; } catch (e) {}
    return typeof window !== 'undefined' && window.matchMedia && window.matchMedia('(max-width: 520px)').matches;
  });
  const toastTimer = uUR();

  uUE(() => { document.documentElement.classList.toggle('dark', theme === 'dark'); localStorage.setItem('osiedle-theme', theme); }, [theme]);
  uUE(() => {
    const fit = () => setScale(Math.max(0.45, Math.min(1, (window.innerHeight - 132) / 874, (window.innerWidth - 32) / 402)));
    fit(); window.addEventListener('resize', fit); return () => window.removeEventListener('resize', fit);
  }, []);

  const fireToast = (t) => { setToast(t); clearTimeout(toastTimer.current); toastTimer.current = setTimeout(() => setToast(null), 2500); };
  const goTab = (t) => { setDir('tab'); setStack([]); setTab(t); };

  const ctx = {
    theme, toggleTheme: () => setTheme(t => t === 'dark' ? 'light' : 'dark'),
    flags, senior: false, feedLayout: 'komfort', composerMode: 'krokowy',
    go: (name, params = {}) => { setDir('fwd'); setStack(s => [...s, { name, params }]); },
    back: () => {
      if (stack.length) { setDir('back'); setStack(s => s.slice(0, -1)); }
      else if (U_SOCIAL.includes(tab) && tab !== 'tablica') { setDir('back'); setTab('tablica'); }
    },
    setTab: goTab,
    hasStack: stack.length > 0,
    toast: fireToast,
    // oficjalne
    acked, ack: (id) => setAcked(a => ({ ...a, [id]: new Date().toLocaleDateString('pl-PL', { day: 'numeric', month: 'long' }) + ', ' + new Date().toLocaleTimeString('pl-PL', { hour: '2-digit', minute: '2-digit' }) })),
    vote, castVote: (c) => { setVote(c); fireToast({ msg: 'Głos oddany', icon: 'check' }); setCelebrate(n => n + 1); },
    rating, rate: (id, n) => { setRating(r => ({ ...r, [id]: n })); setCelebrate(n => n + 1); },
    celebrate: () => setCelebrate(n => n + 1),
    // społeczność
    reactions, react: (id, rid, post) => setReactions(r => {
      const cur = r[id] || { my: post.myReaction, counts: { ...post.reactions } };
      const counts = { ...cur.counts }; let my = cur.my;
      if (my === rid) { counts[rid] = Math.max(0, (counts[rid] || 0) - 1); my = null; }
      else { if (my) counts[my] = Math.max(0, (counts[my] || 0) - 1); counts[rid] = (counts[rid] || 0) + 1; my = rid; }
      return { ...r, [id]: { my, counts } };
    }),
    reported, report: (post) => { setReported(p => ({ ...p, [post.id]: true })); fireToast({ msg: 'Zgłoszono — moderator sprawdzi', icon: 'flag' }); },
    openComposer: (preset) => setComposer({ preset }), closeComposer: () => setComposer(null),
  };

  const current = stack.length ? stack[stack.length - 1] : { name: tab, params: {} };
  const Screen = U_SCREENS[current.name] || PulpitUnified;
  const showNav = stack.length === 0 && U_NAV_TABS.includes(tab);
  const animClass = dir === 'fwd' ? 'om-anim-fwd' : dir === 'back' ? 'om-anim-back' : 'om-anim-tab';

  const triggerLoading = () => { setFlags(f => ({ ...f, loading: true })); setStack([]); setTab('pulpit'); setTimeout(() => setFlags(f => ({ ...f, loading: false })), 1400); };

  const appContent = (
    <div className="relative h-full w-full overflow-hidden" style={{ background: 'rgb(var(--c-bg))' }}>
      <div key={current.name + JSON.stringify(current.params)} className={`h-full ${animClass}`}><Screen ctx={ctx} params={current.params} /></div>
      {showNav && <UBottomNav tab={tab} onTab={goTab} onCreate={() => setCreate(true)} />}
      {create && <Sheet open onClose={() => setCreate(false)} title="Co chcesz dodać?"><CreateSheet ctx={ctx} onClose={() => setCreate(false)} /></Sheet>}
      {composer && <Sheet open onClose={ctx.closeComposer} title="Nowy post"><Composer ctx={ctx} /></Sheet>}
      {celebrate > 0 && <Confetti key={celebrate} />}
      <Toast toast={toast} />
    </div>
  );

  const animStyle = (
    <style>{`
      .om-anim-fwd  { animation: om-in-right .3s cubic-bezier(.22,1,.36,1) both; }
      .om-anim-back { animation: om-in-left  .3s cubic-bezier(.22,1,.36,1) both; }
      .om-anim-tab  { animation: om-fade .24s ease both; }
    `}</style>
  );

  // ── TRYB TELEFONU: pełny ekran ──
  if (phone) {
    return (
      <div className="fixed inset-0" style={{ background: 'rgb(var(--c-bg))' }}>
        {appContent}
        {animStyle}
      </div>
    );
  }

  return (
    <div className="min-h-screen flex flex-col items-center">
      {/* pasek sterowania */}
      <div className="w-full flex items-center justify-between gap-3 px-5 py-3 flex-wrap" style={{ color: 'rgb(var(--c-text))' }}>
        <div className="flex items-center gap-2.5">
          <div className="w-8 h-8 rounded-[10px] bg-brand flex items-center justify-center"><Icon name="building" size={18} className="text-brand-fg" /></div>
          <div className="leading-none"><p className="font-display font-800 text-[15px]">e‑Osiedle · Wszystko w jednym</p><p className="text-[11px]" style={{ color: 'rgb(var(--c-text-muted))' }}>Oficjalne + sąsiedzkie · jedna aplikacja</p></div>
        </div>
        <div className="flex items-center gap-2 flex-wrap">
          <UCtrl active={flags.offline} icon="wifiOff" onClick={() => { setFlags(f => ({ ...f, offline: !f.offline })); goTab('pulpit'); }}>Offline</UCtrl>
          <UCtrl icon="refresh" onClick={triggerLoading}>Wczytywanie</UCtrl>
          <UCtrl active={flags.petAlert} icon="pawPrint" onClick={() => setFlags(f => ({ ...f, petAlert: !f.petAlert }))}>Alert pupila</UCtrl>
          <a href="?phone=1" className="inline-flex items-center gap-1.5 h-9 px-3 rounded-pill text-[12.5px] font-display font-700 bg-text text-bg transition active:scale-95"><Icon name="home" size={15} stroke={2.2} />Tryb telefonu</a>
          <UCtrl active={theme === 'dark'} icon={theme === 'dark' ? 'moon' : 'sun'} onClick={ctx.toggleTheme}>{theme === 'dark' ? 'Ciemny' : 'Jasny'}</UCtrl>
        </div>
      </div>

      {/* telefon (podgląd w ramce) */}
      <div style={{ height: 874 * scale + 8 }} className="flex items-start justify-center w-full">
        <div style={{ transform: `scale(${scale})`, transformOrigin: 'top center' }}>
          <IOSDevice dark={theme === 'dark'}>
            {appContent}
          </IOSDevice>
        </div>
      </div>

      {animStyle}
    </div>
  );
}

function UCtrl({ active, onClick, icon, children }) {
  return <button onClick={onClick} className={`inline-flex items-center gap-1.5 h-9 px-3 rounded-pill text-[12.5px] font-display font-600 border transition active:scale-95 ${active ? 'bg-brand text-brand-fg border-brand' : 'bg-surface text-text-secondary border-border hover:border-text-muted'}`}>{icon && <Icon name={icon} size={15} stroke={2.2} />}{children}</button>;
}

ReactDOM.createRoot(document.getElementById('root')).render(<UnifiedApp />);