'use client';

import { useState, useRef, useEffect, useCallback, Fragment } from 'react';
import { Bold, Italic, Underline, List, ListOrdered, AlignLeft, AlignCenter, AlignRight, Undo, Redo, Table, Trash2, Rows, Columns } from 'lucide-react';

interface RichTextEditorProps {
  value: string;
  onChange: (value: string) => void;
  placeholder?: string;
  minHeight?: number;
}

export default function RichTextEditor({ value, onChange, placeholder = 'Enter description...', minHeight = 150 }: RichTextEditorProps) {
  const editorRef = useRef<HTMLDivElement>(null);
  const [isInitialized, setIsInitialized] = useState(false);
  const [showTableMenu, setShowTableMenu] = useState(false);
  const lastValueRef = useRef(value);

  useEffect(() => {
    if (editorRef.current && !isInitialized) {
      editorRef.current.innerHTML = value || '';
      lastValueRef.current = value;
      setIsInitialized(true);
    }
  }, [value, isInitialized]);

  useEffect(() => {
    if (editorRef.current && isInitialized && value !== lastValueRef.current) {
      if (document.activeElement !== editorRef.current) {
        editorRef.current.innerHTML = value || '';
        lastValueRef.current = value;
      }
    }
  }, [value, isInitialized]);

  const execCommand = (command: string) => {
    editorRef.current?.focus();

    if (command === 'bold') {
      document.execCommand('bold', false);
    } else if (command === 'italic') {
      document.execCommand('italic', false);
    } else if (command === 'underline') {
      document.execCommand('underline', false);
    } else if (command === 'insertUnorderedList') {
      document.execCommand('insertUnorderedList', false);
    } else if (command === 'insertOrderedList') {
      document.execCommand('insertOrderedList', false);
    } else if (command === 'justifyLeft') {
      document.execCommand('justifyLeft', false);
    } else if (command === 'justifyCenter') {
      document.execCommand('justifyCenter', false);
    } else if (command === 'justifyRight') {
      document.execCommand('justifyRight', false);
    } else if (command === 'undo') {
      document.execCommand('undo', false);
    } else if (command === 'redo') {
      document.execCommand('redo', false);
    }

    updateValue();
  };

  const updateValue = useCallback(() => {
    if (editorRef.current) {
      lastValueRef.current = editorRef.current.innerHTML;
      onChange(editorRef.current.innerHTML);
    }
  }, [onChange]);

  const insertTable = (rows: number, cols: number) => {
    let tableHTML = '<table style="border-collapse: collapse; width: 100%; margin: 10px 0;">';
    for (let r = 0; r < rows; r++) {
      tableHTML += '<tr>';
      for (let c = 0; c < cols; c++) {
        const cellTag = r === 0 ? 'th' : 'td';
        const border = 'border: 1px solid #ccc; padding: 8px;';
        tableHTML += `<${cellTag} style="${border}"><br></${cellTag}>`;
      }
      tableHTML += '</tr>';
    }
    tableHTML += '</table><p><br></p>';

    if (editorRef.current) {
      editorRef.current.focus();
      document.execCommand('insertHTML', false, tableHTML);
      updateValue();
    }
    setShowTableMenu(false);
  };

  const insertRow = () => {
    if (!editorRef.current) return;
    const selection = window.getSelection();
    if (!selection || selection.rangeCount === 0) return;

    const range = selection.getRangeAt(0);
    let cell = range.commonAncestorContainer;
    while (cell && cell !== editorRef.current) {
      if ((cell as HTMLElement).tagName === 'TD' || (cell as HTMLElement).tagName === 'TH') {
        const row = (cell as HTMLElement).parentElement;
        if (row && row.tagName === 'TR') {
          const newRow = row.cloneNode(true) as HTMLElement;
          row.parentElement?.insertBefore(newRow, row.nextSibling);
          updateValue();
          break;
        }
      }
      cell = (cell as HTMLElement).parentElement || (cell as Text).parentElement!;
    }
  };

  const insertColumn = () => {
    if (!editorRef.current) return;
    const selection = window.getSelection();
    if (!selection || selection.rangeCount === 0) return;

    const range = selection.getRangeAt(0);
    let cell = range.commonAncestorContainer;
    while (cell && cell !== editorRef.current) {
      if ((cell as HTMLElement).tagName === 'TD' || (cell as HTMLElement).tagName === 'TH') {
        const table = (cell as HTMLElement).closest('table');
        if (table) {
          const colIndex = Array.from((cell as HTMLElement).parentElement?.children || []).indexOf(cell as HTMLElement);
          table.querySelectorAll('tr').forEach(row => {
            const newCell = (cell as HTMLElement).cloneNode() as HTMLElement;
            newCell.innerHTML = '<br>';
            if (row.children[colIndex]) {
              row.insertBefore(newCell, row.children[colIndex]);
            } else {
              row.appendChild(newCell);
            }
          });
          updateValue();
          break;
        }
      }
      cell = (cell as HTMLElement).parentElement || (cell as Text).parentElement!;
    }
  };

  const deleteTable = () => {
    if (!editorRef.current) return;
    const selection = window.getSelection();
    if (!selection || selection.rangeCount === 0) return;

    const range = selection.getRangeAt(0);
    let cell = range.commonAncestorContainer;
    while (cell && cell !== editorRef.current) {
      if ((cell as HTMLElement).tagName === 'TABLE') {
        (cell as HTMLElement).remove();
        updateValue();
        break;
      }
      cell = (cell as HTMLElement).parentElement || (cell as Text).parentElement!;
    }
  };

  const ToolbarButton = ({ onClick, children, title }: { onClick: () => void; children: React.ReactNode; title: string }) => (
    <button
      type="button"
      onClick={onClick}
      title={title}
      className="p-1.5 rounded text-slate-600 hover:bg-slate-100"
    >
      {children}
    </button>
  );

  const ToolbarDivider = () => <div className="w-px h-5 bg-slate-300 mx-1" />;

  return (
    <div className="border border-slate-200 rounded-lg overflow-hidden bg-white">
      <div className="flex items-center gap-1 px-2 py-1 bg-slate-50 border-b border-slate-200 flex-wrap">
        <ToolbarButton onClick={() => execCommand('bold')} title="Bold">
          <Bold className="w-4 h-4" />
        </ToolbarButton>
        <ToolbarButton onClick={() => execCommand('italic')} title="Italic">
          <Italic className="w-4 h-4" />
        </ToolbarButton>
        <ToolbarButton onClick={() => execCommand('underline')} title="Underline">
          <Underline className="w-4 h-4" />
        </ToolbarButton>
        <ToolbarDivider />
        {/* <ToolbarButton onClick={() => execCommand('insertUnorderedList')} title="Bullet List">
          <List className="w-4 h-4" />
        </ToolbarButton>
        <ToolbarButton onClick={() => execCommand('insertOrderedList')} title="Numbered List">
          <ListOrdered className="w-4 h-4" />
        </ToolbarButton>
        <ToolbarDivider /> */}
        <ToolbarButton onClick={() => execCommand('justifyLeft')} title="Align Left">
          <AlignLeft className="w-4 h-4" />
        </ToolbarButton>
        <ToolbarButton onClick={() => execCommand('justifyCenter')} title="Align Center">
          <AlignCenter className="w-4 h-4" />
        </ToolbarButton>
        <ToolbarButton onClick={() => execCommand('justifyRight')} title="Align Right">
          <AlignRight className="w-4 h-4" />
        </ToolbarButton>
        <ToolbarDivider />
        <div className="relative">
          <ToolbarButton onClick={() => setShowTableMenu(!showTableMenu)} title="Insert Table">
            <Table className="w-4 h-4" />
          </ToolbarButton>
          {showTableMenu && (
            <div className="absolute top-full left-0 mt-1 bg-white border border-slate-200 rounded-lg shadow-lg p-2 z-50 min-w-[160px]">
              <div className="text-xs text-slate-500 mb-2 px-1">Insert Table</div>
              <div className="grid grid-cols-4 gap-1 mb-2">
                {[2, 3, 4, 5].map(rows =>
                  <Fragment key={rows}>
                    {[2, 3, 4, 5].map(cols => (
                      <button
                        key={`${rows}-${cols}`}
                        onClick={() => insertTable(rows, cols)}
                        className="w-6 h-6 text-xs bg-slate-100 hover:bg-blue-100 rounded flex items-center justify-center"
                      >
                        {rows}x{cols}
                      </button>
                    ))}
                  </Fragment>
                )}
              </div>
              <div className="border-t border-slate-200 pt-2 mt-2">
                <button onClick={insertRow} className="w-full text-left px-2 py-1 text-sm hover:bg-slate-100 rounded flex items-center gap-2">
                  <Rows className="w-3 h-3" /> Add Row
                </button>
                <button onClick={insertColumn} className="w-full text-left px-2 py-1 text-sm hover:bg-slate-100 rounded flex items-center gap-2">
                  <Columns className="w-3 h-3" /> Add Column
                </button>
                <button onClick={deleteTable} className="w-full text-left px-2 py-1 text-sm hover:bg-red-50 text-red-600 rounded flex items-center gap-2">
                  <Trash2 className="w-3 h-3" /> Delete Table
                </button>
              </div>
            </div>
          )}
        </div>
        <ToolbarDivider />
        <ToolbarButton onClick={() => execCommand('undo')} title="Undo">
          <Undo className="w-4 h-4" />
        </ToolbarButton>
        <ToolbarButton onClick={() => execCommand('redo')} title="Redo">
          <Redo className="w-4 h-4" />
        </ToolbarButton>
      </div>
      <div
        ref={editorRef}
        contentEditable
        onBlur={updateValue}
        onInput={updateValue}
        className="px-3 py-2 text-sm text-slate-700 focus:outline-none prose prose-sm max-w-none"
        style={{ minHeight }}
        data-placeholder={placeholder}
        suppressContentEditableWarning
      />
    </div>
  );
}