import { VoxketClient } from '@voxket-ai/voxket-live';

const client = new VoxketClient(config);

// Register a custom form component
await client.registerFrontendRPC(
  'customer_survey', // Method name the agent calls
  SurveyComponent,   // Your React component
  'modal'           // Presentation mode: embedded, modal, fullscreen
);

// Your custom component
function SurveyComponent({ handler, data }) {
  const [rating, setRating] = useState(0);

  const handleSubmit = () => {
    handler.didSuccess({ 
      survey_response: rating,
      feedback: "Great service!" 
    });
  };

  return (
    <div>
      <h3>Rate your experience</h3>
      <StarRating value={rating} onChange={setRating} />
      <button onClick={handleSubmit}>Submit</button>
      <button onClick={handler.dismissView}>Skip</button>
    </div>
  );
}

import { VoxketClient } from '@voxket-ai/voxket-live';

const client = new VoxketClient(config);

// Register an event emitter for custom events
client.registerEventEmitter('custom_event_topic', (data) => {
  console.log('Custom event received:', data);
  // Handle your custom business logic
  handleCustomEvent(data);
});

// Register multiple event emitters
client.registerEventEmitter('user_action', (actionData) => {
  console.log('User action:', actionData);
  analytics.track('user_action', actionData);
});

client.registerEventEmitter('system_notification', (notification) => {
  showNotification(notification);
});

// Register event listeners with automatic unsubscribe
const unsubscribe = client.registerEventListener('chat.message.received', (message) => {
  console.log('New message:', message);
  updateUI(message);
});

// Manual cleanup when needed
unsubscribe();

// Register multiple listeners
client.registerEventListener('connection.connected', () => {
  console.log('Connected to Voxket!');
  updateConnectionStatus('connected');
});

client.registerEventListener('agent.thinking', () => {
  showTypingIndicator();
});

// Listen for agent-triggered notifications
client.registerEventEmitter('agent_notification', (data) => {
  // Show toast notification
  showToast({
    title: data.title,
    message: data.message,
    type: data.type
  });
});

// Listen for system updates
client.registerEventEmitter('system_update', (updateInfo) => {
  if (updateInfo.type === 'maintenance') {
    showMaintenanceWarning(updateInfo.schedule);
  }
});

// Track custom business events
client.registerEventEmitter('business_event', (eventData) => {
  // Send to your analytics platform
  analytics.track(eventData.event_name, {
    ...eventData.properties,
    timestamp: new Date().toISOString(),
    session_id: client.getCurrentSession()?.id
  });
});

// Example: Track user interactions
client.registerEventEmitter('user_interaction', (interaction) => {
  mixpanel.track('Voxket User Interaction', {
    interaction_type: interaction.type,
    interaction_data: interaction.data,
    user_id: getCurrentUserId()
  });
});

// Trigger business workflows
client.registerEventEmitter('workflow_trigger', (workflowData) => {
  switch (workflowData.workflow_type) {
    case 'lead_qualification':
      triggerLeadQualificationWorkflow(workflowData.lead_data);
      break;
    case 'support_escalation':
      escalateToHumanAgent(workflowData.ticket_data);
      break;
    case 'appointment_booking':
      processAppointmentRequest(workflowData.appointment_data);
      break;
  }
});

interface VoxketClientConfig {
  // Required
  appId: string;        // Your Voxket App ID
  appSecret: string;    // Your Voxket App Secret  
  baseUrl: string;      // Voxket API base URL
  
  // Optional
  agentId?: string;     // Default agent ID
  participantName?: string; // Default participant name
  modalities?: SessionModality[]; // Default modalities
  debug?: boolean;      // Enable debug logging
  
  // Event Callbacks
  onConnected?: () => void;
  onDisconnected?: (reason?: string) => void; 
  onError?: (error: Error) => void;
  onMessageReceived?: (message: ChatMessage) => void;
  onTranscriptionReceived?: (transcription: TranscriptionSegment) => void;
  onSessionStateChanged?: (state: SessionState) => void;
}

// Connect to Voxket services
await client.connect(agentId?, participantName?, modalities?);

// Disconnect and cleanup
await client.disconnect();

