starr-philproperties/src/components/generic/NotificationDetailDialog.jsx

import { useState } from "react";
import { useNavigate } from "react-router-dom";
import { Copy, Check, ArrowRight } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog";
import { Separator } from "@/components/ui/separator";
import { Spinner } from "@/components/ui/spinner";
import { useDateFormat } from "@/hooks/useDateFormat";
import { NotificationIcon, getTypeAccent, getTypeButtonClasses, resolveNotificationLink } from "@/components/generic/notificationDisplay";

export default function NotificationDetailDialog({ notification, onOpenChange }) {
    const { fmtDateTime } = useDateFormat();
    const navigate = useNavigate();
    const [copiedCode, setCopiedCode] = useState(false);
    const [navigating, setNavigating] = useState(false);

    async function handleCopyCode(code) {
        await navigator.clipboard.writeText(code);
        setCopiedCode(true);
        setTimeout(() => setCopiedCode(false), 2000);
    }

    const link = notification ? resolveNotificationLink(notification.type, notification.data) : null;

    async function handleGo() {
        if (!link) return;
        setNavigating(true);
        await link.go(navigate);
        setNavigating(false);
        onOpenChange(false);
    }

    return (
        <Dialog open={!!notification} onOpenChange={(open) => { if (!open) { onOpenChange(false); setCopiedCode(false); } }}>
            <DialogContent className="sm:max-w-lg">
                <DialogHeader>
                    <div className="flex items-center gap-3 mb-1">
                        <div className={`flex h-9 w-9 items-center justify-center rounded-full ${getTypeAccent(notification?.type)}`}>
                            <NotificationIcon
                                type={notification?.type}
                                className="h-5 w-5"
                            />
                        </div>
                        <DialogTitle className="leading-snug">{notification?.title}</DialogTitle>
                    </div>
                    <DialogDescription className="text-sm text-foreground/80 leading-relaxed">
                        {notification?.message}
                    </DialogDescription>
                </DialogHeader>

                <Separator />

                {notification?.data?.groupCode && (
                    <>
                        <div className="flex flex-col gap-1.5">
                            <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
                                Group Code
                            </p>
                            <div className="flex items-center gap-2">
                                <span className="flex-1 font-mono text-sm bg-muted rounded-lg px-3 py-2 truncate">
                                    {notification.data.groupCode}
                                </span>
                                <Button
                                    size="sm"
                                    variant="outline"
                                    className="shrink-0 gap-1.5"
                                    onClick={() => handleCopyCode(notification.data.groupCode)}
                                >
                                    {copiedCode
                                        ? <><Check className="size-3.5" /> Copied</>
                                        : <><Copy className="size-3.5" /> Copy</>
                                    }
                                </Button>
                            </div>
                            <p className="text-[11px] text-muted-foreground">
                                Share this code with others so they can join your group.
                            </p>
                        </div>
                        <Separator />
                    </>
                )}

                {link && (
                    <Button
                        variant="outline"
                        className={`w-full gap-1.5 ${getTypeButtonClasses(notification?.type)}`}
                        onClick={handleGo}
                        disabled={navigating}
                    >
                        {navigating ? <Spinner className="size-4" /> : <>{link.label} <ArrowRight className="size-3.5" /></>}
                    </Button>
                )}

                <div className="flex items-center justify-between text-xs text-muted-foreground">
                    <span className="capitalize">{notification?.type?.replace("_", " ")}</span>
                    <span>{notification ? fmtDateTime(notification.createdAt) : ""}</span>
                </div>
            </DialogContent>
        </Dialog>
    );
}