'use client';

import { useEffect, useState } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Loader2 } from 'lucide-react';
import { format } from 'date-fns';
import { zhCN } from 'date-fns/locale';

interface ApprovalHistoryProps {
  businessType: string;
  businessId: string;
  instanceId?: string;
}

interface HistoryItem {
  id: string;
  nodeId: string;
  nodeName: string;
  action: string;
  operator: {
    displayName: string;
    avatar?: string;
  };
  comment?: string;
  createdAt: string;
}

const actionLabels: Record<string, string> = {
  SUBMIT: '提交',
  APPROVE: '通过',
  REJECT: '驳回',
  RETURN: '退回',
  FORWARD: '转发',
  WITHDRAW: '撤回',
  ADD_APPROVER: '加签',
  TIMEOUT: '超时',
  SYSTEM: '系统操作',
};

const actionColors: Record<string, string> = {
  SUBMIT: 'bg-blue-100 text-blue-700',
  APPROVE: 'bg-green-100 text-green-700',
  REJECT: 'bg-red-100 text-red-700',
  RETURN: 'bg-yellow-100 text-yellow-700',
  FORWARD: 'bg-purple-100 text-purple-700',
  WITHDRAW: 'bg-gray-100 text-gray-700',
  ADD_APPROVER: 'bg-indigo-100 text-indigo-700',
  TIMEOUT: 'bg-orange-100 text-orange-700',
  SYSTEM: 'bg-gray-100 text-gray-700',
};

export function ApprovalHistory({
  businessType,
  businessId,
  instanceId,
}: ApprovalHistoryProps) {
  const [history, setHistory] = useState<HistoryItem[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    loadHistory();
  }, [businessType, businessId, instanceId]);

  const loadHistory = async () => {
    if (!instanceId) {
      // 如果没有 instanceId，先通过业务信息获取
      try {
        const response = await fetch(
          `/api/v1/approval/diagram/${businessType}/${businessId}`,
          {
            headers: {
              Authorization: `Bearer ${localStorage.getItem('token')}`,
            },
          }
        );

        if (!response.ok) {
          throw new Error('Failed to load instance');
        }

        const result = await response.json();
        const data = result.data || result;
        instanceId = data.instanceId;
      } catch (err: any) {
        setError(err.message);
        setLoading(false);
        return;
      }
    }

    try {
      setLoading(true);
      const response = await fetch(`/api/v1/approval/${instanceId}/history`, {
        headers: {
          Authorization: `Bearer ${localStorage.getItem('token')}`,
        },
      });

      if (!response.ok) {
        throw new Error('Failed to load history');
      }

      const result = await response.json();
      setHistory(result.data || result);
      setError(null);
    } catch (err: any) {
      setError(err.message);
      console.error('Failed to load history:', err);
    } finally {
      setLoading(false);
    }
  };

  if (loading) {
    return (
      <Card>
        <CardContent className="flex items-center justify-center h-32">
          <Loader2 className="h-6 w-6 animate-spin text-gray-400" />
          <span className="ml-2 text-gray-600">加载中...</span>
        </CardContent>
      </Card>
    );
  }

  if (error) {
    return (
      <Card>
        <CardContent className="flex items-center justify-center h-32">
          <p className="text-red-600">{error}</p>
        </CardContent>
      </Card>
    );
  }

  if (history.length === 0) {
    return (
      <Card>
        <CardHeader>
          <CardTitle>审批历史</CardTitle>
        </CardHeader>
        <CardContent>
          <p className="text-gray-600 text-center py-8">暂无审批记录</p>
        </CardContent>
      </Card>
    );
  }

  return (
    <Card>
      <CardHeader>
        <CardTitle>审批历史</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="space-y-4">
          {history.map((item, index) => (
            <div
              key={item.id}
              className="flex gap-4 pb-4 border-b last:border-b-0 last:pb-0"
            >
              {/* 时间线 */}
              <div className="flex flex-col items-center">
                <div className="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center text-sm font-semibold text-blue-700">
                  {index + 1}
                </div>
                {index < history.length - 1 && (
                  <div className="w-0.5 h-full bg-gray-200 mt-2"></div>
                )}
              </div>

              {/* 内容 */}
              <div className="flex-1">
                <div className="flex items-center gap-2 mb-1">
                  <span className="font-semibold">{item.operator.displayName}</span>
                  <Badge className={actionColors[item.action]}>
                    {actionLabels[item.action] || item.action}
                  </Badge>
                  <span className="text-sm text-gray-500">
                    {item.nodeName}
                  </span>
                </div>

                {item.comment && (
                  <p className="text-sm text-gray-700 mb-1">{item.comment}</p>
                )}

                <p className="text-xs text-gray-500">
                  {format(new Date(item.createdAt), 'yyyy-MM-dd HH:mm:ss', {
                    locale: zhCN,
                  })}
                </p>
              </div>
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  );
}