// === Main app shell ===
const { useState: useStateApp, useEffect: useEffectApp } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light"
}/*EDITMODE-END*/;

function App() {
  const [route, setRoute] = useStateApp("dashboard");
  const [products, setProducts] = useStateApp(window.MOCK.PRODUCTS);
  const [orders, setOrders] = useStateApp(window.MOCK.ORDERS);
  const [detailId, setDetailId] = useStateApp(null);
  const [sidebarOpen, setSidebarOpen] = useStateApp(false);
  const [tweaksOpen, setTweaksOpen] = useStateApp(false);

  // 데이터 소스: mock(샘플) vs live(네이버 실제). loading/error는 별도.
  const [productsSource, setProductsSource] = useStateApp("mock");
  const [productsLoading, setProductsLoading] = useStateApp(false);
  const [productsError, setProductsError] = useStateApp(null);
  const [productsMeta, setProductsMeta] = useStateApp(null);
  const [productsPage, setProductsPage] = useStateApp(1);
  const [productsSearch, setProductsSearch] = useStateApp("");
  const PAGE_SIZE = 100;

  // 일괄 작업용: 전체 상품을 페이지네이션 돌면서 모두 가져옴. 메인 products state는 건드리지 않음.
  // 일괄 가격 수정 화면이 사용. progress는 { done, total } 콜백.
  const [allProducts, setAllProducts] = useStateApp(null);
  const [allProductsLoading, setAllProductsLoading] = useStateApp(false);
  const [allProductsProgress, setAllProductsProgress] = useStateApp(null);

  const loadAllNaverProducts = async ({ onProgress } = {}) => {
    if (!window.API.naverConfigured()) {
      throw new Error("API 자격증명이 설정되지 않았습니다");
    }
    setAllProductsLoading(true);
    setAllProductsProgress({ done: 0, total: 0 });
    try {
      const ALL_PAGE_SIZE = 500;  // 네이버 max
      const accumulated = [];
      let page = 1;
      let totalPages = 1;
      let totalElements = 0;
      do {
        const result = await window.API.naverFetchProducts({ page, size: ALL_PAGE_SIZE });
        accumulated.push(...result.products);
        totalPages = result.totalPages || 1;
        totalElements = result.totalElements || accumulated.length;
        const progress = { done: accumulated.length, total: totalElements, page, totalPages };
        setAllProductsProgress(progress);
        onProgress && onProgress(progress);
        page += 1;
        if (page <= totalPages) await new Promise(r => setTimeout(r, 200));  // rate limit
      } while (page <= totalPages);
      setAllProducts(accumulated);
      return accumulated;
    } finally {
      setAllProductsLoading(false);
    }
  };

  // opts: { page?, searchKeyword?: string | "" } — undefined면 현재 state 사용, 빈 문자열은 검색 해제
  const loadNaverProducts = (opts) => {
    const nextPage = opts?.page !== undefined ? opts.page : productsPage;
    const nextKeyword = opts?.searchKeyword !== undefined ? opts.searchKeyword : productsSearch;
    setProductsLoading(true);
    setProductsError(null);
    const params = { page: nextPage, size: PAGE_SIZE };
    if (nextKeyword) params.searchKeyword = nextKeyword;
    return window.API.naverFetchProducts(params)
      .then(({ products: live, ...meta }) => {
        setProducts(live);
        setProductsSource("live");
        setProductsMeta(meta);
        if (opts?.page !== undefined) setProductsPage(opts.page);
        if (opts?.searchKeyword !== undefined) {
          setProductsSearch(opts.searchKeyword);
          // 검색 변경 시 페이지 리셋
          if (opts.page === undefined) setProductsPage(1);
        }
      })
      .catch(err => {
        console.error("[naverFetchProducts]", err);
        setProductsError(err.message);
        window.toast && window.toast("네이버 상품 조회 실패: " + err.message);
      })
      .finally(() => setProductsLoading(false));
  };

  // 마운트 시 자격증명 있으면 자동 로드 (products + orders)
  useEffectApp(() => {
    if (window.API.naverConfigured()) {
      loadNaverProducts();
      loadNaverOrders({ days: 7 });
    }
  }, []);

  // 주문 라이브 로드
  const [ordersSource, setOrdersSource] = useStateApp("mock");
  const [ordersLoading, setOrdersLoading] = useStateApp(false);
  const [ordersError, setOrdersError] = useStateApp(null);
  const [ordersProgress, setOrdersProgress] = useStateApp(null);
  const [ordersDays, setOrdersDays] = useStateApp(7);

  const loadNaverOrders = (opts) => {
    const days = opts?.days || ordersDays;
    setOrdersLoading(true);
    setOrdersError(null);
    setOrdersProgress({ done: 0, total: days });
    return window.API.naverFetchOrders({
      days,
      onProgress: (p) => setOrdersProgress(p),
    })
      .then(live => {
        setOrders(live);
        setOrdersSource("live");
        if (opts?.days !== undefined) setOrdersDays(opts.days);
        window.toast && window.toast("최근 " + days + "일 주문 " + live.length + "건 불러옴");
      })
      .catch(err => {
        console.error("[naverFetchOrders]", err);
        setOrdersError(err.message);
        window.toast && window.toast("주문 조회 실패: " + err.message);
      })
      .finally(() => {
        setOrdersLoading(false);
        setOrdersProgress(null);
      });
  };

  // Theme tweak
  const [tweaks, setTweak] = window.useTweaks ? window.useTweaks(TWEAK_DEFAULTS) : [TWEAK_DEFAULTS, () => {}];

  useEffectApp(() => {
    document.documentElement.setAttribute("data-theme", tweaks.theme);
  }, [tweaks.theme]);

  // Tweaks panel host registration
  useEffectApp(() => {
    const handler = (e) => {
      if (!e.data || typeof e.data !== "object") return;
      if (e.data.type === "__activate_edit_mode") setTweaksOpen(true);
      if (e.data.type === "__deactivate_edit_mode") setTweaksOpen(false);
    };
    window.addEventListener("message", handler);
    window.parent.postMessage({ type: "__edit_mode_available" }, "*");
    return () => window.removeEventListener("message", handler);
  }, []);

  const navItems = [
    { key: "dashboard", label: "대시보드", icon: window.I.Dashboard },
    { key: "products", label: "상품 관리", icon: window.I.Box, badge: products.filter(p => p.status === "outofstock").length || null },
    { key: "bulk", label: "일괄 가격 수정", icon: window.I.Tag },
    { key: "orders", label: "주문/판매 내역", icon: window.I.ShoppingCart, badge: orders.filter(o => o.status === "paid").length || null },
    { key: "shipping", label: "로젠 송장 출력", icon: window.I.Truck },
    { key: "customer", label: "고객 응대", icon: window.I.MessageCircle },
    { key: "manual", label: "수동 등록", icon: window.I.Plus },
    { key: "isvm", label: "ISVM 상품 연동", icon: window.I.Plug },
    { key: "settings", label: "API 설정", icon: window.I.Settings },
  ];

  const goto = (k) => { setRoute(k); setSidebarOpen(false); window.scrollTo(0, 0); };
  const openDetail = (pid) => setDetailId(pid);
  const closeDetail = () => setDetailId(null);

  const titleMap = {
    dashboard: "대시보드", products: "상품 관리", bulk: "일괄 가격 수정",
    orders: "주문/판매 내역", shipping: "로젠 송장 출력", isvm: "ISVM 상품 연동",
    manual: "수동 등록", customer: "고객 응대", settings: "API 설정"
  };

  return (
    <div className="app" data-screen-label={titleMap[route]}>
      {/* Sidebar */}
      <aside className={"sidebar " + (sidebarOpen ? "open" : "")}>
        <div className="sidebar-header">
          <div className="logo-mark">N</div>
          <div>
            <div className="brand-name">스마트팜</div>
            <div className="brand-sub">스마트스토어 관리</div>
          </div>
        </div>
        <div className="nav-section">
          <div className="nav-label">메뉴</div>
          {navItems.map(it => {
            const Icon = it.icon;
            return (
              <button key={it.key} className={"nav-item " + (route === it.key ? "active" : "")} onClick={() => goto(it.key)}>
                <Icon size={16} className="nav-icon" />
                <span>{it.label}</span>
                {it.badge != null && <span className="nav-badge">{it.badge}</span>}
              </button>
            );
          })}
          <div className="nav-label" style={{ marginTop: 12 }}>설정</div>
          <button className="nav-item">
            <window.I.Bell size={16} className="nav-icon" />
            <span>알림</span>
            <span className="nav-badge" style={{ background: "var(--danger-soft)", color: "var(--danger)" }}>3</span>
          </button>
          <button className="nav-item">
            <window.I.Settings size={16} className="nav-icon" />
            <span>스토어 설정</span>
          </button>
        </div>
        <div className="sidebar-footer">
          <div className="avatar">SF</div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 12, fontWeight: 600 }}>스마트팜</div>
            <div className="text-xs muted">smartfarm@store.kr</div>
          </div>
          <button className="btn btn-icon btn-sm btn-ghost"
                  onClick={() => setTweak({ theme: tweaks.theme === "dark" ? "light" : "dark" })}>
            {tweaks.theme === "dark" ? <window.I.Sun size={14} /> : <window.I.Moon size={14} />}
          </button>
        </div>
      </aside>

      {/* Main */}
      <div className="main">
        <header className="topbar no-print">
          <button className="btn btn-icon btn-ghost mobile-toggle" onClick={() => setSidebarOpen(o => !o)}>
            <window.I.Menu size={16} />
          </button>
          <div className="crumbs">
            <span className="muted">스마트스토어</span>
            <window.I.ChevronRight size={12} className="crumb-sep" />
            <span style={{ fontWeight: 600 }}>{titleMap[route]}</span>
          </div>
          <div className="topbar-spacer" />
          <div className="row gap-2 hide-mobile">
            {productsSource === "live" ? (
              <span className="badge badge-success badge-dot">
                네이버 라이브
                {productsMeta && ` · ${products.length}/${productsMeta.totalElements}`}
              </span>
            ) : productsLoading ? (
              <span className="badge">불러오는 중...</span>
            ) : productsError ? (
              <span className="badge badge-danger" title={productsError}>네이버 연결 실패</span>
            ) : (
              <span className="badge">샘플 데이터 (자격증명 없음)</span>
            )}
            <button className="btn btn-icon btn-ghost btn-sm">
              <window.I.Bell size={14} />
            </button>
          </div>
        </header>

        {route === "dashboard" && <window.Dashboard goto={goto} products={products} orders={orders}
                                                    productsSource={productsSource} ordersSource={ordersSource}
                                                    ordersLoading={ordersLoading} ordersDays={ordersDays}
                                                    productsMeta={productsMeta} />}
        {route === "products" && <window.ProductsScreen products={products} setProducts={setProducts} goto={goto} openDetail={openDetail}
                                                       productsSource={productsSource} productsLoading={productsLoading}
                                                       productsError={productsError} productsMeta={productsMeta}
                                                       productsPage={productsPage} productsSearch={productsSearch}
                                                       reloadProducts={loadNaverProducts}
                                                       allProducts={allProducts} setAllProducts={setAllProducts}
                                                       allProductsLoading={allProductsLoading}
                                                       allProductsProgress={allProductsProgress}
                                                       loadAllProducts={loadAllNaverProducts} />}
        {route === "bulk" && <window.BulkEditScreen
                                products={products} setProducts={setProducts} productsSource={productsSource}
                                allProducts={allProducts} setAllProducts={setAllProducts}
                                allProductsLoading={allProductsLoading}
                                allProductsProgress={allProductsProgress}
                                loadAllProducts={loadAllNaverProducts}
                                productsMeta={productsMeta} />}
        {route === "orders" && <window.OrdersScreen orders={orders} setOrders={setOrders} goto={goto}
                                                    ordersSource={ordersSource} ordersLoading={ordersLoading}
                                                    ordersError={ordersError} ordersProgress={ordersProgress}
                                                    ordersDays={ordersDays} reloadOrders={loadNaverOrders} />}
        {route === "shipping" && <window.ShippingScreen orders={orders} setOrders={setOrders} ordersSource={ordersSource} reloadOrders={loadNaverOrders} />}
        {route === "isvm" && <window.ISVMScreen products={products} setProducts={setProducts} goto={goto} />}
        {route === "manual" && <window.ManualRegisterScreen products={allProducts || products} />}
        {route === "customer" && <window.CustomerScreen />}
        {route === "settings" && <window.SettingsScreen />}
      </div>

      {detailId && <window.ProductDetail productId={detailId} products={allProducts || products} setProducts={setProducts} setAllProducts={setAllProducts} onClose={closeDetail} productsSource={productsSource} />}

      <ToastHost />

      {/* Tweaks panel */}
      {tweaksOpen && window.TweaksPanel && (
        <window.TweaksPanel onClose={() => setTweaksOpen(false)} title="Tweaks">
          <window.TweakSection title="테마">
            <window.TweakRadio label="모드" value={tweaks.theme} onChange={v => setTweak({ theme: v })}
              options={[{ value: "light", label: "라이트" }, { value: "dark", label: "다크" }]} />
          </window.TweakSection>
        </window.TweaksPanel>
      )}
    </div>
  );
}

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