// Copyright: © 2026 TWWIM UG. All rights reserved. (www.twwim.com)
/**
 * IdleSection — section toggle + idle interval timings + per-locale idle
 * phrase editors. Operates on the nested `form.attention.idle` branch.
 *
 * @layer Presentation
 */

import type { Dispatch, SetStateAction } from 'react';
import { LOCALES, type FormState, type TFunction } from '../lib/constants';
import { NumberInput } from './NumberInput';
import { PhraseListEditor } from './PhraseListEditor';

interface IdleSectionProps {
  form: FormState;
  setForm: Dispatch<SetStateAction<FormState>>;
  t: TFunction;
}

export function IdleSection({ form, setForm, t }: IdleSectionProps) {
  const idle = form.attention.idle;
  const sectionOn = idle.enabled;

  const updateIdle = (changes: Partial<typeof idle>): void => {
    setForm({
      ...form,
      attention: {
        ...form.attention,
        idle: { ...idle, ...changes },
      },
    });
  };

  return (
    <section className="bg-white border border-gray-200 rounded-lg shadow-sm p-6 space-y-5">
      <div className="border-b border-gray-100 pb-3">
        <h2 className="text-base font-semibold text-gray-900">
          {t('tenants.pluginSettings.idleSection')}
        </h2>
        <p className="text-xs text-gray-500 mt-0.5">
          {t('tenants.pluginSettings.idleSectionHint')}
        </p>
      </div>

      <div className="flex items-center justify-between">
        <div>
          <p className="text-sm font-medium text-gray-900">
            {t('tenants.pluginSettings.idleEnabled')}
          </p>
          <p className="text-xs text-gray-500 mt-0.5">
            {t('tenants.pluginSettings.idleEnabledHint')}
          </p>
        </div>
        <label className="inline-flex items-center cursor-pointer">
          <input
            type="checkbox"
            checked={idle.enabled}
            onChange={(e) => updateIdle({ enabled: e.target.checked })}
            className="sr-only peer"
          />
          <span className="relative w-11 h-6 bg-gray-200 rounded-full peer peer-checked:bg-cyan-600 transition-colors after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-transform peer-checked:after:translate-x-5" />
        </label>
      </div>

      <div className={sectionOn ? 'space-y-5' : 'space-y-5 opacity-50 pointer-events-none'}>
        <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
          <NumberInput
            label={t('tenants.pluginSettings.minInterval')}
            help={t('tenants.pluginSettings.minIntervalHelp')}
            min={5}
            max={3600}
            value={idle.minIntervalSeconds}
            onChange={(v) => updateIdle({ minIntervalSeconds: v })}
          />
          <NumberInput
            label={t('tenants.pluginSettings.maxInterval')}
            help={t('tenants.pluginSettings.maxIntervalHelp')}
            min={5}
            max={3600}
            value={idle.maxIntervalSeconds}
            onChange={(v) => updateIdle({ maxIntervalSeconds: v })}
          />
          <NumberInput
            label={t('tenants.pluginSettings.displaySeconds')}
            help={t('tenants.pluginSettings.displaySecondsHelp')}
            min={1}
            max={60}
            value={idle.displaySeconds}
            onChange={(v) => updateIdle({ displaySeconds: v })}
          />
        </div>

        <div className="space-y-5">
          {LOCALES.map(({ code, labelKey }) => (
            <PhraseListEditor
              key={code}
              localeLabel={t(labelKey)}
              phrases={idle.messages[code] ?? []}
              onChange={(next) =>
                updateIdle({
                  messages: { ...idle.messages, [code]: next },
                })
              }
              addPlaceholder={t('tenants.pluginSettings.phraseAddIdlePlaceholder')}
              addLabel={t('tenants.pluginSettings.phraseAdd')}
              removeLabel={t('tenants.pluginSettings.phraseRemove')}
              emptyHint={t('tenants.pluginSettings.phraseEmptyHint')}
            />
          ))}
        </div>
      </div>
    </section>
  );
}