import React, { useState, useEffect } from 'react';
import './VMProvisioningForm.css';

function VMProvisioningForm({ account }) {
    const [vmConfig, setVmConfig] = useState({
        name: '',
        os: '',
        size: '',
        region: ''
    });
    const [message, setMessage] = useState('');
    const [isError, setIsError] = useState(false);

    // Extract the username (email) from the account object
    useEffect(() => {
        if (account) {
            setVmConfig(prevState => ({
                ...prevState,
                username: account.username
            }));
        }
    }, [account]);

    const handleInputChange = (e) => {
        const { name, value } = e.target;
        setVmConfig({ ...vmConfig, [name]: value });
    };

    const backendUrl = window.__RUNTIME_CONFIG__.API_URL || 'http://backend10:5000';

    const handleSubmit = async (e) => {
        e.preventDefault();
        setMessage('');
        setIsError(false);


        if (!account || !account.username) {
            setIsError(true);
            setMessage('User is not logged in.');
            return;
        }

        const provisioningData = {
            ...vmConfig,
            username: account.username
        };
        try {
            const response = await fetch(`${backendUrl}/provision-vm`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Access-Control-Allow-Origin': '*'
                },
                body: JSON.stringify(provisioningData),
            });

            if (response.ok) {
                const result = await response.json();
                setMessage('VM provisioning data saved successfully.');
            } else {
                setIsError(true);
                setMessage('Server responded with an error.');
            }
        } catch (error) {
            setIsError(true);
            setMessage('Failed to send data to the server.');
        }
    };
    

    return (
        <div className="form-container">
            <form onSubmit={handleSubmit} className="vm-form">
                <div>
                    <label>VM Name:</label>
                    <input
                        type="text"
                        name="name"
                        value={vmConfig.name}
                        onChange={handleInputChange}
                        placeholder="Enter VM Name"
                    />
                </div>
                <div>
                   <label>Operating System:</label>
                   <select name="os" value={vmConfig.os} onChange={handleInputChange}>
                   <option value="">Select OS</option>
                   <option value="Windows 11">Windows 11</option>
                   <option value="Windows 10">Windows 10</option>
                   {/* Add other OS options as needed */}
                 </select>
                </div>

                <div>
                    <label>VM Size:</label>
                    <select name="size" value={vmConfig.size} onChange={handleInputChange}>
                        <option value="">Select Size</option>
                        <option value="Standard_D4s_v3">Standard_D4s_v3</option>
                        <option value="Standard_DS2_v2">Standard_DS2_v2</option>
                        <option value="Standard_DS3_v2">Standard_DS3_v2</option>
                        {/* Add other size options */}
                    </select>
                </div>
                <div>
                    <label>Region:</label>
                    <select name="region" value={vmConfig.region} onChange={handleInputChange}>
                        <option value="">Select Region</option>
                        <option value="westeurope">West Europe</option>
                        <option value="northeurope">North Europe</option>
                        {/* Add other region options */}
                    </select>
                </div>
                <button type="submit">Submit</button>
            </form>
            {message && (
                <div className={isError ? 'error-message' : 'success-message'}>
                    {message}
                </div>
            )}
        </div>
    );
}

export default VMProvisioningForm;

const express = require('express');
const fetch = require('node-fetch');
const { DefaultAzureCredential } = require('@azure/identity');
const { SecretClient } = require('@azure/keyvault-secrets');
const sql = require('mssql');

const osMapping = {
    "Windows 11": {
        imageOffer: "windows-11",
        imageSku: "win11-22h2-pro"
    },
    "Windows 10": {
        imageOffer: "windows-10",
        imageSku: "win10-22h2-pro-g2"
    },
    // Add other OS mappings here
};

function processVmConfig(requestBody) {
    const osDetails = osMapping[requestBody.os];
    if (!osDetails) {
        throw new Error('Unsupported OS selected');
    }
    return {
        vmName: requestBody.name,
        imageOffer: osDetails.imageOffer,
        imageSku: osDetails.imageSku,
        vmSize: requestBody.size,
        region: requestBody.region,
        username: requestBody.username // Include the username in the processed config
    };
}

const app = express();
const port = 3001;
app.use(express.json());

// Azure Key Vault details
const credential = new DefaultAzureCredential();
const vaultName = process.env["KEY_VAULT_NAME"];
const url = `https://${vaultName}.vault.azure.net`;
const client = new SecretClient(url, credential);

// Function to get secret from Azure Key Vault
async function getSecret(secretName) {
    const secret = await client.getSecret(secretName);
    return secret.value;
}

// Function to connect to Azure SQL Database
async function getSqlConfig() {
    const username = await getSecret("sql-admin");
    const password = await getSecret("sql-pass");
    const server = await getSecret("sql-server");
    const database = await getSecret("sql-db");

    return {
        user: username,
        password: password,
        server: server,
        database: database,
        options: {
            encrypt: true,
            trustServerCertificate: false
        }
    };
}

app.post('/provision-vm', async (req, res) => {
    try {
        const vmConfig = processVmConfig(req.body);

        // Connect to the SQL database
        let pool = await sql.connect(await getSqlConfig());
        
        // Perform the SQL INSERT operation
        let result = await pool.request()
            .input('username', sql.NVarChar, vmConfig.username) // Add username input
            .input('vmName', sql.NVarChar, vmConfig.vmName)
            .input('imageOffer', sql.NVarChar, vmConfig.imageOffer)
            .input('imageSku', sql.NVarChar, vmConfig.imageSku)
            .input('vmSize', sql.NVarChar, vmConfig.vmSize)
            .input('region', sql.NVarChar, vmConfig.region)
            .query(`
                INSERT INTO vmprovs 
                (Username, VmName, ImageOffer, ImageSku, VmSize, Location) 
                VALUES 
                (@username, @vmName, @imageOffer, @imageSku, @vmSize, @region)
            `);

        res.status(201).send({ message: 'VM provisioning data saved successfully' });
    } catch (error) {
        console.error("Error details:", error);
        res.status(500).send({ message: 'Error saving VM provisioning data', error: error.message });
    }
});

app.listen(port, () => {
    console.log(`Server running on http://localhost:${port}`);
});

CREATE TABLE vmprov (
    RequestId INT IDENTITY(1,1) PRIMARY KEY,
    VmName NVARCHAR(50) NOT NULL,
    VmSize NVARCHAR(50) NOT NULL,
    ImageOffer NVARCHAR(50) NOT NULL,
    ImageSku NVARCHAR(100) NOT NULL,
    Location NVARCHAR(50) NOT NULL,
    ApprovalStatus NVARCHAR(50) NOT NULL,
	Username NVARCHAR(50) NOT NULL,
    Timestamp datetime2 NOT NULL DEFAULT GETDATE()
);
ALTER DATABASE provdb01  
SET CHANGE_TRACKING = ON  
(CHANGE_RETENTION = 2 DAYS, AUTO_CLEANUP = ON)

{
  "type": "Http",
  "inputs": {
    "uri": "https://management.azure.com/subscriptions/xxxxx/resourceGroups/xxxxx/providers/Microsoft.Network/publicIPAddresses/pip-@{triggerBody()?['VmName']}?api-version=2021-02-01\n",
    "method": "PUT",
    "headers": {
      "Content-Type": "application/json"
    },
    "body": {
      "location": "@{triggerBody()?['Location']}",
      "properties": {
        "publicIPAllocationMethod": "Dynamic",
        "publicIPAddressVersion": "IPv4"
      }
    },
    "authentication": {
      "type": "ManagedServiceIdentity",
      "audience": "https://management.azure.com"
    }
  }
}