"use client";

import { useState } from "react";
import ErrorToast from "@/components/Error";
import SuccessToast from "@/components/Success";
import useNetworks from "@/hooks/useNetworks";
import { Network } from "@/app/types";
import { PencilLine, Network as NetworkIcon, Globe, Wifi } from "lucide-react";

interface EditNetworkProps {
    onNetworkEdited?: () => void;
    siteId: string;
    network: Network;
}

export default function EditNetwork({ onNetworkEdited, siteId, network }: EditNetworkProps) {
    const [editName, setEditName] = useState(network.name);
    const [editIpv4Subnet, setEditIpv4Subnet] = useState(network.ipv4Subnet);
    const [editIpv6Subnet, setEditIpv6Subnet] = useState(network.ipv6Subnet);
    const [editGateway, setEditGateway] = useState(network.gateway);
    const [error, setError] = useState("");
    const [success, setSuccess] = useState("");
    const { editNetwork } = useNetworks();
    
    const handleEdit = async () => {
        const response = editNetwork({ 
            id: network.id, 
            siteId, 
            name: editName, 
            ipv4Subnet: editIpv4Subnet, 
            ipv6Subnet: editIpv6Subnet, 
            gateway: editGateway 
        });
        if (typeof response === "string") {
            setError(response)
            return
        }

        try{
            const successMessage = await response
            if (onNetworkEdited && successMessage) {
                onNetworkEdited()
                setSuccess(successMessage)
            }
        } catch (apiError: any) {
            setError(apiError)
        } finally {
            setEditName("")
            setEditIpv4Subnet("")
            setEditIpv6Subnet("")
            setEditGateway("")
        }
    };

    return (
        <div>
            <dialog id="edit_network" className="modal">
                <div className="modal-box w-11/12 max-w-3xl border-l-4 border-primary">
                    <div className="flex items-center gap-3 mb-3">
                        <div className="bg-primary text-primary-content rounded-full p-2 flex items-center justify-center">
                            <PencilLine className="h-6 w-6" />
                        </div>
                        <h3 className="font-bold text-xl">Edit Network</h3>
                    </div>
    
                    <div className="bg-base-200 p-4 rounded-lg mb-4">
                        <div className="space-y-4">
                            <div className="form-control">
                                <label className="label">
                                    <div className="flex items-center gap-2">
                                        <NetworkIcon className="h-4 w-4 opacity-70" />
                                        <span className="label-text font-medium">Network Name</span>
                                    </div>
                                </label>
                                <input 
                                    type="text" 
                                    className="input input-bordered w-full" 
                                    placeholder="e.g. VLAN 10"
                                    value={editName}
                                    onChange={(e) => setEditName(e.target.value)}
                                />
                            </div>

                            <div className="form-control">
                                <label className="label">
                                    <div className="flex items-center gap-2">
                                        <Globe className="h-4 w-4 opacity-70" />
                                        <span className="label-text font-medium">IPv4 Subnet</span>
                                        <span className="ml-1 text-xs opacity-60">(optional)</span>
                                    </div>
                                </label>
                                <input 
                                    type="text" 
                                    className="input input-bordered w-full" 
                                    placeholder="Enter the IPv4 subnet"
                                    value={editIpv4Subnet}
                                    onChange={(e) => setEditIpv4Subnet(e.target.value)}
                                />
                            </div>
                            
                            <div className="form-control">
                                <label className="label">
                                    <div className="flex items-center gap-2">
                                        <Globe className="h-4 w-4 opacity-70" />
                                        <span className="label-text font-medium">IPv6 Subnet</span>
                                        <span className="ml-1 text-xs opacity-60">(optional)</span>
                                    </div>
                                </label>
                                <input 
                                    type="text" 
                                    className="input input-bordered w-full" 
                                    placeholder="Enter the IPv6 subnet"
                                    value={editIpv6Subnet}
                                    onChange={(e) => setEditIpv6Subnet(e.target.value)}
                                />
                            </div>
                            
                            <div className="form-control">
                                <label className="label">
                                    <div className="flex items-center gap-2">
                                        <Wifi className="h-4 w-4 opacity-70" />
                                        <span className="label-text font-medium">Gateway</span>
                                        <span className="ml-1 text-xs opacity-60">(optional)</span>
                                    </div>
                                </label>
                                <input 
                                    type="text" 
                                    className="input input-bordered w-full" 
                                    placeholder="Enter the gateway"
                                    value={editGateway}
                                    onChange={(e) => setEditGateway(e.target.value)}
                                />
                            </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-primary" 
                                onClick={handleEdit}
                            >
                                Save Changes
                            </button>
                        </form>
                    </div>
                </div>
            </dialog>
            <ErrorToast message={error} show={error !== ''} onClose={() => setError('')} />
            <SuccessToast message={success} show={success !== ''} onClose={() => setSuccess('')} />
        </div>
    );
}