import React, { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import type { ChartType } from "../types";

interface AddWidgetModalProps {
  isOpen: boolean;
  onAdd: (data: { type: ChartType; title: string; dataKey: string }) => void;
  onClose: () => void;
}

export const AddWidgetModal: React.FC<AddWidgetModalProps> = ({
  isOpen,
  onAdd,
  onClose,
}) => {
  const [type, setType] = useState<ChartType>("line");
  const [title, setTitle] = useState("");
  const [dataKey, setDataKey] = useState("requests");

  const handleAdd = () => {
    if (!title.trim()) return;
    onAdd({ type, title: title.trim(), dataKey });
    setTitle("");
    setType("line");
    setDataKey("requests");
    onClose();
  };

  return (
    <AnimatePresence>
      {isOpen && (
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          className="fixed inset-0 bg-black/50 flex items-center justify-center z-50"
          onClick={onClose}
        >
          <motion.div
            initial={{ scale: 0.95, opacity: 0 }}
            animate={{ scale: 1, opacity: 1 }}
            exit={{ scale: 0.95, opacity: 0 }}
            className="bg-secondary rounded-xl shadow-large border border-primary w-80 p-3"
            onClick={(e) => e.stopPropagation()}
          >
            <h3 className="text-xs font-semibold text-primary mb-3">
              Добавить график
            </h3>

            <div className="space-y-2">
              <div>
                <label className="block text-[10px] text-secondary mb-1">
                  Тип
                </label>
                <div className="flex gap-1">
                  {(["line", "bar", "area", "pie"] as ChartType[]).map((t) => (
                    <button
                      key={t}
                      onClick={() => setType(t)}
                      className={`px-2 py-0.5 rounded text-[10px] transition-colors cursor-pointer ${
                        type === t
                          ? "bg-accent-primary text-white"
                          : "bg-tertiary text-secondary hover:bg-tertiary/70"
                      }`}
                    >
                      {t === "line" && "📈"}
                      {t === "bar" && "📊"}
                      {t === "area" && "📉"}
                      {t === "pie" && "🥧"}
                    </button>
                  ))}
                </div>
              </div>

              <div>
                <label className="block text-[10px] text-secondary mb-1">
                  Название
                </label>
                <input
                  type="text"
                  value={title}
                  onChange={(e) => setTitle(e.target.value)}
                  placeholder="Название"
                  className="w-full px-2 py-1 text-[11px] bg-tertiary border border-primary rounded text-primary focus:outline-none focus:border-accent-primary"
                />
              </div>

              <div className="flex gap-1 pt-2">
                <button
                  onClick={handleAdd}
                  className="flex-1 px-2 py-1 bg-accent-primary text-white rounded text-[10px] hover:bg-accent-hover transition-colors cursor-pointer"
                >
                  Добавить
                </button>
                <button
                  onClick={onClose}
                  className="px-2 py-1 bg-tertiary text-secondary rounded text-[10px] hover:bg-secondary transition-colors cursor-pointer"
                >
                  Отмена
                </button>
              </div>
            </div>
          </motion.div>
        </motion.div>
      )}
    </AnimatePresence>
  );
};