mobux 0.5.0

import { useEffect, useRef } from 'preact/hooks';
import { signal, computed } from '@preact/signals';
import { apiGet, apiPutJSON, apiPost } from '../../lib/api.js';
import {
  FALLBACK_MODELS,
  kindDefaults,
  normalizeHost,
  parseUrlIntoFields,
  fetchModels,
} from '../../lib/stt.js';

// ── State ────────────────────────────────────────────────────────────
// Per-kind cache of the last-known field values, seeded from GET on mount and
// kept in sync on save — mirrors `providerCache` in the original IIFE.
const cache = signal({}); // { local: {host,port,model,has_key}, ... }
const kind = signal('local');
const host = signal('http://127.0.0.1');
const port = signal('5200');
const model = signal(FALLBACK_MODELS.local[0]);
const customModel = signal('');
const apiKey = signal('');
const hasKey = signal(false);
const models = signal(FALLBACK_MODELS.local.slice());
const status = signal(null); // { msg, ok }
const action = signal(null); // local install/run status line
const sttStatus = signal(null); // { installed, local_process_running }

const CUSTOM = '__custom__';

// Which fields a kind exposes — this is the component-model replacement for the
// old visibility toggling. We render only what applies (no [hidden]).
const isLocal = computed(() => kind.value === 'local');
const isNetwork = computed(() => kind.value === 'network');
const isOpenai = computed(() => kind.value === 'openai');
const isCustomModel = computed(() => model.value === CUSTOM);

function flash(sig, msg, ok) {
  sig.value = { msg, ok };
}

// Effective model id sent to the backend (custom box wins when selected).
function effectiveModel() {
  return model.value === CUSTOM ? customModel.value.trim() : model.value;
}

async function loadModels(selected) {
  const list = await fetchModels(kind.value, host.value, port.value);
  // If the saved model isn't discovered, keep it selectable (don't silently
  // drop to custom) — same as populateModelSelect's insert.
  const withSaved =
    selected && !list.includes(selected) ? [selected, ...list] : list.slice();
  models.value = withSaved;
  if (selected) {
    model.value = list.includes(selected) || withSaved.includes(selected) ? selected : CUSTOM;
    if (model.value === CUSTOM) customModel.value = selected;
  }
}

async function save() {
  const k = kind.value;
  const body = {
    kind: k,
    host: host.value.trim(),
    port: port.value.trim(),
    model: effectiveModel(),
  };
  if (apiKey.value) body.api_key = apiKey.value;
  try {
    const r = await apiPutJSON('/api/settings/stt', body);
    if (r.ok) {
      const prev = cache.value[k] || {};
      cache.value = {
        ...cache.value,
        [k]: {
          ...prev,
          host: body.host,
          port: body.port,
          model: body.model,
          has_key: body.api_key ? true : prev.has_key,
        },
      };
    }
    flash(status, r.ok ? 'Saved ✓' : 'Save failed.', r.ok);
  } catch (_) {
    flash(status, 'Save failed.', false);
  }
}

function populateFromProvider(k) {
  const def = kindDefaults(k);
  const p = cache.value[k] || {};
  host.value = p.host || def.host;
  port.value = p.port || def.port;
  apiKey.value = '';
  hasKey.value = !!p.has_key;
  loadModels(p.model || def.model);
}

async function refreshSttStatus() {
  try {
    sttStatus.value = await apiGet('/api/stt/status');
  } catch (_) {}
}

