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

import React from 'react';
import { 
  AlignLeft, AlignCenter, AlignRight, AlignJustify, 
  List, ListOrdered, Indent, Outdent 
} from 'lucide-react';

interface ParagraphControlsProps {
  lineHeight: string;
  setLineHeight: (val: string) => void;
  execCommand: (command: string, arg?: string) => void;
  activeFormats: any;
}

export default function ParagraphControls({
  lineHeight,
  setLineHeight,
  execCommand,
  activeFormats
}: ParagraphControlsProps) {
  return (
    <>
      {/* Paragraph Style block */}
      <div className="flex items-center space-x-1 border-r border-slate-300 pr-2">
        <select
          id="editor-tb-format"
          onChange={(e) => {
            execCommand('formatBlock', e.target.value);
            e.target.value = '';
          }}
          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"
          title="Gaya Paragraf"
        >
          <option value="">Gaya Teks...</option>
          <option value="p">Paragraf Normal</option>
          <option value="h2">Sub-judul Besar</option>
          <option value="h3">Sub-judul Sedang</option>
          <option value="div">Kotak Konten (Div)</option>
        </select>
      </div>

      {/* Alignments & Indents */}
      <div className="flex items-center space-x-1 border-r border-slate-300 pr-2">
        <button
          type="button"
          id="editor-tb-alignleft"
          onMouseDown={(e) => e.preventDefault()}
          onClick={() => execCommand('justifyLeft')}
          className={`p-1.5 rounded transition-colors cursor-pointer ${
            activeFormats?.justifyLeft
              ? 'bg-blue-100 text-blue-700 border border-blue-200 shadow-xs'
              : 'text-slate-700 hover:bg-slate-200 border border-transparent'
          }`}
          title="Rata Kiri"
        >
          <AlignLeft className="w-4 h-4" />
        </button>
        <button
          type="button"
          id="editor-tb-aligncenter"
          onMouseDown={(e) => e.preventDefault()}
          onClick={() => execCommand('justifyCenter')}
          className={`p-1.5 rounded transition-colors cursor-pointer ${
            activeFormats?.justifyCenter
              ? 'bg-blue-100 text-blue-700 border border-blue-200 shadow-xs'
              : 'text-slate-700 hover:bg-slate-200 border border-transparent'
          }`}
          title="Rata Tengah"
        >
          <AlignCenter className="w-4 h-4" />
        </button>
        <button
          type="button"
          id="editor-tb-alignright"
          onMouseDown={(e) => e.preventDefault()}
          onClick={() => execCommand('justifyRight')}
          className={`p-1.5 rounded transition-colors cursor-pointer ${
            activeFormats?.justifyRight
              ? 'bg-blue-100 text-blue-700 border border-blue-200 shadow-xs'
              : 'text-slate-700 hover:bg-slate-200 border border-transparent'
          }`}
          title="Rata Kanan"
        >
          <AlignRight className="w-4 h-4" />
        </button>
        <button
          type="button"
          id="editor-tb-alignjustify"
          onMouseDown={(e) => e.preventDefault()}
          onClick={() => execCommand('justifyFull')}
          className={`p-1.5 rounded transition-colors cursor-pointer ${
            activeFormats?.justifyFull
              ? 'bg-blue-100 text-blue-700 border border-blue-200 shadow-xs'
              : 'text-slate-700 hover:bg-slate-200 border border-transparent'
          }`}
          title="Sama Rata (Justify)"
        >
          <AlignJustify className="w-4 h-4" />
        </button>

        <button
          type="button"
          id="editor-tb-outdent"
          onMouseDown={(e) => e.preventDefault()}
          onClick={() => execCommand('outdent')}
          className="p-1.5 text-slate-705 hover:bg-slate-200 rounded border border-transparent hover:border-slate-355 transition-colors cursor-pointer"
          title="Kurangi Indentasi"
        >
          <Outdent className="w-4 h-4" />
        </button>
        <button
          type="button"
          id="editor-tb-indent"
          onMouseDown={(e) => e.preventDefault()}
          onClick={() => execCommand('indent')}
          className="p-1.5 text-slate-705 hover:bg-slate-200 rounded border border-transparent hover:border-slate-355 transition-colors cursor-pointer"
          title="Tambah Indentasi"
        >
          <Indent className="w-4 h-4" />
        </button>
      </div>

      {/* Spacings (Line Spacing, Space Before/After) */}
      <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">
          <svg className="w-3.5 h-3.5 mr-0.5 text-slate-400" fill="none" stroke="currentColor" strokeWidth="2.5" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" d="M3 4.5h18M3 9h12M3 13.5h18M3 18h12M17 9v6m0 0l-2-2m2 2l2-2" />
          </svg>
          Spasi Baris
        </span>
        <select
          id="editor-tb-lineheight"
          value={lineHeight}
          onChange={(e) => setLineHeight(e.target.value)}
          className="text-xs font-semibold text-slate-700 bg-white border border-slate-300 rounded px-1.5 py-1 focus:outline-none focus:border-blue-500 cursor-pointer"
          title="Spasi Antar Baris (Line Spacing Utama)"
        >
          <option value="1.0">Rapat (1.0)</option>
          <option value="1.15">Normal (1.15)</option>
          <option value="1.3">Moderat (1.3)</option>
          <option value="1.5">Reguler (1.5)</option>
          <option value="2.0">Ganda (2.0)</option>
        </select>

        <span className="text-xs text-slate-400 flex items-center ml-2 border-l border-slate-200 pl-2">
          ↑ Paragraf
        </span>
        <select
          id="editor-tb-spacing-before"
          defaultValue=""
          onChange={(e) => {
            if (e.target.value !== "") {
              execCommand('paragraphSpacingBefore', e.target.value);
              e.target.value = "";
            }
          }}
          className="text-xs text-slate-700 bg-white border border-slate-300 rounded px-1.5 py-1 focus:outline-none focus:border-blue-500 cursor-pointer"
          title="Batas Kosong Atas Paragraf Aktif (Space Before)"
        >
          <option value="">Default</option>
          <option value="0px">Rapat (0px)</option>
          <option value="4px">Sangat Tipis (4px)</option>
          <option value="8px">Tipis (8px)</option>
          <option value="12px">Sedang (12px)</option>
          <option value="16px">Normal (16px)</option>
          <option value="24px">Lebar (24px)</option>
          <option value="30px">Sangat Lebar (30px)</option>
          <option value="40px">Batas TTD (40px)</option>
        </select>

        <span className="text-xs text-slate-400 flex items-center ml-1">
          ↓ Paragraf
        </span>
        <select
          id="editor-tb-spacing-after"
          defaultValue=""
          onChange={(e) => {
            if (e.target.value !== "") {
              execCommand('paragraphSpacingAfter', e.target.value);
              e.target.value = "";
            }
          }}
          className="text-xs text-slate-700 bg-white border border-slate-300 rounded px-1.5 py-1 focus:outline-none focus:border-blue-500 cursor-pointer"
          title="Batas Kosong Bawah Paragraf Aktif (Space After)"
        >
          <option value="">Default</option>
          <option value="0px">Rapat (0px)</option>
          <option value="4px">Sangat Tipis (4px)</option>
          <option value="8px">Tipis (8px)</option>
          <option value="12px">Sedang (12px)</option>
          <option value="16px">Normal (16px)</option>
          <option value="24px">Lebar (24px)</option>
          <option value="30px">Sangat Lebar (30px)</option>
          <option value="40px">Batas TTD (40px)</option>
          <option value="60px">Renggang (60px)</option>
        </select>
      </div>

      {/* Lists (Bullets & Numbered) */}
      <div className="flex items-center space-x-1 border-r border-slate-300 pr-2">
        <button
          type="button"
          id="editor-tb-listbullet"
          onMouseDown={(e) => e.preventDefault()}
          onClick={() => execCommand('insertUnorderedList')}
          className="p-1.5 text-slate-700 hover:bg-slate-200 rounded transition-colors cursor-pointer border border-transparent"
          title="Daftar Poin"
        >
          <List className="w-4 h-4" />
        </button>
        <button
          type="button"
          id="editor-tb-listnum"
          onMouseDown={(e) => e.preventDefault()}
          onClick={() => execCommand('insertOrderedList')}
          className="p-1.5 text-slate-700 hover:bg-slate-200 rounded transition-colors cursor-pointer border border-transparent"
          title="Daftar Angka"
        >
          <ListOrdered className="w-4 h-4" />
        </button>
      </div>
    </>
  );
}