// Check connection status
const isConnected = client.connected;
const state = client.getConnectionState();

// Start a new session
const session = await client.startSession(agentId, {
  participantName: "User",
  modalities: ['voice', 'chat'],
  metadata: { customData: "value" }
});

// Get current session
const current = client.getCurrentSession();

// End current session
await client.endSession();

// Render UI widget
client.renderUI({
  target: '#container',           // CSS selector or HTMLElement
  modality: ['voice', 'chat'],    // Supported modalities
  theme: 'dark',                  // Theme selection
  component: 'widget',            // Component type
  displayType: 'popup',           // Display mode
  autoStart: true,                // Auto-start session
  width: '400px',                 // Custom width
  height: '600px',                // Custom height
  onDisplayTypeChange: (type) => console.log(type)
});

// Remove UI
client.removeUI('#container');
client.removeAllUI();

// Send text message
await client.sendMessage("Hello agent!");

// Send with metadata
await client.sendChatMessage("Hello", { priority: "high" });

// Send file attachments (images only)
await client.sendAttachment(imageFile);
await client.sendAttachments([file1, file2]);

// Microphone control
await client.toggleMicrophone();
await client.setMicrophoneEnabled(true);
const isMuted = !client.isMicrophoneEnabled;

// Camera control
await client.enableCamera();
await client.disableCamera();
await client.toggleCamera();
const isCameraOn = client.isCameraEnabled;

// Screen sharing
await client.startScreenShare();
await client.stopScreenShare();
const isSharing = client.isScreenShareEnabled;

// Device management
const audioDevices = await client.getAudioInputDevices();
const videoDevices = await client.getVideoInputDevices();
await client.setAudioInputDevice(deviceId);
await client.setVideoInputDevice(deviceId);

// Register custom event emitter
client.registerEventEmitter(
  topic: string,
  handler: (data: string) => void
): void

// Register event listener with cleanup
client.registerEventListener<K extends keyof VoxketEvents>(
  eventName: K,
  callback: (data: any) => void
): () => void

// Example usage
const unsubscribe = client.registerEventListener('chat.message.received', (msg) => {
  console.log('Message:', msg);
});

// Cleanup
unsubscribe();

// Get participants
const localParticipant = client.getLocalParticipant();
const remoteParticipants = client.getRemoteParticipants();
const allParticipants = client.getParticipants();

// Check permissions
const permissions = client.getPublishPermissions();
const canPublish = client.canPublishSource('microphone');

// Get media tracks
const micTrack = client.getMicrophoneTrack();
const cameraTrack = client.getCameraTrack();
const screenTrack = client.getScreenShareTrack();

import React, { useState } from 'react';
import { VoxketInteractiveViewProps } from '@voxket-ai/voxket-live';

function SurveyForm({ handler, data }: VoxketInteractiveViewProps) {
  const [rating, setRating] = useState(0);
  const [feedback, setFeedback] = useState('');

  const handleSubmit = () => {
    handler?.didSuccess({
      survey_rating: rating,
      customer_feedback: feedback,
      submitted_at: new Date().toISOString()
    });
  };

  const handleSkip = () => {
    handler?.dismissView(); // Sends decline response to agent
  };

  return (
    <div className="p-6 bg-white rounded-lg shadow-lg">
      <h3 className="text-lg font-semibold mb-4">
        {data?.title || 'Rate Your Experience'}
      </h3>
      
      <div className="mb-4">
        <label className="block text-sm font-medium mb-2">
          How would you rate our service?
        </label>
        <div className="flex gap-2">
          {[1,2,3,4,5].map(num => (
            <button
              key={num}
              onClick={() => setRating(num)}
              className={`w-10 h-10 rounded ${
                rating >= num ? 'bg-blue-500 text-white' : 'bg-gray-200'
              }`}
            >
              {num}
            </button>
          ))}
        </div>
      </div>

      <div className="mb-4">
        <label className="block text-sm font-medium mb-2">
          Additional feedback (optional):
        </label>
        <textarea
          value={feedback}
          onChange={(e) => setFeedback(e.target.value)}
          className="w-full p-2 border rounded"
          rows={3}
        />
      </div>

      <div className="flex gap-2 justify-end">
        <button 
          onClick={handleSkip}
          className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded"
        >
          Skip
        </button>
        <button 
          onClick={handleSubmit}
          disabled={rating === 0}
          className="px-4 py-2 bg-blue-500 text-white rounded disabled:opacity-50"
        >
          Submit
        </button>
      </div>
    </div>
  );
}

