"use client";

import { useState } from "react";
import ErrorToast from "@/components/Error";
import SuccessToast from "@/components/Success";
import useNetworks from "@/hooks/useNetworks";

interface AddNetworkProps {
    onNetworkAdded?: () => void;
    siteId: string;
}

export default function AddNetwork({ onNetworkAdded, siteId }: AddNetworkProps) {
    const [name, setName] = useState("");
    const [ipv4Subnet, setIpv4Subnet] = useState("");
    const [ipv6Subnet, setIpv6Subnet] = useState("");
    const [gateway, setGateway] = useState("");
    const [error, setError] = useState("");
    const [success, setSuccess] = useState("");
    const { addNetwork } = useNetworks();
    

    return (
        <div>
            <dialog id="add_network" className="modal">
                <div className="modal-box w-2/3 max-w-2/3">
                    <div className="flex flex-col gap-4">
                        <header>
                            <h3 className="text-2xl font-semibold tracking-tight">Add New Network</h3>
                            <p className="text-sm text-gray-500 mt-1">Provide details for the new network</p>
                        </header>
    
                        <div className="space-y-4">
                            <div className="form-control">
                                <label className="label">
                                    <span className="label-text font-medium text-base">Network Name</span>
                                </label>
                                <input 
                                    type="text" 
                                    className="input input-bordered w-full focus:ring-2" 
                                    placeholder="e.g. VLAN 10"
                                    value={name}
                                    onChange={(e) => setName(e.target.value)}
                                />
                            </div>

                            <div className="form-control">
                                <label className="label">
                                    <span className="label-text font-medium text-base">
                                        IPv4 Subnet
                                    </span>
                                    <span className="ml-2 text-sm font-normal text-gray-400">(optional)</span>
                                </label>
                                <input 
                                    type="text" 
                                    className="input input-bordered w-full focus:ring-2" 
                                    placeholder="Enter the IPv4 subnet"
                                    value={ipv4Subnet}
                                    onChange={(e) => setIpv4Subnet(e.target.value)}
                                />
                            </div>
                            <div className="form-control">
                                <label className="label">
                                    <span className="label-text font-medium text-base">
                                        IPv6 Subnet
                                    </span>
                                    <span className="ml-2 text-sm font-normal text-gray-400">(optional)</span>
                                </label>
                                <input 
                                    type="text" 
                                    className="input input-bordered w-full focus:ring-2" 
                                    placeholder="Enter the IPv6 subnet"
                                    value={ipv6Subnet}
                                    onChange={(e) => setIpv6Subnet(e.target.value)}
                                />
                            </div>
                            <div className="form-control">
                                <label className="label">
                                    <span className="label-text font-medium text-base">
                                        Gateway
                                    </span>
                                    <span className="ml-2 text-sm font-normal text-gray-400">(optional)</span>
                                </label>
                                <input 
                                    type="text" 
                                    className="input input-bordered w-full focus:ring-2" 
                                    placeholder="Enter the gateway"
                                    value={gateway}
                                    onChange={(e) => setGateway(e.target.value)}
                                />
                            </div>
                        </div>

                        <div className="modal-action flex justify-end">
                            <form method="dialog" className="flex gap-3">
                                <button className="btn btn-ghost">Cancel</button>
                                <button className="btn btn-primary px-6" onClick={() => addNetwork({ id: "0", siteId, name, ipv4Subnet, ipv6Subnet, gateway })}>Add Network</button>
                            </form>
                        </div>
                    </div>
                </div>
            </dialog>
            <ErrorToast message={error} show={error !== ''} onClose={() => setError('')} />
            <SuccessToast message={success} show={success !== ''} onClose={() => setSuccess('')} />
        </div>
    )
}