"use client";

import { useState } from "react";
import useNotification from "@/hooks/useNotifications";
import { Bell, Text, BellRing, Braces } from "lucide-react";

interface AddNotificationProps {
    onNotificationAdded?: () => void;
    onError?: (message: string) => void;
    onSuccess?: (message: string) => void;
}

export default function AddNotification({ onNotificationAdded, onError, onSuccess }: AddNotificationProps) {
    const [name, setName] = useState("");
    const [type, setType] = useState("Select a type");
    const [telegramBotToken, setTelegramBotToken] = useState("");
    const [telegramChatId, setTelegramChatId] = useState("");
    const [nftyUrl, setNftyUrl] = useState("");
    const [ntfyToken, setNftyToken] = useState("");
    const [smtpHost, setSmtpHost] = useState("");
    const [smtpPort, setSmtpPort] = useState("");
    const [smtpUsername, setSmtpUsername] = useState("");
    const [smtpPassword, setSmtpPassword] = useState("");
    const [smtpFrom, setSmtpFrom] = useState("");
    const [smtpTo, setSmtpTo] = useState("");
    const [smtpSecure, setSmtpSecure] = useState(false);

    const { addNotification } = useNotification();

    const clearForm = () => {
        setName("")
        setType("Select a type")
        setTelegramBotToken("")
        setTelegramChatId("")
        setNftyUrl("")
        setNftyToken("")
        setSmtpHost("")
        setSmtpPort("")
        setSmtpUsername("")
        setSmtpPassword("")
        setSmtpFrom("")
        setSmtpTo("")
        setSmtpSecure(false)
    }

    const addNotificationHandler = async () => {
        let config = "";
        if (type === "TELEGRAM") {
            config = `{ "token": "${telegramBotToken}", "chat_id": "${telegramChatId}" }`;
        } else if (type === "NTFY") {
            config = `{ "url": "${nftyUrl}", "token": "${ntfyToken}" }`;
        } else if (type === "SMTP") {
            config = `{ "host": "${smtpHost}", "port": "${smtpPort}", "username": "${smtpUsername}", "password": "${smtpPassword}", "from": "${smtpFrom}", "to": "${smtpTo}", "secure": "${smtpSecure}" }`;
        }
        const response = addNotification(name, type, config);
        if (typeof response === "string") {
            onError && onError(response)
            clearForm();
            return
        }
        try {
            const successMessage = await response
            if (onSuccess && successMessage) {
                onSuccess('Notification Provider added successfully')
                onNotificationAdded && onNotificationAdded()
            }
        } catch (apiError: any) {
            onError && onError(apiError)
        } finally {
            clearForm();
        }
    }

    return (
        <div>
            <dialog id="add_notification" className="modal">
                <div className="modal-box w-11/12 max-w-3xl border-l-4 border-success flex flex-col max-h-[70vh]">
                    <div className="flex items-center gap-3 mb-3">
                        <div className="bg-success text-success-content rounded-full p-2 flex items-center justify-center">
                            <Bell className="h-6 w-6" />
                        </div>
                        <h2 className="text-xl font-bold">Add Notification</h2>
                    </div>

                    <div className="bg-base-200 p-4 rounded-lg mb-4 flex-1 flex flex-col overflow-hidden">
                        <div className="space-y-4">
                            <div className="form-control">
                                <div className="flex items-center gap-2">
                                    <label className="label">
                                        <Text className="h-4 w-4 opacity-70" />
                                        <span className="label-text font-medium">Name</span>
                                    </label>
                                </div>
                                <input type="text" className="input input-bordered w-full" placeholder="e.g. Telegram" value={name} onChange={(e) => setName(e.target.value)} />
                            </div>
                            <div className="form-control">
                                <div className="flex items-center gap-2">
                                    <label className="label">
                                        <BellRing className="h-4 w-4 opacity-70" />
                                        <span className="label-text font-medium">Type</span>
                                    </label>
                                </div>
                                <select className="select select-bordered w-full" value={type} onChange={(e) => setType(e.target.value)}>
                                    <option disabled>Select a type</option>
                                    <option value="SMTP">SMTP</option>
                                    <option value="TELEGRAM">Telegram</option>
                                    <option value="NTFY">NTFY</option>
                                </select>
                            </div>
                        </div>

                        <div className="flex-1 overflow-y-auto pt-4 pr-2">
                            {type === "TELEGRAM" && (
                                <div className="space-y-4">
                                    <div className="flex items-center gap-2">
                                        <label className="label">
                                            <Braces className="h-4 w-4 opacity-70" />
                                            <span className="label-text font-medium">Telegram Configuration</span>
                                        </label>
                                    </div>
                                    
                                    <div className="bg-base-300 p-4 rounded-lg">
                                        <h3 className="text-sm font-medium mb-3">Bot Settings</h3>
                                        <div className="grid grid-cols-1 gap-4">
                                            <div className="form-control">
                                                <label className="label">
                                                    <span className="label-text-alt">Bot Token</span>
                                                </label>
                                                <input type="text" className="input input-bordered w-full" placeholder="123456789:ABCdefGHIjklMNOpqrsTUVwxyz" value={telegramBotToken} onChange={(e) => setTelegramBotToken(e.target.value)} />
                                            </div>
                                            <div className="form-control">
                                                <label className="label">
                                                    <span className="label-text-alt">Chat ID</span>
                                                </label>
                                                <input type="text" className="input input-bordered w-full" placeholder="-1001234567890" value={telegramChatId} onChange={(e) => setTelegramChatId(e.target.value)} />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            )}

                            {type === "NTFY" && (
                                <div className="space-y-4">
                                    <div className="flex items-center gap-2">
                                        <label className="label">
                                            <Braces className="h-4 w-4 opacity-70" />
                                            <span className="label-text font-medium">NTFY Configuration</span>
                                        </label>
                                    </div>
                                    
                                    <div className="bg-base-300 p-4 rounded-lg">
                                        <h3 className="text-sm font-medium mb-3">Server Settings</h3>
                                        <div className="grid grid-cols-1 gap-4">
                                            <div className="form-control">
                                                <label className="label">
                                                    <span className="label-text-alt">Server URL</span>
                                                </label>
                                                <input type="text" className="input input-bordered w-full" placeholder="https://ntfy.sh" value={nftyUrl} onChange={(e) => setNftyUrl(e.target.value)} />
                                            </div>
                                            <div className="form-control">
                                                <label className="label">
                                                    <span className="label-text-alt">Access Token</span>
                                                </label>
                                                <input type="password" className="input input-bordered w-full" placeholder="••••••••" value={ntfyToken} onChange={(e) => setNftyToken(e.target.value)} />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            )}

                            {type === "SMTP" && (
                                <div className="space-y-4">
                                    <div className="flex items-center gap-2">
                                        <label className="label">
                                            <Braces className="h-4 w-4 opacity-70" />
                                            <span className="label-text font-medium">SMTP Configuration</span>
                                        </label>
                                    </div>
                                    
                                    <div className="bg-base-300 p-4 rounded-lg">
                                        <h3 className="text-sm font-medium mb-3">SMTP-Server Settings</h3>
                                        <div className="grid grid-cols-2 gap-4">
                                            <div className="form-control">
                                                <label className="label">
                                                    <span className="label-text-alt">Host</span>
                                                </label>
                                                <input type="text" className="input input-bordered w-full" placeholder="smtp.example.com" value={smtpHost} onChange={(e) => setSmtpHost(e.target.value)} />
                                            </div>
                                            <div className="form-control">
                                                <label className="label">
                                                    <span className="label-text-alt">Port</span>
                                                </label>
                                                <input type="text" className="input input-bordered w-full" placeholder="587" value={smtpPort} onChange={(e) => setSmtpPort(e.target.value)} />
                                            </div>
                                        </div>
                                        <div className="mt-4">
                                            <label className="label cursor-pointer justify-start gap-2">
                                                <input type="checkbox" className="checkbox checkbox-sm" checked={smtpSecure} onChange={(e) => setSmtpSecure(e.target.checked)} />
                                                <span className="label-text">Use secure connection (TLS/SSL)</span>
                                            </label>
                                        </div>
                                    </div>

                                    <div className="bg-base-300 p-4 rounded-lg">
                                        <h3 className="text-sm font-medium mb-3">SMTP-Authentication</h3>
                                        <div className="grid grid-cols-2 gap-4">
                                            <div className="form-control">
                                                <label className="label">
                                                    <span className="label-text-alt">Username</span>
                                                </label>
                                                <input type="text" className="input input-bordered w-full" placeholder="user@example.com" value={smtpUsername} onChange={(e) => setSmtpUsername(e.target.value)} />
                                            </div>
                                            <div className="form-control">
                                                <label className="label">
                                                    <span className="label-text-alt">Password</span>
                                                </label>
                                                <input type="password" className="input input-bordered w-full" placeholder="••••••••" value={smtpPassword} onChange={(e) => setSmtpPassword(e.target.value)} />
                                            </div>
                                        </div>
                                    </div>

                                    <div className="bg-base-300 p-4 rounded-lg">
                                        <h3 className="text-sm font-medium mb-3">Email Settings</h3>
                                        <div className="grid grid-cols-2 gap-4">
                                            <div className="form-control">
                                                <label className="label">
                                                    <span className="label-text-alt">From Address</span>
                                                </label>
                                                <input type="email" className="input input-bordered w-full" placeholder="sender@example.com" value={smtpFrom} onChange={(e) => setSmtpFrom(e.target.value)} />
                                            </div>
                                            <div className="form-control">
                                                <label className="label">
                                                    <span className="label-text-alt">To Address</span>
                                                </label>
                                                <input type="email" className="input input-bordered w-full" placeholder="recipient@example.com" value={smtpTo} onChange={(e) => setSmtpTo(e.target.value)} />
                                            </div>
                                        </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">Cancel</button>
                            <button className="btn btn-success text-success-content" onClick={addNotificationHandler}>Add</button>
                        </form>
                    </div>
                </div>
            </dialog>
        </div>
    )
}