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

interface ChangeHistoryProps {
  history: MachineryChangeHistory[];
}

export function ChangeHistory({ history }: ChangeHistoryProps) {
  const formatDate = (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}天前`;
    return formatDate(dateString);
  };

  return (
    <div className="space-y-4">
      {/* 变更记录列表 */}
      <Card className="p-6">
        <div className="flex items-center justify-between mb-4">
          <h3 className="text-primary">变更记录</h3>
          <Badge variant="secondary">
            {history.length} 条记录
          </Badge>
        </div>

        {history.length === 0 ? (
          <div className="text-center text-muted-foreground py-8">
            暂无变更记录
          </div>
        ) : (
          <ScrollArea className="h-[500px]">
            <div className="space-y-4 pr-4">
              {history.map((item, index) => (
                <div key={item.id} className="relative">
                  {index !== history.length - 1 && (
                    <div className="absolute left-[11px] top-8 bottom-0 w-0.5 bg-border" />
                  )}
                  <div className="flex gap-4">
                    <div className="relative flex-shrink-0">
                      <div className="w-6 h-6 rounded-full bg-primary flex items-center justify-center">
                        <div className="w-2 h-2 rounded-full bg-white" />
                      </div>
                    </div>
                    <Card className="flex-1 p-4 hover:shadow-md transition-shadow">
                      <div className="space-y-2">
                        <div className="flex items-start justify-between">
                          <div className="space-y-1 flex-1">
                            <div className="flex items-center gap-2 flex-wrap">
                              <Badge variant="outline" className="text-xs">
                                {item.fieldLabel}
                              </Badge>
                              <span className="text-xs text-muted-foreground">已修改</span>
                            </div>
                            <div className="text-sm space-y-1">
                              <div className="flex items-center gap-2">
                                <span className="text-muted-foreground">旧值:</span>
                                <span className="line-through text-muted-foreground">
                                  {formatFieldValue(item.fieldName, item.oldValue)}
                                </span>
                              </div>
                              <div className="flex items-center gap-2">
                                <span className="text-muted-foreground">新值:</span>
                                <span className="text-primary">
                                  {formatFieldValue(item.fieldName, item.newValue)}
                                </span>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div className="flex items-center gap-4 text-xs text-muted-foreground pt-2 border-t">
                          <div className="flex items-center gap-1">
                            <User className="w-3 h-3" />
                            <span>{item.operator}</span>
                          </div>
                          <div className="flex items-center gap-1">
                            <Clock className="w-3 h-3" />
                            <span title={formatDate(item.operatedAt)}>
                              {getRelativeTime(item.operatedAt)}
                            </span>
                          </div>
                        </div>
                      </div>
                    </Card>
                  </div>
                </div>
              ))}
            </div>
          </ScrollArea>
        )}
      </Card>
    </div>
  );
}
