"use client";

// Seeded provider for design-sync preview cards. Mirrors the repo's own offline
// preview client (tradein-mvp/frontend/src/app/ui-preview/estimate/page.tsx):
// a QueryClient pre-filled with the FIXTURE_* data + a fake authorized user, so
// fetch-coupled cards (HouseAnalyticsSection, PlacementHistoryCard, StreetDealsCard)
// and auth-gated ones (RouteGuard, UserMenu) render offline. Bundled into
// window.<GLOBAL> via cfg.extraEntries → shares the SAME react-query instance as
// the components (context identity), which a second copy in a preview would break.
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { useState } from "react";

import {
  FIXTURE_ANALYTICS,
  FIXTURE_ESTIMATE,
  FIXTURE_PLACEMENT,
  FIXTURE_SALES,
  FIXTURE_SELLTIME,
} from "../tradein-mvp/frontend/src/app/ui-preview/estimate/fixture";

// Inlined to avoid importing @/lib/useMe → @/lib/api, which reads process.env
// at module top-level; in an extraEntries module that evaluates before the
// synth-entry process shim and aborts the whole bundle. Key must match
// useMe.ts's ME_QUERY_KEY exactly.
const ME_QUERY_KEY = ["auth", "me"] as const;
const PREVIEW_ID = FIXTURE_ESTIMATE.estimate_id;

const PREVIEW_USER = {
  username: "preview",
  role: "admin",
  allowed_paths: ["/**"],
  deny_paths: [],
  brand: null,
};

export function PreviewProvider({ children }: { children: React.ReactNode }) {
  const [client] = useState(() => {
    const qc = new QueryClient({
      defaultOptions: {
        queries: { retry: false, staleTime: Infinity, refetchOnWindowFocus: false },
      },
    });
    qc.setQueryData(ME_QUERY_KEY, PREVIEW_USER);
    qc.setQueryData(["trade-in", "estimate", PREVIEW_ID, "placement-history"], FIXTURE_PLACEMENT);
    qc.setQueryData(["trade-in", "estimate", PREVIEW_ID, "house-analytics"], FIXTURE_ANALYTICS);
    qc.setQueryData(["trade-in", "estimate", PREVIEW_ID, "sell-time-sensitivity"], FIXTURE_SELLTIME);
    qc.setQueryData(["trade-in", "estimate", PREVIEW_ID, "cian-price-changes"], []);
    qc.setQueryData(
      [
        "trade-in",
        "sales-vs-listings",
        FIXTURE_ESTIMATE.target_address,
        FIXTURE_ESTIMATE.area_m2,
        FIXTURE_ESTIMATE.rooms,
      ],
      FIXTURE_SALES,
    );
    return qc;
  });
  return (
    <QueryClientProvider client={client}>
      {/* v2 HUD font vars. The app defines --font-manrope/--font-plex-mono via
          next/font in app/v2/layout.tsx, which is excluded from the synth
          bundle (next/font loader crash) — so the vars never exist in capture
          and tokens.font.* fell back. The @font-face for both families ships
          in .design-sync/fonts/brand-fonts.css (cfg.extraFonts), but that
          pipeline extracts @font-face blocks ONLY (a :root{} there is
          dropped) — map the vars here instead. */}
      <style>{":root{--font-manrope:'Manrope';--font-plex-mono:'IBM Plex Mono'}"}</style>
      {children}
    </QueryClientProvider>
  );
}