import { useTranslation } from 'react-i18next';
import { HelpText } from './HelpText';
import { FieldLabel, FieldInput } from './formUtils';
import { StringArrayEditor } from './StringArrayEditor';
import type { SectionFormProps } from './types';

/**
 * Metrics — worker (LLM) and gateway metrics endpoints.
 *
 * config v2 places worker metrics under `llm.metrics` and gateway metrics
 * under `gateway.metrics`. The fields are nearly identical: enable flag,
 * Prometheus prefix, bearer token, and allowed-hosts ACL.
 *
 * Step 3 introduces this as a navigation home — the underlying paths are
 * the v2 shape so values will appear correctly after #360/#362. If the
 * caller still has v1 data, both objects fall back to empty.
 */
function MetricsBlock({
  title,
  path,
  prefixDefault,
  config,
  onChange,
}: {
  title: string;
  path: 'llm.metrics' | 'gateway.metrics';
  prefixDefault: string;
  config: any;
  onChange: (path: string, value: any) => void;
}) {
  const { t } = useTranslation('settings');
  const root = path.split('.').reduce((acc: any, key) => (acc ?? {})[key], config) ?? {};
  return (
    <section className="space-y-4 border border-hairline rounded-md p-4">
      <h3 className="text-sm font-semibold text-slate-800">{title}</h3>

      <div>
        <label className="inline-flex items-center gap-2 text-[13px] text-slate-700">
          <input
            type="checkbox"
            checked={root.enabled === true}
            onChange={e => onChange(`${path}.enabled`, e.target.checked)}
          />
          <span>{t('metrics.enable')}</span>
        </label>
      </div>

      <div>
        <FieldLabel>Prefix</FieldLabel>
        <FieldInput
          value={root.prefix ?? ''}
          onChange={v => onChange(`${path}.prefix`, v || undefined)}
          placeholder={prefixDefault}
        />
        <HelpText>{t('metrics.prefixHelp', { prefix: prefixDefault })}</HelpText>
      </div>

      <div>
        <FieldLabel>Bearer Token</FieldLabel>
        <FieldInput
          type="password"
          value={root.bearerToken ?? ''}
          onChange={v => onChange(`${path}.bearerToken`, v || undefined)}
          placeholder="env:METRICS_BEARER_TOKEN"
        />
        <HelpText>
          {t('metrics.bearerHelp')}
        </HelpText>
      </div>

      <div>
        <FieldLabel>Allowed Hosts</FieldLabel>
        <StringArrayEditor
          value={root.allowedHosts ?? []}
          onChange={v => onChange(`${path}.allowedHosts`, v)}
          placeholder="127.0.0.1 / ::1 / localhost"
        />
        <HelpText>{t('metrics.allowedHostsHelp')}</HelpText>
      </div>
    </section>
  );
}

export function MetricsForm({ config, onChange }: SectionFormProps) {
  const { t } = useTranslation('settings');
  return (
    <div className="space-y-5">
      <h2 className="text-base font-semibold text-slate-800">Metrics</h2>
      <HelpText>
        {t('metrics.intro')}
      </HelpText>

      <MetricsBlock
        title="Worker Metrics (llm.metrics)"
        path="llm.metrics"
        prefixDefault="aao_worker"
        config={config}
        onChange={onChange}
      />

      <MetricsBlock
        title="Gateway Metrics (gateway.metrics)"
        path="gateway.metrics"
        prefixDefault="aao_gateway"
        config={config}
        onChange={onChange}
      />
    </div>
  );
}
