frontend/src/components/DnsManager.js

import { useState, useEffect } from 'react';
import { 
  Paper, 
  Typography, 
  Box,
  Alert,
  Chip
} from '@mui/material';
import VersionInfo from './VersionInfo';
import DnsTable from './DnsTable';
import { fetchConfig, updateConfig } from '../services/api';

function DnsManager() {
  console.log('DnsManager rendered');
  const [versions, setVersions] = useState({ oversea: 0, cn: 0 });
  const [hosts, setHosts] = useState({});
  const [error, setError] = useState(null);

  const loadConfig = async () => {
    console.log('Loading config...');
    try {
      const data = await fetchConfig();
      console.log('Fetched config:', data);
      setVersions({
        oversea: data.overseaVersion,
        cn: data.cnVersion
      });
      setHosts(data.hosts);
    } catch (err) {
      console.error('Load config error:', err);
      setError('加载配置失败: ' + err.message);
    }
  };

  useEffect(() => {
    console.log('useEffect triggered');
    loadConfig();
  }, []);

  const handleSave = async (newHosts) => {
    try {
      await updateConfig(newHosts);
      await loadConfig();
      return true;
    } catch (err) {
      setError('保存配置失败: ' + err.message);
      return false;
    }
  };

  return (
    <Box>
      <Typography variant="h4" gutterBottom>
        DNS Hosts 配置管理
      </Typography>
      
      {error && (
        <Alert severity="error" sx={{ mb: 2 }} onClose={() => setError(null)}>
          {error}
        </Alert>
      )}

      <Paper sx={{ p: 2, mb: 2 }}>
        <VersionInfo versions={versions} />
      </Paper>

      <Paper sx={{ p: 2 }}>
        <Alert severity="info" sx={{ mb: 2 }}>
          提示：域名格式如 "+.example.com" 或 "specific.example.com"
        </Alert>
        <DnsTable 
          hosts={hosts} 
          onSave={handleSave}
        />
      </Paper>
    </Box>
  );
}

export default DnsManager;