'use client';

import { useState } from 'react';
import Link from "next/link";

const GrantSudoLink = ({ text, isCard }) => {
    const [isHovered, setIsHovered] = useState(false);
    const [showDialog, setShowDialog] = useState(false);
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');

    // hover over eeffect
    const handleMouseEnter = () => {
        setIsHovered(true);
    };
    const handleMouseLeave = () => {
        setIsHovered(false);
    };
    const cardStyle = {
        boxShadow: isHovered ? '0 4px 20px rgba(0, 0, 0, 0.2)' : '0 1px 3px rgba(0, 0, 0, 0.1)',
        transition: 'box-shadow 0.3s ease-in-out',
    };

    // username dialog box
    const openDialog = () => {
        setShowDialog(true);
    };
    const closeDialog = () => {
        setShowDialog(false);
    };
    const handleGrantSudoRights = async () => {
        try {
            const response = await fetch('/api/grant-sudo', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ username, password }),
            });
            const data = await response.json();
            if (response.ok) {
                alert('Sudo rights granted successfully.');
            } else {
                alert(data.error);
            }
            closeDialog();
        } catch (error) {
            alert('Error granting sudo rights');
        }
    };

    return (
        <div>
            {isCard ? (
                <Link href="#" onClick={openDialog} className="text-decoration-none">
                    <div
                        className="card h-100"
                        style={cardStyle}
                        onClick={openDialog}
                        onMouseEnter={handleMouseEnter}
                        onMouseLeave={handleMouseLeave}
                    >
                        <div className="card-body text-center">
                            <h5 className="card-title">{text}</h5>
                            <p className="card-text">You need to do this once</p>
                        </div>
                    </div>
                </Link>
            ) : (
                <a href="#" onClick={openDialog} className="text-decoration-none">
                    {text}
                </a>
            )}

            {showDialog && (
                <div className="modal show" style={{ display: 'block' }}>
                    <div className="modal-dialog">
                        <div className="modal-content">
                            <div className="modal-header">
                                <h5 className="modal-title">Grant Sudo Rights</h5>
                                <button type="button" className="btn-close" aria-label="Close" onClick={closeDialog}></button>
                            </div>
                            <div className="modal-body">
                                <div className="form-group">
                                    <label htmlFor="username">Username</label>
                                    <input
                                        type="text"
                                        className="form-control"
                                        id="username"
                                        value={username}
                                        onChange={(e) => setUsername(e.target.value)}
                                    />
                                </div>
                                <div className="form-group">
                                    <label htmlFor="password">Password</label>
                                    <input
                                        type="password"
                                        className="form-control"
                                        id="password"
                                        value={password}
                                        onChange={(e) => setPassword(e.target.value)}
                                    />
                                </div>
                            </div>
                            <div className="modal-footer">
                                <button type="button" className="btn btn-secondary" onClick={closeDialog}>
                                    Cancel
                                </button>
                                <button type="button" className="btn btn-primary" onClick={handleGrantSudoRights}>
                                    Grant Sudo Rights
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            )}
        </div>
    );
};

export default GrantSudoLink;