// Register the component
await client.registerFrontendRPC(
  'customer_satisfaction_survey',
  SurveyForm,
  'modal' // Can be 'embedded', 'modal', or 'fullscreen'
);

function ProductCatalog({ handler, data }: VoxketInteractiveViewProps) {
  const [selectedProduct, setSelectedProduct] = useState(null);
  
  const products = data?.products || [];

  const handleSelectProduct = (product: any) => {
    handler?.didSuccess({
      selected_product: product,
      action: 'add_to_cart'
    });
  };

  return (
    <div className="p-4">
      <h3 className="text-xl font-bold mb-4">Recommended Products</h3>
      <div className="grid grid-cols-2 gap-4">
        {products.map((product: any) => (
          <div key={product.id} className="border rounded-lg p-4">
            <img 
              src={product.image} 
              alt={product.name}
              className="w-full h-32 object-cover rounded mb-2"
            />
            <h4 className="font-semibold">{product.name}</h4>
            <p className="text-gray-600">${product.price}</p>
            <button
              onClick={() => handleSelectProduct(product)}
              className="mt-2 w-full bg-blue-500 text-white py-2 rounded"
            >
              Add to Cart
            </button>
          </div>
        ))}
      </div>
    </div>
  );
}

function AppointmentBooker({ handler, data }: VoxketInteractiveViewProps) {
  const [selectedSlot, setSelectedSlot] = useState('');
  const [contactInfo, setContactInfo] = useState({ name: '', email: '' });
  
  const availableSlots = data?.available_slots || [];

  const handleBooking = () => {
    handler?.didSuccess({
      appointment: {
        slot: selectedSlot,
        contact: contactInfo,
        type: data?.appointment_type,
        booked_at: new Date().toISOString()
      }
    });
  };

  return (
    <div className="p-6 bg-white rounded-lg">
      <h3 className="text-lg font-semibold mb-4">Book Appointment</h3>
      
      <div className="mb-4">
        <label className="block text-sm font-medium mb-2">
          Available Time Slots:
        </label>
        <div className="grid grid-cols-2 gap-2">
          {availableSlots.map((slot: string) => (
            <button
              key={slot}
              onClick={() => setSelectedSlot(slot)}
              className={`p-2 rounded border ${
                selectedSlot === slot 
                  ? 'bg-blue-500 text-white' 
                  : 'bg-gray-50 hover:bg-gray-100'
              }`}
            >
              {slot}
            </button>
          ))}
        </div>
      </div>

      <div className="mb-4">
        <input
          type="text"
          placeholder="Your Name"
          value={contactInfo.name}
          onChange={(e) => setContactInfo({...contactInfo, name: e.target.value})}
          className="w-full p-2 border rounded mb-2"
        />
        <input
          type="email"
          placeholder="Email Address"
          value={contactInfo.email}
          onChange={(e) => setContactInfo({...contactInfo, email: e.target.value})}
          className="w-full p-2 border rounded"
        />
      </div>

      <button
        onClick={handleBooking}
        disabled={!selectedSlot || !contactInfo.name || !contactInfo.email}
        className="w-full bg-green-500 text-white py-2 rounded disabled:opacity-50"
      >
        Book Appointment
      </button>
    </div>
  );
}

interface SessionMetrics {
  sessionId: string;
  startTime: Date;
  endTime?: Date;
  duration?: number;           // Duration in milliseconds
  totalMessages: number;       // Total messages exchanged
  connectionIssues: number;    // Network issues count
  participantCount: number;    // Number of participants
  events: SessionLog[];        // All session events
}

interface SessionLog {
  timestamp: Date;
  event: string;              // Event type
  data?: any;                 // Event data
  sessionId?: string;         // Associated session
  participantId?: string;     // Participant who triggered event
}

