"use client";
/**
 * FullscreenImageViewer 全屏图片查看器
 *
 * 
 *
 * 行为：
 *   - 全屏黑色背景 + 图片居中（contain）
 *   - 点击空白 / 下滑手势 → 关闭
 *   - 双指缩放（CSS `touch-action: pinch-zoom`）
 */
import { ChevronLeft } from "lucide-react";
import { useEffect, type MouseEvent } from "react";

import { BackButton } from "@/app/_components";

import { ChatMediaImage } from "./chat-media-image";
import styles from "./fullscreen-image-viewer.module.css";

export interface FullscreenImageViewerProps {
  characterId: string;
  remoteMessageId?: string;
  imageUrl: string;
  imagePaywalled?: boolean;
  isUnlockingImagePaywall?: boolean;
  onUnlockImagePaywall?: () => void;
  onClose: () => void;
}

export function FullscreenImageViewer({
  characterId,
  remoteMessageId,
  imageUrl,
  imagePaywalled = false,
  isUnlockingImagePaywall = false,
  onUnlockImagePaywall,
  onClose,
}: FullscreenImageViewerProps) {
  useEffect(() => {
    const handleKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") onClose();
    };
    document.addEventListener("keydown", handleKey);
    return () => document.removeEventListener("keydown", handleKey);
  }, [onClose]);

  const handleBackdropClick = (event: MouseEvent<HTMLDivElement>) => {
    if (event.target === event.currentTarget) onClose();
  };

  if (imagePaywalled) {
    return (
      <div
        className={`${styles.viewer} ${styles.paywallViewer}`}
        role="dialog"
        aria-modal="true"
        aria-label="Locked fullscreen image"
      >
        <ChatMediaImage
          characterId={characterId}
          remoteMessageId={remoteMessageId}
          remoteUrl={imageUrl}
          className={styles.paywallImage}
          nativeClassName={`${styles.nativePaywallImage} ${styles.paywallImage}`}
          fill
          sizes="(max-width: 540px) 100vw, 540px"
          showErrorFallback={false}
        />
        <div className={styles.paywallScrim} aria-hidden="true" />
        <button
          type="button"
          className={styles.backButton}
          onClick={onClose}
          aria-label="Back"
        >
          <ChevronLeft size={34} strokeWidth={2.5} aria-hidden="true" />
        </button>
        <button
          type="button"
          data-analytics-key="chat.unlock_message"
          data-analytics-label="Unlock private image"
          className={styles.unlockButton}
          disabled={isUnlockingImagePaywall || !onUnlockImagePaywall}
          onClick={onUnlockImagePaywall}
        >
          {isUnlockingImagePaywall
            ? "Unlocking..."
            : "Unlock high-definition large image"}
        </button>
      </div>
    );
  }

  return (
    <div
      className={styles.viewer}
      onClick={handleBackdropClick}
      role="dialog"
      aria-modal="true"
      aria-label="Fullscreen image"
    >
      <BackButton
        className={styles.backButton}
        onClick={onClose}
        ariaLabel="Back"
        iconSize={34}
        variant="unstyled"
      />
      <ChatMediaImage
        characterId={characterId}
        remoteMessageId={remoteMessageId}
        remoteUrl={imageUrl}
        className={styles.viewerImage}
        errorClassName="error"
        width={800}
        height={800}
        onClick={onClose}
      />
    </div>
  );
}
