"use client";

import { useState, useEffect, useCallback } from "react";
import { api } from "@/lib/api";

interface Props {
  workspaceId: string;
}

interface Trace {
  id: string;
  name: string;
  timestamp: string;
  latency?: number;
  input?: Record<string, unknown> | string;
  output?: Record<string, unknown> | string;
  status?: string;
  totalCost?: number;
  usage?: {
    input?: number;
    output?: number;
    total?: number;
  };
}

export function TracesTab({ workspaceId }: Props) {
  const [traces, setTraces] = useState<Trace[]>([]);
  const [loading, setLoading] = useState(true);
  const [expanded, setExpanded] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);

  const loadTraces = useCallback(async () => {
    setLoading(true);
    setError(null);
    try {
      const res = await api.get<{ data?: Trace[] }>(`/workspaces/${workspaceId}/traces`);
      setTraces(res.data || []);
    } catch (e) {
      setError(e instanceof Error ? e.message : "Failed to load traces");
      setTraces([]);
    } finally {
      setLoading(false);
    }
  }, [workspaceId]);

  useEffect(() => {
    loadTraces();
  }, [loadTraces]);

  if (loading) {
    return <div className="p-4 text-xs text-zinc-500">Loading traces...</div>;
  }

  return (
    <div className="p-4 space-y-2">
      <div className="flex items-center justify-between mb-2">
        <span className="text-xs text-zinc-400">{traces.length} traces</span>
        <button onClick={loadTraces} className="text-[10px] text-zinc-500 hover:text-zinc-300">
          Refresh
        </button>
      </div>

      {error && (
        <div className="px-3 py-1.5 bg-red-900/30 border border-red-800 rounded text-xs text-red-400">
          {error}
        </div>
      )}

      {traces.length === 0 && !error ? (
        <div className="text-center py-8">
          <div className="text-2xl opacity-20 mb-2">📊</div>
          <p className="text-xs text-zinc-600">No traces yet</p>
          <p className="text-[10px] text-zinc-700 mt-1">
            Set LANGFUSE_HOST, LANGFUSE_PUBLIC_KEY, LANGFUSE_SECRET_KEY to enable tracing
          </p>
        </div>
      ) : (
        <div className="space-y-1">
          {traces.map((trace) => (
            <div key={trace.id} className="bg-zinc-800/40 border border-zinc-700/40 rounded-lg overflow-hidden">
              <button
                onClick={() => setExpanded(expanded === trace.id ? null : trace.id)}
                className="w-full px-3 py-2 flex items-center gap-2 text-left hover:bg-zinc-800/60 transition-colors"
              >
                <div className={`w-1.5 h-1.5 rounded-full shrink-0 ${
                  trace.status === "ERROR" ? "bg-red-400" : "bg-emerald-400"
                }`} />
                <div className="flex-1 min-w-0">
                  <div className="text-[11px] text-zinc-200 truncate">{trace.name || "trace"}</div>
                  <div className="text-[9px] text-zinc-500">{formatTime(trace.timestamp)}</div>
                </div>
                <div className="flex items-center gap-2 shrink-0">
                  {trace.latency != null && (
                    <span className="text-[9px] text-zinc-500 tabular-nums">
                      {trace.latency > 1000 ? `${(trace.latency / 1000).toFixed(1)}s` : `${trace.latency}ms`}
                    </span>
                  )}
                  {trace.usage?.total != null && (
                    <span className="text-[9px] text-zinc-500 tabular-nums">
                      {trace.usage.total} tok
                    </span>
                  )}
                  <span className="text-[9px] text-zinc-500">
                    {expanded === trace.id ? "▼" : "▶"}
                  </span>
                </div>
              </button>

              {expanded === trace.id && (
                <div className="px-3 pb-2 space-y-2 border-t border-zinc-700/30">
                  {trace.input && (
                    <div>
                      <div className="text-[9px] text-zinc-500 uppercase tracking-wider mt-2 mb-1">Input</div>
                      <pre className="text-[9px] text-zinc-300 bg-zinc-900 rounded p-2 overflow-x-auto max-h-32">
                        {String(typeof trace.input === "string" ? trace.input : JSON.stringify(trace.input, null, 2))}
                      </pre>
                    </div>
                  )}
                  {trace.output && (
                    <div>
                      <div className="text-[9px] text-zinc-500 uppercase tracking-wider mb-1">Output</div>
                      <pre className="text-[9px] text-zinc-300 bg-zinc-900 rounded p-2 overflow-x-auto max-h-32">
                        {String(typeof trace.output === "string" ? trace.output : JSON.stringify(trace.output, null, 2))}
                      </pre>
                    </div>
                  )}
                  {trace.totalCost != null && (
                    <div className="text-[9px] text-zinc-500">
                      Cost: ${trace.totalCost.toFixed(6)}
                    </div>
                  )}
                  <div className="text-[8px] text-zinc-500 font-mono select-all">
                    {trace.id}
                  </div>
                </div>
              )}
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

function formatTime(iso: string): string {
  try {
    const d = new Date(iso);
    const now = new Date();
    const diff = now.getTime() - d.getTime();
    if (diff < 60_000) return `${Math.floor(diff / 1000)}s ago`;
    if (diff < 3_600_000) return `${Math.floor(diff / 60_000)}m ago`;
    if (diff < 86_400_000) return `${Math.floor(diff / 3_600_000)}h ago`;
    return d.toLocaleDateString();
  } catch {
    return iso;
  }
}