// Google Analytics 4
client.on('session.created', (session) => {
  gtag('event', 'voxket_session_start', {
    session_id: session.id,
    agent_id: session.agentId,
    modalities: session.activeModalities.join(',')
  });
});

// Mixpanel
client.on('chat.message.received', (message) => {
  mixpanel.track('Voxket Message Received', {
    session_id: client.getCurrentSession()?.id,
    message_type: message.sender.type,
    message_length: message.content.length,
    timestamp: message.timestamp
  });
});

// Custom Analytics
const analyticsTracker = {
  trackSession: (event: string, data: any) => {
    fetch('/api/analytics', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ event, data, timestamp: new Date() })
    });
  }
};

client.on('session.ended', (session, metrics) => {
  analyticsTracker.trackSession('session_completed', {
    duration: metrics.duration,
    message_count: metrics.totalMessages,
    quality_score: calculateQualityScore(metrics)
  });
});

// HIPAA-compliant configuration
const healthcareClient = new VoxketClient({
  appId: "healthcare-app",
  appSecret: "hipaa-compliant-secret",
  baseUrl: "https://secure-api.voxket.com",
  agentId: "patient-support",
  
  // Disable session logging for compliance
  enableSessionLogging: false,
  
  onSessionStart: (sessionId) => {
    // HIPAA audit logging
    complianceLogger.logPatientInteraction({
      sessionId,
      patientId: getCurrentPatient().id,
      timestamp: new Date(),
      actionType: 'SESSION_START'
    });
  }
});

// Only use secure text-based modalities
await healthcareClient.connect();
healthcareClient.renderUI({
  modality: ['chat'], // Text only for security
  theme: 'light',
  enableSessionLogging: false
});

class TenantManager {
  private clients: Map<string, VoxketClient> = new Map();

  async createTenantClient(tenantId: string, config: any) {
    const client = new VoxketClient({
      appId: config.appId,
      appSecret: config.appSecret,
      baseUrl: config.baseUrl,
      agentId: `${tenantId}-agent`,
      
      onMessageReceived: (message) => {
        // Tenant-specific message handling
        this.handleTenantMessage(tenantId, message);
      }
    });

    this.clients.set(tenantId, client);
    return client;
  }

  getTenantClient(tenantId: string) {
    return this.clients.get(tenantId);
  }

  private handleTenantMessage(tenantId: string, message: any) {
    // Tenant-specific analytics, logging, etc.
    console.log(`Tenant ${tenantId} received message:`, message);
  }
}

// Usage
const tenantManager = new TenantManager();
const client = await tenantManager.createTenantClient('acme-corp', {
  appId: 'acme-app-id',
  appSecret: 'acme-secret',
  baseUrl: 'https://acme.voxket.com'
});

// Session persistence across page reloads
class SessionManager {
  private static SESSION_KEY = 'voxket_session';

  static saveSession(session: VoxketSession) {
    localStorage.setItem(this.SESSION_KEY, JSON.stringify({
      id: session.id,
      agentId: session.agentId,
      startedAt: session.startedAt,
      metadata: session.metadata
    }));
  }

  static restoreSession(): VoxketSession | null {
    const saved = localStorage.getItem(this.SESSION_KEY);
    if (saved) {
      try {
        return JSON.parse(saved);
      } catch {
        return null;
      }
    }
    return null;
  }

  static clearSession() {
    localStorage.removeItem(this.SESSION_KEY);
  }
}

// Restore previous session on page load
const client = new VoxketClient(config);
const previousSession = SessionManager.restoreSession();

if (previousSession) {
  // Attempt to reconnect to existing session
  try {
    await client.connect();
    // Check if session is still valid and restore UI state
  } catch (error) {
    SessionManager.clearSession();
    // Start fresh session
  }
}

// Check console for errors and verify configuration
const client = new VoxketClient({
  appId: "your-app-id", // ✅ Make sure this is correct
  appSecret: "your-app-secret", // ✅ Make sure this is correct
  baseUrl: "https://api.voxket.com", // ✅ Check URL is correct
  debug: true // ✅ Enable debug logging
});

client.on('connection.error', (error) => {
  console.error('Connection failed:', error);
  
  // Common fixes:
  // - Verify appId and appSecret are correct
  // - Check baseUrl is accessible
  // - Ensure network connectivity
  // - Check for CORS issues in browser console
});

