import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Calendar } from '@/components/ui/calendar';
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command';
import { Badge } from "@/components/ui/badge";
import { cn } from "@/lib/utils";
import { CalendarIcon, Plus, Tag, Check, Link2 } from 'lucide-react';
import { Task, Label } from '@shared/schema';
import { useQuery } from '@tanstack/react-query';
import { parseTaskInput } from '../lib/nlp';
import { Sparkles } from 'lucide-react';

interface TaskCreationModalProps {
  isOpen: boolean;
  onClose: () => void;
  onSave: (task: Partial<Task>) => void;
}

export default function TaskCreationModal({ isOpen, onClose, onSave }: TaskCreationModalProps) {
  const { t } = useTranslation();
  const [title, setTitle] = useState('');
  const [description, setDescription] = useState('');
  const [priority, setPriority] = useState<'low' | 'medium' | 'high'>('medium');
  const [energyLevel, setEnergyLevel] = useState<'low' | 'medium' | 'high'>('medium');
  const [estimatedDuration, setEstimatedDuration] = useState<number | undefined>();
  const [dueDate, setDueDate] = useState<Date | undefined>();

  const [labelId, setLabelId] = useState<string | undefined>();
  const [dependencies, setDependencies] = useState<string[]>([]);
  const [isDependenciesOpen, setIsDependenciesOpen] = useState(false);

  const [isCalendarOpen, setIsCalendarOpen] = useState(false);
  const [error, setError] = useState<string | null>(null);

  // Fetch labels
  const { data: labels = [] } = useQuery<Label[]>({
    queryKey: ['/api/labels'],
  });

  const { data: tasks = [] } = useQuery<Task[]>({
    queryKey: ['/api/tasks'],
  });

  const handleSave = () => {
    if (!title.trim()) {
      setError(t('taskCreation.titleRequired') || 'Title is required');
      return;
    }

    const newTask: Partial<Task> = {
      title: title.trim(),
      description: description.trim() || undefined,
      priority,
      energyLevel,
      estimatedDuration,
      dueDate,
      labelId,
      dependencies,
      status: 'todo',
      timeTracked: 0,
      isTracking: false
    };

    onSave(newTask);
    console.log('New task created:', newTask);

    // Reset form
    setTitle('');
    setDescription('');
    setPriority('medium');
    setDueDate(undefined);
    setDueDate(undefined);
    setLabelId(undefined);
    setDependencies([]);
    setError(null);
    onClose();
  };

  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      handleSave();
    }
  };

  const handleClose = () => {
    setTitle('');
    setDescription('');
    setPriority('medium');
    setDueDate(undefined);
    setDueDate(undefined);
    setLabelId(undefined);
    setDependencies([]);
    setError(null);
    onClose();
  };

  return (
    <Dialog open={isOpen} onOpenChange={handleClose} >
      <DialogContent className="sm:max-w-md mx-4 max-h-[90vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2">
            <Plus className="w-4 h-4" />
            {t('taskCreation.title')}
          </DialogTitle>
        </DialogHeader>

        <div className="space-y-4">
          <div>
            <Input
              placeholder={t('smartTask.placeholder')}
              value={title}
              onChange={(e) => {
                setTitle(e.target.value);
                const parsed = parseTaskInput(e.target.value);
                if (parsed.priority) setPriority(parsed.priority);
                if (parsed.dueDate) setDueDate(parsed.dueDate);
                if (parsed.labelName) {
                  const foundLabel = labels.find(l => l.name.toLowerCase() === parsed.labelName?.toLowerCase());
                  if (foundLabel) setLabelId(foundLabel.id);
                }
                if (error) setError(null);
              }}
              onKeyDown={handleKeyDown}
              className="text-base"
              data-testid="input-task-title"
              autoFocus
            />
            <div className="flex items-center gap-1 mt-1">
              {title.includes('!') || title.includes('#') ||
                title.toLowerCase().includes('tomorrow') || title.toLowerCase().includes('morgen') ||
                title.toLowerCase().includes('today') || title.toLowerCase().includes('heute') ? (
                <div className="bg-violet-100 dark:bg-violet-900/30 text-violet-600 dark:text-violet-300 text-xs px-2 py-0.5 rounded-full flex items-center gap-1 animate-pulse">
                  <Sparkles className="w-3 h-3" />
                  {t('taskCreation.smartInputActive')}
                </div>
              ) : null}
              {error && <p className="text-sm text-destructive">{error}</p>}
            </div>
          </div>

          <div>
            <Textarea
              placeholder={t('taskCreation.descriptionPlaceholder')}
              value={description}
              onChange={(e) => setDescription(e.target.value)}
              className="resize-none text-sm"
              rows={3}
              data-testid="input-task-description"
            />
          </div>

          <div className="grid grid-cols-2 gap-3">
            <Select value={priority} onValueChange={(value: 'low' | 'medium' | 'high') => setPriority(value)}>
              <SelectTrigger data-testid="select-task-priority">
                <SelectValue placeholder={t('taskCreation.priority')} />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="low">{t('priority.low')}</SelectItem>
                <SelectItem value="medium">{t('priority.medium')}</SelectItem>
                <SelectItem value="high">{t('priority.high')}</SelectItem>
              </SelectContent>
            </Select>

            <Select value={energyLevel} onValueChange={(value: 'low' | 'medium' | 'high') => setEnergyLevel(value)}>
              <SelectTrigger>
                <SelectValue placeholder={t('taskCreation.energy')} />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="low">{t('gamification.energy.low')}</SelectItem>
                <SelectItem value="medium">{t('gamification.energy.medium')}</SelectItem>
                <SelectItem value="high">{t('gamification.energy.high')}</SelectItem>
              </SelectContent>
            </Select>

            <div className="col-span-1">
              <Input
                type="number"
                placeholder={t('taskCreation.minutesPlaceholder')}
                value={estimatedDuration || ''}
                onChange={(e) => setEstimatedDuration(e.target.value ? parseInt(e.target.value) : undefined)}
                className="text-sm"
              />
            </div>

            <Select value={labelId || 'none'} onValueChange={(value) => setLabelId(value === 'none' ? undefined : value)}>
              <SelectTrigger data-testid="select-task-label">
                <SelectValue placeholder={t('taskCreation.label')} />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="none">{t('taskCreation.noLabel')}</SelectItem>
                {labels.map((label) => (
                  <SelectItem key={label.id} value={label.id}>
                    <div className="flex items-center gap-2">
                      <div
                        className="w-3 h-3 rounded"
                        style={{ backgroundColor: label.color }}
                      />
                      {label.name}
                    </div>
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>

            <div className="col-span-2">
              <Popover open={isCalendarOpen} onOpenChange={setIsCalendarOpen}>
                <PopoverTrigger asChild>
                  <Button
                    variant="outline"
                    className="w-full justify-start text-left font-normal"
                    data-testid="button-due-date"
                  >
                    <CalendarIcon className="mr-2 h-4 w-4" />
                    {dueDate ? dueDate.toLocaleDateString() : t('taskCreation.dueDate')}
                  </Button>
                </PopoverTrigger>
                <PopoverContent className="w-auto p-0" align="start">
                  <Calendar
                    mode="single"
                    selected={dueDate}
                    onSelect={(date) => {
                      setDueDate(date);
                      setIsCalendarOpen(false);
                    }}
                    disabled={(date) => date < new Date()}
                    initialFocus
                  />
                </PopoverContent>
              </Popover>
            </div>
          </div>

          {/* Dependencies Selector */}
          <div className="space-y-2">
            <label className="text-sm font-medium flex items-center gap-2">
              <Link2 className="w-4 h-4" />
              {t('dependencies.label')}
            </label>
            <Popover open={isDependenciesOpen} onOpenChange={setIsDependenciesOpen}>
              <PopoverTrigger asChild>
                <Button
                  variant="outline"
                  role="combobox"
                  className="w-full justify-between h-auto min-h-[40px]"
                >
                  <div className="flex flex-wrap gap-1">
                    {dependencies.length > 0 ? (
                      dependencies.map((depId) => {
                        const task = tasks.find((t) => t.id === depId);
                        return (
                          <Badge key={depId} variant="secondary" className="mr-1">
                            {task?.title || 'Unknown Task'}
                            <div
                              className="ml-1 ring-offset-background rounded-full outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 cursor-pointer"
                              onMouseDown={(e) => {
                                e.preventDefault();
                                e.stopPropagation();
                                setDependencies(dependencies.filter((id) => id !== depId));
                              }}
                            >
                              <Plus className="h-3 w-3 rotate-45 hover:text-destructive" />
                            </div>
                          </Badge>
                        );
                      })
                    ) : (
                      <span className="text-muted-foreground">{t('dependencies.selectPlaceholder')}</span>
                    )}
                  </div>
                </Button>
              </PopoverTrigger>
              <PopoverContent className="w-[400px] p-0" align="start">
                <Command>
                  <CommandInput placeholder="Search tasks..." />
                  <CommandList>
                    <CommandEmpty>No task found.</CommandEmpty>
                    <CommandGroup heading="Available Tasks">
                      {tasks
                        .filter(t => t.status !== 'done') // Only active tasks
                        .map((task) => (
                          <CommandItem
                            key={task.id}
                            value={task.title}
                            onSelect={() => {
                              if (dependencies.includes(task.id)) {
                                setDependencies(dependencies.filter((id) => id !== task.id));
                              } else {
                                setDependencies([...dependencies, task.id]);
                              }
                              // Keep the popover open for multiple selection
                            }}
                          >
                            <div className={cn(
                              "mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
                              dependencies.includes(task.id)
                                ? "bg-primary text-primary-foreground"
                                : "opacity-50 [&_svg]:invisible"
                            )}>
                              <Check className={cn("h-4 w-4")} />
                            </div>
                            <span>{task.title}</span>
                            <Badge variant="outline" className="ml-auto text-[10px] h-4 px-1 py-0 capitalize">
                              {task.status.replace('_', ' ')}
                            </Badge>
                          </CommandItem>
                        ))}
                    </CommandGroup>
                  </CommandList>
                </Command>
              </PopoverContent>
            </Popover>
          </div>
        </div>

        <div className="flex gap-3 pt-2">
          <Button
            variant="outline"
            onClick={handleClose}
            className="flex-1"
            data-testid="button-cancel"
          >
            {t('taskCreation.cancel')}
          </Button>
          <Button
            onClick={handleSave}
            className="flex-1"
            data-testid="button-save-task"
          >
            {t('taskCreation.create')}
          </Button>
        </div>
      </DialogContent>
    </Dialog>
  );
}