import { MachineryChangeHistory } from '../../types/machinery';
import { Card } from '../ui/card';
import { ScrollArea } from '../ui/scroll-area';
import { Badge } from '../ui/badge';
import { Clock, User, ArrowRight } from 'lucide-react';
import { formatFieldValue } from '../../lib/changeTracker';

interface ChangeHistoryListProps {
  history: MachineryChangeHistory[];
}

/**
 * 变更历史列表组件（简化版）
 * 只显示基本的变更记录列表，无统计卡片和过滤功能
 */
export function ChangeHistoryList({ history }: ChangeHistoryListProps) {
  // 按时间倒序排序
  const sortedHistory = [...history].sort((a, b) => 
    new Date(b.operatedAt).getTime() - new Date(a.operatedAt).getTime()
  );

  // 格式化日期时间
  const formatDateTime = (dateString: string): string => {
    const date = new Date(dateString);
    return date.toLocaleString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit'
    });
  };

  // 获取相对时间描述
  const getRelativeTime = (dateString: string): string => {
    const date = new Date(dateString);
    const now = new Date();
    const diff = now.getTime() - date.getTime();
    
    const minutes = Math.floor(diff / 60000);
    const hours = Math.floor(diff / 3600000);
    const days = Math.floor(diff / 86400000);
    
    if (minutes < 1) return '刚刚';
    if (minutes < 60) return `${minutes}分钟前`;
    if (hours < 24) return `${hours}小时前`;
    if (days < 7) return `${days}天前`;
    if (days < 30) return `${Math.floor(days / 7)}周前`;
    if (days < 365) return `${Math.floor(days / 30)}个月前`;
    return `${Math.floor(days / 365)}年前`;
  };

  return (
    <Card className="p-6">
      <div className="mb-4">
        <h3 className="text-primary">变更历史</h3>
        <p className="text-sm text-muted-foreground mt-1">
          共 {sortedHistory.length} 条变更记录
        </p>
      </div>

      {sortedHistory.length === 0 ? (
        <div className="text-center text-muted-foreground py-12">
          <Clock className="w-16 h-16 mx-auto mb-4 opacity-20" />
          <p>暂无变更记录</p>
          <p className="text-sm mt-2">该设备尚未进行任何信息修改</p>
        </div>
      ) : (
        <ScrollArea className="h-[600px] pr-4">
          <div className="space-y-3">
            {sortedHistory.map((item, index) => (
              <Card 
                key={item.id} 
                className="p-4 hover:shadow-md transition-shadow border-l-4 border-l-primary"
              >
                <div className="space-y-3">
                  {/* 字段标识和时间 */}
                  <div className="flex items-start justify-between">
                    <div className="flex items-center gap-2">
                      <Badge variant="outline" className="text-xs font-medium">
                        {item.fieldLabel}
                      </Badge>
                      <span className="text-xs text-muted-foreground">已修改</span>
                    </div>
                    <div className="text-xs text-muted-foreground" title={formatDateTime(item.operatedAt)}>
                      {getRelativeTime(item.operatedAt)}
                    </div>
                  </div>

                  {/* 变更内容 */}
                  <div className="bg-muted/30 rounded-lg p-3 space-y-2">
                    {/* 旧值 */}
                    <div className="flex items-start gap-2">
                      <span className="text-xs text-muted-foreground min-w-[60px]">修改前:</span>
                      <span className="text-sm line-through text-muted-foreground flex-1">
                        {formatFieldValue(item.fieldName, item.oldValue)}
                      </span>
                    </div>

                    {/* 箭头 */}
                    <div className="flex items-center justify-center">
                      <ArrowRight className="w-4 h-4 text-primary" />
                    </div>

                    {/* 新值 */}
                    <div className="flex items-start gap-2">
                      <span className="text-xs text-muted-foreground min-w-[60px]">修改后:</span>
                      <span className="text-sm text-primary flex-1">
                        {formatFieldValue(item.fieldName, item.newValue)}
                      </span>
                    </div>
                  </div>

                  {/* 底部信息栏 */}
                  <div className="flex items-center justify-between pt-2 border-t">
                    <div className="flex items-center gap-1 text-xs text-muted-foreground">
                      <User className="w-3 h-3" />
                      <span>操作人: {item.operator}</span>
                    </div>
                    <div className="flex items-center gap-1 text-xs text-muted-foreground">
                      <Clock className="w-3 h-3" />
                      <span>{formatDateTime(item.operatedAt)}</span>
                    </div>
                  </div>
                </div>
              </Card>
            ))}
          </div>
        </ScrollArea>
      )}
    </Card>
  );
}