client.on('connection.disconnected', (reason) => {
  console.log('Disconnected reason:', reason);
  
  // Auto-reconnect logic
  setTimeout(() => {
    client.connect().catch(console.error);
  }, 5000);
});

// Handle permission errors gracefully
client.on('connection.error', (error) => {
  if (error.code === 'PERMISSION_DENIED') {
    showUserMessage('Please allow microphone/camera access to continue');
  }
});

// Request permissions explicitly
navigator.mediaDevices.getUserMedia({ 
  audio: true, 
  video: true 
}).then(() => {
  console.log('Permissions granted');
}).catch((error) => {
  console.error('Permission denied:', error);
});

// For React 18 Strict Mode, wrap your app properly
function App() {
  const [client, setClient] = useState<VoxketClient | null>(null);
  
  useEffect(() => {
    // Only create client once
    if (!client) {
      const newClient = new VoxketClient(config);
      setClient(newClient);
    }
    
    return () => {
      // Cleanup on unmount
      client?.disconnect();
    };
  }, []);
  
  if (!client) return <div>Loading...</div>;
  
  return <VoxketWidget voxketClient={client} {...props} />;
}

// Enable comprehensive debugging
const client = new VoxketClient({
  // ... config
  debug: true
});

// Monitor all events
client.onAny((eventName, ...args) => {
  console.log(`🔍 Event: ${eventName}`, args);
});

// Check connection state
console.log('Connection state:', client.getConnectionState());
console.log('Current session:', client.getCurrentSession());
console.log('Is connected:', client.connected);

// Optimize for production
const client = new VoxketClient({
  // ... config
  debug: false, // Disable debug logs
});

// Lazy load the widget
const LazyVoxketWidget = lazy(() => import('@voxket-ai/voxket-live'));

function App() {
  return (
    <Suspense fallback={<div>Loading chat...</div>}>
      <LazyVoxketWidget {...props} />
    </Suspense>
  );
}

// Preload on user interaction
const preloadChat = () => {
  import('@voxket-ai/voxket-live').then(() => {
    console.log('Voxket SDK preloaded');
  });
};

// Call preloadChat() on hover or focus events

// ✅ Good: Single client instance
class VoxketManager {
  private static instance: VoxketClient | null = null;

  static getInstance(config: VoxketClientConfig): VoxketClient {
    if (!this.instance) {
      this.instance = new VoxketClient(config);
    }
    return this.instance;
  }

  static cleanup() {
    if (this.instance) {
      this.instance.disconnect();
      this.instance = null;
    }
  }
}

// ❌ Bad: Multiple client instances
function BadComponent() {
  const [client] = useState(() => new VoxketClient(config)); // Creates new client each render
}

// ✅ Comprehensive error handling
async function initializeVoxket() {
  try {
    await client.connect();
    client.renderUI({ target: '#voxket-widget' });
  } catch (error) {
    if (error.code === 'AUTHENTICATION_FAILED') {
      showError('Invalid credentials');
    } else if (error.code === 'NETWORK_ERROR') {
      showError('Connection failed - please try again');
    } else {
      showError('Something went wrong');
    }
    
    // Log for debugging
    console.error('Voxket initialization failed:', error);
  }
}

// ✅ Always cleanup event listeners
useEffect(() => {
  const handleMessage = (message: ChatMessage) => {
    // Handle message
  };
  
  client.on('chat.message.received', handleMessage);
  
  return () => {
    client.off('chat.message.received', handleMessage);
  };
}, [client]);

function ChatWidget() {
  const [isConnecting, setIsConnecting] = useState(false);
  const [connectionError, setConnectionError] = useState('');

  const initChat = async () => {
    setIsConnecting(true);
    setConnectionError('');
    
    try {
      await client.connect();
      client.renderUI({ target: '#chat' });
    } catch (error) {
      setConnectionError('Failed to connect. Please try again.');
    } finally {
      setIsConnecting(false);
    }
  };

  return (
    <div>
      {isConnecting && <div>Connecting to support...</div>}
      {connectionError && <div className="error">{connectionError}</div>}
      <button onClick={initChat} disabled={isConnecting}>
        Start Chat
      </button>
      <div id="chat"></div>
    </div>
  );
}

