"use client";

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

import type { CustomerRow } from "@/app/dashboard/customers/_components/schema";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

type TenantPickerProps = {
  customers: CustomerRow[];
  selectedCustomerId: number | null;
};

export function TenantPicker({ customers, selectedCustomerId }: TenantPickerProps) {
  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useSearchParams();

  const onChange = (value: string) => {
    const params = new URLSearchParams(searchParams.toString());
    params.set("customerId", value);
    router.push(`${pathname}?${params.toString()}`);
  };

  return (
    <div className="space-y-1">
      <Label className="text-xs">Customer / tenant</Label>
      <Select
        value={selectedCustomerId ? String(selectedCustomerId) : undefined}
        onValueChange={onChange}
      >
        <SelectTrigger className="h-9 w-full min-w-[240px] max-w-md">
          <SelectValue placeholder="Select a customer…" />
        </SelectTrigger>
        <SelectContent>
          {customers.map((customer) => (
            <SelectItem key={customer.id} value={String(customer.id)}>
              {customer.firstName} {customer.lastName}
              {customer.subdomain ? ` (${customer.subdomain})` : ""}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
    </div>
  );
}