/**
 * CustomHtmlEditor Component
 *
 * Textarea for entering custom HTML with placeholder support.
 * Shows available placeholders and validates input.
 */

import {useState} from "react";
import * as Popover from "@radix-ui/react-popover";
import {InfoCircledIcon, PlusIcon} from "@radix-ui/react-icons";

import {PLACEHOLDERS} from "@/types";

interface CustomHtmlEditorProps {
  value: string | null;
  onChange: (value: string | null) => void;
}

export function CustomHtmlEditor({value, onChange}: CustomHtmlEditorProps) {
  const [showPlaceholders, setShowPlaceholders] = useState(false);

  const insertPlaceholder = (placeholder: string) => {
    const newValue = (value ?? "") + placeholder;
    onChange(newValue);
    setShowPlaceholders(false);
  };

  const handleClear = () => {
    onChange(null);
  };

  return (
    <div className="custom-html-editor">
      {/* Header with actions */}
      <div className="custom-html-editor__header">
        <Popover.Root
          open={showPlaceholders}
          onOpenChange={setShowPlaceholders}
        >
          <Popover.Trigger asChild>
            <button
              type="button"
              className="custom-html-editor__btn"
              title="Insert placeholder"
            >
              <PlusIcon className="w-3 h-3" />
              <span>Placeholder</span>
            </button>
          </Popover.Trigger>
          <Popover.Portal>
            <Popover.Content className="placeholder-popover" sideOffset={5}>
              <div className="placeholder-popover__title">
                Available Placeholders
              </div>
              <div className="placeholder-popover__list">
                {PLACEHOLDERS.map((placeholder) => (
                  <button
                    key={placeholder}
                    type="button"
                    className="placeholder-popover__item"
                    onClick={() => insertPlaceholder(placeholder)}
                  >
                    <code>{placeholder}</code>
                  </button>
                ))}
              </div>
              <Popover.Arrow className="placeholder-popover__arrow" />
            </Popover.Content>
          </Popover.Portal>
        </Popover.Root>

        {value && (
          <button
            type="button"
            className="custom-html-editor__btn custom-html-editor__btn--clear"
            onClick={handleClear}
          >
            Clear
          </button>
        )}
      </div>

      {/* Textarea */}
      <textarea
        className="custom-html-editor__textarea"
        value={value ?? ""}
        onChange={(e) => onChange(e.target.value || null)}
        placeholder="Enter custom HTML... e.g., <span class='price'>{regularPrice}</span>"
        rows={6}
        spellCheck={false}
      />

      {/* Info */}
      <div className="custom-html-editor__info">
        <InfoCircledIcon className="w-3 h-3" />
        <span>
          Custom HTML overrides default element rendering. Use placeholders for
          dynamic values.
        </span>
      </div>
    </div>
  );
}

export default CustomHtmlEditor;