// Start with basic features, enhance based on capabilities
const client = new VoxketClient(config);

// Check agent capabilities
const agentInfo = client.getCurrentAgentInfo();
const supportedModalities = agentInfo?.modality_supported || ['chat'];

// Render appropriate UI
client.renderUI({
  modality: supportedModalities.includes('voice') 
    ? ['voice', 'chat'] 
    : ['chat'],
  theme: userPreferences.theme || 'vox'
});

// Ensure keyboard navigation and screen reader support
<VoxketWidget
  className="voxket-accessible"
  // Widget automatically includes ARIA labels and keyboard support
  {...props}
/>

/* CSS for better accessibility */
.voxket-accessible {
  /* Ensure focus indicators are visible */
  --focus-ring-color: #3b82f6;
}

.voxket-accessible *:focus {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
}

// ✅ Use environment variables
const client = new VoxketClient({
  appId: process.env.VOXKET_APP_ID,
  appSecret: process.env.VOXKET_APP_SECRET,
  baseUrl: process.env.VOXKET_BASE_URL
});

// ✅ For browser apps, use backend proxy
async function getVoxketCredentials() {
  const response = await fetch('/api/voxket-auth', {
    headers: {
      'Authorization': `Bearer ${userToken}`
    }
  });
  return response.json();
}

import React, { useCallback, useEffect, useState } from 'react';
import VoxketWidget, { 
  VoxketWidgetProps, 
  VoxketClient, 
  SessionMetrics 
} from '@voxket-ai/voxket-live';

interface Props {
  agentId: string;
  userId: string;
  userRole: 'customer' | 'admin';
}

export function CustomerSupport({ agentId, userId, userRole }: Props) {
  const [sessionMetrics, setSessionMetrics] = useState<SessionMetrics | null>(null);
  const [isActive, setIsActive] = useState(false);

  const handleSessionStart = useCallback((sessionId: string) => {
    setIsActive(true);
    console.log('Support session started:', sessionId);
  }, []);

  const handleSessionEnd = useCallback((metrics: SessionMetrics) => {
    setSessionMetrics(metrics);
    setIsActive(false);
    console.log('Session ended:', metrics);
  }, []);

  const widgetProps: VoxketWidgetProps = {
    agentId,
    baseUrl: process.env.NEXT_PUBLIC_VOXKET_BASE_URL!,
    appId: process.env.NEXT_PUBLIC_VOXKET_APP_ID!,
    appSecret: process.env.NEXT_PUBLIC_VOXKET_APP_SECRET!,
    participantName: `User-${userId}`,
    theme: 'vox',
    modalities: ['chat', 'voice'],
    displayType: 'popup',
    popupPosition: 'bottom-right',
    onSessionStart: handleSessionStart,
    onSessionEnd: handleSessionEnd
  };

  return (
    <div className="customer-support">
      {isActive && (
        <div className="status-indicator">
          🟢 Support session active
        </div>
      )}
      
      <VoxketWidget {...widgetProps} />
      
      {sessionMetrics && (
        <div className="session-summary">
          <h4>Session Summary</h4>
          <p>Duration: {Math.round(sessionMetrics.duration! / 1000)}s</p>
          <p>Messages: {sessionMetrics.totalMessages}</p>
        </div>
      )}
    </div>
  );
}

<template>
  <div class="vue-voxket">
    <button @click="initializeChat" :disabled="isLoading">
      Start Support Chat
    </button>
    <div ref="voxketContainer" class="voxket-container"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import { VoxketClient } from '@voxket-ai/voxket-live';

const voxketContainer = ref<HTMLElement>();
const isLoading = ref(false);
let client: VoxketClient | null = null;

const initializeChat = async () => {
  if (!client || !voxketContainer.value) return;
  
  isLoading.value = true;
  
  try {
    await client.connect();
    client.renderUI({
      target: voxketContainer.value,
      modality: ['chat'],
      theme: 'light',
      autoStart: true
    });
  } catch (error) {
    console.error('Failed to initialize chat:', error);
  } finally {
    isLoading.value = false;
  }
};

