import { Bell, CheckCircle2, Clock, X } from "lucide-react"
import useNotifications from "@/hooks/useNotifications";
import { useState } from "react";
import { useEffect } from "react";

interface TestNotificationProps {
    notificationTestId: number;
    onError: (message: string) => void;
}

export default function TestNotification({ notificationTestId, onError }: TestNotificationProps) {

    const { getNotificationTest, notificationTest } = useNotifications();


    const checkNotificationTest = async () => {
        try {
            await getNotificationTest(notificationTestId);
        } catch (error) {
            onError(error as string);
        }
    }
    useEffect(() => {
        checkNotificationTest();
    }, [notificationTestId]);

    return (
        <div>
            <dialog id="test_notification" className="modal">
                <div className="modal-box w-11/12 max-w-3xl border-l-4 border-success bg-base-100 shadow-xl">
                    <div className="flex items-center gap-4 mb-6">
                        <div className="bg-success/10 text-success rounded-full p-3 flex items-center justify-center">
                            <Bell className="h-7 w-7" />
                        </div>
                        <div>
                            <h3 className="font-bold text-2xl">Test Notification</h3>
                            <p className="text-sm text-base-content/70">Verify your notification settings</p>
                        </div>
                    </div>
    
                    <div className="bg-base-200/50 p-6 rounded-xl mb-6">
                        <div className="space-y-4">
                            <p className="text-base-content/90">
                                A notification test has been sent to the selected notification provider.
                            </p>
                            <p className="text-sm text-base-content/70">
                                You can click the button below to check the status of the notification test.
                            </p>
                            
                            <div className="flex items-center gap-3 mt-6">
                                <button className="btn btn-success gap-2" onClick={checkNotificationTest}>
                                    <Clock className="h-4 w-4" />
                                    Check Status
                                </button>
                                
                                <div className="flex items-center gap-2 px-4 py-2 bg-base-300 rounded-lg">
                                    <span className="text-sm font-medium">Status:</span>
                                    {!notificationTest?.sent && !notificationTest?.success && (
                                    <div className="flex items-center gap-1.5 text-warning">
                                        <Clock className="h-4 w-4" />
                                            <span className="text-sm">Pending</span>
                                        </div>
                                    )}
                                    {notificationTest?.sent && !notificationTest?.success && (
                                        <div className="flex items-center gap-1.5 text-error">
                                            <X className="h-4 w-4" />
                                            <span className="text-sm">Failed</span>
                                        </div>
                                    )}
                                    {notificationTest?.sent && notificationTest?.success && (
                                        <div className="flex items-center gap-1.5 text-success">
                                            <CheckCircle2 className="h-4 w-4" />
                                            <span className="text-sm">Success</span>
                                        </div>
                                    )}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="modal-action">
                        <form method="dialog" className="flex gap-3 w-full justify-end">
                            <button className="btn btn-outline">Close</button>
                        </form>
                    </div>
                </div>
            </dialog>
        </div>
    )
}