// app.jsx — PWA fullscreen mobile router

const { useState, useEffect } = React;

// Detect in-app browsers (WhatsApp, FB, Instagram, Messenger, LinkedIn, TikTok)
function detectInAppBrowser() {
  try {
    const ua = (navigator.userAgent || '').toLowerCase();
    if (ua.indexOf('whatsapp') !== -1 || ua.indexOf('wabusiness') !== -1 || ua.indexOf('wa-business') !== -1) return 'WhatsApp';
    if (ua.indexOf('instagram') !== -1) return 'Instagram';
    if (ua.indexOf('fbav') !== -1 || ua.indexOf('fban') !== -1 || ua.indexOf('fb_iab') !== -1 || ua.indexOf('fbios') !== -1) return 'Facebook';
    if (ua.indexOf('messenger') !== -1) return 'Messenger';
    if (ua.indexOf('linkedinapp') !== -1 || ua.indexOf('linkedin') !== -1) return 'LinkedIn';
    if (ua.indexOf('musical_ly') !== -1 || ua.indexOf('bytedance') !== -1 || ua.indexOf('tiktok') !== -1) return 'TikTok';
    // Fallback: many in-app browsers ship without Safari/Chrome in UA on iOS
    // Detect "in-app webview" via the absence of "Safari" on iOS but presence of "Mobile"
    const isIOS = /iphone|ipad|ipod/.test(ua);
    if (isIOS && ua.indexOf('safari') === -1 && ua.indexOf('crios') === -1 && ua.indexOf('fxios') === -1) {
      return 'Application';
    }
    return null;
  } catch (e) { return null; }
}

