import { useState } from 'react';
import {
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  Button,
  TextField,
  FormControl,
  InputLabel,
  Select,
  MenuItem,
  Box,
  Alert,
} from '@mui/material';
import { useIdeasStore } from '../../store/ideas';
import { useCreateIdea } from '../../hooks/useIdeas';
import type { CreateIdeaDto, IdeaStatus, IdeaPriority } from '../../types/idea';

const statusOptions: { value: IdeaStatus; label: string }[] = [
  { value: 'backlog', label: 'Бэклог' },
  { value: 'todo', label: 'К выполнению' },
  { value: 'in_progress', label: 'В работе' },
  { value: 'done', label: 'Готово' },
];

const priorityOptions: { value: IdeaPriority; label: string }[] = [
  { value: 'low', label: 'Низкий' },
  { value: 'medium', label: 'Средний' },
  { value: 'high', label: 'Высокий' },
  { value: 'critical', label: 'Критичный' },
];

const initialFormData: CreateIdeaDto = {
  title: '',
  description: '',
  status: 'backlog',
  priority: 'medium',
  module: '',
  targetAudience: '',
  pain: '',
  aiRole: '',
  verificationMethod: '',
};

export function CreateIdeaModal() {
  const { createModalOpen, setCreateModalOpen } = useIdeasStore();
  const createIdea = useCreateIdea();
  const [formData, setFormData] = useState<CreateIdeaDto>(initialFormData);

  const handleClose = () => {
    setCreateModalOpen(false);
    setFormData(initialFormData);
    createIdea.reset();
  };

  const handleChange = (field: keyof CreateIdeaDto, value: string) => {
    setFormData((prev) => ({ ...prev, [field]: value }));
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    try {
      await createIdea.mutateAsync(formData);
      handleClose();
    } catch {
      // Error is handled by mutation state
    }
  };

  return (
    <Dialog
      open={createModalOpen}
      onClose={handleClose}
      maxWidth="sm"
      fullWidth
    >
      <form onSubmit={handleSubmit}>
        <DialogTitle>Новая идея</DialogTitle>
        <DialogContent>
          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, mt: 1 }}>
            {createIdea.isError && (
              <Alert severity="error">
                Не удалось создать идею. Попробуйте снова.
              </Alert>
            )}

            <TextField
              label="Название"
              value={formData.title}
              onChange={(e) => handleChange('title', e.target.value)}
              required
              autoFocus
            />

            <TextField
              label="Описание"
              value={formData.description}
              onChange={(e) => handleChange('description', e.target.value)}
              multiline
              rows={3}
            />

            <Box sx={{ display: 'flex', gap: 2 }}>
              <FormControl fullWidth>
                <InputLabel>Статус</InputLabel>
                <Select
                  value={formData.status}
                  label="Статус"
                  onChange={(e) => handleChange('status', e.target.value)}
                >
                  {statusOptions.map((opt) => (
                    <MenuItem key={opt.value} value={opt.value}>
                      {opt.label}
                    </MenuItem>
                  ))}
                </Select>
              </FormControl>

              <FormControl fullWidth>
                <InputLabel>Приоритет</InputLabel>
                <Select
                  value={formData.priority}
                  label="Приоритет"
                  onChange={(e) => handleChange('priority', e.target.value)}
                >
                  {priorityOptions.map((opt) => (
                    <MenuItem key={opt.value} value={opt.value}>
                      {opt.label}
                    </MenuItem>
                  ))}
                </Select>
              </FormControl>
            </Box>

            <TextField
              label="Модуль"
              value={formData.module}
              onChange={(e) => handleChange('module', e.target.value)}
              placeholder="например: Авторизация, Дашборд, API"
            />

            <TextField
              label="Целевая аудитория"
              value={formData.targetAudience}
              onChange={(e) => handleChange('targetAudience', e.target.value)}
              placeholder="Для кого это?"
            />

            <TextField
              label="Боль"
              value={formData.pain}
              onChange={(e) => handleChange('pain', e.target.value)}
              multiline
              rows={2}
              placeholder="Какую проблему это решает?"
            />

            <TextField
              label="Роль AI"
              value={formData.aiRole}
              onChange={(e) => handleChange('aiRole', e.target.value)}
              multiline
              rows={2}
              placeholder="Как AI может помочь с этим?"
            />

            <TextField
              label="Способ проверки"
              value={formData.verificationMethod}
              onChange={(e) =>
                handleChange('verificationMethod', e.target.value)
              }
              multiline
              rows={2}
              placeholder="Как проверить, что это готово?"
            />
          </Box>
        </DialogContent>
        <DialogActions>
          <Button onClick={handleClose}>Отмена</Button>
          <Button
            type="submit"
            variant="contained"
            disabled={!formData.title || createIdea.isPending}
          >
            {createIdea.isPending ? 'Создание...' : 'Создать'}
          </Button>
        </DialogActions>
      </form>
    </Dialog>
  );
}
