function ProductPage() {
  const { searchParams, setSearchParam, removeSearchParam } = useLocation();

  const category = searchParams.get("category") || "all";
  const sortBy = searchParams.get("sortBy") || "name";
  const page = parseInt(searchParams.get("page") || "1");

  const updateFilter = (filter: string, value: string) => {
    if (value === "all" || !value) {
      removeSearchParam(filter);
    } else {
      setSearchParam(filter, value);
    }
    // Reset to page 1 when filtering
    if (filter !== "page") {
      setSearchParam("page", "1");
    }
  };

  return (
    <div>
      <h1>Products</h1>

      <select
        value={category}
        onChange={(e) => updateFilter("category", e.target.value)}
      >
        <option value="all">All Categories</option>
        <option value="electronics">Electronics</option>
        <option value="clothing">Clothing</option>
      </select>

      <select
        value={sortBy}
        onChange={(e) => updateFilter("sortBy", e.target.value)}
      >
        <option value="name">Sort by Name</option>
        <option value="price">Sort by Price</option>
        <option value="rating">Sort by Rating</option>
      </select>

      {/* Pagination */}
      <div>
        <button
          onClick={() => updateFilter("page", (page - 1).toString())}
          disabled={page <= 1}
        >
          Previous
        </button>
        <span>Page {page}</span>
        <button onClick={() => updateFilter("page", (page + 1).toString())}>
          Next
        </button>
      </div>
    </div>
  );
}

function TabContainer() {
  const { searchParams, setSearchParam, hash, setHash } = useLocation();

  const activeTab = searchParams.get("tab") || "overview";
  const activeSection = hash.replace("#", "") || "top";

  const tabs = [
    { id: "overview", label: "Overview" },
    { id: "details", label: "Details" },
    { id: "reviews", label: "Reviews" },
    { id: "related", label: "Related" },
  ];

  const sections = {
    overview: ["intro", "features", "pricing"],
    details: ["specifications", "requirements", "installation"],
    reviews: ["recent", "top-rated", "all"],
    related: ["similar", "alternatives", "bundles"],
  };

  const switchTab = (tabId: string) => {
    setSearchParam("tab", tabId);
    setHash(sections[tabId][0]); // Jump to first section
  };

  const jumpToSection = (sectionId: string) => {
    setHash(sectionId);
  };

  return (
    <div>
      {/* Tab Navigation */}
      <nav>
        {tabs.map((tab) => (
          <button
            key={tab.id}
            onClick={() => switchTab(tab.id)}
            className={activeTab === tab.id ? "active" : ""}
          >
            {tab.label}
          </button>
        ))}
      </nav>

      {/* Section Navigation */}
      <aside>
        <h3>Jump to:</h3>
        {sections[activeTab]?.map((section) => (
          <button
            key={section}
            onClick={() => jumpToSection(section)}
            className={activeSection === section ? "active" : ""}
          >
            {section}
          </button>
        ))}
      </aside>

      {/* Content based on active tab and section */}
      <main>
        <TabContent activeTab={activeTab} activeSection={activeSection} />
      </main>
    </div>
  );
}

function SearchPage() {
  const { searchParams, setSearchParam, removeSearchParam, navigate } =
    useLocation();

  const query = searchParams.get("q") || "";
  const type = searchParams.get("type") || "all";
  const dateRange = searchParams.get("date") || "all";
  const sortBy = searchParams.get("sort") || "relevance";

  const [searchInput, setSearchInput] = useState(query);

  const updateSearch = (newQuery: string) => {
    if (newQuery.trim()) {
      setSearchParam("q", newQuery.trim());
    } else {
      removeSearchParam("q");
    }
  };

  const clearAllFilters = () => {
    navigate(window.location.pathname); // Remove all query params
  };

  const buildShareableLink = () => {
    const currentUrl = window.location.href;
    navigator.clipboard.writeText(currentUrl);
  };

  const hasActiveFilters = Array.from(searchParams.entries()).length > 0;

  return (
    <div>
      <form
        onSubmit={(e) => {
          e.preventDefault();
          updateSearch(searchInput);
        }}
      >
        <input
          value={searchInput}
          onChange={(e) => setSearchInput(e.target.value)}
          placeholder="Search..."
        />
        <button type="submit">Search</button>
      </form>

      <div className="filters">
        <select
          value={type}
          onChange={(e) => setSearchParam("type", e.target.value)}
        >
          <option value="all">All Types</option>
          <option value="posts">Posts</option>
          <option value="users">Users</option>
          <option value="comments">Comments</option>
        </select>

        <select
          value={dateRange}
          onChange={(e) => setSearchParam("date", e.target.value)}
        >
          <option value="all">All Time</option>
          <option value="day">Last 24 hours</option>
          <option value="week">Last week</option>
          <option value="month">Last month</option>
        </select>

        <select
          value={sortBy}
          onChange={(e) => setSearchParam("sort", e.target.value)}
        >
          <option value="relevance">Relevance</option>
          <option value="date">Date</option>
          <option value="popularity">Popularity</option>
        </select>

        {hasActiveFilters && (
          <button onClick={clearAllFilters}>Clear Filters</button>
        )}

        <button onClick={buildShareableLink}>Share Search</button>
      </div>

      <SearchResults
        query={query}
        type={type}
        dateRange={dateRange}
        sortBy={sortBy}
      />
    </div>
  );
}

// Custom router hook using useLocation
function useRouter() {
  const { location, navigate, back, forward, searchParams } = useLocation();

  const push = useCallback(
    (path: string) => {
      navigate(path);
    },
    [navigate]
  );

  const replace = useCallback(
    (path: string) => {
      navigate(path, true);
    },
    [navigate]
  );

  const query = useMemo(() => {
    const params: Record<string, string> = {};
    searchParams.forEach((value, key) => {
      params[key] = value;
    });
    return params;
  }, [searchParams]);

  return {
    pathname: location.pathname,
    search: location.search,
    hash: location.hash,
    query,
    push,
    replace,
    back,
    forward,
  };
}

// Route component
function Route({
  path,
  component: Component,
}: {
  path: string;
  component: React.ComponentType<any>;
}) {
  const { pathname } = useRouter();

  // Simple path matching (you'd want more sophisticated matching in real apps)
  const isMatch = pathname === path || pathname.startsWith(path + "/");

  return isMatch ? <Component /> : null;
}

// App with routing
function App() {
  const router = useRouter();

  return (
    <div>
      <nav>
        <button onClick={() => router.push("/")}>Home</button>
        <button onClick={() => router.push("/about")}>About</button>
        <button onClick={() => router.push("/contact")}>Contact</button>
      </nav>

      <main>
        <Route path="/" component={HomePage} />
        <Route path="/about" component={AboutPage} />
        <Route path="/contact" component={ContactPage} />
      </main>

      <footer>
        <button onClick={router.back}>← Back</button>
        <button onClick={router.forward}>Forward →</button>
        <span>Current: {router.pathname}</span>
      </footer>
    </div>
  );
}