import React, { useState, useEffect } from 'react';
import { Card, Switch, List, Typography, message, Tooltip, Tag } from 'antd';
import { SafetyCertificateOutlined, InfoCircleOutlined } from '@ant-design/icons';

const { Text } = Typography;

const HardeningSettings = () => {
    const [settings, setSettings] = useState({
        disable_xmlrpc: false,
        hide_version: false,
        disable_file_editor: false,
        block_user_enum: false
    });
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        fetchSettings();
    }, []);

    const fetchSettings = async () => {
        try {
            const response = await fetch(`${window.wpApiSettings.root}safe-sites/v1/hardening/settings`, {
                headers: { 'X-WP-Nonce': window.wpApiSettings.nonce }
            });
            const data = await response.json();
            if (data.success) {
                setSettings(data.data);
            }
        } catch (error) {
            console.error('Error fetching hardening settings:', error);
        } finally {
            setLoading(false);
        }
    };

    const handleToggle = async (key, checked) => {
        const newSettings = { ...settings, [key]: checked };
        setSettings(newSettings); // Optimistic update

        try {
            const response = await fetch(`${window.wpApiSettings.root}safe-sites/v1/hardening/settings`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-WP-Nonce': window.wpApiSettings.nonce
                },
                body: JSON.stringify({ [key]: checked })
            });
            const data = await response.json();
            if (data.success) {
                message.success('Security setting updated');
            } else {
                throw new Error(data.message);
            }
        } catch (error) {
            message.error('Failed to update setting');
            setSettings(settings); // Revert
        }
    };

    const features = [
        {
            key: 'disable_xmlrpc',
            title: 'Disable XML-RPC',
            description: 'Blocks XML-RPC requests to prevent brute force attacks and DDoS.',
            risk: 'Low Risk'
        },
        {
            key: 'hide_version',
            title: 'Hide WordPress Version',
            description: 'Hides your WordPress version from page source to make reconnaissance harder.',
            risk: 'Safe'
        },
        {
            key: 'disable_file_editor',
            title: 'Disable File Editor',
            description: 'Prevents file editing from the WordPress dashboard.',
            risk: 'Recommended'
        },
        {
            key: 'block_user_enum',
            title: 'Block User Enumeration',
            description: 'Prevents bots from fishing for usernames via ?author=N.',
            risk: 'Safe'
        }
    ];

    return (
        <Card
            title={<span><SafetyCertificateOutlined /> Site Hardening</span>}
            loading={loading}
            className="hardening-card"
        >
            <List
                itemLayout="horizontal"
                dataSource={features}
                renderItem={item => (
                    <List.Item
                        actions={[
                            <Switch
                                checked={settings[item.key]}
                                onChange={(checked) => handleToggle(item.key, checked)}
                            />
                        ]}
                    >
                        <List.Item.Meta
                            title={
                                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                                    {item.title}
                                    <Tooltip title={item.risk}>
                                        <Tag color="blue">{item.risk}</Tag>
                                    </Tooltip>
                                </div>
                            }
                            description={item.description}
                        />
                    </List.Item>
                )}
            />
        </Card>
    );
};

export default HardeningSettings;