"use client";
import useNetworks from "@/hooks/useNetworks";
import { Trash2, AlertTriangle } from "lucide-react";
import { useState } from "react";
import ErrorToast from "@/components/Error";
import SuccessToast from "@/components/Success";

interface DeleteNetworkProps {
    networkId: string;
    onNetworkDeleted?: () => void;
}

export default function DeleteNetwork({ networkId, onNetworkDeleted }: DeleteNetworkProps) {
    const [error, setError] = useState("");
    const [success, setSuccess] = useState("");
    const { deleteNetwork } = useNetworks();
    
    const handleDelete = async () => {
        const response = deleteNetwork(networkId);
        if (typeof response === "string") {
            setError(response)
            return
        }

        try {
            const successMessage = await response
            if (onNetworkDeleted && successMessage) {
                onNetworkDeleted()
                setSuccess(successMessage)
            }
        } catch (apiError: any) {
            setError(apiError)
        }
    };

    return (
        <div>
            <dialog id="delete_network" className="modal">
                <div className="modal-box w-11/12 max-w-md border-l-4 border-error">
                    <div className="flex items-center gap-3 mb-3">
                        <div className="bg-error text-error-content rounded-full p-2 flex items-center justify-center">
                            <Trash2 className="h-6 w-6" />
                        </div>
                        <h3 className="font-bold text-xl">Delete Network</h3>
                    </div>
                    
                    <div className="bg-base-200 p-4 rounded-lg mb-4">
                        <p className="text-sm">
                            <span className="font-medium">Are you sure you want to delete this network?</span>
                        </p>
                        <p className="text-sm mt-2">
                            This will also delete all servers & applications associated with it.
                        </p>
                        <div className="mt-2 flex items-center gap-2 text-error">
                            <AlertTriangle className="h-5 w-5" />
                            <span className="font-bold">This action cannot be undone.</span>
                        </div>
                    </div>
                    
                    <div className="modal-action">
                        <form method="dialog" className="flex gap-2">
                            <button className="btn btn-outline">Cancel</button>
                            <button 
                                className="btn btn-error text-error-content" 
                                onClick={handleDelete}
                            >
                                Delete Network
                            </button>
                        </form>
                    </div>
                </div>
            </dialog>
            <ErrorToast message={error} show={error !== ''} onClose={() => setError('')} />
            <SuccessToast message={success} show={success !== ''} onClose={() => setSuccess('')} />
        </div>
    );
}