// modules/dashboard/components/WidgetSettings.tsx
import React, { useState } from "react";
import { motion } from "framer-motion";
import type { ChartType, ChartWidget } from "../types";

interface WidgetSettingsProps {
  widget: ChartWidget;
  onUpdate: (widget: ChartWidget) => void;
  onRemove: () => void;
  onClose: () => void;
}

export const WidgetSettings: React.FC<WidgetSettingsProps> = ({
  widget,
  onUpdate,
  onRemove,
  onClose,
}) => {
  const [type, setType] = useState<ChartType>(widget.type);
  const [title, setTitle] = useState(widget.title);

  const handleSave = () => {
    onUpdate({ ...widget, type, title });
    onClose();
  };

  return (
    <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)}
              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={handleSave}
              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={onRemove}
              className="px-2 py-1 bg-red-500/10 text-red-500 rounded text-[10px] hover:bg-red-500/20 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>
  );
};