'use client';

import { Card } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import { MessageLog } from '@/types/message';
import {
  Mail,
  MessageSquare,
  Smartphone,
  Bell,
  CheckCircle,
  XCircle,
  Clock
} from 'lucide-react';

interface MessageLogTableProps {
  logs: MessageLog[];
}

export function MessageLogTable({ logs }: MessageLogTableProps) {
  const getTypeIcon = (type: string) => {
    switch (type) {
      case 'sms': return <Smartphone className="w-4 h-4" />;
      case 'email': return <Mail className="w-4 h-4" />;
      case 'internal': return <MessageSquare className="w-4 h-4" />;
      case 'push': return <Bell className="w-4 h-4" />;
      default: return <MessageSquare className="w-4 h-4" />;
    }
  };

  const getTypeLabel = (type: string) => {
    const labels: Record<string, string> = {
      sms: '短信',
      email: '邮件',
      internal: '站内信',
      push: '推送',
    };
    return labels[type] || type;
  };

  const getTypeBadge = (type: string) => {
    const colors: Record<string, string> = {
      sms: 'bg-blue-100 text-blue-700',
      email: 'bg-purple-100 text-purple-700',
      internal: 'bg-green-100 text-green-700',
      push: 'bg-orange-100 text-orange-700',
    };
    return colors[type] || 'bg-gray-100 text-gray-700';
  };

  const getStatusBadge = (status: string) => {
    switch (status) {
      case 'sent':
        return { icon: <CheckCircle className="w-3 h-3" />, label: '已发送', className: 'bg-green-100 text-green-700' };
      case 'read':
        return { icon: <CheckCircle className="w-3 h-3" />, label: '已读', className: 'bg-blue-100 text-blue-700' };
      case 'failed':
        return { icon: <XCircle className="w-3 h-3" />, label: '失败', className: 'bg-red-100 text-red-700' };
      case 'pending':
        return { icon: <Clock className="w-3 h-3" />, label: '待发送', className: 'bg-yellow-100 text-yellow-700' };
      default:
        return { icon: <Clock className="w-3 h-3" />, label: status, className: 'bg-gray-100 text-gray-700' };
    }
  };

  const formatDateTime = (dateTime: string | undefined) => {
    if (!dateTime) return '-';
    return dateTime;
  };

  return (
    <Card>
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead>发送时间</TableHead>
            <TableHead>类型</TableHead>
            <TableHead>接收人</TableHead>
            <TableHead>主题/内容</TableHead>
            <TableHead>状态</TableHead>
            <TableHead>重试次数</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {logs.length === 0 ? (
            <TableRow>
              <TableCell colSpan={6} className="text-center text-muted-foreground py-8">
                暂无消息日志
              </TableCell>
            </TableRow>
          ) : (
            logs.map((log) => {
              const statusBadge = getStatusBadge(log.status);
              // 调试信息
              console.log('Log data:', log);
              console.log('Type:', log.type, 'Badge color:', getTypeBadge(log.type));
              return (
                <TableRow key={log.id}>
                  <TableCell className="text-sm text-muted-foreground">
                    {formatDateTime(log.sentTime)}
                  </TableCell>
                  <TableCell>
                    <div className={`inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium ${getTypeBadge(log.type)}`}>
                      {getTypeIcon(log.type)}
                      <span>{getTypeLabel(log.type)}</span>
                    </div>
                  </TableCell>
                  <TableCell>
                    <div>
                      <div>{log.recipientName || '-'}</div>
                      <div className="text-xs text-muted-foreground">{log.recipient}</div>
                    </div>
                  </TableCell>
                  <TableCell className="max-w-xs">
                    {log.subject && (
                      <div className="mb-1 font-medium">{log.subject}</div>
                    )}
                    <div className="text-sm text-muted-foreground truncate">
                      {log.content}
                    </div>
                  </TableCell>
                  <TableCell>
                    <div>
                      <div className={`inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium ${statusBadge.className}`}>
                        {statusBadge.icon}
                        <span>{statusBadge.label}</span>
                      </div>
                      {log.status === 'read' && log.readTime && (
                        <p className="text-xs text-muted-foreground mt-1">
                          {formatDateTime(log.readTime)}
                        </p>
                      )}
                      {log.status === 'failed' && log.failReason && (
                        <p className="text-xs text-red-600 mt-1">{log.failReason}</p>
                      )}
                    </div>
                  </TableCell>
                  <TableCell>
                    <div className="inline-flex items-center px-2 py-1 rounded-full text-xs border border-gray-300 bg-gray-50">
                      {log.retryCount}
                    </div>
                  </TableCell>
                </TableRow>
              );
            })
          )}
        </TableBody>
      </Table>
    </Card>
  );
}