"use client";

type ProtocolDebugEvent = {
  id: string;
  at: number;
  payload: Record<string, unknown>;
};

export function ProtocolDebugPanel({
  enabled,
  events,
}: {
  enabled: boolean;
  events: ProtocolDebugEvent[];
}) {
  if (!enabled) return null;

  return (
    <div className="mx-auto mt-2 w-full max-w-4xl px-2 md:px-4">
      <details className="rounded-xl border border-border/60 bg-muted/30 p-3 text-xs">
        <summary className="cursor-pointer select-none font-medium text-foreground">
          Protocol Debug
        </summary>
        <div className="mt-3 space-y-2">
          {events.length === 0 ? (
            <div className="rounded-lg border border-dashed border-border/60 px-3 py-2 text-muted-foreground">
              暂无协议调试事件
            </div>
          ) : (
            events.map((event) => (
              <div
                key={event.id}
                className="overflow-hidden rounded-lg border border-border/60 bg-background"
              >
                <div className="border-b border-border/60 px-3 py-2 font-medium">
                  {new Date(event.at).toLocaleTimeString()}
                  {" · "}
                  {String(event.payload.phase || event.payload.type || "unknown")}
                </div>
                <pre className="overflow-x-auto px-3 py-2 whitespace-pre-wrap break-words text-[11px] leading-relaxed text-muted-foreground">
                  {JSON.stringify(event.payload, null, 2)}
                </pre>
              </div>
            ))
          )}
        </div>
      </details>
    </div>
  );
}