'use client';

import { useEffect } from 'react';

export interface LogFeedbackProps {
  projectId: string;
  baseUrl?: string;
  theme?: 'light' | 'dark' | 'system';
  position?: 'left' | 'right';
  nonce?: string;
}

/** Copy into your project. Works with React and Next.js App Router.
 * No npm package or server secret is required. Strict Mode cleanup is supported. */
export function LogFeedback({ projectId, baseUrl = 'https://app.logishell.com', theme = 'dark', position = 'right', nonce }: LogFeedbackProps) {
  useEffect(() => {
    if (!/^[\da-f]{8}-[\da-f]{4}-[\da-f]{4}-[\da-f]{4}-[\da-f]{12}$/i.test(projectId)) return;
    const script = document.createElement('script');
    script.src = `${new URL(baseUrl).origin}/log-feedback.js`;
    script.async = true; script.dataset.project = projectId;
    script.dataset.theme = theme; script.dataset.position = position;
    if (nonce) { script.nonce = nonce; script.dataset.styleNonce = nonce; }
    document.body.append(script);
    return () => {
      script.dataset.logActive = 'false';
      const host = window as Window & { LOGFeedback?: { source: HTMLScriptElement; destroy(): void } };
      if (host.LOGFeedback?.source === script) host.LOGFeedback.destroy();
      script.remove();
    };
  }, [projectId, baseUrl, theme, position, nonce]);
  return null;
}