"use client";

import { useMemo } from "react";
import { usePathname, useRouter, useSearchParams } from "next/navigation";

/**
 * PlatformSwitcher
 *
 * Works on BOTH:
 * - /parts/[partRole] (default browse route)
 * - /parts/[platform]/[partRole] (canonical route)
 *
 * Behavior:
 * - If you're on /parts/[partRole], switching platform navigates to /parts/[platform]/[partRole]
 *   (so your URL becomes explicit/shareable).
 * - If you're already on /parts/[platform]/[partRole], it swaps the platform segment.
 */
export default function PlatformSwitcher(props: {
  currentPlatform: string;
  partRole: string;
  // If true, we keep query params when switching (nice for sort/paging)
  preserveQuery?: boolean;
}) {
  const { currentPlatform, partRole, preserveQuery = true } = props;

  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useSearchParams();

  const queryString = useMemo(() => {
    if (!preserveQuery) return "";
    const q = searchParams?.toString();
    return q ? `?${q}` : "";
  }, [searchParams, preserveQuery]);

  function go(platform: string) {
    // We always navigate to canonical to keep it simple & consistent
    router.push(`/parts/${encodeURIComponent(platform)}/${encodeURIComponent(partRole)}${queryString}`);
  }

  return (
    <div className="flex items-center gap-2">
      <span className="text-xs uppercase tracking-[0.14em] text-zinc-500">Platform</span>
      <select
        value={currentPlatform}
        onChange={(e) => go(e.target.value)}
        className="rounded-md border border-zinc-700 bg-zinc-950/80 px-2 py-1 text-xs text-zinc-100 outline-none focus:border-amber-400"
      >
        <option value="AR-15">AR-15</option>
        <option value="AR-10">AR-10</option>
        <option value="AR-9">AR-9</option>
        <option value="AK-47">AK-47</option>
      </select>

      <span className="ml-2 text-[0.7rem] text-zinc-500">
        {pathname}
      </span>
    </div>
  );
}