"use client";

import { useState, useTransition } from "react";
import { Loader2, Trash2 } from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { removeMemberAction, updateMemberRoleAction } from "@/lib/appwrite/team-actions";

type Member = {
  id: string;
  userId: string;
  name: string;
  email: string;
  role: string;
  joined: string;
  invited: string;
  confirm: boolean;
};

const ROLE_LABEL: Record<string, string> = {
  owner: "Sahip",
  admin: "Yönetici",
  member: "Üye",
};

export function MembersTable({
  members,
  currentUserId,
  isOwner,
  canManage,
}: {
  members: Member[];
  currentUserId: string;
  isOwner: boolean;
  canManage: boolean;
}) {
  const [busy, setBusy] = useState<string | null>(null);
  const [, startTransition] = useTransition();

  const setRole = (membershipId: string, role: string) => {
    setBusy(membershipId);
    startTransition(async () => {
      const fd = new FormData();
      fd.set("membershipId", membershipId);
      fd.set("role", role);
      await updateMemberRoleAction({ ok: false }, fd);
      setBusy(null);
    });
  };

  const remove = (membershipId: string, name: string) => {
    if (!confirm(`${name} adlı üyeyi çalışma alanından çıkarmak istediğinize emin misiniz?`)) {
      return;
    }
    setBusy(membershipId);
    startTransition(async () => {
      const fd = new FormData();
      fd.set("membershipId", membershipId);
      await removeMemberAction({ ok: false }, fd);
      setBusy(null);
    });
  };

  return (
    <Card>
      <CardHeader>
        <CardTitle>Üyeler ({members.length})</CardTitle>
      </CardHeader>
      <CardContent>
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>İsim</TableHead>
              <TableHead>Email</TableHead>
              <TableHead>Rol</TableHead>
              <TableHead className="text-right">İşlem</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {members.map((m) => {
              const isSelf = m.userId === currentUserId;
              const isMemberOwner = m.role === "owner";
              return (
                <TableRow key={m.id}>
                  <TableCell className="font-medium">
                    {m.name}
                    {isSelf && (
                      <Badge variant="secondary" className="ml-2 text-xs">
                        Siz
                      </Badge>
                    )}
                  </TableCell>
                  <TableCell className="text-muted-foreground">{m.email}</TableCell>
                  <TableCell>
                    {isOwner && !isMemberOwner && !isSelf ? (
                      <Select
                        value={m.role}
                        disabled={busy === m.id}
                        onValueChange={(v) => setRole(m.id, v)}
                      >
                        <SelectTrigger className="w-[120px]">
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="member">Üye</SelectItem>
                          <SelectItem value="admin">Yönetici</SelectItem>
                        </SelectContent>
                      </Select>
                    ) : (
                      <Badge variant={isMemberOwner ? "default" : "outline"}>
                        {ROLE_LABEL[m.role] ?? m.role}
                      </Badge>
                    )}
                  </TableCell>
                  <TableCell className="text-right">
                    {canManage && !isSelf && !isMemberOwner ? (
                      <Button
                        type="button"
                        variant="ghost"
                        size="sm"
                        disabled={busy === m.id}
                        onClick={() => remove(m.id, m.name)}
                      >
                        {busy === m.id ? (
                          <Loader2 className="size-3.5 animate-spin" />
                        ) : (
                          <Trash2 className="size-3.5" />
                        )}
                        Çıkar
                      </Button>
                    ) : null}
                  </TableCell>
                </TableRow>
              );
            })}
          </TableBody>
        </Table>
      </CardContent>
    </Card>
  );
}
