'use client';

import { useState, useEffect, Suspense } from 'react';
import { useSearchParams } from 'next/navigation';
import { useTranslation } from '@/hooks/useTranslation';
import { usePermissions } from '@/hooks/usePermissions';
import { PageState } from '@/components/common/feedback/PageState';
import { ApiClientError } from '@/lib/api-client';
import {
  GitBranch,
  Search,
  RefreshCw,
  Copy,
  Clock,
  CheckCircle,
  XCircle,
} from 'lucide-react';
import {
  getTraceById,
  TraceResponse,
  SpanInfo,
  formatDuration,
} from '@/services/api/logs';

/**
 * 链路追踪内容组件
 */
function TraceContent() {
  const searchParams = useSearchParams();
  const { t } = useTranslation();
  const { hasPermission, isAdmin } = usePermissions();
  
  const [isLoading, setIsLoading] = useState(false);
  const [traceId, setTraceId] = useState(searchParams.get('id') || '');
  const [searchInput, setSearchInput] = useState(searchParams.get('id') || '');
  const [trace, setTrace] = useState<TraceResponse | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [copiedId, setCopiedId] = useState<string | null>(null);
  const [viewMode, setViewMode] = useState<'waterfall' | 'timeline'>('waterfall');

  const canAccess = isAdmin || hasPermission('log:read');

  // 加载追踪数据
  const loadTrace = async (id: string) => {
    if (!id || !canAccess) return;
    
    setIsLoading(true);
    setError(null);
    setTrace(null);
    
    try {
      const response = await getTraceById(id);
      setTrace(response);
      setTraceId(id);
    } catch (err: unknown) {
      console.error('Failed to load trace:', err);
      if (err instanceof ApiClientError && err.isNotFound()) {
        setError(t.logs?.error?.traceNotFound || t.common.noData);
      } else {
        setError(t.common.loadFailed);
      }
    } finally {
      setIsLoading(false);
    }
  };

  // 初始加载
  useEffect(() => {
    const id = searchParams.get('id');
    if (id) {
      loadTrace(id);
    }
  }, [searchParams, canAccess]);

  // 搜索
  const handleSearch = () => {
    if (searchInput.trim()) {
      loadTrace(searchInput.trim());
    }
  };

  // 复制到剪贴板
  const copyToClipboard = (text: string, id: string) => {
    navigator.clipboard.writeText(text);
    setCopiedId(id);
    setTimeout(() => setCopiedId(null), 2000);
  };

  // 计算 span 在瀑布图中的位置
  const calculateSpanPosition = (span: SpanInfo, totalDuration: number, startTime: string) => {
    const traceStart = new Date(startTime).getTime();
    const spanStart = new Date(span.startTime).getTime();
    const offset = spanStart - traceStart;
    const left = (offset / totalDuration) * 100;
    const width = (span.duration / totalDuration) * 100;
    return { left: Math.max(0, left), width: Math.max(1, width) };
  };

  // 扩展的 SpanInfo 类型（带树结构）
  type SpanTreeNode = SpanInfo & { children: SpanTreeNode[]; depth: number };

  // 构建 span 树
  const buildSpanTree = (spans: SpanInfo[]): SpanTreeNode[] => {
    const spanMap = new Map<string, SpanTreeNode>();
    const roots: SpanTreeNode[] = [];

    // 初始化所有 span
    spans.forEach(span => {
      spanMap.set(span.spanId, { ...span, children: [], depth: 0 });
    });

    // 构建树结构
    spans.forEach(span => {
      const node = spanMap.get(span.spanId)!;
      if (span.parentSpanId && spanMap.has(span.parentSpanId)) {
        const parent = spanMap.get(span.parentSpanId)!;
        parent.children.push(node);
        node.depth = parent.depth + 1;
      } else {
        roots.push(node);
      }
    });

    // 扁平化树结构（深度优先）
    const flatten = (nodes: SpanTreeNode[]): SpanTreeNode[] => {
      const result: SpanTreeNode[] = [];
      nodes.forEach(node => {
        result.push(node);
        if (node.children.length > 0) {
          result.push(...flatten(node.children));
        }
      });
      return result;
    };

    return flatten(roots);
  };

  // 无权限提示
  if (!canAccess) {
    return (
      <div className="p-6 flex items-center justify-center">
        <PageState
          variant="error"
          title={t.common.permissionDenied}
          description={t.common.permissionDeniedDetail}
          layout="center"
          className="mx-auto w-full max-w-2xl border-0 bg-transparent"
        />
      </div>
    );
  }

  return (
    <div className="h-full flex flex-col bg-[#f7f8fa]">

      {/* 主内容区域 - 可滚动 */}
      <div className="flex-1 overflow-y-auto p-6">
        <div className="max-w-[1400px] mx-auto space-y-4">
          {/* 搜索栏 */}
          <div className="bg-white rounded-lg border border-[#e5e6eb] p-4 shadow-sm">
            <div className="flex gap-3">
              <div className="flex-1 relative">
                <GitBranch className="absolute left-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-[#8f959e]" />
                <input
                  type="text"
                  value={searchInput}
                  onChange={(e) => setSearchInput(e.target.value)}
                  onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
                  placeholder={t.logs?.trace?.searchPlaceholder}
                  className="w-full h-8 pl-9 pr-3 text-sm bg-[#f2f3f5] border-0 rounded-md text-[#1f2329] placeholder:text-[#8f959e] focus:bg-white focus:ring-1 focus:ring-[#3370ff] transition-all"
                />
              </div>
              <button
                onClick={handleSearch}
                disabled={isLoading || !searchInput.trim()}
                className="h-8 px-4 bg-[#3370ff] text-white text-sm font-medium rounded-md hover:bg-[#2b5fd9] active:bg-[#2555c7] disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center gap-1.5"
              >
                {isLoading ? (
                  <RefreshCw className="w-3.5 h-3.5 animate-spin" />
                ) : (
                  <Search className="w-3.5 h-3.5" />
                )}
                <span>{t.logs?.trace?.search}</span>
              </button>
            </div>
          </div>

          {/* 错误提示 */}
          {error && (
            <PageState
              variant={error === t.logs?.trace?.notFound ? 'warning' : 'error'}
              title={error}
              layout="center"
              className="mx-auto w-full max-w-2xl"
            />
          )}

          {/* 加载中 */}
          {isLoading && (
            <div className="flex items-center justify-center py-12">
              <RefreshCw className="w-8 h-8 text-[#8f959e] animate-spin" />
            </div>
          )}

          {/* 追踪详情 */}
          {trace && !isLoading && (
            <div className="space-y-4">
              {/* 追踪概览 */}
              <div className="bg-white rounded-lg border border-[#e5e6eb] p-4 shadow-sm">
                <div className="flex items-center gap-2 mb-4">
                  <GitBranch className="w-4 h-4 text-[#00b42a]" />
                  <h3 className="text-sm font-medium text-[#1f2329]">
                    {t.logs?.trace?.traceId}
                  </h3>
                </div>
                
                <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                  <div>
                    <p className="text-xs text-[#646a73] mb-1">{t.logs?.trace?.traceId}</p>
                    <p className="text-xs font-mono text-[#1f2329] truncate" title={trace.traceId}>
                      {trace.traceId}
                    </p>
                  </div>
                  <div>
                    <p className="text-xs text-[#646a73] mb-1">{t.logs?.trace?.totalDuration}</p>
                    <p className="text-lg font-semibold text-[#1f2329]">
                      {formatDuration(trace.totalDuration)}
                    </p>
                  </div>
                  <div>
                    <p className="text-xs text-[#646a73] mb-1">{t.logs?.trace?.spanCount}</p>
                    <p className="text-lg font-semibold text-[#1f2329]">
                      {trace.spans.length}
                    </p>
                  </div>
                  <div>
                    <p className="text-xs text-[#646a73] mb-1">{t.logs?.trace?.startTime}</p>
                    <p className="text-xs text-[#1f2329]">
                      {new Date(trace.startTime).toLocaleString()}
                    </p>
                  </div>
                </div>
              </div>

              {/* 视图切换 */}
              <div className="flex items-center gap-2">
                <button
                  onClick={() => setViewMode('waterfall')}
                  className={`h-8 px-4 text-sm font-medium rounded-md transition-colors ${
                    viewMode === 'waterfall'
                      ? 'bg-[#3370ff] text-white'
                      : 'bg-white text-[#1f2329] border border-[#e5e6eb] hover:bg-[#f2f3f5]'
                  }`}
                >
                  {t.logs?.trace?.waterfall}
                </button>
                <button
                  onClick={() => setViewMode('timeline')}
                  className={`h-8 px-4 text-sm font-medium rounded-md transition-colors ${
                    viewMode === 'timeline'
                      ? 'bg-[#3370ff] text-white'
                      : 'bg-white text-[#1f2329] border border-[#e5e6eb] hover:bg-[#f2f3f5]'
                  }`}
                >
                  {t.logs?.trace?.timeline}
                </button>
              </div>

              {/* 瀑布图视图 */}
              {viewMode === 'waterfall' && (
                <div className="bg-white rounded-lg border border-[#e5e6eb] shadow-sm overflow-hidden">
                  <div className="h-10 px-4 border-b border-[#e5e6eb] flex items-center">
                    <h3 className="text-sm font-medium text-[#1f2329]">
                      {t.logs?.trace?.spans?.title}
                    </h3>
                  </div>
                  <div className="divide-y divide-[#e5e6eb]">
                    {buildSpanTree(trace.spans).map((span, index) => {
                      const position = calculateSpanPosition(span, trace.totalDuration, trace.startTime);
                      const isSuccess = span.status === 'SUCCESS';
                      
                      return (
                        <div key={index} className="p-4 hover:bg-[#f7f8fa] transition-colors">
                          <div className="flex items-center gap-3">
                            {/* 缩进指示 */}
                            <div style={{ width: `${span.depth * 20}px` }} className="flex-shrink-0" />
                            
                            {/* 状态图标 */}
                            <div className="flex-shrink-0">
                              {isSuccess ? (
                                <CheckCircle className="w-4 h-4 text-[#00b42a]" />
                              ) : (
                                <XCircle className="w-4 h-4 text-[#f54a45]" />
                              )}
                            </div>
                            
                            {/* Span 信息 */}
                            <div className="flex-1 min-w-0">
                              <div className="flex items-center gap-2 mb-1">
                                <span className="px-2 py-0.5 text-xs font-medium bg-[#e8f3ff] text-[#3370ff] rounded">
                                  {span.service}
                                </span>
                                <span className="text-sm text-[#1f2329] truncate">
                                  {span.operation}
                                </span>
                              </div>
                              <div className="flex items-center gap-3 text-xs text-[#646a73]">
                                <span className="font-mono">{span.spanId.substring(0, 16)}...</span>
                                <span>{span.region}</span>
                              </div>
                            </div>
                            
                            {/* 耗时 */}
                            <div className="flex-shrink-0 text-right">
                              <p className={`text-sm font-semibold ${isSuccess ? 'text-[#1f2329]' : 'text-[#f54a45]'}`}>
                                {formatDuration(span.duration)}
                              </p>
                            </div>
                          </div>
                          
                          {/* 瀑布条 */}
                          <div className="mt-2 ml-6 relative h-2.5 bg-[#f2f3f5] rounded-sm">
                            <div
                              className={`absolute h-full rounded-sm transition-all ${
                                isSuccess ? 'bg-[#00b42a]' : 'bg-[#f54a45]'
                              }`}
                              style={{
                                left: `${position.left}%`,
                                width: `${position.width}%`,
                              }}
                            />
                          </div>
                        </div>
                      );
                    })}
                  </div>
                </div>
              )}

              {/* 时间线视图 */}
              {viewMode === 'timeline' && (
                <div className="bg-white rounded-lg border border-[#e5e6eb] shadow-sm overflow-hidden">
                  <div className="h-10 px-4 border-b border-[#e5e6eb] flex items-center">
                    <h3 className="text-sm font-medium text-[#1f2329]">
                      {t.logs?.trace?.timeline}
                    </h3>
                  </div>
                  <div className="p-4">
                    <div className="relative">
                      {/* 时间线 */}
                      <div className="absolute left-4 top-0 bottom-0 w-0.5 bg-[#e5e6eb]" />
                      
                      <div className="space-y-3">
                        {trace.timeline.map((event, index) => (
                          <div key={index} className="relative flex items-start gap-3 pl-9">
                            {/* 时间点 */}
                            <div className="absolute left-2.5 w-3 h-3 bg-[#00b42a] rounded-full border-2 border-white shadow-sm" />
                            
                            {/* 事件内容 */}
                            <div className="flex-1 bg-[#f7f8fa] rounded-lg p-3">
                              <div className="flex items-center justify-between">
                                <p className="text-sm text-[#1f2329]">{event.event}</p>
                                <div className="flex items-center gap-1 text-xs text-[#646a73]">
                                  <Clock className="w-3 h-3" />
                                  +{event.time}ms
                                </div>
                              </div>
                            </div>
                          </div>
                        ))}
                      </div>
                    </div>
                  </div>
                </div>
              )}
            </div>
          )}

          {/* 空状态 */}
          {!trace && !isLoading && !error && (
            <PageState
              variant="info"
              title={t.logs?.trace?.enterTraceId}
              layout="center"
              className="mx-auto w-full max-w-2xl"
            />
          )}
        </div>
      </div>
    </div>
  );
}

/**
 * 链路追踪页面
 * 追踪跨服务请求链路
 */
export default function TracePage() {
  return (
    <Suspense fallback={
      <div className="h-full flex items-center justify-center bg-[#f7f8fa]">
        <RefreshCw className="w-8 h-8 text-[#8f959e] animate-spin" />
      </div>
    }>
      <TraceContent />
    </Suspense>
  );
}