// Copyright: © 2026 TWWIM UG. All rights reserved. (www.twwim.com)
/**
 * InstallationSnippetButton — CTA that opens a modal containing the
 * generated <script> tag with copy-to-clipboard. Channel-gated: only
 * surfaces for Channel.WEBSITE, since WP and Shopify hosts inject the
 * snippet themselves via their plugin / app extension.
 *
 * @layer Presentation
 */

import { useState } from 'react';
import { Code } from 'lucide-react';
import { Modal } from '@/components/shared';
import { useChannel } from '@/presentation/hooks';
import { Channel } from '@archer/domain';
import { GeneratedSnippetCard } from './GeneratedSnippetCard';
import type { FormState, TFunction } from '../lib/constants';

interface InstallationSnippetButtonProps {
  tenantId: string;
  form: FormState;
  t: TFunction;
}

export function InstallationSnippetButton({ tenantId, form, t }: InstallationSnippetButtonProps) {
  const channel = useChannel();
  const [open, setOpen] = useState(false);

  if (channel !== Channel.WEBSITE) {
    return null;
  }

  return (
    <>
      <div className="flex justify-start">
        <button
          type="button"
          onClick={() => setOpen(true)}
          data-testid="show-installation-snippet"
          className="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-primary bg-primary/10 hover:bg-primary/20 rounded-lg transition-colors"
        >
          <Code size={16} />
          {t('tenants.pluginSettings.snippetCard.showButton')}
        </button>
      </div>

      {open && (
        <Modal
          title={t('tenants.pluginSettings.snippetCard.modalTitle')}
          subtitle={t('tenants.pluginSettings.snippetCard.modalSubtitle')}
          onClose={() => setOpen(false)}
          maxWidth="max-w-3xl"
        >
          <GeneratedSnippetCard tenantId={tenantId} form={form} t={t} />
        </Modal>
      )}
    </>
  );
}