import React, { useState } from 'react';
import {
  Box,
  Typography,
  Card,
  CardContent,
  Grid,
  Button,
  Switch,
  FormControlLabel,
  Slider,
  TextField,
  Select,
  MenuItem,
  FormControl,
  InputLabel,
  Chip,
  Divider,
  Alert,
  LinearProgress,
} from '@mui/material';
import {
  Settings as SettingsIcon,
  PlayArrow as PlayIcon,
  Stop as StopIcon,
  Refresh as RefreshIcon,
  Save as SaveIcon,
} from '@mui/icons-material';
import { styled } from '@mui/material/styles';

const PageContainer = styled(Box)(({ theme }) => ({
  padding: '1.5rem',
  backgroundColor: '#F8F9FA',
  minHeight: 'calc(100vh - 60px)',
}));

const PageHeader = styled(Box)(({ theme }) => ({
  display: 'flex',
  justifyContent: 'space-between',
  alignItems: 'center',
  marginBottom: '1.5rem',
}));

const ConfigCard = styled(Card)(({ theme }) => ({
  marginBottom: '1.5rem',
  border: '1px solid #E5E5E5',
}));

const ConfigSection = styled(Box)(({ theme }) => ({
  marginBottom: '1.5rem',
  '&:last-child': {
    marginBottom: 0,
  },
}));

const StatusIndicator = styled(Box)<{ status: 'running' | 'stopped' | 'error' }>(({ status, theme }) => ({
  display: 'inline-flex',
  alignItems: 'center',
  gap: '0.5rem',
  padding: '0.25rem 0.75rem',
  borderRadius: '12px',
  fontSize: '0.875rem',
  fontWeight: 500,
  backgroundColor:
    status === 'running' ? '#E8F5E8' :
    status === 'stopped' ? '#F8F9FA' : '#F8D7DA',
  color:
    status === 'running' ? '#155724' :
    status === 'stopped' ? '#666' : '#721C24',
  '&::before': {
    content: '""',
    width: '8px',
    height: '8px',
    borderRadius: '50%',
    backgroundColor:
      status === 'running' ? '#28A745' :
      status === 'stopped' ? '#6C757D' : '#DC3545',
  },
}));

