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

import React from 'react';
import { Layout, FileText, Settings } from 'lucide-react';
import FontControls from './editor/toolbar/FontControls';
import ParagraphControls from './editor/toolbar/ParagraphControls';
import InsertControls from './editor/toolbar/InsertControls';

interface EditorToolbarProps {
  showPreviewMode: boolean;
  isHtmlMode: boolean;
  fontFamily: string;
  setFontFamily: (val: string) => void;
  fontSize: string;
  setFontSize: (val: string) => void;
  lineHeight: string;
  setLineHeight: (val: string) => void;
  marginPreset: 'standard' | 'medium' | 'narrow' | 'custom';
  setMarginPreset: (val: 'standard' | 'medium' | 'narrow' | 'custom') => void;
  paperSize: 'A4' | 'F4';
  setPaperSize: (val: 'A4' | 'F4') => void;
  textColor: string;
  setTextColor: (val: string) => void;
  isRightPaneOpen: boolean;
  setIsRightPaneOpen: (val: boolean) => void;
  execCommand: (command: string, arg?: string) => void;
  setShowTableModal: (val: boolean) => void;
  editorRef: React.RefObject<HTMLDivElement | null>;
  showFormattingMarks: boolean;
  setShowFormattingMarks: (val: boolean) => void;
  onCleanEmptyParagraphs: () => void;
  
  // Active formatting state
  activeFormats: {
    bold: boolean;
    italic: boolean;
    underline: boolean;
    strikeThrough: boolean;
    subscript: boolean;
    superscript: boolean;
    justifyLeft: boolean;
    justifyCenter: boolean;
    justifyRight: boolean;
    justifyFull: boolean;
    fontFamily: string;
    fontSize: string;
    textColor: string;
    backgroundColor: string;
  };
  isFormatPainterActive: boolean;
  onCopyFormat: () => void;
  showFindReplace: boolean;
  setShowFindReplace: (val: boolean) => void;
  isLetterheadMode: boolean;
  setIsLetterheadMode: (val: boolean) => void;
  isIkiLetterhead: boolean;
  setIsIkiLetterhead: (val: boolean) => void;
  setShowMarginModal: (val: boolean) => void;
  setShowKopModal: (val: boolean) => void;
}

