// ==============================================
// Main App: routing, cart state, login, tweaks
// + Cloudflare D1 API integration (with demo fallback)
// ==============================================

const DEFAULT_CUSTOMER = {
  name: "", company: "", phone: "",
  email: "", address: "", taxId: "", project: "", note: "",
};

// ── API status banner ──────────────────────────────────────────────
function ApiStatusBanner({ status }) {
  if (status === "live") return null; // silent when connected
  if (status === "checking") return null;
  return (
    <div style={{
      background: "#fef3c7", color: "#92400e",
      padding: "8px 20px", fontSize: 12.5,
      display: "flex", alignItems: "center", gap: 8,
      borderBottom: "1px solid #fde68a"
    }}>
      <Icon name="info" size={13}/>
      <span><b>Demo Mode</b> — ข้อมูลจาก local (Database ยังไม่ได้เชื่อมต่อ) · ดู <b>CLOUDFLARE-DEPLOY.md</b> สำหรับขั้นตอน deploy</span>
    </div>
  );
}

function App() {
  const [route, setRoute] = useState("home");
  const [routeParams, setRouteParams] = useState({});
  const [session, setSession] = useState(null);
  const [showLogin, setShowLogin] = useState(false);
  const [cart, setCart] = useState([]);
  const [customer, setCustomer] = useState(DEFAULT_CUSTOMER);
  const [generatedQuote, setGeneratedQuote] = useState(null);
  const [query, setQuery] = useState("");
  const [products, setProducts] = useState(PRODUCTS); // start with demo data
  const [apiStatus, setApiStatus] = useState("checking"); // "checking" | "live" | "demo"
  const toast = useToast();

  // ── Boot: restore session + connect API ──────────────────────────
  useEffect(() => {
    // restore cart
    try {
      const c = JSON.parse(localStorage.getItem("isp_cart") || "[]");
      if (Array.isArray(c) && c.length) setCart(c);
    } catch {}

    // connect to Cloudflare API
    const connectApi = async () => {
      if (!window.ISP_API) { setApiStatus("demo"); return; }
      try {
        // 1. try to load products from D1
        const apiProducts = await window.ISP_API.getProducts();
        if (apiProducts && apiProducts.length > 0) {
          setProducts(apiProducts);
        }
        setApiStatus("live");

        // 2. restore session via token
        const token = localStorage.getItem("isp_token");
        if (token) {
          try {
            const me = await window.ISP_API.getMe();
            setSession(me);
          } catch {
            localStorage.removeItem("isp_token");
          }
        }
      } catch {
        // API not reachable — run in demo mode
        setApiStatus("demo");
        // Still try to restore demo session from localStorage
        try {
          const s = JSON.parse(localStorage.getItem("isp_session") || "null");
          if (s) setSession(s);
        } catch {}
      }
    };
    connectApi();
  }, []);

  // persist cart
  useEffect(() => {
    localStorage.setItem("isp_cart", JSON.stringify(cart));
  }, [cart]);

  // persist demo session (fallback only)
  useEffect(() => {
    if (apiStatus === "demo" && session) {
      localStorage.setItem("isp_session", JSON.stringify(session));
    }
    if (!session) localStorage.removeItem("isp_session");
    if (session && !customer.name) {
      setCustomer(c => ({
        ...c, name: session.name || "",
        company: session.company || "",
        email: session.email || "",
        phone: session.phone || "",
      }));
    }
  }, [session, apiStatus]);

  // scroll-reveal observer
  useEffect(() => {
    if (typeof IntersectionObserver === "undefined") return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) { e.target.classList.add("in-view"); io.unobserve(e.target); }
      });
    }, { threshold: 0.1, rootMargin: "0px 0px -60px 0px" });
    const scan = () => document.querySelectorAll(".reveal:not(.in-view)").forEach(el => io.observe(el));
    scan();
    const mo = new MutationObserver(scan);
    mo.observe(document.body, { childList: true, subtree: true });
    return () => { io.disconnect(); mo.disconnect(); };
  }, []);

  const navigate = useCallback((r, params = {}) => {
    setRoute(r); setRouteParams(params);
    window.scrollTo({ top: 0, behavior: "auto" });
  }, []);

  const addToCart = useCallback((p, qty = 1, note = "") => {
    setCart(prev => {
      const idx = prev.findIndex(x => x.id === p.id);
      if (idx >= 0) {
        const next = [...prev];
        next[idx] = { ...next[idx], qty: next[idx].qty + qty, note: note || next[idx].note };
        return next;
      }
      return [...prev, { ...p, qty, note }];
    });
    toast(`เพิ่ม "${p.th.length > 28 ? p.th.slice(0, 28) + "…" : p.th}" ลงใบเสนอราคาแล้ว`);
  }, [toast]);

  const updateCartLine = useCallback((id, patch) => {
    setCart(prev => prev.map(c => c.id === id ? { ...c, ...patch } : c));
  }, []);

  const removeFromCart = useCallback((id) => {
    setCart(prev => prev.filter(c => c.id !== id));
    toast("ลบสินค้าออกจากใบเสนอราคา");
  }, [toast]);

  const clearCart = useCallback(() => setCart([]), []);

  // ── Login / Logout ────────────────────────────────────────────────
  const onLogin = useCallback((user) => {
    setSession(user);
    setShowLogin(false);
    if (user.role === "admin") navigate("admin");
    else if (user.role === "dealer") navigate("dealer");
  }, [navigate]);

  const logout = useCallback(async () => {
    if (apiStatus === "live" && window.ISP_API) {
      await window.ISP_API.logout().catch(() => {});
    }
    setSession(null);
    navigate("home");
    toast("ออกจากระบบเรียบร้อย");
  }, [navigate, toast, apiStatus]);

  if (showLogin) {
    return (
      <ToastProvider>
        <LoginPage
          onLogin={onLogin}
          onClose={() => setShowLogin(false)}
          navigate={navigate}
          apiStatus={apiStatus}
        />
      </ToastProvider>
    );
  }

  return (
    <div className="app">
      <ApiStatusBanner status={apiStatus}/>
      <TopBar
        session={session} cart={cart} route={route}
        navigate={navigate} openLogin={() => setShowLogin(true)}
        logout={logout} query={query} setQuery={setQuery}
      />

      <main>
        {route === "home" && (
          <HomePage session={session} cart={cart} addToCart={addToCart}
            navigate={navigate} openLogin={() => setShowLogin(true)}
            products={products}/>
        )}
        {route === "catalog" && (
          <CatalogPage session={session} cart={cart} addToCart={addToCart}
            navigate={navigate} query={query} setQuery={setQuery}
            products={products}
            initialCategory={routeParams.category} initialSale={routeParams.sale}/>
        )}
        {route === "product" && (
          <ProductDetailPage
            productId={routeParams.id} session={session}
            addToCart={addToCart} navigate={navigate} cart={cart}
            products={products}/>
        )}
        {route === "cart" && (
          <CartPage session={session} cart={cart}
            updateCartLine={updateCartLine} removeFromCart={removeFromCart}
            clearCart={clearCart} navigate={navigate}/>
        )}
        {route === "checkout" && (
          <CheckoutPage session={session} cart={cart} navigate={navigate}
            customer={customer} setCustomer={setCustomer}
            generatedQuote={generatedQuote} setGeneratedQuote={setGeneratedQuote}
            apiStatus={apiStatus}/>
        )}
        {route === "dealer" && (
          session?.role === "dealer"
            ? <DealerDashboard session={session} navigate={navigate} addToCart={addToCart} setCart={setCart} apiStatus={apiStatus}/>
            : <RoleGate role="dealer" onLogin={() => setShowLogin(true)} navigate={navigate}/>
        )}
        {route === "admin" && (
          session?.role === "admin"
            ? <AdminDashboard session={session} navigate={navigate} apiStatus={apiStatus}/>
            : <RoleGate role="admin" onLogin={() => setShowLogin(true)} navigate={navigate}/>
        )}
      </main>

      <Footer/>
    </div>
  );
}

