import { Config, HostPort, UiElements } from './types';

// Import the React-compatible logLine function
import { logLine as reactLogLine } from './lib/react-ui-bridge';

/**
 * Build the UI elements for the WebIRC chat interface.
 *
 * @since 0.1.0
 */
export function buildUI(
	root: HTMLElement,
	hostPort: HostPort,
	cfg: Config
): UiElements {
	root.innerHTML = `
    <div class="irc-wrap">
      <div class="irc-header">
        <span class="irc-server"></span>
        <span class="irc-channel"></span>
        <span class="irc-nick"></span>
        <button class="irc-reconnect" type="button"></button>
      </div>
      <div class="irc-log" role="log" aria-live="polite" aria-relevant="additions"></div>
      <form class="irc-form" autocomplete="off">
        <div class="irc-input-container">
          <label class="screen-reader-text" for="irc-input">Message</label>
          <input id="irc-input" class="irc-input" type="text" placeholder="Type a message or /help…" />
          <button type="submit" class="irc-submit" aria-label="Send message">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="m22 2-7 20-4-9-9-4z"/>
              <path d="M22 2 11 13"/>
            </svg>
          </button>
        </div>
      </form>
    </div>
  `;

	const $log = root.querySelector('.irc-log') as HTMLDivElement;
	const $input = root.querySelector('.irc-input') as HTMLInputElement;
	const $reconnect = root.querySelector(
		'.irc-reconnect'
	) as HTMLButtonElement;
	const $nickDisplay = root.querySelector('.irc-nick') as HTMLSpanElement;
	const $submit = root.querySelector('.irc-submit') as HTMLButtonElement;

	(root.querySelector('.irc-server') as HTMLElement).textContent =
		`${hostPort.host}:${hostPort.port}`;
	(root.querySelector('.irc-channel') as HTMLElement).textContent =
		cfg.channel;
	$reconnect.textContent = (cfg.i18n && cfg.i18n.reconnect) || 'Reconnect';

	return {
		root,
		log: $log,
		input: $input,
		reconnect: $reconnect,
		nickDisplay: $nickDisplay,
		submit: $submit,
	};
}

/**
 * Log a line to the chat interface with timestamp and optional class.
 * This function is now React-compatible and will use React state when available.
 *
 * @since 0.1.0
 */
export function logLine($log: HTMLElement, text: string, cls = ''): void {
	// Use the React-compatible version
	reactLogLine($log, text, cls);
}