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

import React from 'react';
import { ArrowLeft, Code, Eye, EyeOff, Printer, Save } from 'lucide-react';

interface RichEditorHeaderProps {
  title: string;
  setTitle: (val: string) => void;
  autosaveStatus: 'idle' | 'saving' | 'saved';
  showPreviewMode: boolean;
  setShowPreviewMode: (val: boolean) => void;
  isHtmlMode: boolean;
  toggleHtmlMode: () => void;
  handlePrint: () => void;
  handleSave: () => void;
  onBack: () => void;
}

export default function RichEditorHeader({
  title,
  setTitle,
  autosaveStatus,
  showPreviewMode,
  setShowPreviewMode,
  isHtmlMode,
  toggleHtmlMode,
  handlePrint,
  handleSave,
  onBack
}: RichEditorHeaderProps) {
  return (
    <header className="flex flex-col md:flex-row md:items-center justify-between px-6 py-4 bg-white border-b border-slate-200 shadow-sm print:hidden gap-4">
      <div className="flex items-center space-x-3">
        <button
          type="button"
          id="editor-btn-back"
          onClick={onBack}
          className="p-2 text-slate-500 hover:text-slate-800 hover:bg-slate-100 rounded-full transition-colors cursor-pointer"
          title="Kembali"
        >
          <ArrowLeft className="w-5 h-5" />
        </button>

        <div className="flex-1 min-w-0">
          <input
            id="editor-input-title"
            type="text"
            value={title}
            onChange={(e) => setTitle(e.target.value)}
            className="text-lg font-bold text-slate-800 bg-transparent border-b border-transparent hover:border-slate-300 focus:border-blue-500 focus:outline-none transition-colors w-full px-1"
            placeholder="Masukkan Judul Dokumen..."
          />
          <div className="flex flex-wrap items-center gap-x-2 pl-1 mt-0.5 text-xs font-semibold text-slate-500">
            <span>Mengedit Draf Surat • Otomatis menyesuaikan dengan ukuran kertas A4 saat dicetak</span>
            <span className="text-slate-300 hidden md:inline select-none">•</span>
            <div className="inline-flex items-center space-x-1.5 bg-slate-50 border border-slate-150 rounded-full px-2 py-0.5 select-none">
              <span className={`w-1.5 h-1.5 rounded-full ${
                autosaveStatus === 'saving' 
                  ? 'bg-amber-500 animate-ping' 
                  : autosaveStatus === 'idle'
                    ? 'bg-amber-500 animate-pulse'
                    : 'bg-emerald-500 animate-pulse'
              }`} />
              <span className={`text-[9.5px] font-extrabold tracking-wider ${
                autosaveStatus === 'saving' 
                  ? 'text-amber-600' 
                  : autosaveStatus === 'idle'
                    ? 'text-amber-600'
                    : 'text-emerald-600'
              } uppercase`}>
                {autosaveStatus === 'saving' 
                  ? 'Menyimpan...' 
                  : autosaveStatus === 'idle'
                    ? 'Belum Disimpan'
                    : 'Tersimpan'}
              </span>
            </div>
          </div>
        </div>
      </div>

      <div className="flex items-center space-x-2 shrink-0">
        {!showPreviewMode && (
          <button
            type="button"
            id="editor-btn-html"
            onClick={toggleHtmlMode}
            className={`px-3 py-2 text-sm font-medium rounded-lg border transition-all flex items-center space-x-2 cursor-pointer ${
              isHtmlMode
                ? 'bg-amber-600 text-white border-amber-700 shadow-sm shadow-amber-100 hover:bg-amber-700'
                : 'text-slate-600 bg-white border-slate-200 hover:bg-slate-55'
            }`}
            title="Ubah antara Editor Visual (WYSIWYG) dan Editor Kode HTML"
          >
            <Code className="w-4 h-4" />
            <span>{isHtmlMode ? 'Mode Visual (Wysiwyg)' : 'Mode HTML'}</span>
          </button>
        )}

        <button
          type="button"
          id="editor-btn-preview"
          onClick={() => {
            if (!showPreviewMode && isHtmlMode) {
              toggleHtmlMode(); // switch back to visual if previewing
            }
            setShowPreviewMode(!showPreviewMode);
          }}
          className={`px-3 py-2 text-sm font-medium rounded-lg border transition-all flex items-center space-x-2 cursor-pointer ${
            showPreviewMode
              ? 'bg-blue-50 text-blue-700 border-blue-200'
              : 'text-slate-600 bg-white border-slate-200 hover:bg-slate-55'
          }`}
        >
          {showPreviewMode ? (
            <>
              <EyeOff className="w-4 h-4" />
              <span>Mode Edit</span>
            </>
          ) : (
            <>
              <Eye className="w-4 h-4" />
              <span>Pratinjau</span>
            </>
          )}
        </button>

        <button
          type="button"
          id="editor-btn-print"
          onClick={handlePrint}
          className="px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 active:bg-blue-800 rounded-lg shadow-sm transition-all flex items-center space-x-2 cursor-pointer shadow-blue-200"
        >
          <Printer className="w-4 h-4" />
          <span>Cetak / PDF (Ctrl+P)</span>
        </button>

        <button
          type="button"
          id="editor-btn-save"
          onClick={handleSave}
          className="px-4 py-2 text-sm font-medium text-white bg-emerald-600 hover:bg-emerald-700 active:bg-emerald-800 rounded-lg shadow-sm transition-all flex items-center space-x-2 cursor-pointer shadow-emerald-200"
        >
          <Save className="w-4 h-4" />
          <span>Simpan</span>
        </button>
      </div>
    </header>
  );
}