"use client";

import { House } from "lucide-react";
import { useTransition } from "react";
import { toast } from "sonner";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { switchHouseholdAction } from "@/features/households/actions";
import type { HouseholdSummary } from "@/features/households/types";
import { tr } from "@/i18n/tr";

/** Üst bar aktif hane seçici. Seçim sunucuda doğrulanır ve cookie'ye yazılır. */
export function HouseholdSwitcher({
  households,
  activeId,
}: {
  households: HouseholdSummary[];
  activeId: string | undefined;
}) {
  const [pending, startTransition] = useTransition();
  const current = households.find((h) => h.id === activeId);
  if (households.length === 0) return null;

  function onChange(id: string) {
    if (id === activeId) return;
    startTransition(async () => {
      const result = await switchHouseholdAction(id);
      if (result.ok) toast.success(tr.household.switched(result.data.name));
      else toast.error(result.error);
    });
  }

  return (
    <Select value={activeId} onValueChange={onChange} disabled={pending || households.length < 2}>
      <SelectTrigger
        aria-label={tr.household.label}
        className="w-[min(46vw,13rem)]"
        aria-busy={pending}
      >
        <House className="text-muted-foreground" />
        {/* Etiket children ile verilir: Radix aksi halde hydration'a kadar boş gösterir. */}
        <SelectValue placeholder={tr.household.select}>{current?.name}</SelectValue>
      </SelectTrigger>
      <SelectContent>
        {households.map((h) => (
          <SelectItem key={h.id} value={h.id}>
            {h.name}
            <span className="text-xs text-muted-foreground">· {tr.household.roles[h.role]}</span>
          </SelectItem>
        ))}
      </SelectContent>
    </Select>
  );
}