import { Loader2 } from 'lucide-react';
import type { LucideIcon } from 'lucide-react';
import type { ReactNode } from 'react';

import { Button } from '@/components/ui/button';
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
} from '@/components/ui/dialog';
import { cn } from '@/lib/utils';

/**
 * Nada visual dialog. Menentukan warna badge ikon dan varian tombol konfirmasi.
 * - 'danger'  : aksi destruktif/berisiko (mis. Cancel Project). Badge & tombol merah.
 * - 'warning' : aksi menahan/menjeda (mis. On Hold). Badge amber, tombol default.
 * - 'neutral' : aksi biasa yang butuh konfirmasi (mis. Resume). Badge netral.
 */
type ConfirmActionTone = 'danger' | 'warning' | 'neutral';

const TONE_BADGE: Record<ConfirmActionTone, string> = {
    danger: 'bg-red-100 text-red-600 dark:bg-red-900/30 dark:text-red-500',
    warning:
        'bg-amber-100 text-amber-600 dark:bg-amber-900/30 dark:text-amber-500',
    neutral: 'bg-muted text-muted-foreground',
};

interface ConfirmActionDialogProps {
    open: boolean;
    onOpenChange: (open: boolean) => void;
    onConfirm: () => void;
    /** True saat aksi sedang berjalan; menonaktifkan tombol + tampilkan spinner. */
    processing?: boolean;
    title: string;
    /** Deskripsi konfirmasi. ReactNode agar bisa menyorot nama entitas. */
    description: ReactNode;
    confirmLabel: string;
    cancelLabel: string;
    /** Label tombol konfirmasi saat processing. Default: 'Processing...'. */
    processingLabel?: string;
    /** Nada visual dialog. Default: 'neutral'. */
    tone?: ConfirmActionTone;
    /** Ikon di badge header. */
    icon: LucideIcon;
    /**
     * Tata letak header:
     * - 'left'  : ikon + teks rata kiri.
     * - 'center': ikon di tengah, teks di tengah.
     */
    variant?: 'left' | 'center';
}

export function ConfirmActionDialog({
    open,
    onOpenChange,
    onConfirm,
    processing = false,
    title,
    description,
    confirmLabel,
    cancelLabel,
    processingLabel = 'Processing...',
    tone = 'neutral',
    icon: Icon,
    variant = 'left',
}: ConfirmActionDialogProps) {
    const isCenter = variant === 'center';

    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent className="flex max-h-[calc(100dvh-2rem)] flex-col overflow-hidden border bg-card p-0 shadow-lg sm:max-w-105 [&>button:last-child]:hidden">
                <div
                    className={cn(
                        'overflow-y-auto p-6',
                        isCenter && 'text-center',
                    )}
                >
                    <div
                        className={cn(
                            'mb-4 flex items-center justify-center rounded-full',
                            TONE_BADGE[tone],
                            isCenter ? 'mx-auto h-14 w-14' : 'h-12 w-12',
                        )}
                    >
                        <Icon className={isCenter ? 'h-7 w-7' : 'h-6 w-6'} />
                    </div>

                    <DialogHeader
                        className={isCenter ? 'text-center' : 'text-left'}
                    >
                        <DialogTitle className="text-xl font-semibold break-words text-foreground">
                            {title}
                        </DialogTitle>
                        <DialogDescription className="mt-2 text-sm break-words text-muted-foreground">
                            {description}
                        </DialogDescription>
                    </DialogHeader>
                </div>

                <DialogFooter className="flex flex-row gap-3 border-t border-border px-6 py-4">
                    <Button
                        variant="outline"
                        onClick={() => onOpenChange(false)}
                        disabled={processing}
                        className="h-auto min-h-11 min-w-0 flex-1 rounded-lg font-medium whitespace-normal"
                    >
                        {cancelLabel}
                    </Button>
                    <Button
                        variant={tone === 'danger' ? 'destructive' : 'default'}
                        onClick={onConfirm}
                        disabled={processing}
                        className="h-auto min-h-11 min-w-0 flex-1 rounded-lg font-semibold whitespace-normal"
                    >
                        {processing ? (
                            <>
                                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                                {processingLabel}
                            </>
                        ) : (
                            confirmLabel
                        )}
                    </Button>
                </DialogFooter>
            </DialogContent>
        </Dialog>
    );
}