// ── RoleGate ──────────────────────────────────────────────────────
function RoleGate({ role, onLogin, navigate }) {
  return (
    <div className="container">
      <div className="card empty-state" style={{ maxWidth: 480, margin: "60px auto" }}>
        <div style={{ width: 64, height: 64, borderRadius: 32, margin: "0 auto 16px", background: "var(--blue-50)", color: "var(--navy-700)", display: "grid", placeItems: "center" }}>
          <Icon name={role === "admin" ? "shield" : "tag"} size={28}/>
        </div>
        <h3>เข้าสู่ระบบเพื่อใช้งาน {role === "admin" ? "Admin Panel" : "Dealer Portal"}</h3>
        <p>หน้านี้สำหรับ{role === "admin" ? "ผู้ดูแลระบบ" : "ตัวแทนจำหน่าย (Dealer)"} เท่านั้น</p>
        <div className="flex gap-8 center" style={{ justifyContent: "center" }}>
          <button className="btn btn-primary" onClick={onLogin}>
            <Icon name="log-in" size={14}/> เข้าสู่ระบบ
          </button>
          <button className="btn btn-outline" onClick={() => navigate("catalog")}>กลับสู่หน้าสินค้า</button>
        </div>
      </div>
    </div>
  );
}

// ── Footer ────────────────────────────────────────────────────────
function Footer() {
  return (
    <footer style={{ background: "var(--navy-900)", color: "rgba(255,255,255,0.7)", padding: "48px 24px 20px", marginTop: 60 }}>
      <div style={{ maxWidth: 1400, margin: "0 auto", display: "grid", gridTemplateColumns: "2fr 1fr 1fr 1fr 1fr", gap: 40, flexWrap: "wrap" }}>
        <div>
          <div className="brand" style={{ marginBottom: 16 }}>
            <div className="brand-logo"><img src="assets/logo.png" alt="Inter Supply"/></div>
            <div className="brand-name" style={{ color: "white" }}>
              <div className="th">อินเตอร์ ซัพพลาย (1992)</div>
              <div className="en">Est. 1992 · TIS-Certified Supplier</div>
            </div>
          </div>
          <p style={{ fontSize: 12.5, lineHeight: 1.7, maxWidth: 360, margin: 0 }}>
            ผู้จำหน่ายเครื่องมือช่าง อุปกรณ์งานช่าง และอุปกรณ์เซฟตี้ สำหรับผู้รับเหมา ช่าง และโรงงานอุตสาหกรรม ดำเนินกิจการต่อเนื่องกว่า 32 ปี
          </p>
          <div className="flex gap-8 mt-16">
            {["facebook", "line", "mail"].map(ic => (
              <div key={ic} className="icon-btn" style={{ padding: 8, background: "rgba(255,255,255,0.06)", borderRadius: 8 }}>
                <Icon name={ic} size={16}/>
              </div>
            ))}
          </div>
        </div>
        {[
          { h: "ช้อปสินค้า", links: ["เครื่องมือไฟฟ้า", "เครื่องมือช่าง", "เครื่องมือวัด", "เซฟตี้", "กล่องเก็บ"] },
          { h: "บริการ", links: ["ขอใบเสนอราคา", "สมัคร Dealer", "ติดตามคำสั่งซื้อ", "นโยบายคืนสินค้า", "การรับประกัน"] },
          { h: "เกี่ยวกับเรา", links: ["บริษัท", "สาขาบริการ", "ร่วมงานกับเรา", "ข่าวสาร", "ติดต่อเรา"] },
          { h: "ติดต่อ", links: ["02-555-1992", "sales@intersupply.co.th", "จ-ส 8:00-17:30", "บางพลี สมุทรปราการ", "Tax ID 0105535012345"] },
        ].map(g => (
          <div key={g.h}>
            <h5 style={{ color: "white", margin: "0 0 12px", fontSize: 13, fontWeight: 600 }}>{g.h}</h5>
            <div style={{ display: "flex", flexDirection: "column", gap: 8, fontSize: 12.5 }}>
              {g.links.map(l => <a key={l} style={{ cursor: "pointer" }}>{l}</a>)}
            </div>
          </div>
        ))}
      </div>
      <div style={{ maxWidth: 1400, margin: "32px auto 0", paddingTop: 16, borderTop: "1px solid rgba(255,255,255,0.1)", display: "flex", justifyContent: "space-between", fontSize: 11.5, opacity: 0.6, flexWrap: "wrap", gap: 8 }}>
        <span>© 2026 Inter Supply (1992) Co., Ltd. · All rights reserved.</span>
        <span>intersupply1992.co.th · Powered by Cloudflare Pages + D1</span>
      </div>
    </footer>
  );
}

