'use client';

import { useEffect, useState } from 'react';
import ReactFlow, {
  Node,
  Edge,
  Background,
  Controls,
  MarkerType,
} from 'reactflow';
import 'reactflow/dist/style.css';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Loader2 } from 'lucide-react';

interface ApprovalFlowDiagramProps {
  businessType: string;
  businessId: string;
}

interface ApprovalHistory {
  action: string;
  operator: string;
  comment?: string;
  createdAt: string;
}

// 自定义节点组件
function ApprovalNode({ data }: { data: any }) {
  const statusColors: Record<string, string> = {
    PENDING: 'bg-gray-100 text-gray-700',
    APPROVED: 'bg-green-100 text-green-700',
    REJECTED: 'bg-red-100 text-red-700',
    TIMEOUT: 'bg-yellow-100 text-yellow-700',
  };

  const statusIcons: Record<string, string> = {
    PENDING: '⏳',
    APPROVED: '✓',
    REJECTED: '✗',
    TIMEOUT: '⏰',
  };

  return (
    <div className="px-4 py-2">
      <div className="font-semibold text-center mb-2">{data.label}</div>

      {data.approvers && data.approvers.length > 0 && (
        <div className="text-xs text-gray-600 text-center mb-2">
          {data.approvalMode === 'AND' ? '会签' : '或签'}: {data.approvers.join(', ')}
        </div>
      )}

      <div className="flex justify-center">
        <Badge className={statusColors[data.status] || 'bg-gray-100'}>
          {statusIcons[data.status]} {data.status}
        </Badge>
      </div>

      {data.isCurrent && (
        <div className="text-xs text-blue-600 text-center mt-2 font-semibold">
          ← 当前节点
        </div>
      )}

      {data.history && data.history.length > 0 && (
        <div className="mt-2 text-xs space-y-1">
          {data.history.map((h: ApprovalHistory, index: number) => (
            <div key={index} className="text-gray-600">
              <span className="font-semibold">{h.operator}</span> {h.action}
              {h.comment && <span className="italic">: {h.comment}</span>}
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

const nodeTypes = {
  default: ApprovalNode,
};

export function ApprovalFlowDiagram({
  businessType,
  businessId,
}: ApprovalFlowDiagramProps) {
  const [nodes, setNodes] = useState<Node[]>([]);
  const [edges, setEdges] = useState<Edge[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [diagramData, setDiagramData] = useState<any>(null);

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

  const loadDiagram = async () => {
    try {
      setLoading(true);
      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 diagram');
      }

      const result = await response.json();
      const data = result.data || result;

      setDiagramData(data);
      setNodes(data.nodes);
      setEdges(data.edges);
      setError(null);
    } catch (err: any) {
      setError(err.message);
      console.error('Failed to load diagram:', err);
    } finally {
      setLoading(false);
    }
  };

  if (loading) {
    return (
      <Card>
        <CardContent className="flex items-center justify-center h-64">
          <Loader2 className="h-8 w-8 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-64">
          <div className="text-center">
            <p className="text-red-600 mb-2">加载失败</p>
            <p className="text-sm text-gray-600">{error}</p>
            <button
              onClick={loadDiagram}
              className="mt-4 px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
            >
              重试
            </button>
          </div>
        </CardContent>
      </Card>
    );
  }

  if (!nodes || nodes.length === 0) {
    return (
      <Card>
        <CardContent className="flex items-center justify-center h-64">
          <p className="text-gray-600">暂无审批流程</p>
        </CardContent>
      </Card>
    );
  }

  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center justify-between">
          <span>审批流程</span>
          {diagramData && (
            <div className="flex items-center gap-2">
              <Badge
                variant={
                  diagramData.status === 'REJECTED'
                    ? 'destructive'
                    : 'default'
                }
                className={diagramData.status === 'APPROVED' ? 'bg-green-100 text-green-700' : ''}
              >
                {diagramData.status}
              </Badge>
              <span className="text-sm font-normal text-gray-600">
                发起人: {diagramData.initiator?.displayName}
              </span>
            </div>
          )}
        </CardTitle>
      </CardHeader>
      <CardContent>
        <div className="h-[600px] border rounded-lg bg-gray-50">
          <ReactFlow
            nodes={nodes}
            edges={edges}
            nodeTypes={nodeTypes}
            fitView
            attributionPosition="bottom-right"
          >
            <Background />
            <Controls />
          </ReactFlow>
        </div>

        {/* 图例 */}
        <div className="mt-4 flex gap-4 text-sm">
          <div className="flex items-center gap-2">
            <div className="w-4 h-4 bg-green-100 border border-green-500 rounded"></div>
            <span>已通过</span>
          </div>
          <div className="flex items-center gap-2">
            <div className="w-4 h-4 bg-blue-100 border-2 border-blue-500 rounded"></div>
            <span>审批中</span>
          </div>
          <div className="flex items-center gap-2">
            <div className="w-4 h-4 bg-red-100 border border-red-500 rounded"></div>
            <span>已驳回</span>
          </div>
          <div className="flex items-center gap-2">
            <div className="w-4 h-4 bg-white border border-gray-300 rounded"></div>
            <span>待审批</span>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}