// The Chat widget behavior controls, with the Stand app's names and help text.
// Shared by the Chat widget screen and the block editor's Stand Chat panel.
import { SelectControl, TextControl, TextareaControl, ToggleControl } from '@wordpress/components';
import { useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import {
  clampDelaySeconds,
  clampScrollPercent,
  greetingMode,
  triggerMode,
  withGreetingMode,
  withOpenOnDesktop,
  withTriggerMode,
  type GreetingMode,
  type TriggerMode,
} from '../../shared/behavior.ts';
import type { BehaviorRule } from '../../shared/types.ts';

export function triggerLabel(mode: TriggerMode): string {
  return {
    onLoad: __('On load', 'stand-chat'),
    time: __('Time', 'stand-chat'),
    scroll: __('Scroll', 'stand-chat'),
    none: __('None', 'stand-chat'),
  }[mode];
}

export function greetingLabel(mode: GreetingMode): string {
  return {
    default: __('Default greeting', 'stand-chat'),
    none: __('No greeting', 'stand-chat'),
    custom: __('Custom greeting', 'stand-chat'),
  }[mode];
}

/** "On load · Default greeting · Half-sized", for rule summaries. */
export function ruleSummary(rule: BehaviorRule): string {
  const parts: string[] = [];
  const mode = triggerMode(rule);
  if (mode === 'time') parts.push(`${triggerLabel(mode)} ${Math.round(rule.trigger.delayMs / 1000)} s`);
  else if (mode === 'scroll') parts.push(`${triggerLabel(mode)} ${rule.trigger.scrollPercent}%`);
  else parts.push(triggerLabel(mode));
  parts.push(greetingLabel(greetingMode(rule)));
  if (rule.presentation.halfSize) parts.push(__('Half-sized', 'stand-chat'));
  if (rule.presentation.stepAside) parts.push(__('Step aside', 'stand-chat'));
  if (rule.action.type === 'openChatAfterGreeting') parts.push(__('Opens on desktop', 'stand-chat'));
  return parts.join(' · ');
}

export function RuleControls({
  rule,
  onChange,
  disabled = false,
}: {
  rule: BehaviorRule;
  onChange: (rule: BehaviorRule) => void;
  disabled?: boolean;
}) {
  const [custom, setCustom] = useState<Set<string>>(new Set());
  const mode = triggerMode(rule);
  const greeting = greetingMode(rule, custom);

  return (
    <div className="sc-rule-controls">
      <fieldset className="sc-segmented" disabled={disabled}>
        <legend>{__('Widget show trigger', 'stand-chat')}</legend>
        <div className="sc-segmented__options">
          {(['onLoad', 'time', 'scroll', 'none'] as TriggerMode[]).map((option) => (
            <label key={option} className={mode === option ? 'is-selected' : ''}>
              <input type="radio" name={`trigger-${rule.ruleId}`} checked={mode === option} onChange={() => onChange(withTriggerMode(rule, option))} />
              {triggerLabel(option)}
            </label>
          ))}
        </div>
        <p className="sc-help">
          {__('On load shows the widget when someone can answer. Time waits for the delay, Scroll for the scroll depth. None keeps it hidden until a Stand button or card opens chat.', 'stand-chat')}
        </p>
      </fieldset>

      {mode === 'time' && (
        <TextControl
          __nextHasNoMarginBottom
          __next40pxDefaultSize
          type="number"
          min={0}
          max={60}
          label={__('Delay seconds', 'stand-chat')}
          help={__('How many seconds Stand waits after page load before showing the chat widget.', 'stand-chat')}
          value={Math.round(rule.trigger.delayMs / 1000)}
          disabled={disabled}
          onChange={(value) => onChange({ ...rule, trigger: { ...rule.trigger, delayMs: clampDelaySeconds(value) * 1000 } })}
        />
      )}
      {mode === 'scroll' && (
        <TextControl
          __nextHasNoMarginBottom
          __next40pxDefaultSize
          type="number"
          min={1}
          max={100}
          label={__('Scroll percent', 'stand-chat')}
          help={__('How far down the page the visitor must scroll before Stand shows the chat widget.', 'stand-chat')}
          value={rule.trigger.scrollPercent}
          disabled={disabled}
          onChange={(value) => onChange({ ...rule, trigger: { ...rule.trigger, type: 'scrollDepth', scrollPercent: clampScrollPercent(value) } })}
        />
      )}

      <SelectControl
        __nextHasNoMarginBottom
        __next40pxDefaultSize
        label={__('Greeting', 'stand-chat')}
        help={__('Shows once per browser on this site, not on every page load.', 'stand-chat')}
        value={greeting}
        disabled={disabled}
        options={(['default', 'none', 'custom'] as GreetingMode[]).map((value) => ({ value, label: greetingLabel(value) }))}
        onChange={(value) => {
          const next = value as GreetingMode;
          setCustom((current) => {
            const copy = new Set(current);
            if (next === 'custom') copy.add(rule.ruleId);
            else copy.delete(rule.ruleId);
            return copy;
          });
          onChange(withGreetingMode(rule, next));
        }}
      />
      {greeting === 'custom' && (
        <TextareaControl
          __nextHasNoMarginBottom
          label={__('Custom greeting text', 'stand-chat')}
          value={rule.action.initialMessage}
          rows={2}
          maxLength={500}
          disabled={disabled}
          onChange={(value) => onChange({ ...rule, action: { ...rule.action, initialMessage: value } })}
        />
      )}

      <ToggleControl
        __nextHasNoMarginBottom
        label={__('Half-sized', 'stand-chat')}
        help={__('Starts the chat avatar smaller until the visitor interacts with it.', 'stand-chat')}
        checked={rule.presentation.halfSize}
        disabled={disabled}
        onChange={(checked) => onChange({ ...rule, presentation: { ...rule.presentation, halfSize: checked } })}
      />
      <ToggleControl
        __nextHasNoMarginBottom
        label={__('Step aside', 'stand-chat')}
        help={__('Tucks the chat avatar closer to the screen edge until the visitor interacts with it.', 'stand-chat')}
        checked={rule.presentation.stepAside}
        disabled={disabled}
        onChange={(checked) => onChange({ ...rule, presentation: { ...rule.presentation, stepAside: checked } })}
      />
      <ToggleControl
        __nextHasNoMarginBottom
        label={__('Open chat widget on desktop', 'stand-chat')}
        help={__('After the greeting, opens the full chat window once on desktop. Phones show only the greeting bubble. Needs a greeting.', 'stand-chat')}
        checked={rule.action.type === 'openChatAfterGreeting'}
        disabled={disabled || greeting === 'none'}
        onChange={(checked) => onChange(withOpenOnDesktop(rule, checked))}
      />
    </div>
  );
}