"use client";

import { useState } from "react";
import {
  Smile,
  MessageSquare,
  Share2,
  Bookmark,
  Pencil,
  Trash2,
} from "lucide-react";
import { EmojiPicker } from "@/components/common/EmojiPicker";
import { Message, addReaction, saveMessage } from "@/lib/api";

interface MessageActionsProps {
  message: Message;
  channelId?: string;
  onReply?: (message: Message) => void;
  onEdit?: (message: Message) => void;
  onDelete?: (message: Message) => void;
}

export function MessageActions({
  message,
  channelId,
  onReply,
  onEdit,
  onDelete,
}: MessageActionsProps) {
  const [showEmoji, setShowEmoji] = useState(false);
  const [saved, setSaved] = useState(false);

  const handleReact = async (emoji: string) => {
    setShowEmoji(false);
    try {
      await addReaction(message.id, emoji);
    } catch (err) {
      console.error("Failed to react:", err);
    }
  };

  const handleShare = async () => {
    const text = message.text || message.content || "";
    try {
      if (navigator.clipboard) {
        await navigator.clipboard.writeText(text);
      }
    } catch (err) {
      console.error("Failed to share:", err);
    }
  };

  const handleSave = async () => {
    try {
      await saveMessage(message.id);
      setSaved(true);
    } catch (err) {
      console.error("Failed to save message:", err);
    }
  };

  const actions = [
    {
      icon: Smile,
      label: "React",
      onClick: () => setShowEmoji((v) => !v),
    },
    {
      icon: MessageSquare,
      label: "Reply in thread",
      onClick: () => onReply?.(message),
    },
    {
      icon: Share2,
      label: "Share",
      onClick: handleShare,
    },
    {
      icon: Bookmark,
      label: saved ? "Saved" : "Save",
      onClick: handleSave,
      active: saved,
    },
    {
      icon: Pencil,
      label: "Edit",
      onClick: () => onEdit?.(message),
    },
    {
      icon: Trash2,
      label: "Delete",
      onClick: () => onDelete?.(message),
      danger: true,
    },
  ];

  return (
    <div className="relative">
      {/* Emoji picker popup */}
      {showEmoji && (
        <EmojiPicker onSelect={handleReact} onClose={() => setShowEmoji(false)} />
      )}
      {/* Floating toolbar */}
      <div className="flex items-center gap-0.5 bg-white rounded-lg shadow-lg border border-gray-200 overflow-hidden">
        {actions.map((action) => (
          <button
            key={action.label}
            onClick={action.onClick}
            className={`p-1.5 transition-colors ${
              action.active
                ? "text-slack-purple bg-slack-purple/10"
                : action.danger
                ? "text-gray-500 hover:bg-red-50 hover:text-red-600"
                : "text-gray-500 hover:bg-gray-100 hover:text-gray-700"
            }`}
            title={action.label}
          >
            <action.icon size={16} />
          </button>
        ))}
      </div>
    </div>
  );
}