import { useState } from "react";
import {
    Card,
    Text,
    Group,
    Button,
    TextInput,
    Stack,
    ActionIcon,
    Select,
} from "@mantine/core";
import { IconEdit, IconX, IconCheck } from "@tabler/icons-react"; // 图标
import { apiRequest } from "../config/request";
import { EXTERNAL_API } from "../config/api";

export default function NodeConfigCard({ node, onSaved }) {
    const [editing, setEditing] = useState(false);
    const [config, setConfig] = useState(node.config || {});
    const [saving, setSaving] = useState(false);

    const handleSave = async () => {
        setSaving(true);
        try {
            await apiRequest(`${EXTERNAL_API.MASTER_NODES}/${node.id}`, {
                method: "PUT",
                body: JSON.stringify({ config }),
            }, "配置已更新"); // 成功提示

            setEditing(false);
            onSaved && onSaved(); // 可选回调刷新详情
        } catch (err) {
            console.error("更新配置失败", err);
        } finally {
            setSaving(false);
        }
    };

    return (
        <Card shadow="sm" radius="md" withBorder>
            <Group position="apart" mb="sm">
                <Text fw={600}>配置信息</Text>
                <Group spacing="xs">
                    {editing ? (
                        <>
                            <ActionIcon color="green" size="sm" loading={saving} onClick={handleSave}>
                                <IconCheck size={16} />
                            </ActionIcon>
                            <ActionIcon color="red" size="sm" onClick={() => setEditing(false)}>
                                <IconX size={16} />
                            </ActionIcon>
                        </>
                    ) : (
                        <ActionIcon color="blue" size="sm" onClick={() => setEditing(true)}>
                            <IconEdit size={16} />
                        </ActionIcon>
                    )}
                </Group>
            </Group>

            {editing ? (
                <Stack>
                    <TextInput
                        label="最大连接数"
                        value={config.max_connections}
                        onChange={(e) =>
                            setConfig({ ...config, max_connections: e.target.value })
                        }
                    />
                    <TextInput
                        label="超时时间"
                        value={config.timeout}
                        onChange={(e) =>
                            setConfig({ ...config, timeout: e.target.value })
                        }
                    />
                    {/* 日志级别下拉框 */}
                    <Select
                        label="日志级别"
                        data={["trace", "debug", "info", "warn", "error", "fatal"]}
                        value={config.log_level}
                        onChange={(value) => setConfig({ ...config, log_level: value })}
                    />
                </Stack>
            ) : (
                <Stack spacing="xs">
                    <Text size="sm">最大连接数: {config.max_connections}</Text>
                    <Text size="sm">超时时间: {config.timeout}</Text>
                    <Text size="sm">日志级别: {config.log_level}</Text>
                </Stack>
            )}
        </Card>
    );
}
