/**
 * CustomJsGroup Component
 *
 * Settings group for custom JavaScript input.
 * Contains: textarea with syntax highlighting hints.
 *
 * Supports two modes:
 * - compact: For floating settings panel
 * - default: For sidebar settings
 */

import { InfoCircledIcon, TrashIcon, ExclamationTriangleIcon } from "@radix-ui/react-icons";

interface CustomJsGroupProps {
  value: string;
  onChange: (value: string) => void;
  compact?: boolean;
}

// Get render mode description based on current configuration
const getRenderModeInfo = () => {
  const renderMode = window.oppbAdmin?.render_mode ?? "ssr";

  if (renderMode === "ssr") {
    return {
      mode: "SSR (Server-Side Rendering)",
      description: "Prices are rendered as static HTML on the server.",
      jsContext: "Add JavaScript for animations. Use priceContainer to query elements.",
      placeholder: "priceContainer.querySelector(...)",
    };
  }

  return {
    mode: "Web Component",
    description:
      "Prices are rendered client-side using the <oppb-price-display> custom element. Your scripts will execute after the component renders.",
    jsContext: "Scripts run inside the web component. Use 'this.shadowRoot' to query elements within the shadow DOM.",
    placeholder: "const container = this.shadowRoot.querySelector(.oppb-price-container)",
  };
};

export function CustomJsGroup({ value, onChange, compact = false }: CustomJsGroupProps) {
  const handleClear = () => {
    onChange("");
  };

  const renderModeInfo = getRenderModeInfo();

  // Compact mode - for floating settings panel
  if (compact) {
    return (
      <div className="floating-popover__custom-js">
        {/* Render Mode Info */}
        <div className="floating-settings__info floating-settings__info--small mb-2">
          <InfoCircledIcon className="w-3.5 h-3.5 shrink-0" />
          <span>
            <strong>Mode:</strong> {renderModeInfo.mode}
          </span>
        </div>

        {/* Warning */}
        <div className="floating-settings__warning floating-settings__warning--small">
          <ExclamationTriangleIcon className="w-3.5 h-3.5 shrink-0" />
          <span>{renderModeInfo.jsContext}</span>
        </div>

        {/* Textarea */}
        <textarea
          className="floating-settings__textarea floating-settings__textarea--code"
          value={value}
          onChange={(e) => onChange(e.target.value)}
          placeholder={renderModeInfo.placeholder}
          rows={8}
          spellCheck={false}
        />

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

        {/* Info */}
        <div className="floating-settings__info floating-settings__info--small">{renderModeInfo.description}</div>
      </div>
    );
  }

  // Default mode - for sidebar settings
  return (
    <div className="custom-js-group mt-2">
      {/* Render Mode Info */}
      <div className="custom-js-group__info mb-2">
        <InfoCircledIcon className="w-3 h-3" />
        <span>
          <strong>Mode:</strong> {renderModeInfo.mode}
        </span>
      </div>

      {/* Warning */}
      <div className="custom-js-group__warning">
        <ExclamationTriangleIcon className="w-3 h-3" />
        <span>{renderModeInfo.jsContext}</span>
      </div>

      {/* Textarea */}
      <textarea
        className="custom-js-group__textarea"
        value={value}
        onChange={(e) => onChange(e.target.value)}
        placeholder={renderModeInfo.placeholder}
        rows={8}
        spellCheck={false}
      />
      {value && (
        <button type="button" className="custom-js-group__btn custom-js-group__btn--clear" onClick={handleClear}>
          Clear
        </button>
      )}

      {/* Info */}
      <div className="custom-js-group__info">
        <InfoCircledIcon className="w-3 h-3" />
        <span>{renderModeInfo.description}</span>
      </div>
    </div>
  );
}

export default CustomJsGroup;
