'use client';

import { useState } from 'react';
import AddNotification from '@/components/dialogues/AddNotification';
import DeleteNotification from '@/components/dialogues/DeleteNotification';
import TestNotification from '@/components/dialogues/TestNotification';
import useNotifications from '@/hooks/useNotifications';
import { Plus, Trash2, Play, Bell } from 'lucide-react';
import Loading from '@/components/Loading';

export const NotificationSettings = ({ onError, onSuccess }: { onError: (message: string) => void, onSuccess: (message: string) => void }) => {
    const { loadNotifications, notifications, loading, testNotification } = useNotifications();
    const [deleteNotificationId, setDeleteNotificationId] = useState<number | null>(null);
    const [notificationTestId, setNotificationTestId] = useState<number | null>(null);


    const testNotificationHandler = async (notificationProviderId: number) => {
        (document.getElementById('test_notification') as HTMLDialogElement)?.showModal();
        const notificationTest = await testNotification(notificationProviderId);
        setNotificationTestId(notificationTest);
    }

  return (
    <div>
        <div className="w-full bg-base-200 p-4 rounded-2xl border border-stone-800">
            <div className="flex items-center justify-between">
                <div>
                    <h2 className="text-lg font-bold">Notification Provider Settings</h2>
                    <p className="text-sm opacity-70">Manage your notification providers</p>
                </div>
                <button className="btn btn-primary" onClick={() => (document.getElementById('add_notification') as HTMLDialogElement)?.showModal()}>
                    <Plus className="w-5 h-5" />
                    Add Provider
                </button>
            </div>
            {loading ? (
                <div className="flex justify-center items-center h-64 w-full">
                    <Loading />
                </div>
            ) : notifications && notifications.length > 0 ? (
                <div className="rounded-xl overflow-hidden border border-base-200 mt-4">
                    <div className='overflow-x-auto'>
                        <table className='table table-zebra table-pin-cols'>
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Name</th>
                                    <th>Type</th>
                                    <th className='w-24 text-center'>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                {notifications.map((notification: any) => (
                                    <tr key={notification.id}>
                                        <td>{notification.id}</td>
                                        <td>{notification.name}</td>
                                        <td>{notification.type}</td>
                                        <td>
                                            <div className='flex items-center gap-2'>
                                                <button className='btn btn-sm btn-success' onClick={() => testNotificationHandler(notification.id)}><Play className='w-4 h-4' /></button>
                                                <button className='btn btn-sm btn-error' onClick={() => {setDeleteNotificationId(notification.id); (document.getElementById('delete_notification') as HTMLDialogElement)?.showModal()}}><Trash2 className='w-4 h-4' /></button>
                                            </div>
                                        </td>
                                    </tr>
                                ))}
                            </tbody>
                        </table>
                    </div>
                </div>
            ) : (
                <div className='pt-4'>
                    <div className="flex flex-col items-center justify-center py-12 bg-base-300 rounded-xl">
                        <div className="bg-base-100 p-4 rounded-full mb-4">
                            <Bell className="h-8 w-8 text-base-content/50" />
                        </div>
                        <p className="text-base-content/70 mb-4">No notification providers have been added yet.</p>
                    </div>
                </div>
            )}
            <AddNotification onNotificationAdded={loadNotifications} onSuccess={onSuccess} onError={onError} />
            {deleteNotificationId && (
                <DeleteNotification notificationId={deleteNotificationId} onNotificationDeleted={loadNotifications} onError={onError} onSuccess={onSuccess} />
            )}
            {notificationTestId && (
                <TestNotification notificationTestId={notificationTestId} onError={onError} />
            )}
        </div>
    </div>
  );
};