"use client";
/**
 * ImageBubble 图片气泡
 *
 * 原始 Dart: lib/ui/chat/widgets/image_bubble.dart（63 行）
 *
 * 支持：
 *   - base64 data URI 解码（`data:image/png;base64,...`）
 *   - 点击 → 打开全屏查看器
 *   - 错误占位符（broken image icon）
 */
import Image from "next/image";
import { useState } from "react";

import { FullscreenImageViewer } from "./fullscreen-image-viewer";
import styles from "./image-bubble.module.css";

export interface ImageBubbleProps {
  imageUrl: string; // base64 data URI 或 URL
}

export function ImageBubble({ imageUrl }: ImageBubbleProps) {
  const [open, setOpen] = useState(false);
  const [error, setError] = useState(false);

  const src = decodeBase64Image(imageUrl);

  return (
    <>
      <div
        className={styles.bubble}
        onClick={() => setOpen(true)}
        role="button"
        tabIndex={0}
        onKeyDown={(e) => {
          if (e.key === "Enter" || e.key === " ") {
            e.preventDefault();
            setOpen(true);
          }
        }}
        aria-label="Open image in fullscreen"
      >
        {error ? (
          <div className={styles.errorFallback}>🖼</div>
        ) : (
          <Image
            className={styles.image}
            src={src}
            alt=""
            width={240}
            height={240}
            onError={() => setError(true)}
          />
        )}
      </div>
      {open && <FullscreenImageViewer imageUrl={imageUrl} onClose={() => setOpen(false)} />}
    </>
  );
}

/** 解析 base64 data URI（`data:image/png;base64,...`），否则原样返回 */
function decodeBase64Image(uri: string): string {
  // 已是 data URI 或 http(s) URL：直接返回
  if (uri.startsWith("data:") || uri.startsWith("http")) {
    return uri;
  }
  // 裸 base64 字符串 → 包装成 data URI（PNG 兜底）
  return `data:image/png;base64,${uri}`;
}
