// Migration guide from script tag to React component
// This file shows how to migrate from the legacy script tag implementation

/*
================================================================================
BEFORE: Legacy Script Tag Implementation (Next.js compatibility issues)
================================================================================

// In your HTML head or Next.js layout
<script 
  src="https://www.inov-ai.tech/widgets/widget.iife.js"
  data-site-key="your-site-key"
  data-primary-color="#f97316"
  data-text-color="#111827"
  data-background-color="rgb(247, 248, 250)"
  data-position="bottom-right"
  data-button-text="Feedback"
  data-theme="auto"
  data-trigger="manual"
  data-paths="/dashboard,/app"
  data-feedback-types="Bug Report,Feature Request"
></script>

// Issues with this approach in Next.js 15:
// 1. CSP (Content Security Policy) blocks external scripts
// 2. SSR hydration mismatches
// 3. Script loading timing issues
// 4. No TypeScript support
// 5. Limited customization options
// 6. Difficult to handle events programmatically

================================================================================
AFTER: React Component (Fully compatible with Next.js 15)
================================================================================
*/

'use client';

import React from 'react';
import { InovaiWidget, type FeedbackSubmission } from '@inov-ai/feedback-widget';

export default function MigratedFeedbackWidget() {
  return (
    <InovaiWidget
      // Required
      siteKey="your-site-key"
      
      // Visual (equivalent to data-* attributes)
      primaryColor="#f97316"
      textColor="#111827"
      backgroundColor="rgb(247, 248, 250)"
      position="bottom-right"
      buttonText="Feedback"
      theme="auto"
      
      // Behavior
      trigger="manual"
      paths={['/dashboard', '/app']} // Now an array instead of comma-separated string
      feedbackTypes={['Bug Report', 'Feature Request']} // Array instead of string
      
      // Additional features not available with script tag
      animation="slide"
      buttonRadius="8px"
      fontFamily="system-ui, sans-serif"
      minimized={false}
      surveyFrequency="every-visit"
      triggerDelay={0}
      
      // Event handlers (impossible with script tag)
      onOpen={() => {
        console.log('Feedback opened');
        // Track with your analytics
      }}
      
      onSubmit={(feedback: FeedbackSubmission) => {
        console.log('Feedback submitted:', feedback);
        // Custom handling, multiple endpoints, etc.
      }}
      
      onError={(error: Error) => {
        console.error('Feedback error:', error);
        // Custom error handling
      }}
      
      // Advanced styling (impossible with script tag)
      customCSS={`
        [data-feedback-widget] {
          --feedback-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1);
        }
      `}
    />
  );
}

/*
================================================================================
Benefits of migrating to React component:
================================================================================

1. ✅ Next.js 15 Compatibility
   - No CSP issues
   - Proper SSR handling
   - No hydration mismatches

2. ✅ TypeScript Support
   - Full type safety
   - IntelliSense in IDE
   - Compile-time error checking

3. ✅ Enhanced Customization
   - Programmatic event handling
   - Custom CSS injection
   - Dynamic configuration

4. ✅ Better Developer Experience
   - React DevTools integration
   - Hot reloading support
   - Easier debugging

5. ✅ Performance
   - Tree shaking
   - Code splitting support
   - Smaller bundle size

6. ✅ Maintenance
   - Version controlled dependencies
   - Easier updates
   - Better testing capabilities

================================================================================
Migration Steps:
================================================================================

1. Install the package:
   npm install @inov-ai/feedback-widget

2. Remove the script tag from your HTML/layout

3. Add the React component (see example above)

4. Convert data-* attributes to props:
   data-site-key        → siteKey
   data-primary-color   → primaryColor
   data-text-color      → textColor
   data-background-color → backgroundColor
   data-position        → position
   data-button-text     → buttonText
   data-theme           → theme
   data-trigger         → trigger
   data-paths           → paths (string → array)
   data-feedback-types  → feedbackTypes (string → array)

5. Add event handlers for enhanced functionality

6. Test in your Next.js 15 environment

================================================================================
Next.js 15 Specific Configuration:
================================================================================
*/

// app/layout.tsx (App Router)
/*
import MigratedFeedbackWidget from './components/MigratedFeedbackWidget';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        {children}
        <MigratedFeedbackWidget />
      </body>
    </html>
  );
}
*/

// pages/_app.tsx (Pages Router)
/*
import type { AppProps } from 'next/app';
import MigratedFeedbackWidget from '../components/MigratedFeedbackWidget';

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} />
      <MigratedFeedbackWidget />
    </>
  );
}
*/