import { Eye, ShieldCheck, Users } from 'lucide-react';
import React, { useEffect } from 'react';

import { updateMember as updateMemberAction } 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 { Label } from '@/components/ui/label';
import { useYupForm } from '@/hooks/use-yup-form';
import { projectMemberRoleSchema } from '@/lib/validation/project';
import type { ProjectTeamMember } from '@/types/project';

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

const ROLES = [
    {
        value: 'person-in-charge',
        label: 'Person In Charge (PIC)',
        desc: 'Full authority to manage tasks & progress.',
        icon: ShieldCheck,
    },
    {
        value: 'member',
        label: 'Member',
        desc: 'Works on tasks & leaves feedback.',
        icon: Users,
    },
    {
        value: 'viewer',
        label: 'Viewer',
        desc: 'View-only access without edit rights.',
        icon: Eye,
    },
];

export function EditMemberRoleDialog({
    projectId,
    member,
    open,
    onOpenChange,
}: EditMemberRoleDialogProps) {
    const { data, setData, processing, errors, reset, submit } = useYupForm(
        projectMemberRoleSchema,
        { role: '' },
    );

    useEffect(() => {
        if (open && member) {
            setData('role', member.role);
        } else {
            reset();
        }
    }, [open, member, reset, setData]);

    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();

        if (!member) {
            return;
        }

        submit((form) =>
            form.put(
                updateMemberAction({
                    project: projectId,
                    user: Number(member.userId),
                }).url,
                {
                    onSuccess: () => {
                        onOpenChange(false);
                    },
                },
            ),
        );
    };

    if (!member) {
        return null;
    }

    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent className="sm:max-w-md [&>button:last-child]:hidden">
                <DialogHeader>
                    <DialogTitle className="flex items-center gap-2">
                        <ShieldCheck className="h-5 w-5 text-primary" />
                        Edit Member Role
                    </DialogTitle>
                    <DialogDescription>
                        Tentukan hak akses wewenang untuk{' '}
                        <span className="font-semibold text-foreground">
                            {member.user.firstName} {member.user.lastName}
                        </span>{' '}
                        dalam proyek ini.
                    </DialogDescription>
                </DialogHeader>

                <form
                    onSubmit={handleSubmit}
                    className="mt-4 space-y-5"
                    noValidate
                >
                    <div className="space-y-2">
                        <Label className="mb-2 block">
                            Select Access Level
                        </Label>

                        <div className="grid grid-cols-1 gap-3">
                            {ROLES.map((roleOption) => {
                                const isSelected =
                                    data.role === roleOption.value;
                                const Icon = roleOption.icon;

                                return (
                                    <button
                                        key={roleOption.value}
                                        type="button"
                                        onClick={() =>
                                            setData('role', roleOption.value)
                                        }
                                        className={`flex cursor-pointer items-center gap-3 rounded-lg border p-3 text-left transition-all duration-150 active:scale-[0.99] ${
                                            isSelected
                                                ? 'border-primary bg-primary/5 ring-1 ring-primary ring-offset-0'
                                                : 'border-border hover:bg-muted/50'
                                        }`}
                                    >
                                        <div
                                            className={`flex h-8 w-8 shrink-0 items-center justify-center rounded-md ${isSelected ? 'bg-primary/10 text-primary' : 'bg-muted/50 text-muted-foreground'}`}
                                        >
                                            <Icon className="h-4 w-4" />
                                        </div>
                                        <div className="min-w-0 flex-1">
                                            <div className="mb-1 text-sm leading-none font-semibold">
                                                {roleOption.label}
                                            </div>
                                            <div className="text-[11px] leading-none text-muted-foreground">
                                                {roleOption.desc}
                                            </div>
                                        </div>
                                        {isSelected && (
                                            <div className="h-1.5 w-1.5 rounded-full bg-primary" />
                                        )}
                                    </button>
                                );
                            })}
                        </div>
                        {errors.role && (
                            <p className="mt-1 text-xs font-medium text-destructive">
                                {errors.role}
                            </p>
                        )}
                    </div>

                    <DialogFooter className="pt-4">
                        <Button
                            type="button"
                            variant="outline"
                            onClick={() => onOpenChange(false)}
                            className="w-full sm:w-auto"
                        >
                            Cancel
                        </Button>
                        <Button
                            type="submit"
                            disabled={processing}
                            className="w-full sm:w-auto"
                        >
                            {processing ? 'Saving...' : 'Save Changes'}
                        </Button>
                    </DialogFooter>
                </form>
            </DialogContent>
        </Dialog>
    );
}