// Prodz — App shell. Provides language + navigation context, the 5-item
// bottom nav (Home · Network · Crea · Shoutouts · Threads), global top-bar
// surfaces (Inbox · Profile), detail stack, and the conversation funnel:
// Shoutouts "Rispondi" + Network "Collab" -> Collab Proposal -> Inbox.
const { useState: useStateA, useMemo: useMemoA, useEffect: useEffectA } = React;

function AppShell() {
  const { L } = useL();
  const { BottomNav } = window.ProdzDesignSystem_d0b87b;

  const [onboarded, setOnboarded] = useStateA(false);
  const [tab, setTab] = useStateA('home');
  const [stack, setStack] = useStateA([]); // overlay routes
  const [conversations, setConversations] = useStateA(() => CONVERSATIONS.map((c) => ({ ...c })));
  const [recs, setRecs] = useStateA(() => RECS_SEED);
  const [moodboards, setMoodboards] = useStateA(() => [
  { id: 'mb1', name: { it: 'Riferimenti luce', en: 'Lighting refs' }, cover: IMG.fashion, items: [{ t: 'production', id: 'noir' }, { t: 'location', id: 'loft' }, { t: 'moment', id: 'm2' }, { t: 'gear', id: 'g3' }] },
  { id: 'mb2', name: { it: 'Location moda', en: 'Fashion locations' }, cover: IMG.interior, items: [{ t: 'location', id: 'loft' }, { t: 'location', id: 'rooftop' }, { t: 'production', id: 'luce' }] },
  { id: 'mb3', name: { it: 'Da provare', en: 'To try' }, cover: IMG.studio, items: [{ t: 'gear', id: 'g5' }, { t: 'moment', id: 'm5' }] }]
  );
  const [toast, setToast] = useStateA(null);
  const [collabFor, setCollabFor] = useStateA(null); // person -> Collab chooser sheet
  const toastTimer = React.useRef(null);

  const fireToast = (msg, actionLabel, onAction) => {
    if (toastTimer.current) clearTimeout(toastTimer.current);
    setToast({ msg, actionLabel, onAction });
    toastTimer.current = setTimeout(() => setToast(null), 3600);
  };

  const newConv = (conv) => {
    setConversations((cs) => [conv, ...cs]);
    setStack((s) => [...s, { name: 'conversation', params: { id: conv.id } }]);
  };

  const nav = useMemoA(() => ({
    conversations,
    get inboxCount() {return conversations.reduce((n, c) => n + (c.unread || 0), 0);},
    goTab: (id) => {setStack([]);setTab(id);},
    pop: () => setStack((s) => s.slice(0, -1)),
    openInbox: () => setStack((s) => [...s, { name: 'inbox' }]),
    openProfile: (id) => setStack((s) => [...s, { name: 'profile', params: { id } }]),
    openThread: (id) => setStack((s) => [...s, { name: 'thread', params: { id } }]),
    openSaved: () => setStack((s) => [...s, { name: 'saved' }]),
    openLocations: () => setStack((s) => [...s, { name: 'locations' }]),
    openAllProductions: () => setStack((s) => [...s, { name: 'allProductions' }]),
    openProduction: (id) => setStack((s) => [...s, { name: 'production', params: { id } }]),
    openStories: (i = 0) => setStack((s) => [...s, { name: 'stories', params: { i } }]),
    moodboards,
    recs,
    recOf: (id) => recs[id] || { sum: 0, count: 0 },
    recommend: (id, stars, text) => setRecs((r) => {
      const cur = r[id] || { sum: 0, count: 0, entries: [] };
      const entry = { by: 'me', stars, time: { it: 'adesso', en: 'now' }, text: text && text.trim() ? { it: text.trim(), en: text.trim() } : null };
      return { ...r, [id]: { sum: cur.sum + stars, count: cur.count + 1, entries: [entry, ...(cur.entries || [])] } };
    }),
    openConversation: (id) => {
      setConversations((cs) => cs.map((c) => c.id === id ? { ...c, unread: 0 } : c));
      setStack((s) => [...s, { name: 'conversation', params: { id } }]);
    },
    toast: fireToast,
    // Shoutouts "Rispondi" -> creates a Collab Proposal / Job Call conversation
    replyShoutout: (card) => {
      const first = card.author.split(' ')[0];
      newConv({
        id: 'conv-' + Date.now(), person: card.person || null, org: card.person ? null : card.author,
        kind: card.kind, subject: card.title, unread: 0, time: { it: 'adesso', en: 'now' },
        preview: { it: 'Conversazione avviata dai Shoutouts', en: 'Conversation started from Shoutouts' },
        messages: [
        { me: true, time: L('adesso', 'now'), text: { it: 'Ciao! Mi interessa: ' + card.title.it + '. Possiamo parlarne?', en: 'Hi! I’m interested in: ' + card.title.en + '. Can we talk?' } },
        { me: false, time: L('adesso', 'now'), text: { it: 'Perfetto, parliamone. Che disponibilità hai?', en: 'Great, let’s talk. What’s your availability?' } }]

      });
      fireToast(L('Risposta inviata · è nell’Inbox', 'Reply sent · it’s in your Inbox'), null);
    },
    // Network / Profile "Collab" -> opens a chooser (Invite to job / Collab proposal)
    sendCollab: (person) => setCollabFor(person)
  }), [conversations, recs, moodboards, L]);

  if (!onboarded) {
    return (
      <div className="prodz-device">
        <div className="prodz-viewport">
          <div className="prodz-scroll" style={{ display: 'flex', flexDirection: 'column' }}>
            <Onboarding onComplete={(profile) => {
              if (profile) {
                if (profile.role) PEOPLE.me.role = profile.role;
                if (profile.city) PEOPLE.me.city = profile.city;
                window.__prodzProfile = profile;
              }
              setOnboarded(true);setTab('home');
            }} />
          </div>
        </div>
      </div>);

  }

  const top = stack[stack.length - 1];
  const overlay = top && (() => {
    switch (top.name) {
      case 'inbox':return <InboxList />;
      case 'conversation':return <ConversationDetail id={top.params.id} />;
      case 'thread':return <ThreadDetail id={top.params.id} />;
      case 'profile':return <PersonProfile id={top.params.id} />;
      case 'saved':return <SavedItems />;
      case 'locations':return <LocationsMarketplace />;
      case 'allProductions':return <AllProductions />;
      case 'production':return <DetailProduction id={top.params.id} />;
      case 'stories':return <StoryViewer start={top.params.i} />;
      default:return null;
    }
  })();

  const tabScreen = () => {
    switch (tab) {
      case 'home':return <Home />;
      case 'network':return <Network />;
      case 'add':return <AddScreen />;
      case 'shoutouts':return <Shoutouts />;
      case 'threads':return <ThreadsList />;
      default:return <Home />;
    }
  };

  const navItems = [
  { id: 'home', label: L('Home', 'Home'), icon: <Ic n="House" s={22} /> },
  { id: 'network', label: 'Network', icon: <Ic n="Users" s={22} /> },
  { id: 'add', create: true, label: L('Crea', 'Create'), icon: <Ic n="Plus" s={22} color="var(--text-on-accent)" /> },
  { id: 'shoutouts', label: 'Shoutouts', icon: <Ic n="Megaphone" s={22} /> },
  { id: 'threads', label: 'Threads', icon: <Ic n="MessagesSquare" s={22} /> }];


  return (
    <NavContext.Provider value={nav}>
      <div className="prodz-device">
        <div className="prodz-viewport">
          {/* base tab screen */}
          <div className="prodz-scroll" key={tab} style={{ visibility: overlay ? 'hidden' : 'visible' }}>
            {tabScreen()}
          </div>
          {/* overlay detail screen */}
          {overlay &&
          <div className="prodz-scroll" key={stack.length + top.name} style={{ background: 'var(--surface-canvas)', animation: 'pz-slide-in 280ms var(--ease-out) both' }}>
              {overlay}
            </div>
          }
        </div>

        {!overlay &&
        <div style={{ flexShrink: 0 }}>
            <BottomNav items={navItems} value={tab} onChange={(id) => nav.goTab(id)} />
          </div>
        }

        {/* Collab chooser: Invite to job / Collab proposal */}
        <Sheet open={!!collabFor} onClose={() => setCollabFor(null)}>
          {collabFor &&
          <CollabFlow person={collabFor}
          onClose={() => setCollabFor(null)}
          onSubmit={(conv, toastMsg) => {setCollabFor(null);newConv(conv);fireToast(toastMsg, null);}} />
          }
        </Sheet>

        <Toast toast={toast} onAction={() => {if (toast && toast.onAction) toast.onAction();setToast(null);}} />
      </div>
    </NavContext.Provider>);

}

function Root() {
  return (
    <LangProvider initial="it">
      <AppShell />
    </LangProvider>);

}

const __prodzRootEl = document.getElementById('root');
// Live-reload guard: the preview re-runs scripts against a #root that may still
// carry React's internal container marker — clear it so createRoot stays quiet.
if (!__prodzRootEl.__prodzRoot) {
  Object.keys(__prodzRootEl).forEach((k) => {if (k.indexOf('__reactContainer') === 0 || k.indexOf('_reactRootContainer') === 0) {try {delete __prodzRootEl[k];} catch (_) {}}});
  __prodzRootEl.__prodzRoot = ReactDOM.createRoot(__prodzRootEl);
}
__prodzRootEl.__prodzRoot.render(<Root />);