/**
 * TraceWaterfallCard - SignOz Trace Waterfall
 * ============================================
 * Phase 19.4a - GenUI 追蹤瀑布圖卡
 *
 * @see ADR-032 GenUI Dynamic Rendering
 * @author Claude Code (首席架構師)
 * @version 1.0.0
 * @date 2026-03-28 (台北時間)
 */

import React from 'react'
import { Activity, ExternalLink } from 'lucide-react'

interface SpanInfo {
  name: string
  service: string
  duration: number // ms
  startOffset: number // ms from trace start
  status?: 'ok' | 'error'
}

interface TraceWaterfallCardProps {
  data: {
    traceId: string
    spans: SpanInfo[]
    duration: number // total duration in ms
    url?: string
  }
}

export const TraceWaterfallCard: React.FC<TraceWaterfallCardProps> = ({ data }) => {
  const maxDuration = data.duration || Math.max(...data.spans.map(s => s.startOffset + s.duration))

  const getBarWidth = (duration: number) => {
    return Math.max((duration / maxDuration) * 100, 2)
  }

  const getBarOffset = (startOffset: number) => {
    return (startOffset / maxDuration) * 100
  }

  return (
    <div className="w-full max-w-2xl bg-white border-2 border-[#4A90D9] shadow-lg rounded-sm overflow-hidden mt-4 mb-2">
      <div className="flex border-b-2 border-[#4A90D9] bg-blue-50 p-3 items-center justify-between">
        <div className="flex items-center gap-2">
          <Activity className="text-[#4A90D9]" size={20} />
          <span className="font-['VT323'] text-xl font-bold uppercase tracking-wider text-nothing-black">
            Trace // {data.traceId.slice(0, 16)}...
          </span>
        </div>
        <div className="px-2 py-1 text-xs font-mono font-bold border-2 border-[#4A90D9] text-[#4A90D9]">
          {data.duration}ms
        </div>
      </div>

      <div className="p-4 space-y-2">
        {data.spans.map((span, i) => (
          <div key={i} className="flex items-center gap-2 text-sm">
            {/* Service name */}
            <div className="w-24 shrink-0 truncate text-xs font-mono text-gray-500">
              {span.service}
            </div>

            {/* Waterfall bar */}
            <div className="flex-1 h-6 bg-gray-100 rounded-sm relative">
              <div
                className={`absolute h-full rounded-sm ${
                  span.status === 'error' ? 'bg-red-400' : 'bg-[#4A90D9]'
                }`}
                style={{
                  left: `${getBarOffset(span.startOffset)}%`,
                  width: `${getBarWidth(span.duration)}%`,
                }}
              />
              <span
                className="absolute text-xs font-mono text-white px-1 truncate"
                style={{
                  left: `${getBarOffset(span.startOffset)}%`,
                  maxWidth: `${getBarWidth(span.duration)}%`,
                  lineHeight: '24px',
                }}
              >
                {span.name}
              </span>
            </div>

            {/* Duration */}
            <div className="w-16 shrink-0 text-right text-xs font-mono text-gray-600">
              {span.duration}ms
            </div>
          </div>
        ))}
      </div>

      {data.url && (
        <div className="px-4 pb-4">
          <a
            href={data.url}
            target="_blank"
            rel="noopener noreferrer"
            className="inline-flex items-center gap-1 text-sm font-mono text-[#4A90D9] hover:underline"
          >
            View in SignOz <ExternalLink size={14} />
          </a>
        </div>
      )}
    </div>
  )
}
