/* ============================================================
   LF CONCEITO — App: contexto, estado, roteamento, auth real
   ============================================================ */

const StoreContext = createContext(null);
window.useStore = ()=> useContext(StoreContext);

function useHashRoute(){
  const [hash,setHash] = useState(window.location.hash || "#/");
  useEffect(()=>{
    const fn = ()=>setHash(window.location.hash || "#/");
    window.addEventListener("hashchange",fn);
    return ()=>window.removeEventListener("hashchange",fn);
  },[]);
  return hash;
}

function App(){
  const route = useHashRoute();

  // Auth real via Supabase
  const [session, setSession]   = useState(null);
  const [isAdmin, setIsAdmin]   = useState(false);
  const [authLoading, setAuthLoading] = useState(true);

  // Carrinho
  const [favorites, setFavorites] = useState([]);
  const [favLoading, setFavLoading] = useState(false);
  const [cart, setCart] = useState(()=>{
    try{ return JSON.parse(localStorage.getItem("lf_cart")||"[]"); }catch(e){ return []; }
  });

  const [drawerOpen, setDrawerOpen] = useState(false);
  const [toast, setToast]           = useState(null);
  const [mob, setMob]               = useState(false);

  // Produtos do Supabase
  const [products,   setProducts]   = useState(window.PRODUCTS_LIVE !== undefined ? window.PRODUCTS_LIVE : (window.PRODUCTS || PRODUCTS));
  const [categories, setCategories] = useState(window.CATEGORIES_LIVE || CATEGORIES);
  const [storeReady, setStoreReady] = useState(!!window.STORE_READY);
  const [storeConfig, setStoreConfig] = useState({});

  // Configurações da loja (Pix, parcelamento, frete, avaliações padrão, etc.)
  useEffect(()=>{
    if(!window.DB) return;
    window.DB.fetchConfig().then(c=>setStoreConfig(c||{})).catch(()=>{});
  },[]);

  window.refreshConfig = async ()=>{
    if(!window.DB) return;
    const c = await window.DB.fetchConfig();
    setStoreConfig(c||{});
  };

  /* ---------- Supabase Auth ---------- */
  useEffect(()=>{
    if(!window._sb){ setAuthLoading(false); return; }

    // Sessão inicial
    window._sb.auth.getSession().then(({ data: { session } })=>{
      setSession(session);
      if(session) checkAdmin(session.user.id);
      else setAuthLoading(false);
    });

    // Listener de mudanças
    const { data: { subscription } } = window._sb.auth.onAuthStateChange((_event, session)=>{
      setSession(session);
      if(session) checkAdmin(session.user.id);
      else { setIsAdmin(false); setAuthLoading(false); }
    });

    return ()=> subscription.unsubscribe();
  },[]);

  // Lista de emails admin — simples e confiável
  async function checkAdmin(userId){
    try{
      const { data: { user } } = await window._sb.auth.getUser();
      if(!user){ setIsAdmin(false); return; }
      // Busca lista de admins do banco (store_config.admin_emails)
      const { data: cfgRows } = await window._sb
        .from("store_config").select("key, value").eq("key", "admin_emails");
      const adminEmails = (cfgRows?.[0]?.value || "")
        .split(",").map(e=>e.trim()).filter(Boolean);
      if(adminEmails.includes(user.email)){
        setIsAdmin(true);
      } else {
        setIsAdmin(false);
      }
    }catch(e){
      setIsAdmin(false);
    }
    finally{ setAuthLoading(false); }
  }

  async function signIn(email, password, captchaToken){
    const { data, error } = await window._sb.auth.signInWithPassword({ email, password, options: captchaToken ? { captchaToken } : undefined });
    if(error) throw error;
    return data;
  }

  async function signUp(email, password, name, captchaToken){
    const { data, error } = await window._sb.auth.signUp({
      email, password,
      options: { data: { name } }
    });
    if(error) throw error;
    // Só envia boas-vindas se o user foi criado de fato
    if(data?.user) {
      try {
        const wres = await fetch("https://gwbiccrzoeppvfzpaqji.supabase.co/functions/v1/welcome-email", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
            "apikey": window._ANON_KEY,
            "Authorization": `Bearer ${window._ANON_KEY}`,
          },
          body: JSON.stringify({ email, name }),
        });
        } catch(e) { console.error("welcome-email error:", e); }
    }
    return data;
  }

  async function signOut(){
    await window._sb?.auth.signOut();
    setSession(null);
    setIsAdmin(false);
  }

  /* ---------- Produtos do Supabase ---------- */
  useEffect(()=>{
    const onReady = ()=>{
      if(window.PRODUCTS_LIVE !== undefined) setProducts(window.PRODUCTS_LIVE);
      if(window.CATEGORIES_LIVE) setCategories(window.CATEGORIES_LIVE);
      setStoreReady(true);
    };
    if(window.STORE_READY){ onReady(); return; }
    window.addEventListener("store-ready", onReady);
    return ()=> window.removeEventListener("store-ready", onReady);
  },[]);

  window.refreshProducts = async ()=>{
    if(!window.DB) return;
    // fetchAllProducts traz todos (ativos e inativos) — necessário para o painel admin
    const fn = window.DB.fetchAllProducts || window.DB.fetchProducts;
    const prods = await fn();
    if(prods) setProducts(prods);
  };

  useEffect(()=>{ localStorage.setItem("lf_cart", JSON.stringify(cart)); },[cart]);
  useEffect(()=>{
    if(session && window.DB){
      setFavLoading(true);
      window.DB.fetchFavorites().then(ids=>{ setFavorites(ids||[]); setFavLoading(false); }).catch(()=>setFavLoading(false));
    } else {
      setFavorites([]);
    }
  },[session]);
  useEffect(()=>{ window.scrollTo(0,0); },[route]);

  const showToast = (msg)=>{
    setToast(msg);
    clearTimeout(window.__lft);
    window.__lft = setTimeout(()=>setToast(null), 2400);
  };

  const ctx = {
    route,
    // Auth
    session, isAdmin, authLoading,
    user: session?.user || null,
    userName: session?.user?.user_metadata?.name || session?.user?.email?.split("@")[0] || null,
    signIn, signUp, signOut,

    // Catálogo
    products, categories, storeReady, storeConfig,
    mob, setMob,
    nav: (h)=>{ window.location.hash = h; },

    // Carrinho
    cart,
    cartCount: cart.reduce((s,i)=>s+i.qty, 0),
    favorites,
    favLoading,
    isFavorite: (id)=> favorites.includes(id),
    toggleFavorite: async (id)=>{
      if(!session){ window.location.hash = "#/login"; return; }
      const has = favorites.includes(id);
      setFavorites(prev=> has ? prev.filter(x=>x!==id) : [...prev, id]); // otimista
      try{
        if(has) await window.DB.removeFavorite(id);
        else await window.DB.addFavorite(id);
      }catch(e){
        console.error("Erro ao favoritar:", e);
        setFavorites(prev=> has ? [...prev, id] : prev.filter(x=>x!==id)); // desfaz se der erro
      }
    },
    cartTotal: cart.reduce((s,i)=>{
      const p = products.find(x=>x.id===i.id);
      return s + (p ? p.price : 0) * i.qty;
    }, 0),
    addToCart: async (p, size, color, qty=1)=>{
      // Buscar estoque real da variante antes de adicionar
      let maxStock = 99;
      if(window.DB){
        try{
          const variants = await window.DB.fetchVariants(p.id);
          // Normaliza: "Único" e "" são equivalentes a "_" no banco
          const sizeKey = (!size || size==="Único" || size==="unico") ? "_" : size;
          const colorKey = (color||"").toLowerCase();
          const v = variants.find(v =>
            v.color.toLowerCase()===colorKey &&
            (v.size===sizeKey || v.size===size)
          );
          if(v) maxStock = v.stock;
        }catch(e){}
      }
      setCart(prev=>{
        const k = i=> i.id===p.id && i.size===size && i.color===color;
        const ex = prev.find(k);
        if(ex){
          const newQty = Math.min(maxStock, ex.qty + qty);
          if(newQty === ex.qty) return prev; // já no limite
          return prev.map(i=> k(i) ? {...i, qty: newQty} : i);
        }
        return [...prev, { id:p.id, size, color, qty: Math.min(maxStock, qty) }];
      });
      showToast(p.name + " adicionado à sacola");
    },
    setQty: (idx, q)=> setCart(prev=> prev.map((i,n)=> n===idx ? {...i, qty: Math.max(1,q)} : i)),
    removeFromCart: (idx)=> setCart(prev=> prev.filter((_,n)=>n!==idx)),
    clearCart: ()=> setCart([]),
    drawerOpen, openCart:()=>setDrawerOpen(true), closeCart:()=>setDrawerOpen(false),

    // Admin — produtos
    saveProduct: async (p)=>{
      if(window.DB){ const s = await window.DB.saveProduct(p); await window.refreshProducts(); return s; }
      return p;
    },
    deleteProduct: async (id)=>{
      if(window.DB) await window.DB.deleteProduct(id);
      await window.refreshProducts();
    },
    fetchVariants: (productId)=> window.DB ? window.DB.fetchVariants(productId) : Promise.resolve([]),
    saveVariants: (productId, variants)=> window.DB ? window.DB.saveVariants(productId, variants) : Promise.resolve(),
    fetchVariantTotals: ()=> window.DB ? window.DB.fetchVariantTotals() : Promise.resolve({}),

    // Admin — pedidos
    fetchOrders: (opts)=> window.DB ? window.DB.fetchOrders(opts||{}) : Promise.resolve([]),
    saveOrder: async (order)=>{
      if(window.DB) return window.DB.saveOrder(order);
      return order;
    },
    updateOrderStatus: async (id, status)=>{
      if(window.DB) await window.DB.updateOrderStatus(id, status);
    },
    cancelOrder: async (id)=>{
      if(window.DB) await window.DB.cancelOrder(id);
    },
    deleteOrder: async (id)=>{
      if(window.DB) await window.DB.deleteOrder(id);
    },
    deleteCustomer: async (id)=>{
      if(window.DB) await window.DB.deleteCustomer(id);
    },

    // Admin — clientes
    fetchCustomers: ()=> window.DB ? window.DB.fetchCustomers() : Promise.resolve([]),

    // Admin — cupons
    fetchCoupons: ()=> window.DB ? window.DB.fetchCoupons() : Promise.resolve([]),
    validateCoupon: (code, total)=> window.DB
      ? window.DB.validateCoupon(code, total)
      : Promise.resolve({ valid: false, message: "Cupom inválido" }),

    // Admin — financeiro
    fetchFinancials: ()=> window.DB ? window.DB.fetchFinancials() : Promise.resolve(null),
    fetchFinancialsByRange: (start,end)=> window.DB ? window.DB.fetchFinancialsByRange(start,end) : Promise.resolve(null),

    // Config
    fetchConfig: ()=> window.DB ? window.DB.fetchConfig() : Promise.resolve({}),
    saveConfig: async (k,v)=>{
      if(window.DB) await window.DB.saveConfig(k,v);
      await window.refreshConfig();
    },
  };

  /* ---------- Roteamento ---------- */
  let page, adminRoute = false;

  if(route.startsWith("#/admin")){
    adminRoute = true;
    // Proteger rota admin
    if(authLoading){
      page = (
        <div style={{display:"flex",alignItems:"center",justifyContent:"center",
          minHeight:"100vh",flexDirection:"column",gap:16}}>
          <div style={{width:36,height:36,border:"3px solid #C8A030",borderTopColor:"transparent",
            borderRadius:"50%",animation:"spin .8s linear infinite"}}></div>
          <span style={{color:"#888",fontSize:13,fontFamily:"Manrope,sans-serif"}}>Verificando acesso...</span>
          <style>{`@keyframes spin{to{transform:rotate(360deg)}}`}</style>
        </div>
      );
    } else if(!session){
      // Não logado → redirecionar para login
      window.location.hash = "#/login?next=admin";
      page = null;
    } else if(!isAdmin){
      // Logado mas não é admin
      page = (
        <div style={{display:"flex",alignItems:"center",justifyContent:"center",
          minHeight:"100vh",flexDirection:"column",gap:16,padding:40,textAlign:"center"}}>
          <div style={{fontSize:48}}>🔒</div>
          <h2 style={{fontFamily:"Cormorant Garamond,serif",fontSize:28}}>Acesso negado</h2>
          <p style={{color:"#888",fontSize:14}}>Você não tem permissão para acessar o painel.</p>
          <button onClick={()=>{ window.location.hash="#/"; }}
            style={{background:"#C8A030",color:"#fff",border:"none",padding:"12px 28px",
              borderRadius:4,cursor:"pointer",fontWeight:600,marginTop:8}}>
            Voltar à loja
          </button>
        </div>
      );
    } else {
      const seg = route.replace("#/admin","").replace(/^\//,"").split("/")[0] || "";
      page = <AdminLayout section={seg}/>;
    }
  } else if(route.startsWith("#/c/")){
    page = <CategoryPage slug={route.split("/")[2]}/>;
  } else if(route.startsWith("#/p/")){
    page = <ProductPage id={route.split("/")[2]}/>;
  } else if(route.startsWith("#/checkout")){
    page = <CheckoutPage/>;
  } else if(route.startsWith("#/login")){
    page = <LoginPage/>;
  } else if(route.startsWith("#/conta")){
    page = <AccountPage/>;
  } else if(route.startsWith("#/favoritos")){
    page = <FavoritesPage/>;
  } else if(route.startsWith("#/info/")){
    page = <InfoPage slug={route.split("/")[2]}/>;
  } else {
    page = <HomePage/>;
  }

  // Loading inicial da loja
  if(!storeReady && !adminRoute) return (
    <div style={{display:"flex",alignItems:"center",justifyContent:"center",
      minHeight:"100vh",background:"#fff",flexDirection:"column",gap:16}}>
      <div style={{width:40,height:40,border:"3px solid #C8A030",
        borderTopColor:"transparent",borderRadius:"50%",
        animation:"spin .8s linear infinite"}}></div>
      <span style={{color:"#888",fontSize:13,fontFamily:"Manrope,sans-serif"}}>Carregando loja...</span>
      <style>{`@keyframes spin{to{transform:rotate(360deg)}}`}</style>
    </div>
  );

  return (
    <StoreContext.Provider value={ctx}>
      {adminRoute ? page : (
        <div className="store">
          <StoreHeader/>
          <main>{page}</main>
          <StoreFooter/>
          <CartDrawer/>
          <WhatsAppFloat/>
          {mob && <MobileMenu cats={categories||[]} close={()=>setMob(false)} nav={ctx.nav}/>}
        </div>
      )}
      {toast && (
        <div className="toast">
          <Icon name="check" size={16}/> {toast}
          <button onClick={ctx.openCart} className="toast-btn">Ver sacola</button>
        </div>
      )}
    </StoreContext.Provider>
  );
}

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