import { Button } from "../../../components/primitives";
import { ChannelLogList } from "./channelLogList";

/** Overlay that renders one adapter config's send/receive message log, or the
 *  adapter overview (adapter == null). Reused by the list page's per-account
 *  "消息日志" button. */
export function ChannelLogPanel({ adapter, onClose }: { adapter: string | null; onClose: () => void }): React.ReactNode {
  return (
    <div className="fixed inset-0 z-50 flex items-start justify-center overflow-y-auto bg-black/40 p-4 backdrop-blur-sm" onClick={onClose}>
      <div
        className="w-full max-w-3xl rounded-[var(--mu-radius-lg)] bg-[var(--mu-surface-1)] shadow-2xl"
        onClick={(e) => e.stopPropagation()}
      >
        <div className="flex items-center gap-2 border-b border-[var(--mu-glass-border)] px-5 py-3">
          <span className="text-sm font-semibold">消息日志</span>
          <span className="ml-auto text-xs text-[var(--mu-text-lo)]">弹出视图</span>
          <Button size="sm" variant="soft" onClick={onClose}>
            关闭
          </Button>
        </div>
        <div className="max-h-[70vh] overflow-y-auto px-5 py-4">
          <ChannelLogList adapter={adapter} />
        </div>
      </div>
    </div>
  );
}