import { router } from '@inertiajs/react';
import { AlertTriangle } from 'lucide-react';
import React, { useState } from 'react';

import { removeMember as removeMemberAction } from '@/actions/App/Domains/Project/Http/Controllers/ProjectController';
import { Button } from '@/components/ui/button';
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
} from '@/components/ui/dialog';
import type { ProjectTeamMember } from '@/types/project';

interface RemoveMemberDialogProps {
    projectId: number;
    member: ProjectTeamMember | null;
    open: boolean;
    onOpenChange: (open: boolean) => void;
}

export function RemoveMemberDialog({
    projectId,
    member,
    open,
    onOpenChange,
}: RemoveMemberDialogProps) {
    const [processing, setProcessing] = useState(false);

    const handleRemove = () => {
        if (!member) {
            return;
        }

        setProcessing(true);
        router.delete(
            removeMemberAction({
                project: projectId,
                user: Number(member.userId),
            }).url,
            {
                onSuccess: () => {
                    setProcessing(false);
                    onOpenChange(false);
                },
                onError: () => {
                    setProcessing(false);
                },
            },
        );
    };

    if (!member) {
        return null;
    }

    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent className="overflow-hidden p-0 sm:max-w-md [&>button:last-child]:hidden">
                <div className="p-6">
                    <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-red-100 dark:bg-red-900/30">
                        <AlertTriangle className="h-6 w-6 text-red-600 dark:text-red-500" />
                    </div>

                    <DialogHeader>
                        <DialogTitle className="text-xl font-bold text-foreground">
                            Remove Member
                        </DialogTitle>
                        <DialogDescription className="mt-2 text-neutral-500 dark:text-neutral-400">
                            Are you sure you want to remove{' '}
                            <span className="font-semibold text-foreground">
                                {member.user.firstName} {member.user.lastName}
                            </span>{' '}
                            from this project? This action cannot be undone.
                        </DialogDescription>
                    </DialogHeader>
                </div>

                <DialogFooter className="flex flex-col gap-2 bg-neutral-50 p-6 sm:flex-row dark:bg-neutral-800/50">
                    <Button
                        type="button"
                        variant="ghost"
                        onClick={() => onOpenChange(false)}
                        className="h-11 flex-1 rounded-xl font-medium hover:bg-neutral-200 dark:hover:bg-neutral-700"
                    >
                        Cancel
                    </Button>
                    <Button
                        type="button"
                        variant="destructive"
                        disabled={processing}
                        onClick={handleRemove}
                        className="h-11 flex-1 rounded-xl font-bold shadow-lg shadow-red-500/20"
                    >
                        {processing ? 'Removing...' : 'Remove Member'}
                    </Button>
                </DialogFooter>
            </DialogContent>
        </Dialog>
    );
}