blog-nextjs/components/search-modal.tsx

'use client';

import { useEffect, useRef, useState } from 'react';
import { FiSearch, FiX } from 'react-icons/fi';
import { Modal, Button, Spinner } from '@heroui/react';

interface SearchModalProps {
  isOpen: boolean;
  onClose: () => void;
}

export function SearchModal({ isOpen, onClose }: SearchModalProps) {
  const [isLoaded, setIsLoaded] = useState(false);
  const searchContainerRef = useRef<HTMLDivElement>(null);
  const pagefindUIRef = useRef<any>(null);

  useEffect(() => {
    if (!isOpen) return;

    let link: HTMLLinkElement | null = null;
    let script: HTMLScriptElement | null = null;

    // Load Pagefind UI dynamically when modal opens
    const loadPagefind = async () => {
      if (pagefindUIRef.current) {
        // Already loaded
        return;
      }

      try {
        // Load Pagefind UI CSS
        link = document.createElement('link');
        link.rel = 'stylesheet';
        link.href = '/_pagefind/pagefind-ui.css';
        document.head.appendChild(link);

        // Load Pagefind UI JS
        script = document.createElement('script');
        script.src = '/_pagefind/pagefind-ui.js';
        script.onload = () => {
          if (searchContainerRef.current && (window as any).PagefindUI) {
            pagefindUIRef.current = new (window as any).PagefindUI({
              element: searchContainerRef.current,
              bundlePath: '/_pagefind/',
              showSubResults: true,
              showImages: false,
              excerptLength: 15,
              resetStyles: false,
              autofocus: true,
              translations: {
                placeholder: '搜尋文章...',
                clear_search: '清除',
                load_more: '載入更多結果',
                search_label: '搜尋此網站',
                filters_label: '篩選',
                zero_results: '找不到 [SEARCH_TERM] 的結果',
                many_results: '找到 [COUNT] 個 [SEARCH_TERM] 的結果',
                one_result: '找到 [COUNT] 個 [SEARCH_TERM] 的結果',
                alt_search: '找不到 [SEARCH_TERM] 的結果。改為顯示 [DIFFERENT_TERM] 的結果',
                search_suggestion: '找不到 [SEARCH_TERM] 的結果。請嘗試以下搜尋：',
                searching: '搜尋中...'
              }
            });
            setIsLoaded(true);

            // Auto-focus the search input after a short delay
            setTimeout(() => {
              const input = searchContainerRef.current?.querySelector('input[type="search"]') as HTMLInputElement;
              if (input) {
                input.focus();
              }
            }, 100);
          }
        };
        document.head.appendChild(script);
      } catch (error) {
        console.error('Failed to load Pagefind:', error);
      }
    };

    loadPagefind();

    // Cleanup function to prevent duplicate initializations
    return () => {
      if (link && link.parentNode) {
        link.parentNode.removeChild(link);
      }
      if (script && script.parentNode) {
        script.parentNode.removeChild(script);
      }
      if (pagefindUIRef.current && pagefindUIRef.current.destroy) {
        pagefindUIRef.current.destroy();
        pagefindUIRef.current = null;
      }
    };
  }, [isOpen]);

  return (
    <Modal isOpen={isOpen} onOpenChange={(open) => !open && onClose()}>
      <Modal.Backdrop variant="blur">
        <Modal.Container placement="top" size="lg" className="pt-20">
          <Modal.Dialog className="w-full max-w-3xl rounded-2xl border border-white/40 bg-white/95 shadow-2xl backdrop-blur-md dark:border-white/10 dark:bg-slate-900/95">
            {/* Header */}
            <Modal.Header className="flex items-center justify-between border-b border-slate-200 px-6 py-4 dark:border-slate-700">
              <div className="flex items-center gap-2 text-slate-600 dark:text-slate-300">
                <FiSearch className="h-5 w-5" />
                <Modal.Heading className="text-sm font-medium">全站搜尋</Modal.Heading>
              </div>
              <Button
                isIconOnly
                variant="ghost"
                onPress={onClose}
                className="h-8 w-8 rounded-full text-slate-500 hover:bg-slate-100 hover:text-slate-700 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-slate-200"
                aria-label="關閉搜尋"
              >
                <FiX className="h-5 w-5" />
              </Button>
            </Modal.Header>

            {/* Search Container */}
            <Modal.Body className="max-h-[60vh] overflow-y-auto p-6">
              <div
                ref={searchContainerRef}
                className="pagefind-search"
                data-pagefind-ui
              />
              {!isLoaded && (
                <div className="flex items-center justify-center py-12">
                  <div className="text-center">
                    <Spinner size="lg" color="accent" />
                    <p className="mt-4 text-sm text-slate-500 dark:text-slate-400">
                      載入搜尋引擎...
                    </p>
                  </div>
                </div>
              )}
            </Modal.Body>

            {/* Footer */}
            <Modal.Footer className="border-t border-slate-200 px-6 py-3 text-xs text-slate-500 dark:border-slate-700 dark:text-slate-400">
              <div className="flex w-full items-center justify-between">
                <span>按 ESC 關閉</span>
                <span className="text-right">支援中英文全文搜尋</span>
              </div>
            </Modal.Footer>
          </Modal.Dialog>
        </Modal.Container>
      </Modal.Backdrop>
    </Modal>
  );
}

export function SearchButton({ onClick }: { onClick: () => void }) {
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
        e.preventDefault();
        onClick();
      }
    };

    document.addEventListener('keydown', handleKeyDown);
    return () => document.removeEventListener('keydown', handleKeyDown);
  }, [onClick]);

  return (
    <Button
      variant="ghost"
      onPress={onClick}
      className="motion-link h-9 rounded-full bg-slate-100 px-3 py-1.5 text-sm text-slate-600 hover:bg-slate-200 dark:bg-slate-800 dark:text-slate-300 dark:hover:bg-slate-700"
      aria-label="搜尋 (Cmd+K)"
    >
      <FiSearch className="h-3.5 w-3.5" />
      <span className="hidden sm:inline">搜尋</span>
      <kbd className="hidden rounded bg-white px-1.5 py-0.5 text-xs font-semibold text-slate-500 shadow-sm dark:bg-slate-900 dark:text-slate-400 sm:inline-block">
        ⌘K
      </kbd>
    </Button>
  );
}