function InAppBrowserBanner({ lang }) {
  const [dismissed, setDismissed] = useState(() => {
    try { return localStorage.getItem('trusta_inapp_dismiss') === '1'; } catch (e) { return false; }
  });
  const [copied, setCopied] = useState(false);
  const browser = detectInAppBrowser();
  if (!browser || dismissed) return null;

  const url = 'https://trusta.click/app';
  const isKa = lang === 'ka';
  const title = isKa
    ? `${browser}-ში ხარ — გახსენი ბრაუზერში`
    : `Tu es dans ${browser} — ouvre dans ton navigateur`;
  const subtitle = isKa
    ? 'უკეთესი გამოცდილებისთვის (Chrome / Safari)'
    : 'Pour une meilleure expérience (Chrome / Safari)';
  const copyLabel = copied
    ? (isKa ? '✓ დაკოპირდა' : '✓ Copié')
    : (isKa ? 'ბმულის კოპირება' : 'Copier le lien');
  const dismissLabel = isKa ? 'მესმის' : 'OK, j\'ai compris';

  const onCopy = async () => {
    try {
      if (navigator.clipboard && navigator.clipboard.writeText) {
        await navigator.clipboard.writeText(url);
      } else {
        const ta = document.createElement('textarea');
        ta.value = url; document.body.appendChild(ta); ta.select();
        document.execCommand('copy'); document.body.removeChild(ta);
      }
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch (e) {}
  };

  const onDismiss = () => {
    try { localStorage.setItem('trusta_inapp_dismiss', '1'); } catch (e) {}
    setDismissed(true);
  };

  return (
    <div style={{
      position: 'fixed',
      top: 'calc(env(safe-area-inset-top, 0px) + 0px)',
      left: 0, right: 0, zIndex: 300,
      background: 'rgba(20,20,20,0.96)',
      backdropFilter: 'blur(10px)',
      WebkitBackdropFilter: 'blur(10px)',
      borderBottom: '1px solid rgba(212,175,55,0.4)',
      padding: '14px 16px 12px 16px',
      fontFamily: 'Inter',
    }}>
      <div style={{ color: '#D4AF37', fontSize: 13, fontWeight: 700, marginBottom: 4 }}>
        ⚠️ {title}
      </div>
      <div style={{ color: 'rgba(255,255,255,0.7)', fontSize: 11, marginBottom: 10 }}>
        {subtitle}
      </div>
      <div style={{ display: 'flex', gap: 8 }}>
        <button onClick={onCopy} style={{
          flex: 1, padding: '8px 10px', borderRadius: 8,
          background: '#D4AF37', color: '#111', border: 'none',
          fontFamily: 'Inter', fontSize: 12, fontWeight: 700, cursor: 'pointer',
        }}>{copyLabel}</button>
        <button onClick={onDismiss} style={{
          padding: '8px 10px', borderRadius: 8,
          background: 'rgba(255,255,255,0.08)', color: 'rgba(255,255,255,0.7)',
          border: '1px solid rgba(255,255,255,0.15)',
          fontFamily: 'Inter', fontSize: 12, fontWeight: 600, cursor: 'pointer',
        }}>{dismissLabel}</button>
      </div>
    </div>
  );
}

function App() {
  // Language with localStorage persistence (default: Géorgien)
  const [lang, setLang] = useState(() => {
    try { return localStorage.getItem('trusta_lang') || 'ka'; } catch (e) { return 'ka'; }
  });
  useEffect(() => {
    try { localStorage.setItem('trusta_lang', lang); } catch (e) {}
    document.documentElement.lang = lang;
  }, [lang]);
  const t = useT(lang);

  // Auto-login : on lit directement localStorage (résilient au timing de chargement des scripts)
  const initialRoute = (() => {
    try {
      const token = localStorage.getItem('trusta_token');
      if (!token) return { name: 'splash' };
      const userRaw = localStorage.getItem('trusta_user');
      const u = userRaw ? JSON.parse(userRaw) : null;
      if (u && u.name && u.city) return { name: 'main' };
      return { name: 'profileSetup' };
    } catch (e) {
      return { name: 'splash' };
    }
  })();

  // Tous les useState d'abord (ordre important pour les hooks React)
  const [route, setRoute] = useState(initialRoute);
  const [tab, setTab] = useState('home');
  const [query, setQuery] = useState('');
  const [showReview, setShowReview] = useState(false);
  const [reviewUser, setReviewUser] = useState(null);
  const [authPhone, setAuthPhone] = useState(null);
  const [toast, setToast] = useState(null);
  const [showWelcome, setShowWelcome] = useState(false);

  // Helper: show a toast for 3s
  const showToast = (msg) => {
    setToast(msg);
    setTimeout(() => setToast(null), 3000);
  };

  // Effets après tous les useState
  useEffect(() => {
    if (!window.TrustaAuth || !window.TrustaAuth.isLoggedIn()) return;
    if (!window.TrustaAPI || !window.TrustaAPI.getMe) return;
    window.TrustaAPI.getMe().then((u) => {
      if (u && u.name && u.city) {
        setTab('home');
        setRoute({ name: 'main' });
      } else if (u) {
        setRoute({ name: 'profileSetup' });
      }
    }).catch(() => {
      // Erreur réseau → on garde l'état initial. 401 → apiFetch a déjà clear le token.
    });
    if (window.TrustaFavStore) window.TrustaFavStore.refresh();
    if (window.TrustaNotifStore) window.TrustaNotifStore.startPolling(30000);
  }, []);

  const go = (name, props = {}) => setRoute({ name, ...props });

  const onTab = (id) => {
    if (id === 'post') { go('createListing'); return; }
    setTab(id);
    go('main');
  };

  let screen;
  if (route.name === 'splash') {
    screen = <SplashScreen onNext={() => go('phone')} />;
  } else if (route.name === 'phone') {
    screen = <PhoneScreen t={t} lang={lang} onNext={(phone) => { setAuthPhone(phone); go('otp'); }} />;
  } else if (route.name === 'otp') {
    screen = <OtpScreen t={t} lang={lang} phone={authPhone}
      onBack={() => go('phone')}
      onNext={(result) => {
        // Si user existant et profil déjà rempli, skip profileSetup
        if (result?.user && result.user.name && result.user.city && !result.isNewUser) {
          const name = result.user.name;
          const msg = lang === 'ka' ? `კეთილი იყოს დაბრუნება, ${name}! 💛` : `Bon retour, ${name} ! 💛`;
          showToast(msg);
          setTab('home'); go('main');
        } else {
          go('profileSetup');
        }
      }} />;
  } else if (route.name === 'profileSetup') {
    screen = <ProfileSetupScreen t={t} lang={lang} onNext={() => {
      setShowWelcome(true);
      setTab('home'); go('main');
    }} />;
  } else if (route.name === 'main') {
    if (tab === 'home') {
      screen = <HomeScreen lang={lang} t={t} query={query} setQuery={setQuery}
        refreshKey={route._refresh || 0}
        onOpenListing={(l) => go('listingDetail', { listing: l })}
        onOpenMap={() => go('map')}
        onCreateListing={() => go('createListing')} />;
    } else if (tab === 'chat') {
      screen = <ChatListScreen lang={lang} t={t}
        onOpenThread={(c) => go('chatThread', { peer: c })} />;
    } else if (tab === 'alert') {
      screen = <AlertsScreen lang={lang} t={t}
        onOpenListing={(l) => go('listingDetail', { listing: l })}
        onOpenChat={(c) => go('chatThread', { peer: c })} />;
    } else if (tab === 'profile') {
      screen = <ProfileScreen lang={lang} t={t} isMe
        onOpenReferral={() => go('referral')}
        onOpenMyListings={() => go('myListings')}
        onOpenFavorites={() => go('favorites')}
        onOpenAbout={() => go('about')}
        onOpenContact={() => go('contact')}
        onOpenPrivacy={() => go('privacy')}
        onOpenTerms={() => go('terms')}
        onOpenDeleteAccount={() => go('deleteAccount')}
        onOpenBlocked={() => go('blocked')}
        onLogout={() => { setTab('home'); go('splash'); }} />;
    }
  } else if (route.name === 'listingDetail') {
    screen = <ListingDetailScreen listing={route.listing} lang={lang} t={t}
      onBack={() => go('main')}
      onDeleted={() => { setTab('home'); go('main', { _refresh: Date.now() }); }}
      onOpenChat={(u) => {
        // u = poster { id, name, avatar, verified } → format ChatThreadScreen
        const me = window.TrustaAuth && window.TrustaAuth.getUser();
        if (!u || !u.id) return;
        if (me && u.id === me.id) return; // pas de chat avec soi-même
        go('chatThread', { peer: {
          peer_id: u.id,
          peer_name: u.name,
          peer_photo: u.avatar,
          peer_verified: u.verified,
          listing_id: route.listing && route.listing.id ? route.listing.id : null,
        } });
      }}
      onOpenProfile={(u) => go('memberProfile', { user: u })} />;
  } else if (route.name === 'map') {
    screen = <MapScreen lang={lang} t={t}
      onBack={() => go('main')}
      onOpenListing={(l) => go('listingDetail', { listing: l })} />;
  } else if (route.name === 'chatThread') {
    screen = <ChatThreadScreen peer={route.peer} lang={lang} t={t}
      onBack={() => { setTab('chat'); go('main'); }}
      onOpenProfile={(u) => go('memberProfile', { user: u })} />;
  } else if (route.name === 'memberProfile') {
    screen = <ProfileScreen user={route.user} lang={lang} t={t}
      onBack={() => go('main')}
      onOpenChat={(u) => go('chatThread', { peer: u })}
      onLeaveReview={() => { setReviewUser(route.user); setShowReview(true); }} />;
  } else if (route.name === 'createListing') {
    screen = <CreateListingScreen lang={lang} t={t}
      onBack={() => { setTab('home'); go('main'); }}
      onPublish={() => { setTab('home'); go('main'); }} />;
  } else if (route.name === 'referral') {
    screen = <ReferralScreen lang={lang} t={t}
      onBack={() => { setTab('profile'); go('main'); }} />;
  } else if (route.name === 'myListings') {
    screen = <MyListingsScreen lang={lang} t={t}
      onBack={() => { setTab('profile'); go('main'); }}
      onOpenListing={(l) => go('listingDetail', { listing: l })}
      onCreateListing={() => go('createListing')} />;
  } else if (route.name === 'favorites') {
    screen = <FavoritesScreen lang={lang} t={t}
      onBack={() => { setTab('profile'); go('main'); }}
      onOpenListing={(l) => go('listingDetail', { listing: l })}
      onOpenProfile={(u) => go('memberProfile', { user: u })} />;
  } else if (route.name === 'about') {
    screen = <AboutScreen lang={lang} onBack={() => { setTab('profile'); go('main'); }} />;
  } else if (route.name === 'contact') {
    screen = <ContactScreen lang={lang} user={window.TrustaAuth && window.TrustaAuth.getUser()} onBack={() => { setTab('profile'); go('main'); }} />;
  } else if (route.name === 'privacy') {
    screen = <PrivacyPolicyScreen lang={lang} onBack={() => { setTab('profile'); go('main'); }} />;
  } else if (route.name === 'terms') {
    screen = <TermsScreen lang={lang} onBack={() => { setTab('profile'); go('main'); }} />;
  } else if (route.name === 'deleteAccount') {
    screen = <DeleteAccountScreen lang={lang}
      onBack={() => { setTab('profile'); go('main'); }}
      onDeleted={() => { setTab('home'); go('splash'); }} />;
  } else if (route.name === 'blocked') {
    screen = <BlockedUsersScreen lang={lang}
      onBack={() => { setTab('profile'); go('main'); }} />;
  }

  const showTabBar = route.name === 'main';
  const showFloatingControls = route.name !== 'splash';

  // Floating language toggle (top-right, respects safe area)
  const langToggle = showFloatingControls && (
    <button
      onClick={() => setLang(lang === 'ka' ? 'fr' : 'ka')}
      style={{
        position: 'fixed',
        top: 'calc(env(safe-area-inset-top, 0px) + 10px)',
        right: 'calc(env(safe-area-inset-right, 0px) + 10px)',
        zIndex: 200,
        padding: '6px 12px', borderRadius: 999,
        background: 'rgba(20,20,20,0.85)', backdropFilter: 'blur(8px)',
        WebkitBackdropFilter: 'blur(8px)',
        border: '1px solid rgba(212,175,55,0.4)', color: '#D4AF37',
        fontFamily: 'Inter', fontSize: 11, fontWeight: 600, cursor: 'pointer',
        display: 'flex', alignItems: 'center', gap: 6,
      }}
    >
      <span style={{ opacity: lang === 'ka' ? 1 : 0.4 }}>ქა</span>
      <span style={{ width: 1, height: 10, background: 'rgba(212,175,55,0.3)' }} />
      <span style={{ opacity: lang === 'fr' ? 1 : 0.4 }}>FR</span>
    </button>
  );

  return (
    <div style={{
      width: '100%',
      height: '100vh',
      maxHeight: '100dvh',
      background: COLORS.bg,
      position: 'relative',
      overflow: 'hidden',
    }}>
      {langToggle}

      {/* In-app browser warning (WhatsApp/FB/Instagram) */}
      <InAppBrowserBanner lang={lang} />

      {/* Screen content fullscreen */}
      <div style={{
        position: 'absolute', inset: 0, overflow: 'hidden',
      }}>
        {screen}
      </div>

      {/* Tab bar */}
      {showTabBar && <TabBar active={tab} onChange={onTab} t={t} />}

      {/* Review modal */}
      {showReview && reviewUser && (
        <ReviewModal user={reviewUser} lang={lang} t={t} onClose={() => setShowReview(false)} />
      )}

      {/* Welcome modal (post inscription beta) */}
      {showWelcome && (
        <div
          onClick={() => setShowWelcome(false)}
          style={{
            position: 'fixed', inset: 0, zIndex: 600,
            background: 'rgba(0,0,0,0.85)',
            backdropFilter: 'blur(8px)',
            WebkitBackdropFilter: 'blur(8px)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            padding: 20,
          }}
        >
          <div
            onClick={(e) => e.stopPropagation()}
            style={{
              background: 'linear-gradient(160deg, #1a1a1a 0%, #0e0e0e 100%)',
              border: '1px solid rgba(212,175,55,0.4)',
              borderRadius: 20,
              padding: '32px 24px',
              maxWidth: 380,
              width: '100%',
              maxHeight: '85vh',
              overflowY: 'auto',
              fontFamily: 'Inter',
              color: '#fff',
              boxShadow: '0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(212,175,55,0.15)',
            }}
          >
            <div style={{ textAlign: 'center', fontSize: 48, marginBottom: 12 }}>💛</div>
            <div style={{
              fontFamily: '"Playfair Display", serif',
              fontSize: 24, fontWeight: 700, color: '#D4AF37',
              textAlign: 'center', marginBottom: 8,
            }}>
              {lang === 'ka' ? 'გმადლობთ ნდობისთვის!' : 'Merci pour ta confiance !'}
            </div>
            <div style={{
              fontSize: 14, color: 'rgba(255,255,255,0.85)',
              textAlign: 'center', marginBottom: 18, lineHeight: 1.5,
            }}>
              {lang === 'ka'
                ? 'შენ ხარ Trusta-ს ერთ-ერთი პირველი მომხმარებელი 🇬🇪'
                : 'Tu fais partie des tout premiers utilisateurs de Trusta 🇬🇪'}
            </div>

            <div style={{
              background: 'rgba(212,175,55,0.08)',
              border: '1px solid rgba(212,175,55,0.25)',
              borderRadius: 14,
              padding: '14px 16px',
              marginBottom: 14,
            }}>
              <div style={{ fontSize: 13, fontWeight: 700, color: '#D4AF37', marginBottom: 6 }}>
                ⚠️ {lang === 'ka' ? 'ეს არის ბეტა ვერსია' : 'C\'est une version beta'}
              </div>
              <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.8)', lineHeight: 1.5 }}>
                {lang === 'ka'
                  ? 'შესაძლოა იყოს პატარა ბაგები. შენი დახმარება გვჭირდება მათ აღმოსაჩენად 🛠️'
                  : 'Il peut y avoir des petits bugs. On a besoin de toi pour les trouver 🛠️'}
              </div>
            </div>

            <div style={{
              background: 'rgba(212,175,55,0.08)',
              border: '1px solid rgba(212,175,55,0.25)',
              borderRadius: 14,
              padding: '14px 16px',
              marginBottom: 20,
            }}>
              <div style={{ fontSize: 13, fontWeight: 700, color: '#D4AF37', marginBottom: 6 }}>
                🎁 {lang === 'ka' ? 'ჯილდოები ბეტა-ტესტერებისთვის' : 'Récompenses pour beta-testeurs'}
              </div>
              <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.8)', lineHeight: 1.5 }}>
                {lang === 'ka'
                  ? 'ყველა ვინც დაგვეხმარება — უფასო თვეები, სპეციალური სტატუსები და საჩუქრები 💛'
                  : 'Tous ceux qui nous aident : mois gratuits, statuts spéciaux et surprises 💛'}
              </div>
            </div>

            <button
              onClick={() => setShowWelcome(false)}
              style={{
                width: '100%',
                padding: '14px 20px',
                borderRadius: 14,
                background: 'linear-gradient(135deg, #D4AF37 0%, #B8951F 100%)',
                color: '#0a0a0a',
                border: 'none',
                fontFamily: 'Inter',
                fontSize: 14,
                fontWeight: 700,
                cursor: 'pointer',
                boxShadow: '0 8px 24px rgba(212,175,55,0.3)',
              }}
            >
              {lang === 'ka' ? 'ვიწყებ Trusta-ს' : 'Je découvre Trusta'} →
            </button>
          </div>
        </div>
      )}

      {/* Toast notification */}
      {toast && (
        <div style={{
          position: 'fixed',
          bottom: 'calc(env(safe-area-inset-bottom, 0px) + 100px)',
          left: '50%',
          transform: 'translateX(-50%)',
          zIndex: 400,
          padding: '12px 20px',
          borderRadius: 999,
          background: 'rgba(20,20,20,0.95)',
          backdropFilter: 'blur(10px)',
          WebkitBackdropFilter: 'blur(10px)',
          border: '1px solid rgba(212,175,55,0.5)',
          color: '#D4AF37',
          fontFamily: 'Inter',
          fontSize: 13,
          fontWeight: 600,
          boxShadow: '0 8px 32px rgba(0,0,0,0.4)',
          maxWidth: '85%',
          textAlign: 'center',
          pointerEvents: 'none',
          animation: 'trustaToastIn 0.3s ease-out',
        }}>
          {toast}
        </div>
      )}
      <style>{`
        @keyframes trustaToastIn {
          from { opacity: 0; transform: translate(-50%, 20px); }
          to { opacity: 1; transform: translate(-50%, 0); }
        }
      `}</style>
    </div>
  );
}

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