<!-- Add once, before </body>. Gated: hidden until you identify a user. -->
<script
  src="https://your-replai-domain.com/widget.js"
  data-api-key="YOUR_API_KEY"
  data-require-identify="true"
  defer
></script>

import { useEffect } from 'react';
import { useSelector } from 'react-redux';

const API_KEY = import.meta.env.VITE_REPLAI_API_KEY;
const BASE_URL = import.meta.env.VITE_REPLAI_BASE_URL;
const SCRIPT_ID = 'replai-widget-loader';

function ensureScript() {
  if (!BASE_URL || !API_KEY || document.getElementById(SCRIPT_ID)) return;
  const s = document.createElement('script');
  s.id = SCRIPT_ID;
  s.src = `${BASE_URL.replace(/\/$/, '')}/widget.js`;
  s.setAttribute('data-api-key', API_KEY);
  s.setAttribute('data-require-identify', 'true');
  s.defer = true;
  document.body.appendChild(s);
}

function whenReady(cb, tries = 50) {
  if (window.Replai?.identify) return cb();
  if (tries <= 0) return;
  setTimeout(() => whenReady(cb, tries - 1), 100);
}

export default function ReplaiWidget() {
  const user = useSelector((s) => s.auth.user);
  const isAuthenticated = useSelector((s) => s.auth.isAuthenticated);

  useEffect(() => {
    if (!BASE_URL || !API_KEY) return;
    ensureScript();
    if (isAuthenticated && user) {
      whenReady(() =>
        window.Replai.identify({
          id: user._id || user.id || user.email,
          name: user.fullName || user.name || 'Customer',
          email: user.email,
        })
      );
    } else {
      whenReady(() => window.Replai.hide());
    }
  }, [isAuthenticated, user]);

  return null;
}

'use client';

import { useEffect } from 'react';

const API_KEY = process.env.NEXT_PUBLIC_REPLAI_API_KEY;
const BASE_URL = process.env.NEXT_PUBLIC_REPLAI_BASE_URL;
const SCRIPT_ID = 'replai-widget-loader';

declare global {
  interface Window {
    Replai?: {
      identify: (info: { id: string; name?: string; email?: string }) => void;
      show: () => void;
      hide: () => void;
    };
  }
}

type ReplaiWidgetProps = {
  user: { _id: string; email: string } | null;
};

export default function ReplaiWidget({ user }: ReplaiWidgetProps) {
  useEffect(() => {
    if (!BASE_URL || !API_KEY) return;

    if (!document.getElementById(SCRIPT_ID)) {
      const s = document.createElement('script');
      s.id = SCRIPT_ID;
      s.src = `${BASE_URL.replace(/\/$/, '')}/widget.js`;
      s.setAttribute('data-api-key', API_KEY);
      s.setAttribute('data-require-identify', 'true');
      s.defer = true;
      document.body.appendChild(s);
    }

    let tries = 50;
    const tick = () => {
      if (window.Replai?.identify) {
        if (user) {
          window.Replai.identify({
            id: user._id,
            name: user.email.split('@')[0],
            email: user.email,
          });
        } else {
          window.Replai.hide();
        }
        return;
      }
      if (tries-- > 0) setTimeout(tick, 100);
    };
    tick();
  }, [user]);

  return null;
}

curl -X POST https://your-replai-domain.com/api/public/v1/tickets \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
  "external_customer_id": "cus_9f8e7d6c",
  "customer_email": "jane.doe@example.com",
  "customer_name": "Jane Doe",
  "subject": "Unable to access dashboard",
  "description": "I keep getting a 403 error when trying to view my analytics.",
  "priority": "high",
  "source_metadata": {
    "plan": "enterprise",
    "page": "analytics"
  }
}'