butcem/src/features/households/components/members-list.tsx

"use client";

import { UserMinus } from "lucide-react";
import { useState, useTransition } from "react";
import { toast } from "sonner";
import {
  AlertDialog,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { initials } from "@/components/layout/user-menu";
import { tr } from "@/i18n/tr";
import type { ActionResult } from "@/lib/action-result";
import { HOUSEHOLD_ROLES, type HouseholdRole } from "../types";

export type MemberRow = {
  userId: string;
  name: string;
  username: string;
  role: HouseholdRole;
  banned: boolean;
};

type Props = {
  members: MemberRow[];
  householdName: string;
  currentUserId: string;
  canManage: boolean;
  onSetRole: (userId: string, role: HouseholdRole) => Promise<ActionResult>;
  onRemove: (userId: string) => Promise<ActionResult>;
};

/** Hane üyeleri: owner (veya admin) rol değiştirir / haneden çıkarır. Kurallar sunucuda. */
export function MembersList({
  members,
  householdName,
  currentUserId,
  canManage,
  onSetRole,
  onRemove,
}: Props) {
  const [pending, startTransition] = useTransition();
  const [removing, setRemoving] = useState<MemberRow | null>(null);
  const t = tr.settings;

  function changeRole(member: MemberRow, role: HouseholdRole) {
    startTransition(async () => {
      const result = await onSetRole(member.userId, role);
      if (result.ok) toast.success(t.roleChanged(member.name));
      else toast.error(result.error);
    });
  }

  function confirmRemove() {
    const member = removing;
    if (!member) return;
    startTransition(async () => {
      const result = await onRemove(member.userId);
      if (result.ok) {
        toast.success(t.memberRemoved(member.name));
        setRemoving(null);
      } else {
        toast.error(result.error);
      }
    });
  }

  return (
    <>
      <ul className="divide-y rounded-xl border" aria-busy={pending}>
        {members.map((m) => (
          <li key={m.userId} className="flex flex-wrap items-center gap-3 p-3">
            <Avatar>
              <AvatarFallback className="bg-primary/10 text-xs font-medium text-primary">
                {initials(m.name)}
              </AvatarFallback>
            </Avatar>
            <div className="min-w-0 flex-1">
              <p className="truncate font-medium">
                {m.name}
                {m.userId === currentUserId ? (
                  <span className="ml-1.5 text-xs font-normal text-muted-foreground">
                    ({tr.adminUsers.you})
                  </span>
                ) : null}
              </p>
              <p className="truncate text-xs text-muted-foreground">@{m.username}</p>
            </div>
            {m.banned ? <Badge variant="destructive">{t.banned}</Badge> : null}
            {canManage ? (
              <div className="flex items-center gap-1">
                <Select
                  value={m.role}
                  onValueChange={(v) => changeRole(m, v as HouseholdRole)}
                  disabled={pending}
                >
                  <SelectTrigger
                    size="sm"
                    className="w-32"
                    aria-label={`${m.name} — ${t.changeRole}`}
                  >
                    <SelectValue>{tr.household.roles[m.role]}</SelectValue>
                  </SelectTrigger>
                  <SelectContent align="end">
                    {HOUSEHOLD_ROLES.map((r) => (
                      <SelectItem key={r} value={r}>
                        <span className="flex flex-col">
                          <span>{tr.household.roles[r]}</span>
                          <span className="text-xs text-muted-foreground">
                            {tr.household.roleHints[r]}
                          </span>
                        </span>
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
                <Button
                  variant="ghost"
                  size="icon-sm"
                  onClick={() => setRemoving(m)}
                  disabled={pending}
                  aria-label={`${m.name} — ${t.removeMember}`}
                  title={t.removeMember}
                >
                  <UserMinus />
                </Button>
              </div>
            ) : (
              <Badge variant={m.role === "owner" ? "default" : "secondary"}>
                {tr.household.roles[m.role]}
              </Badge>
            )}
          </li>
        ))}
      </ul>

      <AlertDialog open={Boolean(removing)} onOpenChange={(open) => !open && setRemoving(null)}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>{t.removeTitle}</AlertDialogTitle>
            <AlertDialogDescription>
              {removing ? t.removeDescription(removing.name, householdName) : null}
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel disabled={pending}>{tr.common.cancel}</AlertDialogCancel>
            <Button variant="destructive" onClick={confirmRemove} disabled={pending}>
              {t.removeConfirm}
            </Button>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </>
  );
}