import { html, ref, repeat, ViewTemplate, when } from '@genesislcap/web-core';
import type { AgentConfig } from '../../config/config';
import type { AgentPicker } from './agent-picker';
import { AGENT_PICKER_AUTO_VALUE } from './agent-picker.constants';

const AUTO_LABEL = 'Auto';
const AUTO_HINT = 'Let the orchestrator pick the right agent for each message.';

/** @internal */
export const AgentPickerTemplate = (designSystemPrefix: string): ViewTemplate<AgentPicker> => {
  const segmentedControlTag = `${designSystemPrefix}-segmented-control`;
  const segmentedItemTag = `${designSystemPrefix}-segmented-item`;

  return html<AgentPicker>`
    <div class="picker" data-effective="${(x) => x.effectiveMode}" part="picker">
      ${when(
        (x) => x.mode === 'segmented-control',
        html<AgentPicker>`
          <div class="segmented-row" ${ref('segmentedRowEl')}>
            <${segmentedControlTag}
              class="segmented-control"
              appearance="primary"
              aria-label="Active agent"
              :value="${(x) => x.currentValue}"
              @change="${(x, c) => {
                const value = (c.event.currentTarget as HTMLElement & { value?: string }).value;
                // The segmented-control re-emits 'change' on its initial value
                // sync; ignore it so we don't close the panel on open.
                if (typeof value !== 'string' || value === x.currentValue) return;
                x.selectByValue(value);
              }}"
            >
              <${segmentedItemTag}
                value="${AGENT_PICKER_AUTO_VALUE}"
                title="${AUTO_HINT}"
              >${AUTO_LABEL}</${segmentedItemTag}>
              ${repeat(
                (x) => x.selectableAgents,
                html<AgentConfig, AgentPicker>`
                  <${segmentedItemTag}
                    value="${(a) => a.name}"
                    title="${(a) => a.manualSelection?.hint ?? ''}"
                  >${(a) => a.name}</${segmentedItemTag}>
                `,
              )}
            </${segmentedControlTag}>
          </div>
        `,
      )}
      ${when(
        (x) => x.effectiveMode === 'select',
        html<AgentPicker>`
          <div class="select-fallback">
            <span class="select-label">Agent:</span>
            <select
              class="select-control"
              aria-label="Active agent"
              @change="${(x, c) => {
                const value = (c.event.target as HTMLSelectElement).value;
                x.selectByValue(value);
              }}"
            >
              <option
                value="${AGENT_PICKER_AUTO_VALUE}"
                title="${AUTO_HINT}"
                ?selected="${(x) => x.pinnedAgentName === null}"
              >
                ${AUTO_LABEL}
              </option>
              ${repeat(
                (x) => x.selectableAgents,
                html<AgentConfig, AgentPicker>`
                  <option
                    value="${(a) => a.name}"
                    title="${(a) => a.manualSelection?.hint ?? ''}"
                    ?selected="${(a, c) => c.parent.pinnedAgentName === a.name}"
                  >
                    ${(a) =>
                      a.manualSelection?.hint ? `${a.name} — ${a.manualSelection.hint}` : a.name}
                  </option>
                `,
              )}
            </select>
          </div>
        `,
      )}
    </div>
  `;
};
