/**
 * @license
 * SPDX-License-Identifier: Apache-2.0
 */

import React from 'react';
import { X } from 'lucide-react';

interface RichEditorFindReplaceProps {
  showFindReplace: boolean;
  showPreviewMode: boolean;
  isHtmlMode: boolean;
  findQuery: string;
  setFindQuery: (val: string) => void;
  replaceQuery: string;
  setReplaceQuery: (val: string) => void;
  matchCount: number;
  handleFindNext: () => void;
  handleReplace: () => void;
  handleReplaceAll: () => void;
  setShowFindReplace: (val: boolean) => void;
}

export default function RichEditorFindReplace({
  showFindReplace,
  showPreviewMode,
  isHtmlMode,
  findQuery,
  setFindQuery,
  replaceQuery,
  setReplaceQuery,
  matchCount,
  handleFindNext,
  handleReplace,
  handleReplaceAll,
  setShowFindReplace
}: RichEditorFindReplaceProps) {
  if (!showFindReplace || showPreviewMode || isHtmlMode) return null;

  return (
    <section className="bg-slate-50 border-b border-slate-200 px-6 py-2.5 flex flex-wrap items-center gap-3 print:hidden select-none z-10 shrink-0 text-xs text-slate-700 animate-in slide-in-from-top-2 duration-150">
      <div className="flex items-center space-x-1">
        <span className="font-semibold text-slate-500 mr-1.5">Cari:</span>
        <input 
          type="text" 
          value={findQuery} 
          onChange={(e) => setFindQuery(e.target.value)}
          onKeyDown={(e) => { if (e.key === 'Enter') handleFindNext(); }}
          className="border border-slate-300 rounded px-2.5 py-1 w-44 bg-white font-medium"
          placeholder="Kata yang dicari..."
        />
      </div>
      <div className="flex items-center space-x-1">
        <span className="font-semibold text-slate-500 mr-1.5">Ganti:</span>
        <input 
          type="text" 
          value={replaceQuery} 
          onChange={(e) => setReplaceQuery(e.target.value)}
          className="border border-slate-300 rounded px-2.5 py-1 w-44 bg-white font-medium"
          placeholder="Kata pengganti..."
        />
      </div>
      <div className="flex items-center space-x-1.5">
        <button 
          type="button" 
          onClick={handleFindNext} 
          className="px-2.5 py-1 bg-slate-200 hover:bg-slate-300 rounded font-bold cursor-pointer transition-colors"
        >
          Temukan Selanjutnya
        </button>
        <button 
          type="button" 
          onClick={handleReplace} 
          className="px-2.5 py-1 bg-slate-200 hover:bg-slate-300 rounded font-bold cursor-pointer transition-colors"
        >
          Ganti
        </button>
        <button 
          type="button" 
          onClick={handleReplaceAll} 
          className="px-2.5 py-1 bg-blue-600 hover:bg-blue-700 text-white rounded font-bold cursor-pointer transition-colors shadow-sm"
        >
          Ganti Semua
        </button>
      </div>
      {matchCount > 0 && (
        <span className="text-slate-400 font-semibold">
          {matchCount} kecocokan ditemukan
        </span>
      )}
      <button 
        type="button" 
        onClick={() => setShowFindReplace(false)} 
        className="ml-auto p-1 text-slate-400 hover:text-slate-700 rounded cursor-pointer"
      >
        <X className="w-3.5 h-3.5" />
      </button>
    </section>
  );
}