/**
 * DOCX 预览组件（设计稿 7c-简化C-极简 · 中栏实现）
 *
 * 使用 CollaboraViewer 渲染 DOCX 文件。
 * 工具栏与 PdfPreviewTest 一致，额外增加清除高亮、返回顶部按钮。
 */
import { useState, useEffect, useMemo, useRef } from 'react';
import { CollaboraViewer } from '~/components/collabora/CollaboraViewer';
import type { CollaboraViewerHandle } from '~/components/collabora/types';
import { customGotoPage } from '~/components/collabora/lib';
import { toastService } from '~/components/ui/Toast';
import type { ReviewPoint } from '../ReviewPointsList';

interface DocxPreviewTestProps {
  filePath: string;
  targetPage?: number;
  charPositions?: Array<{ box: number[][]; char: string; score: number }>;
  activeReviewPointResultId?: string | null;
  reviewPoints?: ReviewPoint[];
  highlightValue?: string;
  aiSuggestionReplace?: {
    searchText: string;
    replaceText: string;
    pageNumber: number;
    silentReplace?: boolean;
  };
  userInfo?: { sub: string; nick_name: string };
}

export function DocxPreviewTest({
  filePath,
  targetPage,
  activeReviewPointResultId,
  reviewPoints,
  highlightValue,
  aiSuggestionReplace,
  userInfo,
}: DocxPreviewTestProps) {
  const collaboraRef = useRef<CollaboraViewerHandle>(null);

  const [pageInputValue, setPageInputValue] = useState('');
  const [isClearingHighlights, setIsClearingHighlights] = useState(false);
  const [isScrollingToTop, setIsScrollingToTop] = useState(false);

  // 当前激活的评查点
  const activePoint = useMemo<ReviewPoint | undefined>(
    () => reviewPoints?.find(p => p.id === activeReviewPointResultId),
    [reviewPoints, activeReviewPointResultId],
  );

  // 当前高亮标签
  const highlightLabel = useMemo(() => {
    if (!activePoint) return null;
    const code = activePoint.pointCode || activePoint.id;
    const name = activePoint.pointName || activePoint.title || '';
    return `${code}${name ? ' · ' + name : ''}`;
  }, [activePoint]);

  // ── 页码跳转 ──
  const handlePageInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setPageInputValue(e.target.value.replace(/\D/g, ''));
  };

  const handlePageJump = async () => {
    if (!pageInputValue) return;
    const targetPageNum = parseInt(pageInputValue, 10);
    const iframeWindow = collaboraRef.current?.getIframeWindow?.();
    if (!iframeWindow) {
      toastService.warning('文档尚未加载完成，请稍候...');
      return;
    }
    if (targetPageNum > 0) {
      try {
        await customGotoPage(iframeWindow, targetPageNum);
        setPageInputValue('');
      } catch (error) {
        toastService.error(`跳转失败: ${error instanceof Error ? error.message : '未知错误'}`);
      }
    }
  };

  // ── 清除高亮 ──
  const handleClearAllHighlights = async () => {
    if (!collaboraRef.current?.isReady) {
      toastService.warning('文档尚未加载完成，请稍候...');
      return;
    }
    setIsClearingHighlights(true);
    try {
      await collaboraRef.current.clearAllHighlights();
      toastService.success('已清除所有高亮');
    } catch (error) {
      console.error('[DocxPreviewTest] 清除高亮失败:', error);
      toastService.error('清除高亮失败');
    } finally {
      setTimeout(() => setIsClearingHighlights(false), 500);
    }
  };

  // ── 返回顶部 ──
  const handleScrollToTop = async () => {
    setIsScrollingToTop(true);
    try {
      await collaboraRef.current?.unoCommands.scrollToTop();
    } catch (error) {
      console.error('[DocxPreviewTest] 返回顶部失败:', error);
      toastService.error('返回顶部失败');
    } finally {
      setTimeout(() => setIsScrollingToTop(false), 500);
    }
  };

  // ── 跳转到高亮页 ──
  const jumpToHighlight = () => {
    if (!activePoint) return;
    // 触发 targetPage 重新跳转（由父组件控制）
    toastService.info('已定位到当前评查点所在页');
  };

  return (
    <section className="flex flex-col flex-1 min-h-0 w-full h-full bg-slate-100 border border-slate-200 rounded">
      {/* ═══ 顶部工具栏 ═══ */}
      <div className="shrink-0 h-11 px-4 flex items-center justify-between bg-white border-b border-slate-200 text-[12.5px] text-slate-600">
        <div className="flex items-center gap-2">
          {/* 页码跳转 */}
          <button
            onClick={() => {
              const iframeWindow = collaboraRef.current?.getIframeWindow?.();
              if (!iframeWindow) return;
              // 上一页：跳转到当前页-1
              customGotoPage(iframeWindow, -1).catch(() => {});
            }}
            className="w-5 h-7 grid place-items-center rounded hover:bg-slate-100 text-slate-400"
            title="上一页"
          >
            <i className="ri-arrow-left-s-line" />
          </button>
          <span className="font-mono tabular-nums">
            <input
              type="text"
              value={pageInputValue}
              onChange={handlePageInputChange}
              onFocus={e => e.currentTarget.select()}
              onBlur={handlePageJump}
              onKeyDown={e => { if (e.key === 'Enter') handlePageJump(); }}
              className="w-8 h-6 text-center bg-slate-50 border border-slate-200 rounded text-[12px] font-mono outline-none focus:border-[#00684a]"
              placeholder="-"
            />
          </span>
          <button
            onClick={() => {
              const iframeWindow = collaboraRef.current?.getIframeWindow?.();
              if (!iframeWindow) return;
              customGotoPage(iframeWindow, 99999).catch(() => {});
            }}
            className="w-5 h-7 grid place-items-center rounded hover:bg-slate-100 text-slate-400"
            title="下一页"
          >
            <i className="ri-arrow-right-s-line" />
          </button>

          <span className="mx-0 text-slate-300">|</span>

          {/* 返回顶部 */}
          <button
            onClick={handleScrollToTop}
            disabled={isScrollingToTop}
            className={`w-5 h-7 grid place-items-center rounded hover:bg-slate-100 ${isScrollingToTop ? 'opacity-50 cursor-not-allowed' : ''}`}
            title="返回顶部"
          >
            {isScrollingToTop ? <i className="ri-loader-4-line text-[12px] animate-spin" /> : <i className="ri-arrow-up-double-line" />}
          </button>

          {/* 清除高亮 */}
          <button
            onClick={handleClearAllHighlights}
            disabled={isClearingHighlights}
            className={`w-5 h-7 grid place-items-center rounded hover:bg-slate-100 ${isClearingHighlights ? 'opacity-50 cursor-not-allowed' : ''}`}
            title="清除高亮"
          >
            {isClearingHighlights ? <i className="ri-loader-4-line text-[12px] animate-spin" /> : <i className="ri-eraser-line" />}
          </button>
        </div>

        {/* 右侧：当前高亮标签 */}
        <div className="flex items-center gap-2 text-[11.5px] min-w-0">
          {highlightLabel && (
            <>
              <span className="text-slate-400 shrink-0">当前高亮:</span>
              <span
                className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded bg-amber-50 text-amber-800 border border-amber-200 max-w-[220px]"
                title={highlightLabel}
              >
                <i className="ri-focus-3-line shrink-0" />
                <span className="truncate">{highlightLabel}</span>
              </span>
              <button
                onClick={jumpToHighlight}
                className="w-7 h-7 grid place-items-center rounded hover:bg-slate-100 shrink-0"
                title="跳转到高亮页"
              >
                <i className="ri-crosshair-line" />
              </button>
            </>
          )}
        </div>
      </div>

      {/* ═══ Collabora 文档区域 ═══ */}
      <div className="flex-1 min-h-0">
        <CollaboraViewer
          ref={collaboraRef}
          fileId={filePath}
          mode="edit"
          userId={userInfo?.sub || 'unknown'}
          userName={userInfo?.nick_name || ''}
          targetPage={targetPage}
          highlightText={highlightValue}
          aiSuggestionReplace={aiSuggestionReplace}
        />
      </div>
    </section>
  );
}