/**
 * CustomHtmlGroup Component
 *
 * Settings group for custom HTML input with placeholder support.
 * Contains: placeholder picker, textarea.
 *
 * Supports two modes:
 * - compact: For floating settings panel (cascade popover for placeholders)
 * - default: For sidebar settings (inline popover for placeholders)
 */

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

import { PLACEHOLDERS } from "@/types";

interface CustomHtmlGroupProps {
  value: string | null;
  onChange: (value: string | null) => void;
  compact?: boolean;
  placeholderOpen?: boolean;
  onPlaceholderToggle?: (open: boolean) => void;
}

export function CustomHtmlGroup({ value, onChange, compact = false, placeholderOpen = false, onPlaceholderToggle }: CustomHtmlGroupProps) {
  const [showPlaceholders, setShowPlaceholders] = useState(false);

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

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

  // Compact mode - for floating settings panel
  if (compact) {
    return (
      <div className="floating-popover__custom-html">
        {/* Cascade button for placeholders */}
        <button
          type="button"
          className={`floating-settings__cascade-btn ${placeholderOpen ? "active" : ""}`}
          onClick={() => onPlaceholderToggle?.(!placeholderOpen)}
        >
          <PlusIcon className="w-4 h-4" />
          <span>Insert Placeholder</span>
          <ChevronRightIcon className="w-4 h-4 ml-auto" />
        </button>

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

        {/* Clear button */}
        {value && (
          <button type="button" className="floating-popover__clear-btn" onClick={handleClear}>
            <TrashIcon className="w-3 h-3" />
            <span>Clear HTML</span>
          </button>
        )}
      </div>
    );
  }

  // Default mode - for sidebar settings
  return (
    <div className="custom-html-group">
      {/* Header with actions */}
      <div className="custom-html-group__header">
        <Popover.Root open={showPlaceholders} onOpenChange={setShowPlaceholders}>
          <Popover.Trigger asChild>
            <button type="button" className="custom-html-group__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-group__btn custom-html-group__btn--clear" onClick={handleClear}>
            Clear
          </button>
        )}
      </div>

      {/* Textarea */}
      <textarea
        className="custom-html-group__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-group__info">
        <InfoCircledIcon className="w-3 h-3" />
        <span>Custom HTML overrides default element rendering. Use placeholders for dynamic values.</span>
      </div>
    </div>
  );
}

export default CustomHtmlGroup;
