"use client";

import { motion } from "framer-motion";
import BoldIcon from "@/components/ui/BoldIcon";
import ChatBoldIcon from "./ChatBoldIcon";
import { QUICK_REACTIONS } from "@/lib/chat/reactions";
import { useTranslation } from "react-i18next";

interface ChatActionBarProps {
  onReply: () => void;
  onForward?: () => void;
  onCopy?: () => void;
  onCancel: () => void;
  onReact?: (emoji: string) => void;
  hideForward?: boolean;
  disableCopy?: boolean;
}

export default function ChatActionBar({
  onReply,
  onForward,
  onCopy,
  onCancel,
  onReact,
  hideForward = false,
  disableCopy = false,
}: ChatActionBarProps) {
  const { t } = useTranslation("common");

  return (
    <motion.div
      initial={{ y: 24, opacity: 0 }}
      animate={{ y: 0, opacity: 1 }}
      exit={{ y: 24, opacity: 0 }}
      transition={{ duration: 0.28, ease: [0.25, 0.46, 0.45, 0.94] }}
      className="pointer-events-none fixed bottom-0 left-0 right-0 z-[60] flex justify-center px-3 chat-input-area--thread"
    >
      <div className="pointer-events-auto mb-2 flex w-full max-w-lg flex-col gap-2">
        {onReact ? (
          <div className="glass-panel flex items-center justify-between gap-1 rounded-2xl px-3 py-2">
            {QUICK_REACTIONS.map((emoji) => (
              <button
                key={emoji}
                type="button"
                onClick={() => onReact(emoji)}
                className="gentle-transition rounded-full px-2 py-1 text-xl active:scale-110"
                aria-label={t("chats.aria.reaction", { emoji })}
              >
                {emoji}
              </button>
            ))}
          </div>
        ) : null}
        <div className="flex w-full gap-2">
          <button
            type="button"
            onClick={onCancel}
            className="glass-panel gentle-transition flex-1 rounded-full py-3 text-sm font-medium active:scale-[0.98]"
          >
            {t("chats.actions.cancel")}
          </button>
          <button
            type="button"
            onClick={onReply}
            className="chat-action-btn gentle-transition flex flex-1 items-center justify-center gap-2 rounded-full py-3 text-sm font-semibold text-white active:scale-[0.98]"
          >
            <ChatBoldIcon name="reply" size={18} className="text-white" />
            {t("chats.actions.reply")}
          </button>
          {onCopy ? (
            <button
              type="button"
              onClick={onCopy}
              disabled={disableCopy}
              className="glass-panel gentle-transition flex flex-1 items-center justify-center gap-2 rounded-full py-3 text-sm font-semibold active:scale-[0.98] disabled:cursor-not-allowed disabled:opacity-50"
            >
              <BoldIcon name="copy" size={18} />
              {t("chats.actions.copy")}
            </button>
          ) : null}
          {!hideForward && onForward ? (
            <button
              type="button"
              onClick={onForward}
              className="chat-forward-btn gentle-transition flex flex-1 items-center justify-center gap-2 rounded-full py-3 text-sm font-semibold text-white active:scale-[0.98]"
            >
              <BoldIcon name="share" size={18} tinted className="text-white" />
              {t("chats.actions.forward")}
            </button>
          ) : null}
        </div>
      </div>
    </motion.div>
  );
}
