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

import React from 'react';
import { 
  Table, Minus, Scissors, Pilcrow, Eraser, Search, PlusCircle 
} from 'lucide-react';

interface InsertControlsProps {
  setShowTableModal: (val: boolean) => void;
  showFormattingMarks: boolean;
  setShowFormattingMarks: (val: boolean) => void;
  onCleanEmptyParagraphs: () => void;
  showFindReplace: boolean;
  setShowFindReplace: (val: boolean) => void;
  isRightPaneOpen: boolean;
  setIsRightPaneOpen: (val: boolean) => void;
  execCommand: (command: string) => void;
}

export default function InsertControls({
  setShowTableModal,
  showFormattingMarks,
  setShowFormattingMarks,
  onCleanEmptyParagraphs,
  showFindReplace,
  setShowFindReplace,
  isRightPaneOpen,
  setIsRightPaneOpen,
  execCommand
}: InsertControlsProps) {
  return (
    <>
      <button
        type="button"
        id="editor-tb-inserttable"
        onMouseDown={(e) => e.preventDefault()}
        onClick={() => setShowTableModal(true)}
        className="p-1.5 text-slate-700 hover:bg-slate-200 rounded transition-colors flex items-center space-x-1 text-xs font-semibold cursor-pointer border border-transparent hover:border-slate-300"
        title="Sisipkan Tabel"
      >
        <Table className="w-4 h-4 text-slate-650" />
        <span className="hidden sm:inline">Tabel</span>
      </button>

      <button
        type="button"
        id="editor-tb-inserthr"
        onMouseDown={(e) => e.preventDefault()}
        onClick={() => execCommand('insertHorizontalRule')}
        className="p-1.5 text-slate-700 hover:bg-slate-200 rounded transition-colors flex items-center space-x-1 text-xs font-semibold cursor-pointer border border-transparent hover:border-slate-300"
        title="Sisipkan Garis Pembatas (Mendatar)"
      >
        <Minus className="w-4 h-4 text-slate-650" />
        <span className="hidden sm:inline">Garis</span>
      </button>

      <button
        type="button"
        id="editor-tb-insertpagebreak"
        onMouseDown={(e) => e.preventDefault()}
        onClick={() => execCommand('insertPageBreak')}
        className="p-1.5 text-indigo-700 bg-indigo-50/50 hover:bg-indigo-100 rounded transition-colors flex items-center space-x-1 text-xs font-extrabold cursor-pointer border border-indigo-100"
        title="Sisipkan Batas Halaman Cetakan Baru"
      >
        <Scissors className="w-3.5 h-3.5 text-indigo-600" />
        <span className="hidden sm:inline">Batas Halaman</span>
      </button>

      <button
        type="button"
        id="editor-tb-showmarks"
        onMouseDown={(e) => e.preventDefault()}
        onClick={() => setShowFormattingMarks(!showFormattingMarks)}
        className={`p-1.5 rounded transition-all flex items-center space-x-1 text-xs font-bold border cursor-pointer ${
          showFormattingMarks
            ? 'bg-amber-100 text-amber-800 border-amber-300 shadow-sm'
            : 'text-slate-700 bg-white border-slate-200 hover:bg-slate-50'
        }`}
        title="Tampilkan / Sembunyikan Simbol Paragraf (¶) & Batas Spasi Kosong"
      >
        <Pilcrow className="w-4 h-4" />
        <span className="hidden md:inline">Tanda ¶</span>
      </button>

      <button
        type="button"
        id="editor-tb-cleanempty"
        onMouseDown={(e) => e.preventDefault()}
        onClick={onCleanEmptyParagraphs}
        className="p-1.5 text-red-700 bg-red-50/50 hover:bg-red-100 rounded transition-colors flex items-center space-x-1 text-xs font-bold cursor-pointer border border-red-100"
        title="Bersihkan Semua Baris & Spasi Paragraf Kosong Berlebih"
      >
        <Eraser className="w-4 h-4 text-red-600" />
        <span className="hidden md:inline">Hapus Baris Kosong</span>
      </button>

      <button
        type="button"
        id="editor-tb-findreplace"
        onMouseDown={(e) => e.preventDefault()}
        onClick={() => setShowFindReplace(!showFindReplace)}
        className={`p-1.5 rounded transition-all flex items-center space-x-1 text-xs font-bold border cursor-pointer ${
          showFindReplace
            ? 'bg-blue-50 text-blue-700 border-blue-200 shadow-sm'
            : 'text-slate-700 bg-white border-slate-200 hover:bg-slate-50'
        }`}
        title="Tampilkan / Sembunyikan Panel Cari & Ganti Kata"
      >
        <Search className="w-4 h-4 text-blue-600" />
        <span className="hidden sm:inline">Cari & Ganti</span>
      </button>

      <button
        type="button"
        id="editor-tb-insertvar"
        onMouseDown={(e) => e.preventDefault()}
        onClick={() => setIsRightPaneOpen(!isRightPaneOpen)}
        className={`p-1.5 rounded transition-all flex items-center space-x-1.5 text-xs font-semibold border cursor-pointer ${
          isRightPaneOpen
            ? 'bg-blue-50 text-blue-700 border-blue-200 font-bold shadow-sm'
            : 'text-slate-700 bg-white border-slate-200 hover:bg-slate-50'
        }`}
        title="Sembunyikan / Tampilkan Panel Pembantu Variabel Cepat"
      >
        <PlusCircle className="w-4 h-4 text-blue-600" />
        <span className="hidden sm:inline">Koleksi Variabel</span>
        <span
          className={`px-1.5 py-0.2 text-[9px] font-extrabold rounded ml-1 ${
            isRightPaneOpen ? 'bg-blue-100 text-blue-800' : 'bg-slate-200 text-slate-600'
          }`}
        >
          {isRightPaneOpen ? 'Buka' : 'Tutup'}
        </span>
      </button>
    </>
  );
}