import { useState, useEffect } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { X, Trash2, ChevronDown, ChevronUp, Calendar, Clock, Repeat } from "lucide-react"
import { useMutation, useQueryClient } from "@tanstack/react-query"
import { tasksApi } from "../api/tasks"
import clsx from "clsx"
import { format, addDays } from "date-fns"

const COLORS = [
  "#6B7280", "#6366f1", "#8b5cf6", "#d946ef", "#ec4899",
  "#f43f5e", "#f97316", "#eab308", "#22c55e", "#0ea5e9",
]

const ICON_CATEGORIES = [
  { name: "Продуктивность", icons: ["📋", "📝", "✅", "📌", "🎯", "💡", "📅", "⏰"] },
  { name: "Работа", icons: ["💼", "💻", "📧", "📞", "📊", "📈", "🖥️", "⌨️"] },
  { name: "Дом", icons: ["🏠", "🧹", "🧺", "🍳", "🛒", "🔧", "🪴", "🛋️"] },
  { name: "Финансы", icons: ["💰", "💳", "📊", "💵", "🏦", "🧾"] },
  { name: "Здоровье", icons: ["💊", "🏃", "🧘", "💪", "🩺", "🦷"] },
  { name: "Разное", icons: ["⭐", "🎁", "📦", "✈️", "🚗", "📷", "🎉"] },
]

const PRIORITIES = [
  { value: 0, label: "Без приоритета", color: "bg-gray-100 dark:bg-gray-800 text-gray-600" },
  { value: 1, label: "Низкий", color: "bg-blue-100 text-blue-700" },
  { value: 2, label: "Средний", color: "bg-yellow-100 text-yellow-700" },
  { value: 3, label: "Высокий", color: "bg-red-100 text-red-700" },
]

const RECURRENCE_TYPES = [
  { value: "daily", label: "Ежедневно" },
  { value: "weekly", label: "Еженедельно" },
  { value: "monthly", label: "Ежемесячно" },
  { value: "custom", label: "Каждые N дней" },
]

