import React from 'react';
import { Badge } from '@/components/ui/badge';
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger
} from '@/components/ui/tooltip';
import {
  Bell,
  MessageSquare,
  Mail,
  AlertTriangle,
  CheckCircle,
  XCircle
} from 'lucide-react';
import type { NotificationConfig } from '../types';

interface NotificationChannelCellProps {
  notificationConfig?: NotificationConfig | null;
}

// 通知渠道类型映射
const getChannelIcon = (channelType?: string) => {
  switch (channelType) {
    case 'WEWORK':
      return <MessageSquare className="h-3 w-3" />;
    case 'EMAIL':
      return <Mail className="h-3 w-3" />;
    case 'DINGTALK':
      return <Bell className="h-3 w-3" />;
    default:
      return <Bell className="h-3 w-3" />;
  }
};

// 通知类型配置
const notificationTypes = [
  {
    key: 'preApprovalNotificationEnabled',
    label: '审批前',
    variant: 'success' as const,
    description: '提交部署申请进入审批时发送通知'
  },
  {
    key: 'buildNotificationEnabled',
    label: '构建',
    variant: 'default' as const,
    description: '构建状态变更时发送通知'
  },
  {
    key: 'buildFailureFileEnabled',
    label: '失败日志',
    variant: 'destructive' as const,
    description: '构建失败时发送日志文件'
  }
];

export const NotificationChannelCell: React.FC<NotificationChannelCellProps> = ({
  notificationConfig
}) => {
  // 未配置状态
  if (!notificationConfig) {
    return (
      <div className="flex items-center gap-2 text-muted-foreground text-sm">
        <Bell className="h-3 w-3 opacity-50" />
        <span>未配置</span>
      </div>
    );
  }

  const {
    notificationChannelName,
    preApprovalNotificationEnabled,
    buildNotificationEnabled,
    buildFailureFileEnabled,
  } = notificationConfig;

  // 计算启用的通知类型
  const enabledNotifications = notificationTypes.filter(type =>
    notificationConfig[type.key as keyof NotificationConfig]
  );

  // 渠道名称显示
  const channelName = notificationChannelName || '未知渠道';

  // 状态判断
  const hasEnabledNotifications = enabledNotifications.length > 0;

  return (
    <TooltipProvider>
      <Tooltip delayDuration={300}>
        <TooltipTrigger asChild>
          <div className="flex items-center gap-1.5 min-w-0 max-w-48">
            {getChannelIcon(notificationConfig.channelType)}
            <span className="text-sm font-medium truncate">
              {channelName}
            </span>
            {hasEnabledNotifications ? (
              <div className="flex gap-0.5 ml-auto">
                {enabledNotifications.map((notification) => (
                  <div
                    key={notification.key}
                    className={`w-1.5 h-1.5 rounded-full ${
                      notification.variant === 'success' ? 'bg-green-500' :
                      notification.variant === 'destructive' ? 'bg-red-500' :
                      'bg-blue-500'
                    }`}
                    title={notification.label}
                  />
                ))}
              </div>
            ) : (
              <span className="text-xs text-muted-foreground ml-auto">未启用</span>
            )}
          </div>
        </TooltipTrigger>

        <TooltipContent
          side="top"
          align="start"
          className="max-w-xs bg-gray-900 border-gray-700 text-white"
        >
          <div className="text-white">
            {/* 启用的通知类型 */}
            {hasEnabledNotifications ? (
              <div className="space-y-1">
                <div className="text-xs font-medium text-gray-300 mb-1">启用的通知类型:</div>
                <div className="flex flex-wrap gap-1">
                  {enabledNotifications.map((notification) => (
                    <Badge
                      key={notification.key}
                      variant="outline"
                      className="text-xs border-gray-600 text-gray-200"
                    >
                      {notification.label}
                    </Badge>
                  ))}
                </div>
              </div>
            ) : (
              <div className="text-xs text-gray-300">未启用任何通知</div>
            )}
          </div>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
};