// ── Component ────────────────────────────────────────────────────────
export function SttCard() {
  const saveTimer = useRef(null);
  const fetchTimer = useRef(null);

  // Load current config on mount (mirrors the original's initial fetch).
  useEffect(() => {
    apiGet('/api/settings/stt')
      .then((cfg) => {
        cache.value = cfg.providers || {};
        const active = cfg.activeKind || 'local';
        kind.value = active;
        populateFromProvider(active);
        if (active === 'local') refreshSttStatus();
      })
      .catch(() => {
        populateFromProvider(kind.value);
      });
  }, []);

  const schedSave = () => {
    clearTimeout(saveTimer.current);
    saveTimer.current = setTimeout(save, 700);
  };

  // Debounced re-fetch on host/port change, then save with the discovered model.
  const schedFetchModels = () => {
    clearTimeout(fetchTimer.current);
    fetchTimer.current = setTimeout(async () => {
      await loadModels(effectiveModel());
      save();
    }, 600);
  };

  const onKindChange = (e) => {
    kind.value = e.target.value;
    populateFromProvider(kind.value);
    if (kind.value === 'local') refreshSttStatus();
    schedSave();
  };

  const onModelChange = (e) => {
    model.value = e.target.value;
    save();
  };

  // Host paste/blur: split a full URL into fields, else ensure a scheme.
  const onHostBlur = () => {
    const raw = host.value.trim();
    if (!raw) return;
    const parsed = parseUrlIntoFields(raw);
    if (parsed) {
      // Re-split only when there was a port or a real path component.
      let normalised = /^https?:\/\//i.test(raw) ? raw : 'http://' + raw;
      try {
        const u = new URL(normalised);
        if (u.port || (u.pathname && u.pathname !== '/')) {
          host.value = parsed.host;
          port.value = parsed.port;
        } else {
          host.value = u.protocol + '//' + u.hostname;
        }
      } catch (_) {}
    }
    schedFetchModels();
  };

  const onInstall = async () => {
    flash(action, 'Installing… (this may take a minute)', true);
    let r;
    try {
      r = await apiPost('/api/stt/install');
    } catch (_) {
      flash(action, 'Install failed (network).', false);
      return;
    }
    if (!r.ok && r.status !== 202 && r.status !== 409) {
      flash(action, 'Install request failed: ' + r.status, false);
      return;
    }
    // Poll install status to completion.
    let errCount = 0;
    for (;;) {
      await new Promise((res) => setTimeout(res, 2000));
      let s;
      try {
        s = await apiGet('/api/stt/status');
        errCount = 0;
      } catch (_) {
        if (++errCount >= 5) {
          flash(action, 'Install status unavailable.', false);
          break;
        }
        continue;
      }
      const tail = Array.isArray(s.install_output) ? s.install_output.slice(-3).join(' | ') : '';
      if (s.install_phase === 'success') {
        flash(action, 'Installed.' + (tail ? ' ' + tail : ''), true);
        sttStatus.value = s;
        break;
      } else if (s.install_phase === 'failed') {
        flash(action, 'Install failed: ' + (s.install_error || 'unknown'), false);
        break;
      } else if (s.install_phase === 'running') {
        flash(action, 'Installing… ' + (tail || ''), true);
      }
    }
  };

  const onToggle = async () => {
    const running = !!sttStatus.value?.local_process_running;
    const ep = running ? '/api/stt/stop' : '/api/stt/start';
    try {
      const r = await apiPost(ep);
      flash(action, r.ok ? (running ? 'Server stopped.' : 'Server started.') : 'Action failed.', r.ok);
    } catch (_) {
      flash(action, 'Action failed.', false);
    }
    refreshSttStatus();
  };

  const onProbe = async () => {
    try {
      const s = await apiGet('/api/stt/status');
      flash(
        status,
        s.reachable ? `Provider reachable (kind: ${s.kind})` : `Provider NOT reachable (${s.url})`,
        s.reachable,
      );
    } catch (_) {
      flash(status, 'Status check failed.', false);
    }
  };

  const installed = !!sttStatus.value?.installed;
  const running = !!sttStatus.value?.local_process_running;

  return (
    <section class="settings-card" id="stt-provider">
      <h2>Speech to text</h2>

      <label class="settings-row">
        <span>Provider</span>
        <select id="sttKind" class="settings-select" value={kind.value} onChange={onKindChange}>
          <option value="local">Local server</option>
          <option value="network">Network (self-hosted)</option>
          <option value="openai">OpenAI</option>
        </select>
      </label>

      {/* Host + Port: only the self-hosted Network provider needs an endpoint. */}
      {isNetwork.value && (
        <>
          <label class="settings-row" id="sttHostRow">
            <span>Host</span>
            <input
              type="text"
              id="sttHost"
              class="settings-input"
              placeholder="http://127.0.0.1"
              value={host.value}
              onInput={(e) => (host.value = e.target.value)}
              onBlur={onHostBlur}
            />
          </label>
          <label class="settings-row" id="sttPortRow">
            <span>Port</span>
            <input
              type="number"
              id="sttPort"
              class="settings-input"
              placeholder="5200"
              min="1"
              max="65535"
              value={port.value}
              onInput={(e) => (port.value = e.target.value)}
              onChange={schedFetchModels}
            />
          </label>
        </>
      )}

      {/* Model picker: hidden for local (auto-selected). */}
      {!isLocal.value && (
        <div class="settings-row" id="sttModelRow">
          <span>Model</span>
          <div style="display:flex;gap:0.5rem;flex:1">
            <select
              id="sttModel"
              class="settings-input settings-select"
              style="flex:1"
              value={model.value}
              onChange={onModelChange}
            >
              {models.value.map((m) => (
                <option key={m} value={m}>
                  {m}
                </option>
              ))}
              <option value={CUSTOM}>custom…</option>
            </select>
            <button
              type="button"
              id="sttRefreshModels"
              title="Refresh model list"
              style="flex-shrink:0"
              onClick={() => loadModels(effectiveModel())}
            >
              ↺
            </button>
          </div>
        </div>
      )}

      {/* Custom model free-text: only when "custom…" is picked (never local). */}
      {!isLocal.value && isCustomModel.value && (
        <label class="settings-row" id="sttCustomModelRow">
          <span>Custom model</span>
          <input
            type="text"
            id="sttCustomModel"
            class="settings-input"
            placeholder="enter model id"
            value={customModel.value}
            onInput={(e) => (customModel.value = e.target.value)}
            onChange={save}
          />
        </label>
      )}

      {/* API key: OpenAI only. */}
      {isOpenai.value && (
        <label class="settings-row" id="sttApiKeyRow">
          <span>API key</span>
          <input
            type="password"
            id="sttApiKey"
            class="settings-input"
            placeholder={hasKey.value ? '•••• stored' : 'sk-…'}
            autocomplete="off"
            value={apiKey.value}
            onInput={(e) => (apiKey.value = e.target.value)}
            onChange={schedSave}
          />
        </label>
      )}

      {status.value && (
        <div id="sttStatus" class="settings-status" style={{ color: status.value.ok ? '#7ec87e' : '#c87e7e' }}>
          {status.value.msg}
        </div>
      )}

      <div class="settings-actions">
        <button type="button" id="sttProbeBtn" onClick={onProbe}>
          Check status
        </button>
        {/* Install + single run toggle: local only. */}
        {isLocal.value && (
          <>
            <button type="button" id="sttInstallBtn" onClick={onInstall}>
              {installed ? 'Reinstall' : 'Install local server'}
            </button>
            <button type="button" id="sttToggleBtn" onClick={onToggle} disabled={!installed}>
              {running ? 'Stop' : 'Start'}
            </button>
          </>
        )}
      </div>

      {action.value && (
        <div class="settings-status" id="sttActionStatus" style={{ color: action.value.ok ? '#7ec87e' : '#c87e7e' }}>
          {action.value.msg}
        </div>
      )}
    </section>
  );
}