import { motion, AnimatePresence } from "motion/react";
import { MessageCircle } from "lucide-react";
import { useEffect } from "react";

interface ChatHistoryItem {
  id: string;
  title: string;
  date: string;
  lastMessage: string;
}

interface ChatHistoryModalProps {
  isOpen: boolean;
  onClose: () => void;
  historyItems: ChatHistoryItem[];
  onSelectChat: (chatId: string) => void;
}

const modalStyles = {
  overlay: {
    backgroundColor: "rgba(0, 0, 0, 0.8)",
  },
  container: {
    background: "linear-gradient(180deg, rgba(32, 76, 106, 0.98) 0%, rgba(20, 40, 60, 0.98) 100%)",
    border: "2px solid rgba(138, 206, 224, 0.3)",
    boxShadow: "0 8px 24px rgba(0, 0, 0, 0.3)",
    maxHeight: "85vh",
  },
  chatItem: {
    background: "linear-gradient(135deg, rgba(50, 107, 118, 0.6) 0%, rgba(32, 76, 106, 0.6) 100%)",
    border: "1.5px solid rgba(138, 206, 224, 0.3)",
    boxShadow: "0 4px 12px rgba(0, 0, 0, 0.3)",
  },
  iconContainer: {
    background: "linear-gradient(135deg, rgba(138, 206, 224, 0.3) 0%, rgba(76, 127, 137, 0.3) 100%)",
  },
  closeButton: {
    background: "linear-gradient(135deg, rgba(96, 147, 157, 0.6) 0%, rgba(76, 127, 137, 0.6) 100%)",
    boxShadow: "0 4px 12px rgba(0, 0, 0, 0.3)",
    border: "1.5px solid rgba(138, 206, 224, 0.3)",
  },
};

export function ChatHistoryModal({
  isOpen,
  onClose,
  historyItems,
  onSelectChat,
}: ChatHistoryModalProps) {
  // Close on Escape key
  useEffect(() => {
    const handleEsc = (e: KeyboardEvent) => {
      if (e.key === "Escape") onClose();
    };
    if (isOpen) {
      window.addEventListener("keydown", handleEsc);
      return () => window.removeEventListener("keydown", handleEsc);
    }
  }, [isOpen, onClose]);

  return (
    <AnimatePresence>
      {isOpen && (
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          className="fixed inset-0 z-[100] flex items-center justify-center p-4"
          style={modalStyles.overlay}
          onClick={onClose}
        >
          <motion.div
            initial={{ scale: 0.9, y: 20 }}
            animate={{ scale: 1, y: 0 }}
            exit={{ scale: 0.9, y: 20 }}
            onClick={(e) => e.stopPropagation()}
            className="w-full max-w-md rounded-3xl overflow-hidden"
            style={modalStyles.container}
          >
            {/* Header */}
            <div className="px-6 py-4 border-b" style={{ borderColor: "rgba(138, 206, 224, 0.2)" }}>
              <h3
                className="text-lg font-bold text-center text-white"
                style={{ textShadow: "0 2px 4px rgba(0, 0, 0, 0.3)" }}
              >
                تاریخچه گفتگوها
              </h3>
            </div>

            {/* Content */}
            <div className="overflow-y-auto p-6" style={{ maxHeight: "calc(85vh - 120px)" }}>
              <div className="space-y-3">
                {historyItems.map((chat, index) => (
                  <motion.button
                    key={chat.id}
                    initial={{ opacity: 0, x: -20 }}
                    animate={{ opacity: 1, x: 0 }}
                    transition={{ delay: index * 0.1 }}
                    whileTap={{ scale: 0.95 }}
                    onClick={() => {
                      onClose();
                      onSelectChat(chat.id);
                    }}
                    className="w-full p-4 rounded-2xl text-right"
                    style={modalStyles.chatItem}
                  >
                    <div className="flex items-start gap-3">
                      <div
                        className="flex-shrink-0 w-10 h-10 rounded-full flex items-center justify-center"
                        style={modalStyles.iconContainer}
                      >
                        <MessageCircle className="w-5 h-5" style={{ color: "#8ACEE0" }} />
                      </div>
                      <div className="flex-1">
                        <h4 className="text-white font-bold text-sm mb-1">{chat.title}</h4>
                        <p className="text-white/60 text-xs mb-1">{chat.lastMessage}</p>
                        <p className="text-white/40 text-xs">{chat.date}</p>
                      </div>
                    </div>
                  </motion.button>
                ))}
              </div>
            </div>

            {/* Footer */}
            <div className="px-6 py-4 border-t" style={{ borderColor: "rgba(138, 206, 224, 0.2)" }}>
              <motion.button
                whileTap={{ scale: 0.95 }}
                onClick={onClose}
                className="w-full py-3 rounded-full font-bold text-white"
                style={modalStyles.closeButton}
              >
                بستن
              </motion.button>
            </div>
          </motion.div>
        </motion.div>
      )}
    </AnimatePresence>
  );
}
