'use client';

import { Box, Typography, TextField, Chip, Button, Paper } from '@mui/material';
import { useTranslation } from 'react-i18next';
import { useState } from 'react';
import AddIcon from '@mui/icons-material/Add';
import AIGenerateButton from './AIGenerateButton';

export default function AnswerInput({
  answerType,
  answer,
  onAnswerChange,
  labels,
  customFormat,
  projectId,
  imageName,
  question
}) {
  const { t, i18n } = useTranslation();
  const [newLabel, setNewLabel] = useState('');
  const [jsonError, setJsonError] = useState('');

  // 文字类型输入
  if (answerType === 'text') {
    return (
      <Box>
        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
          <Typography variant="h6" fontWeight="600" sx={{ color: 'text.primary' }}>
            {t('images.answer', { defaultValue: '文本答案' })} *
          </Typography>
          <AIGenerateButton
            projectId={projectId}
            imageName={imageName}
            question={question}
            onSuccess={onAnswerChange}
          />
        </Box>
        <TextField
          fullWidth
          multiline
          rows={6}
          value={answer}
          onChange={e => onAnswerChange(e.target.value)}
          placeholder={t('images.answerPlaceholder', { defaultValue: '请输入答案...' })}
          sx={{
            '& .MuiOutlinedInput-root': {
              borderRadius: 3,
              backgroundColor: 'background.paper',
              '& fieldset': {
                borderWidth: 2,
                borderColor: 'divider'
              },
              '&:hover fieldset': {
                borderColor: 'primary.main'
              },
              '&.Mui-focused fieldset': {
                borderColor: 'primary.main',
                borderWidth: 2
              }
            },
            '& textarea': {
              fontSize: '14px',
              lineHeight: 1.6
            }
          }}
        />
      </Box>
    );
  }

  // 标签类型输入 - 提前解析 labels，避免条件中的 hooks 问题
  if (answerType === 'label') {
    const selectedLabels = Array.isArray(answer) ? answer : [];

    // 解析 labels（可能是 JSON 字符串或数组）
    let labelOptions = [];
    if (typeof labels === 'string' && labels) {
      try {
        labelOptions = JSON.parse(labels);
      } catch (e) {
        labelOptions = [];
      }
    } else if (Array.isArray(labels)) {
      labelOptions = labels;
    }

    if (!labelOptions.includes('其他') && !labelOptions.includes('other')) {
      labelOptions.push(i18n.language === 'en' ? 'other' : '其他');
    }

    const handleToggleLabel = label => {
      if (selectedLabels.includes(label)) {
        onAnswerChange(selectedLabels.filter(l => l !== label));
      } else {
        let newLabels = [...selectedLabels, label];
        onAnswerChange(newLabels);
      }
    };

    const handleAddNewLabel = () => {
      if (newLabel.trim() && !labelOptions.includes(newLabel.trim())) {
        handleToggleLabel(newLabel.trim());
        setNewLabel('');
      }
    };

    return (
      <Box>
        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 3 }}>
          <Typography variant="h6" fontWeight="600" sx={{ color: 'text.primary' }}>
            {t('images.selectLabels', { defaultValue: '标签选择' })} *
          </Typography>
          <AIGenerateButton
            projectId={projectId}
            imageName={imageName}
            question={question}
            onSuccess={onAnswerChange}
            answerType={answerType}
          />
        </Box>

        {/* 可选标签 */}
        <Paper
          variant="outlined"
          sx={{
            p: 3,
            mb: 3,
            borderRadius: 3,
            backgroundColor: 'grey.50',
            border: '2px solid',
            borderColor: 'divider',
            '&:hover': {
              borderColor: 'primary.light'
            }
          }}
        >
          <Typography variant="subtitle2" color="text.secondary" gutterBottom sx={{ fontWeight: 600, mb: 2 }}>
            {t('images.availableLabels', { defaultValue: '可选标签' })}
          </Typography>
          <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1.5 }}>
            {labelOptions && labelOptions.length > 0 ? (
              labelOptions.map(label => (
                <Chip
                  key={label}
                  label={label}
                  onClick={() => handleToggleLabel(label)}
                  color={selectedLabels.includes(label) ? 'primary' : 'default'}
                  variant={selectedLabels.includes(label) ? 'filled' : 'outlined'}
                  sx={{
                    borderRadius: 2,
                    fontWeight: 500,
                    fontSize: '0.875rem',
                    height: 36,
                    cursor: 'pointer',
                    transition: 'all 0.2s ease',
                    '&:hover': {
                      transform: 'translateY(-1px)',
                      boxShadow: 2
                    }
                  }}
                />
              ))
            ) : (
              <Typography variant="body2" color="text.secondary" sx={{ fontStyle: 'italic' }}>
                {t('images.noLabelsAvailable', { defaultValue: '暂无可选标签' })}
              </Typography>
            )}
          </Box>
        </Paper>

        {/* 添加新标签 */}
        {/* <Box sx={{ display: 'flex', gap: 2, mb: 3 }}>
          <TextField
            size="small"
            value={newLabel}
            onChange={e => setNewLabel(e.target.value)}
            placeholder={t('images.addNewLabel', { defaultValue: '添加新标签...' })}
            onKeyPress={e => {
              if (e.key === 'Enter') {
                handleAddNewLabel();
              }
            }}
            sx={{
              flex: 1,
              '& .MuiOutlinedInput-root': {
                borderRadius: 2,
                backgroundColor: 'background.paper',
                '& fieldset': {
                  borderWidth: 2
                },
                '&:hover fieldset': {
                  borderColor: 'primary.main'
                }
              }
            }}
          />
          <Button
            startIcon={<AddIcon />}
            onClick={handleAddNewLabel}
            disabled={!newLabel.trim()}
            variant="contained"
            sx={{
              borderRadius: 2,
              px: 3,
              fontWeight: 600,
              textTransform: 'none',
              boxShadow: 2,
              '&:hover': {
                boxShadow: 4
              }
            }}
          >
            {t('common.add', { defaultValue: '添加' })}
          </Button>
        </Box> */}

        {/* 已选择标签 */}
        {/* {selectedLabels.length > 0 && (
          <Box>
            <Typography variant="subtitle2" color="text.secondary" gutterBottom sx={{ fontWeight: 600, mb: 2 }}>
              {t('images.selectedLabels', { defaultValue: '已选择' })} ({selectedLabels.length})
            </Typography>
            <Paper
              sx={{
                p: 2.5,
                borderRadius: 3,
                backgroundColor: 'primary.50',
                border: '2px solid',
                borderColor: 'primary.200'
              }}
            >
              <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1.5 }}>
                {selectedLabels.map(label => (
                  <Chip
                    key={label}
                    label={label}
                    onDelete={() => handleToggleLabel(label)}
                    color="primary"
                    sx={{
                      borderRadius: 2,
                      fontWeight: 500,
                      fontSize: '0.875rem',
                      height: 36,
                      '& .MuiChip-deleteIcon': {
                        fontSize: '18px',
                        '&:hover': {
                          color: 'error.main'
                        }
                      }
                    }}
                  />
                ))}
              </Box>
            </Paper>
          </Box>
        )} */}
      </Box>
    );
  }

  // 自定义格式输入
  if (answerType === 'custom_format') {
    const handleJsonChange = value => {
      onAnswerChange(value);
      // 验证 JSON 格式
      if (value.trim()) {
        try {
          JSON.parse(value);
          setJsonError('');
        } catch (e) {
          setJsonError(t('images.invalidJsonFormat', { defaultValue: 'JSON 格式不正确' }));
        }
      } else {
        setJsonError('');
      }
    };

    const handleUseTemplate = () => {
      if (customFormat) {
        try {
          let templateJson;
          if (typeof customFormat === 'string') {
            templateJson = JSON.parse(customFormat);
          } else {
            templateJson = customFormat;
          }
          const formatted = JSON.stringify(templateJson, null, 2);
          onAnswerChange(formatted);
          setJsonError('');
        } catch (e) {
          onAnswerChange('{}');
        }
      }
    };

    if (answer && typeof answer === 'object') {
      answer = JSON.stringify(answer, null, 2);
    }

    return (
      <Box>
        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 3 }}>
          <Typography variant="h6" fontWeight="600" sx={{ color: 'text.primary' }}>
            {t('images.customFormatAnswer', { defaultValue: '自定义格式答案' })} *
          </Typography>
          <Box sx={{ display: 'flex', gap: 1.5 }}>
            <AIGenerateButton
              projectId={projectId}
              imageName={imageName}
              question={question}
              onSuccess={onAnswerChange}
            />
            {customFormat && (
              <Button
                size="small"
                onClick={handleUseTemplate}
                variant="outlined"
                sx={{
                  borderRadius: 2,
                  textTransform: 'none',
                  fontWeight: 500,
                  borderWidth: 2,
                  '&:hover': {
                    borderWidth: 2
                  }
                }}
              >
                {t('images.useTemplate', { defaultValue: '使用模板' })}
              </Button>
            )}
            {/* <Button
              size="small"
              onClick={handleFormatJson}
              variant="outlined"
              disabled={!answer.trim()}
              sx={{
                borderRadius: 2,
                textTransform: 'none',
                fontWeight: 500,
                borderWidth: 2,
                '&:hover': {
                  borderWidth: 2
                }
              }}
            >
              {t('images.formatJson', { defaultValue: '格式化' })}
            </Button> */}
          </Box>
        </Box>

        {/* 显示格式要求 */}
        {customFormat && (
          <Paper
            variant="outlined"
            sx={{
              p: 3,
              mb: 3,
              bgcolor: 'grey.50',
              borderRadius: 3,
              border: '2px solid',
              borderColor: 'divider'
            }}
          >
            <Typography variant="subtitle2" color="text.secondary" gutterBottom sx={{ fontWeight: 600, mb: 2 }}>
              {t('images.formatRequirement', { defaultValue: '格式要求' })}
            </Typography>
            <Box
              sx={{
                backgroundColor: 'background.paper',
                borderRadius: 2,
                p: 2,
                border: '1px solid',
                borderColor: 'divider'
              }}
            >
              <pre
                style={{
                  margin: 0,
                  fontSize: '13px',
                  overflow: 'auto',
                  maxHeight: '150px',
                  fontFamily: 'Monaco, Consolas, "Courier New", monospace',
                  lineHeight: 1.5,
                  color: '#2d3748'
                }}
              >
                {typeof customFormat === 'string' ? customFormat : JSON.stringify(customFormat, null, 2)}
              </pre>
            </Box>
          </Paper>
        )}

        {/* JSON 输入框 */}
        <TextField
          fullWidth
          multiline
          rows={10}
          value={answer}
          onChange={e => handleJsonChange(e.target.value)}
          placeholder={t('images.customFormatPlaceholder', { defaultValue: '请输入符合格式的 JSON...' })}
          error={!!jsonError}
          sx={{
            '& .MuiOutlinedInput-root': {
              borderRadius: 3,
              backgroundColor: 'background.paper',
              '& fieldset': {
                borderWidth: 2
              },
              '&:hover fieldset': {
                borderColor: 'primary.main'
              },
              '&.Mui-focused fieldset': {
                borderColor: 'primary.main',
                borderWidth: 2
              },
              '&.Mui-error fieldset': {
                borderColor: 'error.main',
                borderWidth: 2
              }
            },
            '& textarea': {
              fontFamily: 'Monaco, Consolas, "Courier New", monospace',
              fontSize: '13px',
              lineHeight: 1.5
            },
            '& .MuiFormHelperText-root': {
              fontSize: '0.875rem',
              fontWeight: 500
            }
          }}
        />
      </Box>
    );
  }

  return null;
}