// Copyright: © 2026 TWWIM UG. All rights reserved. (www.twwim.com)
/**
 * WelcomeSection — section toggle + delay/hold + per-locale welcome phrase
 * editors. Operates on the nested `form.attention.welcome` 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 WelcomeSectionProps {
  form: FormState;
  setForm: Dispatch<SetStateAction<FormState>>;
  t: TFunction;
}

export function WelcomeSection({ form, setForm, t }: WelcomeSectionProps) {
  const welcome = form.attention.welcome;
  const sectionOn = welcome.enabled;

  const updateWelcome = (changes: Partial<typeof welcome>): void => {
    setForm({
      ...form,
      attention: {
        ...form.attention,
        welcome: { ...welcome, ...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.welcomeSection')}
        </h2>
        <p className="text-xs text-gray-500 mt-0.5">
          {t('tenants.pluginSettings.welcomeSectionHint')}
        </p>
      </div>

      <div className="flex items-center justify-between">
        <div>
          <p className="text-sm font-medium text-gray-900">
            {t('tenants.pluginSettings.welcomeEnabled')}
          </p>
          <p className="text-xs text-gray-500 mt-0.5">
            {t('tenants.pluginSettings.welcomeEnabledHint')}
          </p>
        </div>
        <label className="inline-flex items-center cursor-pointer">
          <input
            type="checkbox"
            checked={welcome.enabled}
            onChange={(e) => updateWelcome({ 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'}>
        <NumberInput
          label={t('tenants.pluginSettings.welcomeDelay')}
          help={t('tenants.pluginSettings.welcomeDelayHelp')}
          min={0}
          max={60}
          value={welcome.delaySeconds}
          onChange={(v) => updateWelcome({ delaySeconds: v })}
        />

        <NumberInput
          label={t('tenants.pluginSettings.holdSeconds')}
          help={t('tenants.pluginSettings.holdSecondsHelp')}
          min={1}
          max={60}
          value={welcome.holdSeconds}
          onChange={(v) => updateWelcome({ holdSeconds: v })}
        />

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