// Copyright: © 2026 TWWIM UG. All rights reserved. (www.twwim.com)
/**
 * VisibilitySection — master + per-device mount gates for the plugin widget.
 *
 * Three independent toggles:
 *   - master enabled (suppresses the widget entirely)
 *   - enabledOnMobile (mobile-class viewport gate)
 *   - enabledOnWeb (desktop-class viewport gate)
 *
 * @layer Presentation
 */

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

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

export function VisibilitySection({ form, setForm, t }: VisibilitySectionProps) {
  const visibility = form.visibility;

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

      <ToggleRow
        title={t('tenants.pluginSettings.enabled')}
        hint={t('tenants.pluginSettings.enabledHint')}
        checked={visibility.enabled}
        onChange={(v) => updateVisibility({ enabled: v })}
      />

      <div
        className={
          visibility.enabled
            ? 'space-y-5'
            : 'space-y-5 opacity-50 pointer-events-none'
        }
      >
        <ToggleRow
          title={t('tenants.pluginSettings.enabledOnWeb')}
          hint={t('tenants.pluginSettings.enabledOnWebHint')}
          checked={visibility.enabledOnWeb}
          onChange={(v) => updateVisibility({ enabledOnWeb: v })}
        />
        <ToggleRow
          title={t('tenants.pluginSettings.enabledOnMobile')}
          hint={t('tenants.pluginSettings.enabledOnMobileHint')}
          checked={visibility.enabledOnMobile}
          onChange={(v) => updateVisibility({ enabledOnMobile: v })}
        />
      </div>
    </section>
  );
}

interface ToggleRowProps {
  title: string;
  hint: string;
  checked: boolean;
  onChange: (next: boolean) => void;
}

function ToggleRow({ title, hint, checked, onChange }: ToggleRowProps) {
  return (
    <div className="flex items-center justify-between">
      <div>
        <p className="text-sm font-medium text-gray-900">{title}</p>
        <p className="text-xs text-gray-500 mt-0.5">{hint}</p>
      </div>
      <label className="inline-flex items-center cursor-pointer">
        <input
          type="checkbox"
          checked={checked}
          onChange={(e) => onChange(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>
  );
}