import type { ConfigResponse } from '../../../../../packages/api-contracts/src/index.js';
import { conversationModes, type ConversationMode, type SubredditConfig } from './subreddit-model.js';

interface SubredditBulkBarProps {
  selected: readonly SubredditConfig[];
  /** True when a bulk write is in flight. */
  isBusy: boolean;
  /** Set when removing the selection is not allowed, explaining why. */
  removeBlockedReason?: string;
  tones: ConfigResponse['tones'];
  onClear(): void;
  onRemove(): void;
  onSetEnabled(enabled: boolean): void;
  onSetPolicy(mode: ConversationMode): void;
  onSetTone(tone: ConfigResponse['tones'][number]): void;
}

/**
 * Acts on many subreddits at once. With dozens configured, opening each row to
 * change one shared field is the slowest possible path.
 */
export function SubredditBulkBar({
  isBusy,
  onClear,
  onRemove,
  onSetEnabled,
  onSetPolicy,
  onSetTone,
  removeBlockedReason,
  selected,
  tones,
}: SubredditBulkBarProps) {
  const pausedCount = selected.filter((subreddit) => !subreddit.enabled).length;
  const pollingCount = selected.length - pausedCount;

  return (
    <div aria-label="Bulk actions" className="bulk-bar" role="region">
      <div className="bulk-bar-count" aria-live="polite">
        <strong>{selected.length} selected</strong>
        <small>{pollingCount} polling, {pausedCount} paused</small>
      </div>

      <div className="bulk-bar-actions">
        <button
          className="button secondary"
          disabled={isBusy || pausedCount === 0}
          onClick={() => onSetEnabled(true)}
          type="button"
        >
          Start polling
        </button>
        <button
          className="button secondary"
          disabled={isBusy || pollingCount === 0}
          onClick={() => onSetEnabled(false)}
          type="button"
        >
          Pause polling
        </button>

        {/* Value resets to the placeholder each render: these are actions, not
            a field showing the current shared value (there may not be one). */}
        <label className="bulk-select">
          <span className="sr-only">Set tone for the selected subreddits</span>
          <select
            aria-label="Set tone for the selected subreddits"
            disabled={isBusy}
            onChange={(event) => {
              if (event.target.value === '') return;
              onSetTone(event.target.value as ConfigResponse['tones'][number]);
              event.target.value = '';
            }}
            value=""
          >
            <option value="">Set tone…</option>
            {tones.map((tone) => <option key={tone} value={tone}>{tone}</option>)}
          </select>
        </label>

        <label className="bulk-select">
          <span className="sr-only">Set conversation policy for the selected subreddits</span>
          <select
            aria-label="Set conversation policy for the selected subreddits"
            disabled={isBusy}
            onChange={(event) => {
              if (event.target.value === '') return;
              onSetPolicy(event.target.value as ConversationMode);
              event.target.value = '';
            }}
            value=""
          >
            <option value="">Set policy…</option>
            {conversationModes.map((mode) => (
              <option key={mode.value} value={mode.value}>{mode.label}</option>
            ))}
          </select>
        </label>

        <button
          className="button danger"
          disabled={isBusy || Boolean(removeBlockedReason)}
          onClick={onRemove}
          title={removeBlockedReason}
          type="button"
        >
          Remove
        </button>
        <button className="button secondary" disabled={isBusy} onClick={onClear} type="button">
          Clear
        </button>
      </div>
    </div>
  );
}