// ── Tweaks wrapper ────────────────────────────────────────────────
function AppWithTweaks() {
  const defaults = /*EDITMODE-BEGIN*/{
    "primary": "#0a6e3d",
    "accent": "#16a34a",
    "showStrip": true,
    "density": "comfort"
  }/*EDITMODE-END*/;

  const [t, setTweak] = window.useTweaks(defaults);

  useEffect(() => {
    document.documentElement.style.setProperty("--navy-700", t.primary);
    document.documentElement.style.setProperty("--blue-500", t.accent);
    document.documentElement.style.setProperty("--navy-800", shade(t.primary, -12));
    document.documentElement.style.setProperty("--navy-900", shade(t.primary, -24));
    document.documentElement.style.setProperty("--navy-600", shade(t.primary, 8));
    document.body.style.fontSize = t.density === "compact" ? "13px" : t.density === "loose" ? "15px" : "14px";
    document.body.classList.toggle("hide-strip", !t.showStrip);
  }, [t]);

  const TP = window.TweaksPanel;
  return (
    <>
      <ToastProvider>
        <App/>
      </ToastProvider>
      {TP && (
        <TP title="Tweaks">
          <window.TweakSection label="สีและธีม">
            <window.TweakColor label="สีหลัก" value={t.primary}
              options={["#0a6e3d", "#0b3a82", "#9a3412", "#312e81"]}
              onChange={v => setTweak("primary", v)}/>
            <window.TweakColor label="สีเน้น" value={t.accent}
              options={["#16a34a", "#1d6fe5", "#f59e0b", "#dc2626"]}
              onChange={v => setTweak("accent", v)}/>
          </window.TweakSection>
          <window.TweakSection label="เลย์เอาต์">
            <window.TweakRadio label="ความหนาแน่น" value={t.density}
              options={["compact", "comfort", "loose"]}
              onChange={v => setTweak("density", v)}/>
            <window.TweakToggle label="แสดงแถบติดต่อบนสุด" value={t.showStrip}
              onChange={v => setTweak("showStrip", v)}/>
          </window.TweakSection>
        </TP>
      )}
      <style>{`body.hide-strip .topbar-strip { display: none; }`}</style>
    </>
  );
}

function shade(hex, pct) {
  const n = parseInt(hex.replace("#", ""), 16);
  const clamp = v => Math.max(0, Math.min(255, v));
  const r = clamp((n >> 16) + Math.round(pct / 100 * 255));
  const g = clamp(((n >> 8) & 0xff) + Math.round(pct / 100 * 255));
  const b = clamp((n & 0xff) + Math.round(pct / 100 * 255));
  return "#" + ((r << 16) | (g << 8) | b).toString(16).padStart(6, "0");
}

// ── Mount ─────────────────────────────────────────────────────────
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<AppWithTweaks/>);