"use client";

import { useEffect, useState } from "react";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import {
  ALL_SITES,
  resolveActiveSiteFrom,
  siteIdFromPathname,
  withoutSiteParam,
} from "../lib/activeSite";
import { useSiteScope } from "./SiteScopeProvider";

export type SiteScopeOption = { siteId: string; siteTitle: string };

// The single global site selector shown in the sidebar. The stored selection is
// a cookie, read by the root layout and supplied by SiteScopeProvider, so this
// renders the right value on the FIRST paint, on the server and on every
// navigation — it has no effect that rewrites the URL and reads no storage. See
// app/lib/activeSite.ts.
//
// What it shows, first match wins: the choice just made on this URL (until the
// navigation it starts lands), the site a /sites/<id>/… path names, a valid
// `?site=` on the URL (a link's scope for that page), the stored selection.
export function SiteScopeSelect({ sites }: { sites: SiteScopeOption[] }) {
  const [hydrated, setHydrated] = useState(false);
  useEffect(() => setHydrated(true), []);
  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useSearchParams();
  const { siteIds, stored, choose } = useSiteScope();
  const search = searchParams.toString();
  const param = searchParams.get("site");
  const onSite = siteIdFromPathname(pathname);
  // A controlled <select> snaps back to its value when the change does not
  // re-render it with the new one. Where the path or the param outranks the
  // stored value, the choice is held here for the URL it was made on, so the
  // select shows it until the navigation it starts replaces that URL. Once the
  // URL has moved it is dropped, so coming back to that URL later (Back, or a
  // link) shows what the URL says, not an old choice.
  const urlKey = `${pathname}?${search}`;
  const [pending, setPending] = useState<{ urlKey: string; value: string } | null>(
    null,
  );
  if (pending !== null && pending.urlKey !== urlKey) setPending(null);
  const held = pending?.urlKey === urlKey ? pending.value : null;
  const resolved = resolveActiveSiteFrom(
    [held, onSite?.siteId, param, stored],
    siteIds,
  );
  const multi = sites.length > 1;

  async function onChange(value: string) {
    if (onSite) {
      // The site is the path here, so changing it is a navigation: the same tab
      // of the other site, or the family page for "All sites". The cookie is
      // written FIRST, so a page opened right after the URL moves reads it.
      setPending({ urlKey, value });
      if (!(await choose(value))) {
        setPending(null);
        return;
      }
      router.push(
        value === ALL_SITES
          ? "/sites"
          : `/sites/${value}${onSite.segment ? `/${onSite.segment}` : ""}`,
      );
      return;
    }
    if (param === null) {
      // The common case: the stored value is what shows, and the cookie write
      // re-renders this page (Dashboard, Channels) in the new scope.
      await choose(value);
      return;
    }
    // A `?site=` link's page: the choice replaces the link's scope, so the
    // param goes — after the cookie is written, so the new URL renders with it.
    setPending({ urlKey, value });
    if (!(await choose(value))) {
      setPending(null);
      return;
    }
    router.replace(withoutSiteParam(pathname, search), { scroll: false });
  }

  if (sites.length === 0) {
    return (
      <div className="px-4 py-2 text-xs text-muted-foreground">
        No sites — create one under Sites.
      </div>
    );
  }

  return (
    <label className="flex flex-col gap-1 px-4 py-2 text-sm">
      <span className="text-xs uppercase tracking-wide text-muted-foreground">site</span>
      <select
        value={resolved.value}
        onChange={(e) => void onChange(e.target.value)}
        aria-label="Active site"
        // A TESTING AFFORDANCE, as on the operation lanes: a change that lands
        // before React hydrates is lost (the server-rendered value already
        // reads right), so a spec waits for this before it picks a site.
        data-hydrated={hydrated ? "true" : undefined}
        className="rounded border border-border bg-card px-2 py-1 text-sm"
      >
        {multi && <option value={ALL_SITES}>All sites</option>}
        {sites.map((s) => (
          <option key={s.siteId} value={s.siteId}>
            {s.siteTitle} ({s.siteId})
          </option>
        ))}
      </select>
    </label>
  );
}