export default function EditorToolbar({
  showPreviewMode,
  isHtmlMode,
  fontFamily,
  setFontFamily,
  fontSize,
  setFontSize,
  lineHeight,
  setLineHeight,
  marginPreset,
  setMarginPreset,
  paperSize,
  setPaperSize,
  textColor,
  setTextColor,
  isRightPaneOpen,
  setIsRightPaneOpen,
  execCommand,
  setShowTableModal,
  editorRef,
  showFormattingMarks,
  setShowFormattingMarks,
  onCleanEmptyParagraphs,
  activeFormats,
  isFormatPainterActive,
  onCopyFormat,
  showFindReplace,
  setShowFindReplace,
  isLetterheadMode,
  setIsLetterheadMode,
  isIkiLetterhead,
  setIsIkiLetterhead,
  setShowMarginModal,
  setShowKopModal,
}: EditorToolbarProps) {
  if (showPreviewMode) return null;

  if (isHtmlMode) {
    return (
      <section id="editor-tb-html-banner" className="flex flex-col sm:flex-row sm:items-center bg-slate-900 border-b border-slate-800 px-6 py-3.5 gap-3 print:hidden select-none text-slate-300">
        <div className="flex items-center space-x-2 text-xs font-bold text-amber-400 bg-amber-400/10 border border-amber-400/20 px-2.5 py-1 rounded-md shrink-0 self-start sm:self-auto">
          <span className="w-1.5 h-1.5 rounded-full bg-amber-400 animate-pulse" />
          <span>MODE EDITOR KODE HTML</span>
        </div>
        <p className="text-xs text-slate-400 leading-relaxed md:max-w-2xl">
          Anda sedang mengedit kode sumber HTML dokumen secara langsung. Anda dapat menggunakan tag HTML standar seperti <code className="text-emerald-400 font-mono">&lt;b&gt;</code>, <code className="text-emerald-400 font-mono">&lt;p&gt;</code>, <code className="text-emerald-400 font-mono">&lt;table&gt;</code>, maupun styling inline CSS untuk melayout template surat ini secara presisi.
        </p>
        <div className="sm:ml-auto text-xs text-slate-500 font-mono flex items-center shrink-0">
          Ubah ke <span className="text-blue-400 font-extrabold mx-1">"Mode Visual (Wysiwyg)"</span> melalui tombol di atas untuk melihat hasilnya.
        </div>
      </section>
    );
  }

  return (
    <section className="flex flex-wrap items-center bg-slate-50 border-b border-slate-200 px-6 py-2 gap-2 print:hidden select-none">
      {/* Font & Styles Controls */}
      <FontControls
        fontFamily={fontFamily}
        setFontFamily={setFontFamily}
        fontSize={fontSize}
        setFontSize={setFontSize}
        textColor={textColor}
        setTextColor={setTextColor}
        isFormatPainterActive={isFormatPainterActive}
        onCopyFormat={onCopyFormat}
        execCommand={execCommand}
        activeFormats={activeFormats}
        editorRef={editorRef}
      />

      {/* Margin Presets & Physical Letterhead */}
      <div className="flex items-center space-x-1.5 border-r border-slate-300 pr-2">
        <span className="text-xs text-slate-400 mr-0.5 flex items-center">
          <Layout className="w-3.5 h-3.5 mr-0.5" /> Margin
        </span>
        <select
          id="editor-tb-margins"
          value={marginPreset}
          onChange={(e) => {
            const val = e.target.value as any;
            if (val === 'custom') {
              setShowMarginModal(true);
            } else {
              setMarginPreset(val);
            }
          }}
          className="text-xs text-slate-700 bg-white border border-slate-300 rounded px-2 py-1 focus:outline-none focus:border-blue-500 cursor-pointer font-medium"
        >
          <option value="standard">Standar (2.5 cm)</option>
          <option value="medium">Sedang (2.0 cm)</option>
          <option value="narrow">Sempit (1.5 cm)</option>
          <option value="custom">Kustom...</option>
        </select>

        {marginPreset === 'custom' && (
          <button
            type="button"
            id="editor-tb-custom-margin-settings"
            onClick={() => setShowMarginModal(true)}
            className="p-1.5 text-slate-500 hover:text-blue-600 hover:bg-slate-100 rounded transition-all cursor-pointer flex items-center justify-center border border-slate-200 bg-white hover:border-slate-300"
            title="Pengaturan Margin Kustom (Ubah lagi)"
          >
            <Settings className="w-3.5 h-3.5" />
          </button>
        )}

        <button
          type="button"
          id="editor-tb-letterheadmode"
          onMouseDown={(e) => e.preventDefault()}
          onClick={() => setIsLetterheadMode(!isLetterheadMode)}
          className={`p-1 px-2 rounded text-[10px] font-bold border transition-all flex items-center space-x-1 cursor-pointer ${
            isLetterheadMode
              ? 'bg-blue-600 border-blue-700 text-white shadow-sm hover:bg-blue-700'
              : 'bg-white border-slate-250 text-slate-650 hover:bg-slate-50'
          }`}
          title="Mode Kertas Berkop Fisik: Sembunyikan kop surat digital dan kosongkan ruang atas kertas untuk cetak berkop fisik"
        >
          <span>📄 Cetak Kop Fisik</span>
          <span className={`w-1.5 h-1.5 rounded-full ${isLetterheadMode ? 'bg-emerald-400 animate-pulse' : 'bg-slate-350'}`} />
        </button>

        <button
          type="button"
          id="editor-tb-ikiletterhead"
          onMouseDown={(e) => e.preventDefault()}
          onClick={() => setIsIkiLetterhead(!isIkiLetterhead)}
          className={`p-1 px-2 rounded text-[10px] font-bold border transition-all flex items-center space-x-1 cursor-pointer ${
            isIkiLetterhead
              ? 'bg-indigo-600 border-indigo-700 text-white shadow-sm hover:bg-indigo-700'
              : 'bg-white border-slate-250 text-slate-650 hover:bg-slate-50'
          }`}
          title="Sisipkan Kop Surat IKI: Pasang kop surat atas & bawah gambar digital Institut Kesehatan Immanuel"
        >
          <span>🏥 Kop Surat IKI</span>
          <span className={`w-1.5 h-1.5 rounded-full ${isIkiLetterhead ? 'bg-emerald-400 animate-pulse' : 'bg-slate-350'}`} />
        </button>

        <button
          type="button"
          id="editor-tb-custom-kop-settings"
          onClick={() => setShowKopModal(true)}
          className="p-1.5 text-slate-500 hover:text-indigo-600 hover:bg-slate-100 rounded transition-all cursor-pointer flex items-center justify-center border border-slate-200 bg-white hover:border-slate-300"
          title="Ganti / Upload Gambar Kop Surat (Header & Footer)"
        >
          <Settings className="w-3.5 h-3.5" />
        </button>
      </div>

      {/* Paper Size Presets */}
      <div className="flex items-center space-x-1 border-r border-slate-300 pr-2">
        <span className="text-xs text-slate-400 mr-1 flex items-center">
          <FileText className="w-3.5 h-3.5 mr-0.5" /> Kertas
        </span>
        <select
          id="editor-tb-papersize"
          value={paperSize}
          onChange={(e) => setPaperSize(e.target.value as 'A4' | 'F4')}
          className="text-xs font-bold text-slate-700 bg-white border border-slate-300 rounded px-2 py-1 focus:outline-none focus:border-blue-500 cursor-pointer select-none"
        >
          <option value="A4">A4 (21 x 29.7 cm)</option>
          <option value="F4">F4 / Folio (21.5 x 33 cm)</option>
        </select>
      </div>

      {/* Paragraph Style & Alignments & Spacings */}
      <ParagraphControls
        lineHeight={lineHeight}
        setLineHeight={setLineHeight}
        execCommand={execCommand}
        activeFormats={activeFormats}
      />

      {/* Insertable Items & Utilities */}
      <InsertControls
        setShowTableModal={setShowTableModal}
        showFormattingMarks={showFormattingMarks}
        setShowFormattingMarks={setShowFormattingMarks}
        onCleanEmptyParagraphs={onCleanEmptyParagraphs}
        showFindReplace={showFindReplace}
        setShowFindReplace={setShowFindReplace}
        isRightPaneOpen={isRightPaneOpen}
        setIsRightPaneOpen={setIsRightPaneOpen}
        execCommand={execCommand}
      />
    </section>
  );
}