/* ─────────────────────────────────────────────────────
   Equipment Balkans — Auction prototype app controller
───────────────────────────────────────────────────── */
const { useState: useApp, useEffect: useAppEffect, useRef: useAppRef } = React;

const LS_KEY = "eb_auction_proto_v1";

function bidderLabel(user) {
  const base = (user?.name || user?.email || "you").replace(/[^a-z]/gi, "").toLowerCase();
  return (base.slice(0, 3) || "you") + "***";
}

function loadState() {
  try {
    const raw = localStorage.getItem(LS_KEY);
    if (!raw) return null;
    return JSON.parse(raw);
  } catch {
    return null;
  }
}

// ── Deep-link routing: encode/parse the URL hash ──
const KNOWN_ROUTES = ["marketplace", "categories", "about", "services", "sell", "signin", "signup", "forgot", "profile", "auctions", "messages"];
function encodeHash(r) {
  if (!r) return "#/auctions";
  switch (r.name) {
    case "detail": return `#/auctions/${r.id}`;
    case "service": return `#/service/${r.id}`;
    case "account": return r.tab ? `#/account/${r.tab}` : "#/account";
    case "checkout": return `#/checkout/${r.id}/${r.mode || "won"}`;
    case "sellflow": return r.mode ? `#/sellflow/${r.mode}` : "#/sellflow";
    case "profile": return r.id ? `#/profile/${r.id}` : "#/profile";
    default: return `#/${r.name}`;
  }
}
function parseHash(h) {
  const parts = String(h || "").replace(/^#\/?/, "").split("/").filter(Boolean);
  if (!parts.length) return { name: "auctions" };
  const [head, a, b] = parts;
  switch (head) {
    case "auctions": return a ? { name: "detail", id: a } : { name: "auctions" };
    case "service": return { name: "service", id: a || "inspection" };
    case "account": return a ? { name: "account", tab: a } : { name: "account" };
    case "checkout": return { name: "checkout", id: a, mode: b || "won" };
    case "sellflow": return { name: "sellflow", mode: a || "auction" };
    case "profile": return { name: "profile", id: a };
    default: return KNOWN_ROUTES.includes(head) ? { name: head, id: a } : { name: "auctions" };
  }
}

function App() {
  const data = window.EB_DATA;
  const saved = loadState();

  const hashRoute = (typeof window !== "undefined" && window.location.hash && window.location.hash !== "#/" && window.location.hash !== "#") ? parseHash(window.location.hash) : null;
  const [route, setRoute] = useApp(hashRoute || (saved?.route?.name === "detail" ? saved.route : { name: "auctions" }));
  const [user, setUser] = useApp(saved?.user || null);
  const [watchlist, setWatchlist] = useApp(saved?.watchlist || []);
  const [auctions, setAuctions] = useApp(saved?.auctions || data.AUCTIONS);
  const [bidHistory, setBidHistory] = useApp(saved?.bidHistory || data.BID_HISTORY);
  const [userBids, setUserBids] = useApp(saved?.userBids || {});
  const [notifications, setNotifications] = useApp(saved?.notifications || []);
  const [theme, setTheme] = useApp(saved?.theme || "dark");
  const [wallet, setWallet] = useApp(saved?.wallet || { card: null, preauths: {}, escrow: [] });
  const [vendor, setVendor] = useApp(saved?.vendor || { sales: [], reviewsReceived: [], reviewsGiven: [] });
  const [modal, setModal] = useApp(null);
  const [toast, setToast] = useApp(null);
  const toastTimer = useAppRef(null);

  const store = { auctions, bidHistory, userBids, notifications, video: data.STREAM_VIDEO };

  // Keep logo/theme reads in sync synchronously (before children render)
  window.__ebTheme = theme;

  // ── Persist ──
  useAppEffect(() => {
    try {
      localStorage.setItem(LS_KEY, JSON.stringify({ route, user, watchlist, auctions, bidHistory, userBids, notifications, theme, wallet, vendor }));
    } catch { /* ignore */ }
  }, [route, user, watchlist, auctions, bidHistory, userBids, notifications, theme, wallet, vendor]);

  // Apply theme
  useAppEffect(() => {
    document.documentElement.setAttribute("data-theme", theme);
    const fav = document.querySelector('link[rel="icon"][type="image/png"]');
    if (fav) fav.href = theme === "light" ? "assets/favicon_lightUI_32.png" : "assets/favicon_darkUI_32.png";
    const tc = document.querySelector('meta[name="theme-color"]');
    if (tc) tc.content = theme === "light" ? "#F1F5F9" : "#0F172A";
  }, [theme]);
  const toggleTheme = () => setTheme((t) => (t === "dark" ? "light" : "dark"));

  // ── Refresh lucide icons after every render (React-safe) ──
  useAppEffect(() => {
    if (window.renderIcons) window.renderIcons();
  });

  // ── Scroll to top on route change (except account tab switches) ──
  useAppEffect(() => {
    if (route.name !== "account") window.scrollTo(0, 0);
  }, [route.name, route.id]);

  const showToast = (msg, type) => {
    setToast({ msg, type });
    clearTimeout(toastTimer.current);
    toastTimer.current = setTimeout(() => setToast(null), 2600);
  };

  // ── Navigation ──
  const nav = (r, replace) => {
    setRoute(r);
    try {
      const hash = encodeHash(r);
      if (replace) window.history.replaceState({}, "", hash);
      else window.history.pushState({}, "", hash);
    } catch { /* ignore */ }
  };

  // ── React to browser back/forward + external deep links ──
  useAppEffect(() => {
    const onHash = () => {
      const r = parseHash(window.location.hash);
      setRoute((cur) => (encodeHash(cur) === encodeHash(r) ? cur : r));
    };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  // ── Auth ──
  const handleAuth = (u, redirect) => {
    setUser(u);
    // Seed a "you won" lot so the 24h payment / escrow flow is reachable in the demo
    setUserBids((prev) => (Object.keys(prev).length ? prev : { "komatsu-d65": { amount: 86500, winning: true, won: { at: Date.now() - 2 * 3600 * 1000 } } }));
    // Seed a sample message so the status bar's message/attention role is visible
    setNotifications((prev) => (prev.length ? prev : [{ id: "msg1", kind: "message", sender: "Balkan Heavy Machinery", body: "Inspection available Tue–Fri before the HAAS auction closes.", target: { name: "messages", openId: "c-balkan" }, at: Date.now() - 25 * 60 * 1000 }]));
    // Seed vendor sales + a buyer review to respond to, so the seller experience is demoable
    setVendor((prev) => (prev.sales && prev.sales.length ? prev : {
      sales: [
        { id: "so1", item: "Caterpillar 320D L Excavator", img: window.EB_DATA.AUCTIONS[0].images[0], channel: "Auction", buyer: "Marko P.", amount: 31571, date: "2 days ago", status: "completed", ratedBuyer: false },
        { id: "so2", item: "JCB 3CX Backhoe Loader", img: window.EB_DATA.AUCTIONS[4].images[0], channel: "Auction", buyer: "Dragan I.", amount: 41200, date: "5 days ago", status: "awaiting_handover", ratedBuyer: false },
        { id: "so3", item: "Atlas Copco QAS 200 Generator", img: window.EB_DATA.AUCTIONS[3].images[0], channel: "Marketplace", buyer: "Ana K.", amount: 14600, date: "6 hours ago", status: "in_escrow", ratedBuyer: false },
      ],
      reviewsReceived: [
        { id: "rr1", by: "Marko P.", stars: 5, text: "Machine exactly as described, full service folder included. Smooth handover — would buy from again.", lot: "Caterpillar 320D L Excavator", date: "2 days ago", response: null },
        { id: "rr2", by: "Stefan V.", stars: 4, text: "Good machine, collection took a little longer than agreed but communication was fine.", lot: "Komatsu D65 Bulldozer", date: "3 weeks ago", response: null },
      ],
      reviewsGiven: [],
    }));
    showToast(`Welcome, ${u.name || u.email.split("@")[0]}!`);
    nav(redirect || { name: "auctions" });
  };
  const handleLogout = () => {
    setUser(null);
    document.documentElement.style.setProperty("--eb-statusbar-h", "0px");
    showToast("Signed out.");
    nav({ name: "auctions" });
  };

  // ── Watchlist ──
  const toggleWatch = (id) => {
    if (!user) {
      showToast("Sign in to save auctions.", "error");
      nav({ name: "signin", redirect: route });
      return;
    }
    setWatchlist((prev) => {
      const on = prev.includes(id);
      showToast(on ? "Removed from watchlist." : "Added to watchlist.");
      return on ? prev.filter((x) => x !== id) : [...prev, id];
    });
  };

  // ── Place bid (with anti-snipe + reserve) ──
  const placeBid = (id, amount, max) => {
    let extended = false;
    setAuctions((prev) =>
      prev.map((a) => {
        if (a.id !== id) return a;
        let endsAt = a.endsAt;
        const remaining = endsAt - Date.now();
        if (a.antiSnipe > 0 && remaining < a.antiSnipe * 1000) {
          endsAt = Date.now() + a.antiSnipe * 1000;
          extended = true;
        }
        const reserveMet = a.reservePrice ? amount >= a.reservePrice : true;
        return { ...a, currentBid: amount, bidCount: a.bidCount + 1, reserveMet, endsAt };
      })
    );
    setBidHistory((prev) => ({
      ...prev,
      [id]: [...(prev[id] || []), { bidder: bidderLabel(user), amount, auto: false, t: Date.now(), you: true }],
    }));
    setUserBids((prev) => ({ ...prev, [id]: { amount, max: max || null, winning: true } }));
    showToast(extended ? "Bid placed — auction extended! You're winning." : "Bid placed — you're the highest bidder!");
  };

  // Publish new listing (auction or marketplace)
  const publishListing = (form, mode) => {
    const id = mode + "-" + Date.now();
    const base = {
      id,
      title: form.title,
      category: form.category,
      year: Number(form.year) || 2020,
      hours: Number(String(form.hours).replace(/\D/g, "")) || 0,
      manufacturer: form.manufacturer,
      condition: form.condition,
      location: form.location,
      description: form.description,
      hasVideo: !!form.hasVideo,
      groupId: form.groupId || null,
      seller: { name: user?.name || "You", verified: !!user, rating: 5.0, sales: 0 },
      images: (form.filledImages && form.filledImages.length ? form.filledImages : [window.EB_DATA.AUCTIONS[0].images[0]]),
      specs: [
        ["Manufacturer", form.manufacturer || "—"],
        ["Year", String(form.year || "—")],
        ["Hours", form.hours || "—"],
        ["Condition", form.condition],
        ["Category", form.category],
        ["Location", form.location || "—"],
      ],
    };
    let item;
    if (mode === "marketplace") {
      item = {
        ...base,
        channel: "marketplace",
        status: "listed",
        askingPrice: Number(form.askingPrice) || 0,
        negotiable: !!form.negotiable,
        acceptOffers: !!form.acceptOffers,
        offers: 0,
        listedAt: Date.now(),
      };
      showToast("Listing published — it's live now!");
    } else {
      item = {
        ...base,
        channel: "auction",
        status: "upcoming",
        startingPrice: Number(form.startingPrice) || 0,
        currentBid: null,
        reservePrice: form.reservePrice ? Number(form.reservePrice) : null,
        reserveMet: false,
        minIncrement: Number(form.minIncrement) || 100,
        antiSnipe: Number(form.antiSnipe) || 0,
        bidCount: 0,
        watchers: 0,
        startsAt: Date.now() + 6 * 3600 * 1000,
        endsAt: Date.now() + (Number(form.duration) || 7) * 86400 * 1000,
        pending: true,
      };
      showToast("Auction submitted for review!");
    }
    setAuctions((prev) => [item, ...prev]);
  };

  // ── Payments: card / pre-auth / escrow ──
  const openAddCard = () => setModal({ type: "addCard" });
  const openPreauth = (auction) => setModal({ type: "preauth", auction });
  const openInspection = (auction) => setModal({ type: "inspection", auction });
  const closeModal = () => setModal(null);
  const addCard = (card) => { setWallet((w) => ({ ...w, card })); setUser((u) => (u ? { ...u, verifications: { ...(u.verifications || {}), payment: true } } : u)); setModal(null); showToast("Payment method added."); };
  const authorizePreauth = (auctionId, amount) => {
    setWallet((w) => ({ ...w, preauths: { ...w.preauths, [auctionId]: { amount, status: "held" } } }));
    setModal(null);
    showToast("Hold authorized — you can bid now.");
  };
  const releasePreauth = (auctionId) => {
    setWallet((w) => ({ ...w, preauths: { ...w.preauths, [auctionId]: { ...(w.preauths[auctionId] || {}), status: "released" } } }));
    showToast("Hold released.");
  };
  const payEscrow = (refId, method, amount, mode) => {
    const item = auctions.find((a) => a.id === refId);
    const entry = { id: "esc-" + Date.now(), refId, title: item ? item.title : refId, amount, method, status: method === "wire" ? "awaiting_wire" : "in_escrow", createdAt: Date.now() };
    setWallet((w) => ({ ...w, escrow: [entry, ...(w.escrow || [])] }));
    if (mode !== "buy") setUserBids((prev) => ({ ...prev, [refId]: { ...(prev[refId] || {}), paid: true } }));
    showToast(method === "wire" ? "Wire registered — funds land in escrow on receipt." : "Paid into escrow!");
  };
  const releaseEscrow = (escId) => {
    setWallet((w) => ({ ...w, escrow: (w.escrow || []).map((e) => (e.id === escId ? { ...e, status: "released" } : e)) }));
    showToast("Delivery confirmed — funds released to seller.");
  };

  // ── Vendor: sales fulfilment + two-way reviews ──
  const advanceSale = (saleId, next) => {
    setVendor((v) => ({ ...v, sales: v.sales.map((s) => (s.id === saleId ? { ...s, status: next } : s)) }));
    showToast(next === "completed" ? "Handover confirmed — order completed." : "Buyer notified — marked dispatched.");
  };
  const rateBuyer = (sale, dataObj) => {
    setVendor((v) => ({
      ...v,
      sales: v.sales.map((s) => (s.id === sale.id ? { ...s, ratedBuyer: true } : s)),
      reviewsGiven: [{ id: "rg-" + Date.now(), buyer: sale.buyer, stars: dataObj.stars, text: dataObj.text, reco: dataObj.reco, lot: sale.item, date: "just now" }, ...(v.reviewsGiven || [])],
    }));
    showToast("Buyer rated — thanks for the feedback.");
  };
  const respondReview = (review, text) => {
    setVendor((v) => ({ ...v, reviewsReceived: v.reviewsReceived.map((r) => (r.id === review.id ? { ...r, response: text } : r)) }));
    showToast("Response posted.");
  };

  // ── Profile / reputation / verification ──
  let myProfile = user ? window.getProfile(user.name) : null;
  if (user && !myProfile) {
    myProfile = {
      id: window.ebSlug(user.name || user.email), name: user.name || "You", kind: "buyer", avatar: (user.name || user.email || "U")[0].toUpperCase(), color: "#2563EB",
      memberSince: "2026", location: user.account?.billing ? `${user.account.billing.city}, ${user.account.billing.country}` : "\u2014", languages: user.account?.languages ? user.account.languages.split(",").map((s) => s.trim()) : ["English"],
      bio: user.account?.bio || "", tier: Object.keys(userBids).length ? "Bronze" : "New", positivePct: 100, stars: 5, feedbackCount: 0,
      transactions: { count: 0, totalValue: 0 },
      verifications: { email: true, phone: false, id: false, payment: false, business: false },
      buyerMetrics: { purchases: 0, totalSpent: 0, onTimePayment: 100, strikes: 0, fundsVerified: false, disputeRate: 0 }, badges: [], reviews: [],
    };
  }
  if (myProfile) {
    myProfile = {
      ...myProfile,
      bio: user.account?.bio || myProfile.bio,
      verifications: { ...myProfile.verifications, ...(user.verifications || {}), payment: !!wallet.card || myProfile.verifications.payment || !!(user.verifications && user.verifications.payment) },
    };
  }
  const saveProfile = (patch) => { setUser((u) => ({ ...u, ...patch })); showToast("Profile saved."); };
  const verifyItem = (key) => {
    setUser((u) => ({ ...u, verifications: { ...(myProfile ? myProfile.verifications : {}), ...(u.verifications || {}), [key]: true } }));
    showToast("Verified ✓");
  };

  // ── Render current screen ──
  let screen;
  switch (route.name) {
    case "detail":
      screen = <DetailScreen store={store} auctionId={route.id} user={user} onNav={nav} onWatch={toggleWatch} watchlist={watchlist} onBid={placeBid} wallet={wallet} onAddCard={openAddCard} onPreauth={openPreauth} onInspect={openInspection} />;
      break;
    case "signin":
      screen = <SignInScreen onAuth={handleAuth} onNav={nav} redirect={route.redirect} />;
      break;
    case "signup":
      screen = <SignUpScreen onAuth={handleAuth} onNav={nav} redirect={route.redirect} />;
      break;
    case "forgot":
      screen = <ForgotScreen onNav={nav} />;
      break;
    case "sell":
      if (!user) { screen = <SignInScreen onAuth={handleAuth} onNav={nav} redirect={{ name: "sell" }} />; }
      else screen = <SellChoiceScreen onNav={nav} />;
      break;
    case "sellflow":
      if (!user) { screen = <SignInScreen onAuth={handleAuth} onNav={nav} redirect={{ name: "sellflow", mode: route.mode }} />; }
      else screen = <SellFlow key={(route.mode || "auction") + "-" + (route.prefill?.groupId || "new")} mode={route.mode || "auction"} prefill={route.prefill} onNav={nav} onPublish={publishListing} />;
      break;
    case "account":
      if (!user) { screen = <SignInScreen onAuth={handleAuth} onNav={nav} redirect={{ name: "account", tab: route.tab }} />; }
      else screen = <AccountScreen store={store} user={user} tab={route.tab} onNav={nav} onWatch={toggleWatch} watchlist={watchlist} wallet={wallet} onAddCard={openAddCard} onReleasePreauth={releasePreauth} onReleaseEscrow={releaseEscrow} profile={myProfile} onSaveProfile={saveProfile} onVerify={verifyItem} vendor={vendor} onRateBuyer={rateBuyer} onAdvanceSale={advanceSale} onRespondReview={respondReview} />;
      break;
    case "profile": {
      const isOwnP = user && myProfile && (route.id === myProfile.id || route.id === user.name || !route.id);
      const prof = isOwnP ? myProfile : window.getProfile(route.id);
      screen = <TrustProfileScreen profile={prof} isOwn={!!isOwnP} user={user} onNav={nav} />;
      break;
    }
    case "checkout":
      if (!user) { screen = <SignInScreen onAuth={handleAuth} onNav={nav} redirect={{ name: "checkout", id: route.id, mode: route.mode }} />; }
      else screen = <CheckoutScreen store={store} route={route} wallet={wallet} user={user} onNav={nav} onPay={payEscrow} onAddCard={openAddCard} />;
      break;
    case "services":
      screen = <ServicesScreen onNav={nav} />;
      break;
    case "messages":
      if (!user) { screen = <SignInScreen onAuth={handleAuth} onNav={nav} redirect={{ name: "messages" }} />; }
      else screen = <MessagesScreen user={user} onNav={nav} openId={route.openId} />;
      break;
    case "service":
      screen = <ServiceDetailScreen id={route.id} user={user} onNav={nav} />;
      break;
    case "marketplace":
      screen = <MarketplaceScreen store={store} onNav={nav} onWatch={toggleWatch} watchlist={watchlist} />;
      break;
    case "categories":
      screen = <CategoriesScreen store={store} onNav={nav} />;
      break;
    case "about":
      screen = <AboutScreen onNav={nav} />;
      break;
    default:
      screen = <BrowseScreen store={store} onNav={nav} onWatch={toggleWatch} watchlist={watchlist} initialCategory={route.category} />;
  }

  const isAuthScreen = ["signin", "signup", "forgot"].includes(route.name) || ((route.name === "sell" || route.name === "sellflow" || route.name === "checkout") && !user) || (route.name === "account" && !user);

  return (
    <div style={{ display: "flex", flexDirection: "column", minHeight: "100vh" }}>
      <Header route={route} user={user} onNav={nav} onLogout={handleLogout} theme={theme} onToggleTheme={toggleTheme} />
      {user && <BidStatusBar store={store} onNav={nav} />}
      <div style={{ flex: 1 }}>{screen}</div>
      {!isAuthScreen && <Footer onNav={nav} />}
      <Toast toast={toast} />
      {modal && modal.type === "addCard" && <AddCardModal onClose={closeModal} onSave={addCard} />}
      {modal && modal.type === "preauth" && <PreauthModal auction={modal.auction} wallet={wallet} onClose={closeModal} onAuthorize={authorizePreauth} />}
      {modal && modal.type === "inspection" && <InspectionReportModal auction={modal.auction} onClose={closeModal} />}
    </div>
  );
}

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