export default function EditTaskModal({ open, onClose, task }) {
  const today = format(new Date(), "yyyy-MM-dd")
  const tomorrow = format(addDays(new Date(), 1), "yyyy-MM-dd")
  
  const [title, setTitle] = useState("")
  const [description, setDescription] = useState("")
  const [color, setColor] = useState(COLORS[0])
  const [icon, setIcon] = useState("📋")
  const [dueDate, setDueDate] = useState("")
  const [priority, setPriority] = useState(0)
  const [reminderTime, setReminderTime] = useState("")
  const [error, setError] = useState("")
  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
  const [showAllIcons, setShowAllIcons] = useState(false)
  
  // Recurring state
  const [isRecurring, setIsRecurring] = useState(false)
  const [recurrenceType, setRecurrenceType] = useState("daily")
  const [recurrenceInterval, setRecurrenceInterval] = useState(1)
  const [recurrenceEndDate, setRecurrenceEndDate] = useState("")
  
  const queryClient = useQueryClient()

  useEffect(() => {
    if (task && open) {
      setTitle(task.title || "")
      setDescription(task.description || "")
      setColor(task.color || COLORS[0])
      setIcon(task.icon || "📋")
      setDueDate(task.due_date || "")
      setPriority(task.priority || 0)
      setReminderTime(task.reminder_time || "")
      setIsRecurring(task.is_recurring || false)
      setRecurrenceType(task.recurrence_type || "daily")
      setRecurrenceInterval(task.recurrence_interval || 1)
      setRecurrenceEndDate(task.recurrence_end_date || "")
      setError("")
      setShowDeleteConfirm(false)
      setShowAllIcons(false)
    }
  }, [task, open])

  const updateMutation = useMutation({
    mutationFn: (data) => tasksApi.update(task.id, data),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["tasks"] })
      queryClient.invalidateQueries({ queryKey: ["tasks-today"] })
      onClose()
    },
    onError: (err) => {
      setError(err.response?.data?.error || "Ошибка сохранения")
    },
  })

  const deleteMutation = useMutation({
    mutationFn: () => tasksApi.delete(task.id),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["tasks"] })
      queryClient.invalidateQueries({ queryKey: ["tasks-today"] })
      onClose()
    },
    onError: (err) => {
      setError(err.response?.data?.error || "Ошибка удаления")
    },
  })

  const handleClose = () => {
    setError("")
    setShowDeleteConfirm(false)
    setShowAllIcons(false)
    onClose()
  }

  const handleSubmit = (e) => {
    e.preventDefault()
    if (!title.trim()) {
      setError("Введи название задачи")
      return
    }
    
    const data = {
      title,
      description,
      color,
      icon,
      due_date: dueDate || null,
      priority,
      reminder_time: reminderTime || null,
      is_recurring: isRecurring,
      recurrence_type: isRecurring ? recurrenceType : null,
      recurrence_interval: isRecurring && recurrenceType === "custom" ? recurrenceInterval : 1,
      recurrence_end_date: isRecurring && recurrenceEndDate ? recurrenceEndDate : null,
    }
    
    updateMutation.mutate(data)
  }

  const popularIcons = ["📋", "📝", "✅", "🎯", "💼", "🏠", "💰", "📞"]

  if (!task) return null

  return (
    <AnimatePresence>
      {open && (
        <>
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            onClick={handleClose}
            className="fixed inset-0 bg-black/50 backdrop-blur-sm z-40"
          />
          <motion.div
            initial={{ opacity: 0, y: 100 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: 100 }}
            className="fixed bottom-0 left-0 right-0 z-50 p-4 sm:p-0 sm:flex sm:items-center sm:justify-center sm:inset-0"
          >
            <div className="bg-white dark:bg-gray-900 rounded-2xl sm:rounded-2xl w-full max-w-md max-h-[85vh] overflow-auto">
              <div className="sticky top-0 bg-white dark:bg-gray-900 border-b border-gray-100 dark:border-gray-800 px-4 py-3 flex items-center justify-between">
                <h2 className="text-lg font-semibold">Редактировать задачу</h2>
                <button
                  onClick={handleClose}
                  className="p-2 text-gray-400 dark:text-gray-500 hover:text-gray-600 rounded-xl hover:bg-gray-100 dark:hover:bg-gray-800 dark:bg-gray-800"
                >
                  <X size={20} />
                </button>
              </div>

              <form onSubmit={handleSubmit} className="p-4 space-y-4">
                {error && (
                  <div className="p-3 rounded-xl bg-red-50 text-red-600 text-sm">
                    {error}
                  </div>
                )}

                <div>
                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">
                    Название
                  </label>
                  <input
                    type="text"
                    value={title}
                    onChange={(e) => setTitle(e.target.value)}
                    className="input"
                    placeholder="Что нужно сделать?"
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">
                    Описание (опционально)
                  </label>
                  <textarea
                    value={description}
                    onChange={(e) => setDescription(e.target.value)}
                    className="input min-h-[80px] resize-none"
                    placeholder="Подробности задачи..."
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    Срок выполнения
                  </label>
                  <div className="flex gap-2 mb-2">
                    <button
                      type="button"
                      onClick={() => setDueDate(today)}
                      className={clsx(
                        "px-3 py-1.5 rounded-lg text-sm font-medium transition-all",
                        dueDate === today
                          ? "bg-primary-500 text-white"
                          : "bg-gray-100 dark:bg-gray-800 text-gray-600 hover:bg-gray-200"
                      )}
                    >
                      Сегодня
                    </button>
                    <button
                      type="button"
                      onClick={() => setDueDate(tomorrow)}
                      className={clsx(
                        "px-3 py-1.5 rounded-lg text-sm font-medium transition-all",
                        dueDate === tomorrow
                          ? "bg-primary-500 text-white"
                          : "bg-gray-100 dark:bg-gray-800 text-gray-600 hover:bg-gray-200"
                      )}
                    >
                      Завтра
                    </button>
                    <button
                      type="button"
                      onClick={() => setDueDate("")}
                      className={clsx(
                        "px-3 py-1.5 rounded-lg text-sm font-medium transition-all",
                        !dueDate
                          ? "bg-primary-500 text-white"
                          : "bg-gray-100 dark:bg-gray-800 text-gray-600 hover:bg-gray-200"
                      )}
                    >
                      Без срока
                    </button>
                  </div>
                  <div className="relative">
                    <Calendar className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 dark:text-gray-500" size={18} />
                    <input
                      type="date"
                      value={dueDate}
                      onChange={(e) => setDueDate(e.target.value)}
                      className="input pl-10"
                    />
                  </div>
                </div>

                {/* Recurring Section */}
                <div className="border-t border-gray-100 dark:border-gray-800 pt-4">
                  <div className="flex items-center justify-between mb-3">
                    <div className="flex items-center gap-2">
                      <Repeat size={18} className={isRecurring ? "text-primary-500" : "text-gray-400 dark:text-gray-500"} />
                      <label className="text-sm font-medium text-gray-700 dark:text-gray-300">Повторять</label>
                    </div>
                    <button
                      type="button"
                      onClick={() => setIsRecurring(!isRecurring)}
                      className={clsx(
                        "w-12 h-6 rounded-full transition-all relative",
                        isRecurring ? "bg-primary-500" : "bg-gray-200"
                      )}
                    >
                      <div className={clsx(
                        "absolute top-1 w-4 h-4 rounded-full bg-white dark:bg-gray-900 shadow-sm transition-all",
                        isRecurring ? "right-1" : "left-1"
                      )} />
                    </button>
                  </div>
                  
                  <AnimatePresence>
                    {isRecurring && (
                      <motion.div
                        initial={{ opacity: 0, height: 0 }}
                        animate={{ opacity: 1, height: "auto" }}
                        exit={{ opacity: 0, height: 0 }}
                        className="space-y-3"
                      >
                        <div className="flex flex-wrap gap-2">
                          {RECURRENCE_TYPES.map((type) => (
                            <button
                              key={type.value}
                              type="button"
                              onClick={() => setRecurrenceType(type.value)}
                              className={clsx(
                                "px-3 py-1.5 rounded-lg text-sm font-medium transition-all",
                                recurrenceType === type.value
                                  ? "bg-primary-500 text-white"
                                  : "bg-gray-100 dark:bg-gray-800 text-gray-600 hover:bg-gray-200"
                              )}
                            >
                              {type.label}
                            </button>
                          ))}
                        </div>
                        
                        {recurrenceType === "custom" && (
                          <div className="flex items-center gap-2">
                            <span className="text-sm text-gray-600">Каждые</span>
                            <input
                              type="number"
                              min="1"
                              max="365"
                              value={recurrenceInterval}
                              onChange={(e) => setRecurrenceInterval(parseInt(e.target.value) || 1)}
                              className="input w-20 text-center"
                            />
                            <span className="text-sm text-gray-600">дней</span>
                          </div>
                        )}
                        
                        <div>
                          <label className="block text-xs text-gray-500 dark:text-gray-400 dark:text-gray-500 mb-1">
                            Повторять до (опционально)
                          </label>
                          <input
                            type="date"
                            value={recurrenceEndDate}
                            onChange={(e) => setRecurrenceEndDate(e.target.value)}
                            className="input"
                            min={dueDate || today}
                          />
                        </div>
                      </motion.div>
                    )}
                  </AnimatePresence>
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    Напоминание (опционально)
                  </label>
                  <div className="relative">
                    <Clock className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 dark:text-gray-500" size={18} />
                    <input
                      type="time"
                      value={reminderTime}
                      onChange={(e) => setReminderTime(e.target.value)}
                      className="input pl-10"
                    />
                  </div>
                  <p className="text-xs text-gray-500 dark:text-gray-400 dark:text-gray-500 mt-1">
                    Получишь напоминание в Telegram в указанное время
                  </p>
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    Приоритет
                  </label>
                  <div className="flex gap-2 flex-wrap">
                    {PRIORITIES.map((p) => (
                      <button
                        key={p.value}
                        type="button"
                        onClick={() => setPriority(p.value)}
                        className={clsx(
                          "px-3 py-1.5 rounded-lg text-sm font-medium transition-all",
                          priority === p.value
                            ? p.color + " ring-2 ring-offset-1 ring-gray-400"
                            : "bg-gray-100 dark:bg-gray-800 text-gray-600 hover:bg-gray-200"
                        )}
                      >
                        {p.label}
                      </button>
                    ))}
                  </div>
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    Иконка
                  </label>
                  <div className="flex flex-wrap gap-2">
                    {popularIcons.map((ic) => (
                      <button
                        key={ic}
                        type="button"
                        onClick={() => setIcon(ic)}
                        className={clsx(
                          "w-10 h-10 rounded-xl flex items-center justify-center text-xl transition-all",
                          icon === ic
                            ? "bg-primary-100 ring-2 ring-primary-500"
                            : "bg-gray-100 dark:bg-gray-800 hover:bg-gray-200"
                        )}
                      >
                        {ic}
                      </button>
                    ))}
                  </div>
                  
                  <button
                    type="button"
                    onClick={() => setShowAllIcons(!showAllIcons)}
                    className="mt-2 flex items-center gap-1 text-sm text-primary-600 hover:text-primary-700"
                  >
                    {showAllIcons ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
                    {showAllIcons ? "Скрыть" : "Все иконки"}
                  </button>

                  <AnimatePresence>
                    {showAllIcons && (
                      <motion.div
                        initial={{ opacity: 0, height: 0 }}
                        animate={{ opacity: 1, height: "auto" }}
                        exit={{ opacity: 0, height: 0 }}
                        className="mt-3 space-y-3"
                      >
                        {ICON_CATEGORIES.map((category) => (
                          <div key={category.name}>
                            <p className="text-xs text-gray-500 dark:text-gray-400 dark:text-gray-500 mb-1.5">{category.name}</p>
                            <div className="flex flex-wrap gap-1.5">
                              {category.icons.map((ic) => (
                                <button
                                  key={ic}
                                  type="button"
                                  onClick={() => setIcon(ic)}
                                  className={clsx(
                                    "w-9 h-9 rounded-lg flex items-center justify-center text-lg transition-all",
                                    icon === ic
                                      ? "bg-primary-100 ring-2 ring-primary-500"
                                      : "bg-gray-100 dark:bg-gray-800 hover:bg-gray-200"
                                  )}
                                >
                                  {ic}
                                </button>
                              ))}
                            </div>
                          </div>
                        ))}
                      </motion.div>
                    )}
                  </AnimatePresence>
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    Цвет
                  </label>
                  <div className="flex flex-wrap gap-2">
                    {COLORS.map((c) => (
                      <button
                        key={c}
                        type="button"
                        onClick={() => setColor(c)}
                        className={clsx(
                          "w-8 h-8 rounded-full transition-all",
                          color === c ? "ring-2 ring-offset-2 ring-gray-400 scale-110" : ""
                        )}
                        style={{ backgroundColor: c }}
                      />
                    ))}
                  </div>
                </div>

                <div className="pt-2 space-y-3">
                  <button
                    type="submit"
                    disabled={updateMutation.isPending}
                    className="btn btn-primary w-full"
                  >
                    {updateMutation.isPending ? "Сохраняем..." : "Сохранить"}
                  </button>
                  
                  {!showDeleteConfirm ? (
                    <button
                      type="button"
                      onClick={() => setShowDeleteConfirm(true)}
                      className="btn w-full flex items-center justify-center gap-2 text-red-600 hover:bg-red-50"
                    >
                      <Trash2 size={18} />
                      Удалить задачу
                    </button>
                  ) : (
                    <div className="flex gap-2">
                      <button
                        type="button"
                        onClick={() => setShowDeleteConfirm(false)}
                        className="btn flex-1"
                      >
                        Отмена
                      </button>
                      <button
                        type="button"
                        onClick={() => deleteMutation.mutate()}
                        disabled={deleteMutation.isPending}
                        className="btn flex-1 bg-red-500 text-white hover:bg-red-600"
                      >
                        {deleteMutation.isPending ? "Удаляем..." : "Да, удалить"}
                      </button>
                    </div>
                  )}
                </div>
              </form>
            </div>
          </motion.div>
        </>
      )}
    </AnimatePresence>
  )
}
