import {
    Copy,
    Pencil,
    Trash2,
    PauseCircle,
    PlayCircle,
    XCircle,
} from 'lucide-react';

import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
    DialogTrigger,
    DialogClose,
} from '@/components/ui/dialog';

interface ProjectSettingsProps {
    onEdit?: () => void;
    onDuplicate?: () => void;
    onDelete?: () => void;
    can?: {
        update: boolean;
        delete: boolean;
        duplicate: boolean;
    };
    projectStatus?: string;
    onUpdateStatus?: (status: string) => void;
}

export function ProjectSettings({
    onEdit,
    onDuplicate,
    onDelete,
    can = { update: true, delete: true, duplicate: true },
    projectStatus = 'draft',
    onUpdateStatus,
}: ProjectSettingsProps) {
    return (
        <section className="rounded-xl border bg-background p-6 shadow-xs">
            <h2 className="mb-4 text-lg font-bold">Project Settings</h2>
            <p className="text-sm text-muted-foreground">
                Configure project general settings and permissions.
            </p>
            <div className="mt-6 space-y-4">
                <div className="flex items-center justify-between rounded-lg border p-4">
                    <div>
                        <div className="font-semibold">Project Privacy</div>
                        <div className="text-xs text-muted-foreground">
                            Control who can see this project.
                        </div>
                    </div>
                    <Badge variant="outline">Public</Badge>
                </div>

                {can.update && (
                    <div className="flex items-center justify-between rounded-lg border p-4">
                        <div>
                            <div className="font-semibold">Edit Project</div>
                            <div className="text-xs text-muted-foreground">
                                Update project name, description, and deadline.
                            </div>
                        </div>
                        <Button variant="outline" size="sm" onClick={onEdit}>
                            <Pencil className="mr-2 h-4 w-4" /> Edit
                        </Button>
                    </div>
                )}

                {can.duplicate && (
                    <div className="flex items-center justify-between rounded-lg border p-4">
                        <div>
                            <div className="font-semibold">
                                Duplicate Project
                            </div>
                            <div className="text-xs text-muted-foreground">
                                Create a new copy of this project and its tasks.
                            </div>
                        </div>
                        <Button
                            variant="outline"
                            size="sm"
                            onClick={onDuplicate}
                        >
                            <Copy className="mr-2 h-4 w-4" /> Duplicate
                        </Button>
                    </div>
                )}

                {can.update && (
                    <>
                        <div className="flex items-center justify-between rounded-lg border p-4">
                            <div>
                                <div className="font-semibold text-amber-600 dark:text-amber-500">
                                    {projectStatus === 'on_hold'
                                        ? 'Resume Project'
                                        : 'Put on Hold'}
                                </div>
                                <div className="text-xs text-muted-foreground">
                                    {projectStatus === 'on_hold'
                                        ? 'Resume the project and change status to In Progress.'
                                        : 'Pause the project temporarily.'}
                                </div>
                            </div>
                            {projectStatus === 'on_hold' ? (
                                <Dialog>
                                    <DialogTrigger asChild>
                                        <Button variant="outline" size="sm">
                                            <PlayCircle className="mr-2 h-4 w-4" />{' '}
                                            Resume
                                        </Button>
                                    </DialogTrigger>
                                    <DialogContent hideCloseButton>
                                        <DialogHeader>
                                            <DialogTitle>
                                                Lanjutkan Proyek?
                                            </DialogTitle>
                                            <DialogDescription>
                                                Proyek ini akan dilanjutkan dan
                                                statusnya akan berubah menjadi
                                                In Progress. Apakah Anda yakin?
                                            </DialogDescription>
                                        </DialogHeader>
                                        <DialogFooter>
                                            <DialogClose asChild>
                                                <Button variant="outline">
                                                    Batal
                                                </Button>
                                            </DialogClose>
                                            <DialogClose asChild>
                                                <Button
                                                    onClick={() =>
                                                        onUpdateStatus?.(
                                                            'in_progress',
                                                        )
                                                    }
                                                >
                                                    Ya, Lanjutkan
                                                </Button>
                                            </DialogClose>
                                        </DialogFooter>
                                    </DialogContent>
                                </Dialog>
                            ) : (
                                <Dialog>
                                    <DialogTrigger asChild>
                                        <Button
                                            variant="outline"
                                            size="sm"
                                            disabled={[
                                                'completed',
                                                'cancelled',
                                            ].includes(projectStatus)}
                                        >
                                            <PauseCircle className="mr-2 h-4 w-4" />{' '}
                                            On Hold
                                        </Button>
                                    </DialogTrigger>
                                    <DialogContent hideCloseButton>
                                        <DialogHeader>
                                            <DialogTitle>
                                                Tunda Proyek?
                                            </DialogTitle>
                                            <DialogDescription>
                                                Proyek akan ditunda sementara
                                                (On Hold). Seluruh aktivitas
                                                pada proyek akan dihentikan
                                                sementara. Apakah Anda yakin?
                                            </DialogDescription>
                                        </DialogHeader>
                                        <DialogFooter>
                                            <DialogClose asChild>
                                                <Button variant="outline">
                                                    Batal
                                                </Button>
                                            </DialogClose>
                                            <DialogClose asChild>
                                                <Button
                                                    onClick={() =>
                                                        onUpdateStatus?.(
                                                            'on_hold',
                                                        )
                                                    }
                                                >
                                                    Ya, Tunda
                                                </Button>
                                            </DialogClose>
                                        </DialogFooter>
                                    </DialogContent>
                                </Dialog>
                            )}
                        </div>

                        <div className="flex items-center justify-between rounded-lg border border-rose-200 bg-rose-50/50 p-4 dark:border-rose-500/20 dark:bg-rose-500/5">
                            <div>
                                <div className="font-semibold text-rose-600 dark:text-rose-500">
                                    Cancel Project
                                </div>
                                <div className="text-xs text-muted-foreground">
                                    Cancel the project permanently. This action
                                    cannot be undone.
                                </div>
                            </div>
                            <Dialog>
                                <DialogTrigger asChild>
                                    <Button
                                        variant="outline"
                                        size="sm"
                                        className="text-rose-600 hover:bg-rose-100 hover:text-rose-700 dark:text-rose-500 dark:hover:bg-rose-500/20"
                                        disabled={[
                                            'completed',
                                            'cancelled',
                                        ].includes(projectStatus)}
                                    >
                                        <XCircle className="mr-2 h-4 w-4" />{' '}
                                        Cancel
                                    </Button>
                                </DialogTrigger>
                                <DialogContent hideCloseButton>
                                    <DialogHeader>
                                        <DialogTitle>
                                            Batalkan Proyek?
                                        </DialogTitle>
                                        <DialogDescription>
                                            Apakah Anda yakin ingin membatalkan
                                            proyek ini? Status proyek akan
                                            berubah menjadi Cancelled dan
                                            tindakan ini tidak dapat dibatalkan.
                                        </DialogDescription>
                                    </DialogHeader>
                                    <DialogFooter>
                                        <DialogClose asChild>
                                            <Button variant="outline">
                                                Tidak
                                            </Button>
                                        </DialogClose>
                                        <DialogClose asChild>
                                            <Button
                                                variant="destructive"
                                                onClick={() =>
                                                    onUpdateStatus?.(
                                                        'cancelled',
                                                    )
                                                }
                                            >
                                                Ya, Batalkan
                                            </Button>
                                        </DialogClose>
                                    </DialogFooter>
                                </DialogContent>
                            </Dialog>
                        </div>
                    </>
                )}

                {can.delete && (
                    <div className="flex items-center justify-between rounded-lg border border-destructive/20 bg-destructive/5 p-4">
                        <div>
                            <div className="font-semibold text-destructive">
                                Delete Project
                            </div>
                            <div className="text-xs text-muted-foreground">
                                Permanently remove this project and all its
                                data.
                            </div>
                        </div>
                        <Button
                            variant="destructive"
                            size="sm"
                            onClick={onDelete}
                        >
                            <Trash2 className="mr-2 h-4 w-4" /> Delete
                        </Button>
                    </div>
                )}
            </div>
        </section>
    );
}