import { MoreHorizontal, Pencil, Plus, Trash2 } from 'lucide-react';

import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Button } from '@/components/ui/button';
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from '@/components/ui/table';
import { avatarUrl, getInitials } from '@/lib/utils';
import type { ProjectTeamMember } from '@/types/project';

interface ProjectTeamProps {
    members: ProjectTeamMember[];
    onAddMember: () => void;
    onEditRole: (member: ProjectTeamMember) => void;
    onRemoveMember: (member: ProjectTeamMember) => void;
    currentUserId?: string;
    can?: {
        manageMembers: boolean;
    };
}

const OWNER_ROLE = 'owner';

const PROJECT_MEMBER_ROLE_LABELS: Record<string, string> = {
    [OWNER_ROLE]: 'Owner',
    'person-in-charge': 'Person In Charge (PIC)',
    member: 'Member',
    viewer: 'Viewer',
};

function formatProjectMemberRole(role: string) {
    return (
        PROJECT_MEMBER_ROLE_LABELS[role] ??
        role
            .split('-')
            .filter(Boolean)
            .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
            .join(' ')
    );
}

export function ProjectTeam({
    members,
    onAddMember,
    onEditRole,
    onRemoveMember,
    currentUserId,
    can = { manageMembers: true },
}: ProjectTeamProps) {
    // Role of the currently authenticated user within this project. Used to
    // mirror the backend `manageMember` guard: only an owner may act on another
    // owner's row, so a PIC must not see actions on the owner row.
    const viewerRole = members.find(
        (member) => member.userId === currentUserId,
    )?.role;
    const viewerIsOwner = viewerRole === OWNER_ROLE;

    const canManageMember = (member: ProjectTeamMember) => {
        if (!can.manageMembers) {
            return false;
        }

        // Owner rows are protected: only an owner can manage them.
        if (member.role === OWNER_ROLE) {
            return viewerIsOwner;
        }

        return true;
    };

    return (
        <section className="space-y-4">
            <div className="flex items-center justify-between">
                <h2 className="text-lg font-bold">Team Members</h2>
                {can.manageMembers && (
                    <Button variant="ghost" size="sm" onClick={onAddMember}>
                        <Plus className="mr-2 h-4 w-4" />
                        Add Member
                    </Button>
                )}
            </div>

            <div className="overflow-hidden rounded-xl border bg-background">
                {members && members.length > 0 ? (
                    <Table>
                        <TableHeader>
                            <TableRow className="hover:bg-transparent">
                                <TableHead className="w-12 text-center">
                                    NO.
                                </TableHead>
                                <TableHead>Member</TableHead>
                                <TableHead>Role</TableHead>
                                <TableHead className="w-12"></TableHead>
                            </TableRow>
                        </TableHeader>
                        <TableBody>
                            {members.map((member, index) => (
                                <TableRow
                                    key={member.id}
                                    className="group cursor-pointer"
                                >
                                    <TableCell className="text-center font-mono text-xs font-medium text-muted-foreground">
                                        {index + 1}.
                                    </TableCell>
                                    <TableCell>
                                        <div className="flex items-center gap-3">
                                            <Avatar className="h-8 w-8 shrink-0 border">
                                                <AvatarImage
                                                    src={avatarUrl(
                                                        member.user.avatar,
                                                    )}
                                                    alt=""
                                                />
                                                <AvatarFallback className="bg-muted text-[10px] font-bold">
                                                    {getInitials(
                                                        `${member.user.firstName} ${member.user.lastName}`,
                                                    )}
                                                </AvatarFallback>
                                            </Avatar>
                                            <span className="font-medium">
                                                {member.user.firstName}{' '}
                                                {member.user.lastName}
                                            </span>
                                        </div>
                                    </TableCell>
                                    <TableCell className="text-sm text-muted-foreground">
                                        {formatProjectMemberRole(member.role)}
                                    </TableCell>
                                    {canManageMember(member) ? (
                                        <TableCell className="text-right">
                                            <DropdownMenu>
                                                <DropdownMenuTrigger asChild>
                                                    <Button
                                                        variant="ghost"
                                                        size="icon"
                                                        className="h-8 w-8 text-muted-foreground group-hover:text-foreground"
                                                        aria-label={`Buka aksi untuk ${member.user.firstName} ${member.user.lastName}`}
                                                    >
                                                        <MoreHorizontal
                                                            size={18}
                                                        />
                                                    </Button>
                                                </DropdownMenuTrigger>
                                                <DropdownMenuContent align="end">
                                                    <DropdownMenuItem
                                                        onClick={() =>
                                                            onEditRole(member)
                                                        }
                                                    >
                                                        <Pencil className="mr-2 h-4 w-4" />
                                                        Edit Role
                                                    </DropdownMenuItem>
                                                    <DropdownMenuItem
                                                        className="text-destructive focus:bg-destructive/10 focus:text-destructive"
                                                        onClick={() =>
                                                            onRemoveMember(
                                                                member,
                                                            )
                                                        }
                                                    >
                                                        <Trash2 className="mr-2 h-4 w-4" />
                                                        Remove Member
                                                    </DropdownMenuItem>
                                                </DropdownMenuContent>
                                            </DropdownMenu>
                                        </TableCell>
                                    ) : (
                                        <TableCell></TableCell>
                                    )}
                                </TableRow>
                            ))}
                        </TableBody>
                    </Table>
                ) : (
                    <div className="flex flex-col items-center justify-center py-12 text-center text-muted-foreground">
                        <p>No members found for this project.</p>
                    </div>
                )}
            </div>
        </section>
    );
}