const PipelineConfig: React.FC = () => {
  const [pipelineStatus, setPipelineStatus] = useState<'running' | 'stopped' | 'error'>('stopped');
  const [config, setConfig] = useState({
    enabled: false,
    chunkSize: 512,
    chunkOverlap: 50,
    embeddingModel: 'text-embedding-ada-002',
    retrievalTopK: 5,
    temperature: 0.7,
    maxTokens: 2048,
    systemPrompt: '你是一个专业的AI助手，请基于提供的知识库内容回答用户问题。',
  });

  const handleConfigChange = (key: string, value: any) => {
    setConfig(prev => ({ ...prev, [key]: value }));
  };

  const handleStartPipeline = () => {
    setPipelineStatus('running');
  };

  const handleStopPipeline = () => {
    setPipelineStatus('stopped');
  };

  const handleSaveConfig = () => {
    // 保存配置逻辑
    console.log('保存配置:', config);
  };

  return (
    <PageContainer>
      <PageHeader>
        <Box>
          <Typography variant="h4" fontWeight={600} color="#333">
            RAG Pipeline 配置
          </Typography>
          <Box display="flex" alignItems="center" gap={2} mt={1}>
            <StatusIndicator status={pipelineStatus}>
              {pipelineStatus === 'running' ? '运行中' :
               pipelineStatus === 'stopped' ? '已停止' : '错误'}
            </StatusIndicator>
            {pipelineStatus === 'running' && (
              <LinearProgress sx={{ width: '200px', height: '6px', borderRadius: '3px' }} />
            )}
          </Box>
        </Box>
        <Box display="flex" gap={1}>
          <Button
            variant="outlined"
            startIcon={<SaveIcon />}
            onClick={handleSaveConfig}
          >
            保存配置
          </Button>
          {pipelineStatus === 'running' ? (
            <Button
              variant="contained"
              color="error"
              startIcon={<StopIcon />}
              onClick={handleStopPipeline}
            >
              停止
            </Button>
          ) : (
            <Button
              variant="contained"
              startIcon={<PlayIcon />}
              onClick={handleStartPipeline}
            >
              启动
            </Button>
          )}
        </Box>
      </PageHeader>

      <Grid container spacing={3}>
        <Grid item xs={12} md={6}>
          <ConfigCard>
            <CardContent>
              <Typography variant="h6" fontWeight={600} mb={2}>
                <SettingsIcon sx={{ mr: 1, verticalAlign: 'middle' }} />
                基础配置
              </Typography>

              <ConfigSection>
                <FormControlLabel
                  control={
                    <Switch
                      checked={config.enabled}
                      onChange={(e) => handleConfigChange('enabled', e.target.checked)}
                    />
                  }
                  label="启用 RAG Pipeline"
                />
              </ConfigSection>

              <ConfigSection>
                <Typography gutterBottom>文档分块大小</Typography>
                <Slider
                  value={config.chunkSize}
                  onChange={(_, value) => handleConfigChange('chunkSize', value)}
                  min={128}
                  max={2048}
                  step={64}
                  marks={[
                    { value: 128, label: '128' },
                    { value: 512, label: '512' },
                    { value: 1024, label: '1024' },
                    { value: 2048, label: '2048' },
                  ]}
                  valueLabelDisplay="on"
                />
              </ConfigSection>

              <ConfigSection>
                <Typography gutterBottom>分块重叠 (%)</Typography>
                <Slider
                  value={config.chunkOverlap}
                  onChange={(_, value) => handleConfigChange('chunkOverlap', value)}
                  min={0}
                  max={50}
                  step={5}
                  valueLabelDisplay="on"
                />
              </ConfigSection>

              <ConfigSection>
                <FormControl fullWidth>
                  <InputLabel>嵌入模型</InputLabel>
                  <Select
                    value={config.embeddingModel}
                    onChange={(e) => handleConfigChange('embeddingModel', e.target.value)}
                    label="嵌入模型"
                  >
                    <MenuItem value="text-embedding-ada-002">text-embedding-ada-002</MenuItem>
                    <MenuItem value="text-embedding-3-small">text-embedding-3-small</MenuItem>
                    <MenuItem value="text-embedding-3-large">text-embedding-3-large</MenuItem>
                  </Select>
                </FormControl>
              </ConfigSection>
            </CardContent>
          </ConfigCard>
        </Grid>

        <Grid item xs={12} md={6}>
          <ConfigCard>
            <CardContent>
              <Typography variant="h6" fontWeight={600} mb={2}>
                检索与生成配置
              </Typography>

              <ConfigSection>
                <TextField
                  fullWidth
                  label="检索文档数量 (Top-K)"
                  type="number"
                  value={config.retrievalTopK}
                  onChange={(e) => handleConfigChange('retrievalTopK', parseInt(e.target.value))}
                  inputProps={{ min: 1, max: 20 }}
                />
              </ConfigSection>

              <ConfigSection>
                <Typography gutterBottom>生成温度</Typography>
                <Slider
                  value={config.temperature}
                  onChange={(_, value) => handleConfigChange('temperature', value)}
                  min={0}
                  max={1}
                  step={0.1}
                  marks={[
                    { value: 0, label: '0' },
                    { value: 0.5, label: '0.5' },
                    { value: 1, label: '1' },
                  ]}
                  valueLabelDisplay="on"
                />
              </ConfigSection>

              <ConfigSection>
                <TextField
                  fullWidth
                  label="最大输出Token数"
                  type="number"
                  value={config.maxTokens}
                  onChange={(e) => handleConfigChange('maxTokens', parseInt(e.target.value))}
                  inputProps={{ min: 256, max: 4096 }}
                />
              </ConfigSection>

              <ConfigSection>
                <TextField
                  fullWidth
                  label="系统提示词"
                  multiline
                  rows={4}
                  value={config.systemPrompt}
                  onChange={(e) => handleConfigChange('systemPrompt', e.target.value)}
                />
              </ConfigSection>
            </CardContent>
          </ConfigCard>
        </Grid>

        <Grid item xs={12}>
          <ConfigCard>
            <CardContent>
              <Typography variant="h6" fontWeight={600} mb={2}>
                Pipeline 状态监控
              </Typography>

              <Grid container spacing={2}>
                <Grid item xs={12} sm={6} md={3}>
                  <Box textAlign="center" p={2} bgcolor="#F8F9FA" borderRadius="6px">
                    <Typography variant="h4" color="primary" fontWeight={600}>
                      1,234
                    </Typography>
                    <Typography variant="body2" color="text.secondary">
                      已处理文档
                    </Typography>
                  </Box>
                </Grid>
                <Grid item xs={12} sm={6} md={3}>
                  <Box textAlign="center" p={2} bgcolor="#F8F9FA" borderRadius="6px">
                    <Typography variant="h4" color="success.main" fontWeight={600}>
                      98.5%
                    </Typography>
                    <Typography variant="body2" color="text.secondary">
                      成功率
                    </Typography>
                  </Box>
                </Grid>
                <Grid item xs={12} sm={6} md={3}>
                  <Box textAlign="center" p={2} bgcolor="#F8F9FA" borderRadius="6px">
                    <Typography variant="h4" color="warning.main" fontWeight={600}>
                      2.3s
                    </Typography>
                    <Typography variant="body2" color="text.secondary">
                      平均响应时间
                    </Typography>
                  </Box>
                </Grid>
                <Grid item xs={12} sm={6} md={3}>
                  <Box textAlign="center" p={2} bgcolor="#F8F9FA" borderRadius="6px">
                    <Typography variant="h4" color="info.main" fontWeight={600}>
                      156
                    </Typography>
                    <Typography variant="body2" color="text.secondary">
                      今日查询数
                    </Typography>
                  </Box>
                </Grid>
              </Grid>

              {pipelineStatus === 'error' && (
                <Alert severity="error" sx={{ mt: 2 }}>
                  Pipeline 运行出现错误，请检查配置和日志。
                </Alert>
              )}
            </CardContent>
          </ConfigCard>
        </Grid>
      </Grid>
    </PageContainer>
  );
};

export default PipelineConfig;