'use client';

import useGlobalStore from '@/config/use-global';
import { Crisp } from 'crisp-sdk-web';
import { useEffect } from 'react';

// Configuration object for Crisp
const CRISP_CONFIG = {
  websiteId: '47fcc1ac-9674-4ab1-9e3c-6b5666f59a38',
  autoload: false,
};

/**
 * Initializes and configures the Crisp chat widget.
 * Sets user email if available and loads the widget.
 */
const CrispChat = () => {
  const { user } = useGlobalStore();

  useEffect(() => {
    // Configure Crisp with the provided website ID
    try {
      Crisp.configure(CRISP_CONFIG.websiteId, {
        autoload: CRISP_CONFIG.autoload,
      });
    } catch (error) {
      console.error('Failed to configure Crisp:', error);
    }

    // Set user email and load Crisp if auth_identifier exists
    if (user?.auth_methods?.[0]?.auth_identifier) {
      try {
        Crisp.setTokenId(`${user.auth_methods[0].auth_identifier}_${user.id}`);
        Crisp.user.setEmail(user.auth_methods[0].auth_identifier);
        Crisp.load();
      } catch (error) {
        console.error('Failed to set user email or load Crisp:', error);
      }
    }

    // Cleanup function to reset Crisp on component unmount
    return () => {
      try {
        Crisp.session.reset();
      } catch (error) {
        console.error('Failed to reset Crisp session:', error);
      }
    };
  }, [user]); // Re-run effect if user changes

  return null; // Component does not render anything
};

export default CrispChat;