import React, { useState } from 'react';
import { Button } from '@/components/ui/button';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger
} from '@/components/ui/tooltip';
import {
  Settings,
  Bell,
  Package,
  MoreHorizontal,
  Edit,
  Trash2
} from 'lucide-react';

interface ActionButtonsCellProps {
  environmentId: number;
  environmentName?: string;
  onConfig: (environmentId: number) => void;
  onNotification: (config: any) => void;
  onAppManage: (environmentId: number) => void;
  onDelete: (config: any) => void;
  config: any;
}

export const ActionButtonsCell: React.FC<ActionButtonsCellProps> = ({
  environmentId,
  environmentName,
  onConfig,
  onNotification,
  onAppManage,
  onDelete,
  config
}) => {
  const [isDropdownOpen, setIsDropdownOpen] = useState(false);

  const handleConfig = () => {
    onConfig(environmentId);
  };

  const handleNotification = () => {
    onNotification(config);
  };

  const handleAppManage = () => {
    onAppManage(environmentId);
  };

  const handleDelete = () => {
    onDelete(config);
  };

  return (
    <div className="flex items-center justify-end gap-1">
      {/* 主要操作按钮 */}
      <TooltipProvider>
        <Tooltip delayDuration={300}>
          <TooltipTrigger asChild>
            <Button
              variant="ghost"
              size="sm"
              onClick={handleConfig}
              className="h-8 px-2"
            >
              <Settings className="h-4 w-4" />
            </Button>
          </TooltipTrigger>
          <TooltipContent className="bg-gray-900 border-gray-700 text-white">
            <div className="text-xs">环境配置</div>
          </TooltipContent>
        </Tooltip>
      </TooltipProvider>

      <TooltipProvider>
        <Tooltip delayDuration={300}>
          <TooltipTrigger asChild>
            <Button
              variant="ghost"
              size="sm"
              onClick={handleNotification}
              className="h-8 px-2"
            >
              <Bell className="h-4 w-4" />
            </Button>
          </TooltipTrigger>
          <TooltipContent className="bg-gray-900 border-gray-700 text-white">
            <div className="text-xs">通知设置</div>
          </TooltipContent>
        </Tooltip>
      </TooltipProvider>

      <TooltipProvider>
        <Tooltip delayDuration={300}>
          <TooltipTrigger asChild>
            <Button
              variant="ghost"
              size="sm"
              onClick={handleAppManage}
              className="h-8 px-2"
            >
              <Package className="h-4 w-4" />
            </Button>
          </TooltipTrigger>
          <TooltipContent className="bg-gray-900 border-gray-700 text-white">
            <div className="text-xs">应用管理</div>
          </TooltipContent>
        </Tooltip>
      </TooltipProvider>

      {/* 更多操作下拉菜单 */}
      <DropdownMenu open={isDropdownOpen} onOpenChange={setIsDropdownOpen}>
        <TooltipProvider>
          <Tooltip delayDuration={300}>
            <TooltipTrigger asChild>
              <DropdownMenuTrigger asChild>
                <Button
                  variant="ghost"
                  size="sm"
                  className="h-8 px-2"
                >
                  <MoreHorizontal className="h-4 w-4" />
                </Button>
              </DropdownMenuTrigger>
            </TooltipTrigger>
            <TooltipContent className="bg-gray-900 border-gray-700 text-white">
              <div className="text-xs">更多操作</div>
            </TooltipContent>
          </Tooltip>
        </TooltipProvider>

        <DropdownMenuContent align="end" className="w-48">
          <DropdownMenuItem onClick={handleConfig} className="cursor-pointer">
            <Edit className="h-4 w-4 mr-2" />
            编辑配置
          </DropdownMenuItem>

          <DropdownMenuSeparator />

          <DropdownMenuItem
            onClick={handleDelete}
            className="cursor-pointer text-destructive focus:text-destructive"
          >
            <Trash2 className="h-4 w-4 mr-2" />
            删除配置
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  );
};