onMounted(() => {
  client = new VoxketClient({
    appId: import.meta.env.VITE_VOXKET_APP_ID,
    appSecret: import.meta.env.VITE_VOXKET_APP_SECRET,
    baseUrl: import.meta.env.VITE_VOXKET_BASE_URL,
    agentId: 'vue-support-agent'
  });
});

onUnmounted(() => {
  if (client) {
    client.removeAllUI();
    client.disconnect();
  }
});
</script>

// voxket.service.ts
import { Injectable } from '@angular/core';
import { VoxketClient } from '@voxket-ai/voxket-live';

@Injectable({ providedIn: 'root' })
export class VoxketService {
  private client: VoxketClient;

  constructor() {
    this.client = new VoxketClient({
      appId: environment.voxketAppId,
      appSecret: environment.voxketAppSecret,
      baseUrl: environment.voxketBaseUrl
    });
  }

  async startChat(containerId: string, agentId: string) {
    await this.client.connect();
    this.client.renderUI({
      target: `#${containerId}`,
      agentId,
      modality: ['chat'],
      theme: 'dark'
    });
  }

  disconnect() {
    this.client.removeAllUI();
    this.client.disconnect();
  }
}

// chat.component.ts
@Component({
  selector: 'app-chat',
  template: `
    <div class="chat-container">
      <button (click)="startChat()" [disabled]="isLoading">
        {{ isLoading ? 'Connecting...' : 'Start Chat' }}
      </button>
      <div id="angular-voxket-container"></div>
    </div>
  `
})
export class ChatComponent implements OnDestroy {
  isLoading = false;

  constructor(private voxketService: VoxketService) {}

  async startChat() {
    this.isLoading = true;
    try {
      await this.voxketService.startChat('angular-voxket-container', 'support-agent');
    } finally {
      this.isLoading = false;
    }
  }

  ngOnDestroy() {
    this.voxketService.disconnect();
  }
}

// ✅ Production configuration
const client = new VoxketClient({
  appId: process.env.VOXKET_APP_ID!, // From secure environment
  appSecret: process.env.VOXKET_APP_SECRET!, // From secure environment
  baseUrl: process.env.VOXKET_BASE_URL!, // Production URL
  debug: false, // Disable debug logs
  
  // Error tracking
  onError: (error) => {
    // Send to error monitoring service (Sentry, etc.)
    console.error('Voxket error:', error);
    errorTracker.captureException(error);
  }
});

// ✅ Health check endpoint
app.get('/health/voxket', async (req, res) => {
  try {
    // Test Voxket API connectivity
    const response = await fetch(`${process.env.VOXKET_BASE_URL}/health`);
    if (response.ok) {
      res.status(200).json({ status: 'healthy' });
    } else {
      res.status(503).json({ status: 'unhealthy' });
    }
  } catch (error) {
    res.status(503).json({ status: 'error', error: error.message });
  }
});

// Production monitoring setup
class VoxketMonitoring {
  static setupMonitoring(client: VoxketClient) {
    // Connection monitoring
    client.on('connection.connected', () => {
      this.trackEvent('voxket_connected');
    });
    
    client.on('connection.error', (error) => {
      this.trackError('voxket_connection_error', error);
    });
    
    // Session analytics
    client.on('session.created', (session) => {
      this.trackEvent('voxket_session_start', {
        session_id: session.id,
        agent_id: session.agentId
      });
    });
    
    // Performance monitoring
    const startTime = Date.now();
    client.on('connection.connected', () => {
      const connectionTime = Date.now() - startTime;
      this.trackTiming('voxket_connection_time', connectionTime);
    });
  }
  
  private static trackEvent(event: string, data?: any) {
    // Send to your analytics service
    analytics.track(event, data);
  }
  
  private static trackError(event: string, error: Error) {
    // Send to error monitoring
    errorTracker.captureException(error, { tags: { component: 'voxket' } });
  }
  
  private static trackTiming(metric: string, duration: number) {
    // Send to performance monitoring
    performanceTracker.timing(metric, duration);
  }
}

// Apply monitoring
VoxketMonitoring.setupMonitoring(client);