import React, { useState, useEffect, useCallback } from 'react';
import { createRoot } from 'react-dom/client';

// ============================================================================
// CONFIGURATION - Build v46
// ============================================================================
const CONFIG = {
  APP_NAME: 'Recex Voice AI',
  BACKEND_URL: '/api',
};

// LocalStorage keys - centralized to avoid typos and enable easy changes
const STORAGE_KEYS = {
  AUTHENTICATED: 'recex_authenticated',
  USER_ROLE: 'recex_user_role',
  USER_NAME: 'recex_user_name',
};

// Utility function to copy text to clipboard with fallback for older browsers
const copyToClipboard = async (text) => {
  try {
    await navigator.clipboard.writeText(text);
    return true;
  } catch (err) {
    // Fallback for older browsers
    const textArea = document.createElement('textarea');
    textArea.value = text;
    textArea.style.position = 'fixed';
    textArea.style.left = '-9999px';
    document.body.appendChild(textArea);
    textArea.select();
    try {
      document.execCommand('copy');
      return true;
    } finally {
      document.body.removeChild(textArea);
    }
  }
};

// ============================================================================
// TIMEZONE SUPPORT
// ============================================================================
const SUPPORTED_TIMEZONES = [
  { value: 'Asia/Kolkata', label: 'India (Kolkata, Mumbai, Delhi)', offset: 5.5 },
  { value: 'America/New_York', label: 'US Eastern (New York, Miami)', offset: -5 },
  { value: 'America/Chicago', label: 'US Central (Chicago, Dallas)', offset: -6 },
  { value: 'America/Denver', label: 'US Mountain (Denver, Phoenix)', offset: -7 },
  { value: 'America/Los_Angeles', label: 'US Pacific (Los Angeles, Seattle)', offset: -8 },
];

// Module-level tenant timezone (set when tenant is validated from Firestore)
let _tenantTimezone: string | null = null;

const setTenantTimezone = (tz: string | null) => { _tenantTimezone = tz; };

// Get the default timezone for pre-selecting in forms: tenant setting > Asia/Kolkata
const getDefaultTimezone = (): string => {
  if (_tenantTimezone) return _tenantTimezone;
  return 'Asia/Kolkata';
};

// Generate invite link for a tenant user
const generateInviteLink = (email, name) => {
  return `${window.location.origin}?invite=${encodeURIComponent(email)}&name=${encodeURIComponent(name)}`;
};

// ============================================================================
// FIREBASE CONFIGURATION
// ============================================================================
// TODO: Replace with your Firebase config from Firebase Console
const FIREBASE_CONFIG = {
  apiKey: "AIzaSyD4wcDdFod7TPvTvb8yaK04warWl7qYjpM",
  authDomain: "recex-voice-ai.firebaseapp.com",
  projectId: "recex-voice-ai",
  storageBucket: "recex-voice-ai.firebasestorage.app",
  messagingSenderId: "406720918394",
  appId: "1:406720918394:web:5506791946adb81ddedcc3"
};

// Check if Firebase is configured
const isFirebaseConfigured = () => FIREBASE_CONFIG.apiKey !== "YOUR_API_KEY";

// Helper to access Firebase from window (avoids TypeScript 'as any' syntax that Babel can't parse)
const getFirebase = (): any => {
  if (typeof window !== 'undefined') {
    return window["firebase"];
  }
  return null;
};

// Initialize Firebase (only if configured)
let firebaseApp: any = null;
let firebaseAuth: any = null;
let firebaseDb: any = null;

const firebase = getFirebase();
if (isFirebaseConfigured() && firebase) {
  firebaseApp = firebase.initializeApp(FIREBASE_CONFIG);
  firebaseAuth = firebase.auth();
  firebaseDb = firebase.firestore();
}

// Promise that resolves when Firebase auth state is first determined
// This prevents race conditions where API calls are made before auth is ready
let authReadyResolve: (value: any) => void;
const authReadyPromise = new Promise((resolve) => {
  authReadyResolve = resolve;
});

// Set up auth state listener immediately to know when auth is ready
if (firebaseAuth) {
  firebaseAuth.onAuthStateChanged((user: any) => {
    authReadyResolve(user);
  });
} else {
  // No Firebase - resolve immediately
  authReadyResolve(null);
}

// ============================================================================
// TENANT DETECTION (Simplified for recex-ai.com)
// ============================================================================

// Get current tenant from subdomain (e.g., "demo" from "demo.recex-ai.com")
const getTenant = (): string => {
  const hostname = window.location.hostname.toLowerCase();

  // Handle localhost and IP addresses (allow ?tenant= override only for local dev)
  if (hostname === 'localhost' || hostname.match(/^\d+\.\d+\.\d+\.\d+$/)) {
    const params = new URLSearchParams(window.location.search);
    const tenantOverride = params.get('tenant');
    if (tenantOverride) return tenantOverride;
    return 'demo';
  }

  // For *.recex-ai.com, extract subdomain as tenant
  const parts = hostname.replace(/^www\./, '').split('.');
  if (parts.length >= 3) {
    return parts[0]; // e.g., "demo" from "demo.recex-ai.com"
  }

  // Apex domain (recex-ai.com) defaults to "demo"
  return 'demo';
};

// Check if we're on the main domain (apex) vs a tenant subdomain
const isMainDomain = (): boolean => {
  const hostname = window.location.hostname.toLowerCase();

  // Localhost is considered main domain for testing
  if (hostname === 'localhost' || hostname.match(/^\d+\.\d+\.\d+\.\d+$/)) {
    return true;
  }

  // Check if it's the apex domain (recex-ai.com) without subdomain
  const parts = hostname.replace(/^www\./, '').split('.');
  // Apex domain has 2 parts (recex-ai.com), subdomain has 3+ (client1.recex-ai.com)
  return parts.length <= 2;
};

interface ColorPalette {
  50: string;
  100: string;
  200: string;
  300: string;
  400: string;
  500: string;
  600: string;
  700: string;
  800: string;
  900: string;
}

interface ResellerBranding {
  appName: string;
  logoUrl: string;
  faviconUrl?: string;
  apiKey?: string;  // Used by backend only
  colors: {
    primary: ColorPalette;
    secondary: ColorPalette;
  };
}

// Default branding (Recex) - used as fallback
const DEFAULT_BRANDING: ResellerBranding = {
  appName: 'Recex Voice AI',
  logoUrl: '/images/logo.png',
  faviconUrl: '/images/logo.png',
  colors: {
    primary: {
      50: '#fefce8', 100: '#fef9c3', 200: '#fef08a', 300: '#fde047',
      400: '#facc15', 500: '#d5ad34', 600: '#b8922a', 700: '#9a7720',
      800: '#7c5c16', 900: '#5e410c'
    },
    secondary: {
      50: '#eff6ff', 100: '#dbeafe', 200: '#bfdbfe', 300: '#93c5fd',
      400: '#60a5fa', 500: '#275a9a', 600: '#1e4a80', 700: '#153a66',
      800: '#0c2a4c', 900: '#031a32'
    }
  }
};

// Branding service - simplified for Recex (hardcoded branding)
const brandingService = {
  // Load branding (always returns default for Recex)
  loadBranding: async (): Promise<ResellerBranding> => {
    return DEFAULT_BRANDING;
  },

  // Get current branding
  getBranding: (): ResellerBranding => {
    return DEFAULT_BRANDING;
  },

  // Apply branding to DOM (colors, title, favicon)
  applyBranding: (branding: ResellerBranding): void => {
    document.title = branding.appName;
    if (branding.faviconUrl) {
      const link = document.querySelector("link[rel*='icon']");
      if (link) {
        link["href"] = branding.faviconUrl;
      }
    }
    const root = document.documentElement;
    Object.entries(branding.colors.primary).forEach(([shade, color]) => {
      root.style.setProperty(`--color-primary-${shade}`, color);
    });
    Object.entries(branding.colors.secondary).forEach(([shade, color]) => {
      root.style.setProperty(`--color-secondary-${shade}`, color);
    });
  }
};

// Branding Context for React components
interface BrandingContextType {
  branding: ResellerBranding;
  isLoading: boolean;
}

const BrandingContext = React.createContext({
  branding: DEFAULT_BRANDING,
  isLoading: true
});

const useBranding = () => React.useContext(BrandingContext);

// ============================================================================
// FIREBASE AUTH SERVICE
// ============================================================================

// User roles (simplified 3-tier system)
// - superadmin: can access all tenants
// - admin: can manage users within their own tenant
// - user: regular user within a tenant
type UserRole = 'superadmin' | 'admin' | 'user';

interface AppUser {
  uid: string;
  email: string;
  name: string;
  status: string;
  role: UserRole;
  tenant: string;  // Which tenant subdomain this user belongs to
  createdAt: any;
}

const authService = {
  // Check if user is signed in
  getCurrentUser: (): any => {
    return firebaseAuth?.currentUser;
  },

  // Sign in with email and password
  signIn: async (email: string, password: string): Promise<any> => {
    if (!firebaseAuth) throw new Error('Firebase not configured');
    return firebaseAuth.signInWithEmailAndPassword(email, password);
  },

  // Sign out
  signOut: async (): Promise<void> => {
    if (!firebaseAuth) {
      localStorage.removeItem(STORAGE_KEYS.AUTHENTICATED);
      return;
    }
    return firebaseAuth.signOut();
  },

  // Send password reset email with redirect back to current subdomain
  sendPasswordReset: async (email: string): Promise<void> => {
    if (!firebaseAuth) throw new Error('Firebase not configured');
    const actionCodeSettings = {
      url: window.location.origin,
      handleCodeInApp: false
    };
    return firebaseAuth.sendPasswordResetEmail(email, actionCodeSettings);
  },

  // Listen to auth state changes
  onAuthStateChanged: (callback: (user: any) => void): (() => void) => {
    if (!firebaseAuth) {
      // Fallback for non-Firebase mode
      const isAuth = localStorage.getItem(STORAGE_KEYS.AUTHENTICATED) === 'true';
      callback(isAuth ? { uid: 'local', email: 'admin@local' } : null);
      return () => {};
    }
    return firebaseAuth.onAuthStateChanged(callback);
  },

  // Get user data from Firestore
  getUserData: async (uid: string): Promise<AppUser | null> => {
    if (!firebaseDb) return null;
    const doc = await firebaseDb.collection('users').doc(uid).get();
    if (doc.exists) {
      const data = doc.data();
      // Map old roles to new roles for backward compatibility
      let role: UserRole = data.role || 'user';
      if (role === 'platform_admin' || role === 'reseller_admin') {
        role = 'superadmin';
      } else if (role === 'tenant_admin') {
        role = 'admin';
      }
      return {
        uid,
        email: data.email,
        name: data.name,
        status: data.status,
        role,
        tenant: data.tenant || 'demo',
        createdAt: data.createdAt
      };
    }
    return null;
  },

  // Verify user has access to current tenant and is active
  verifyTenant: async (uid: string): Promise<{ valid: boolean; reason?: string; user?: AppUser }> => {
    if (!firebaseDb) return { valid: true }; // Allow if no Firebase

    const doc = await firebaseDb.collection('users').doc(uid).get();
    const currentTenant = getTenant();

    if (!doc.exists) return { valid: false, reason: 'not_registered' };

    const data = doc.data();
    // Map old roles to new roles for backward compatibility
    let role: UserRole = data.role || 'user';
    if (role === 'platform_admin' || role === 'reseller_admin') {
      role = 'superadmin';
    } else if (role === 'tenant_admin') {
      role = 'admin';
    }

    const user: AppUser = {
      uid,
      email: data.email,
      name: data.name,
      status: data.status,
      role,
      tenant: data.tenant || 'demo',
      createdAt: data.createdAt
    };

    // Check if user is inactive
    if (user.status === 'inactive') {
      return { valid: false, reason: 'inactive' };
    }

    // Superadmin can access the main domain (recex-ai.com) and demo.recex-ai.com (demo playground)
    // but not other tenant subdomains like hdfc.recex-ai.com
    if (user.role === 'superadmin') {
      if (!isMainDomain() && currentTenant !== 'demo') {
        return { valid: false, reason: 'superadmin_wrong_domain' };
      }
      return { valid: true, user };
    }

    // Admin and user must belong to the current tenant
    if (user.tenant !== currentTenant) {
      return { valid: false, reason: 'wrong_tenant' };
    }

    // Also verify the tenant itself exists and is active in the tenants collection
    // This prevents orphaned users (whose tenant was deleted) from logging in
    if (!isMainDomain() && currentTenant !== 'demo') {
      try {
        const tenantSnapshot = await firebaseDb
          .collection('tenants')
          .where('slug', '==', currentTenant)
          .limit(1)
          .get();

        if (tenantSnapshot.empty) {
          return { valid: false, reason: 'tenant_not_found' };
        }

        const tenantData = tenantSnapshot.docs[0].data();
        if (tenantData.status === 'inactive') {
          return { valid: false, reason: 'tenant_inactive' };
        }
      } catch (err) {
        console.error('Tenant existence check in verifyTenant failed:', err);
        // On Firestore error, deny access (fail-closed)
        return { valid: false, reason: 'tenant_not_found' };
      }
    }

    return { valid: true, user };
  },

  // Invite a new user (creates invite record, returns invite link)
  inviteUser: async (email: string, name: string): Promise<string> => {
    if (!firebaseDb) throw new Error('Firebase not configured');

    const tenant = getTenant();

    // Verify the tenant exists and is active before creating an invite
    if (!isMainDomain() && tenant !== 'demo') {
      const tenantSnapshot = await firebaseDb
        .collection('tenants')
        .where('slug', '==', tenant)
        .limit(1)
        .get();

      if (tenantSnapshot.empty) {
        throw new Error('Cannot create invite: this organization does not exist.');
      }
      const tenantData = tenantSnapshot.docs[0].data();
      if (tenantData.status === 'inactive') {
        throw new Error('Cannot create invite: this organization has been deactivated.');
      }
    }

    const inviteDocRef = firebaseDb.collection('invites').doc(`${tenant}_${email}`);

    // Delete any existing invite (in case of re-invite)
    await inviteDocRef.delete();

    // Create invite record with tenant
    await inviteDocRef.set({
      email,
      name,
      tenant,
      invitedAt: firebase.firestore.FieldValue.serverTimestamp(),
      status: 'pending'
    });

    // Return the invite link (must be opened on same subdomain)
    return `${window.location.origin}?invite=${encodeURIComponent(email)}&name=${encodeURIComponent(name)}`;
  },

  // Complete signup from invite
  completeSignup: async (email: string, password: string, name: string): Promise<any> => {
    if (!firebaseAuth || !firebaseDb) throw new Error('Firebase not configured');

    const tenant = getTenant();

    // Verify the tenant subdomain actually exists and is active before allowing signup
    if (!isMainDomain() && tenant !== 'demo') {
      const tenantSnapshot = await firebaseDb
        .collection('tenants')
        .where('slug', '==', tenant)
        .limit(1)
        .get();

      if (tenantSnapshot.empty) {
        throw new Error('This organization does not exist.');
      }
      const tenantData = tenantSnapshot.docs[0].data();
      if (tenantData.status === 'inactive') {
        throw new Error('This organization has been deactivated. Please contact your administrator.');
      }
    }

    const inviteId = `${tenant}_${email}`;

    // Verify invite exists for this tenant
    const inviteDoc = await firebaseDb.collection('invites').doc(inviteId).get();
    if (!inviteDoc.exists) {
      throw new Error('Invalid or expired invitation for this domain');
    }
    const inviteData = inviteDoc.data();
    if (inviteData.tenant !== tenant) {
      throw new Error('This invitation is not valid for this domain');
    }
    if (inviteData.status !== 'pending') {
      throw new Error('This invitation has already been used');
    }
    // Check invite expiration (7 days)
    const INVITE_EXPIRY_MS = 7 * 24 * 60 * 60 * 1000; // 7 days
    if (inviteData.invitedAt) {
      const invitedAtMs = inviteData.invitedAt.toMillis ? inviteData.invitedAt.toMillis() : inviteData.invitedAt;
      if (Date.now() - invitedAtMs > INVITE_EXPIRY_MS) {
        throw new Error('This invitation has expired. Please request a new one.');
      }
    }

    // Try to create the user, or sign in if they already exist in Firebase Auth
    let userCredential;
    try {
      userCredential = await firebaseAuth.createUserWithEmailAndPassword(email, password);
    } catch (err) {
      if (err.code === 'auth/email-already-in-use') {
        // User exists in Firebase Auth (was previously deleted from Firestore but not Auth)
        // Sign them in with the new password they provided
        try {
          userCredential = await firebaseAuth.signInWithEmailAndPassword(email, password);
        } catch (signInErr) {
          // If sign in fails, the password doesn't match the existing account
          throw new Error('An account with this email already exists. Please use your previous password or contact your administrator.');
        }
      } else {
        throw err;
      }
    }
    const uid = userCredential.user.uid;

    // Create user document with tenant and role from invite
    await firebaseDb.collection('users').doc(uid).set({
      email,
      name,
      tenant,
      role: inviteData.role || 'user',
      status: 'active',
      createdAt: firebase.firestore.FieldValue.serverTimestamp()
    });

    // Update invite status
    await firebaseDb.collection('invites').doc(inviteId).update({
      status: 'completed',
      completedAt: firebase.firestore.FieldValue.serverTimestamp(),
      uid
    });

    return userCredential;
  },

  // Get all users (for admin/superadmin)
  // If isSuperadmin is true, returns all users across all tenants
  getAllUsers: async (isSuperadmin = false): Promise<AppUser[]> => {
    if (!firebaseDb) return [];

    let query = firebaseDb.collection('users').orderBy('createdAt', 'desc');

    // If not superadmin, filter by current tenant
    if (!isSuperadmin) {
      const tenant = getTenant();
      query = firebaseDb.collection('users')
        .where('tenant', '==', tenant)
        .orderBy('createdAt', 'desc');
    }

    const snapshot = await query.get();
    return snapshot.docs.map((doc: any) => ({ uid: doc.id, ...doc.data() }));
  },

  // Get all pending invites (for admin/superadmin)
  // If isSuperadmin is true, returns all invites across all tenants
  getPendingInvites: async (isSuperadmin = false): Promise<any[]> => {
    if (!firebaseDb) return [];

    let snapshot;
    if (isSuperadmin) {
      snapshot = await firebaseDb.collection('invites')
        .where('status', '==', 'pending')
        .get();
    } else {
      const tenant = getTenant();
      snapshot = await firebaseDb.collection('invites')
        .where('tenant', '==', tenant)
        .where('status', '==', 'pending')
        .get();
    }
    return snapshot.docs.map((doc: any) => ({ email: doc.data().email, ...doc.data() }));
  },

  // Delete/revoke invite (optionally specify tenant for superadmin cross-tenant deletion)
  revokeInvite: async (email: string, tenantOverride?: string): Promise<void> => {
    if (!firebaseDb) throw new Error('Firebase not configured');
    const tenant = tenantOverride || getTenant();
    await firebaseDb.collection('invites').doc(`${tenant}_${email}`).delete();
  },

  // Deactivate user
  deactivateUser: async (uid: string): Promise<void> => {
    if (!firebaseDb) throw new Error('Firebase not configured');
    await firebaseDb.collection('users').doc(uid).update({ status: 'inactive' });
  },

  // Reactivate user
  reactivateUser: async (uid: string): Promise<void> => {
    if (!firebaseDb) throw new Error('Firebase not configured');
    await firebaseDb.collection('users').doc(uid).update({ status: 'active' });
  },

  // Delete user (removes from Firestore - Firebase Auth user remains but can't access app)
  deleteUser: async (uid: string): Promise<void> => {
    if (!firebaseDb) throw new Error('Firebase not configured');
    await firebaseDb.collection('users').doc(uid).delete();
  },

  // Delete tenant and all associated data (users, invites)
  deleteTenant: async (tenantId: string, tenantSlug: string): Promise<void> => {
    if (!firebaseDb) throw new Error('Firebase not configured');

    // Delete all users belonging to this tenant
    const usersSnapshot = await firebaseDb.collection('users')
      .where('tenant', '==', tenantSlug)
      .get();
    const userDeletes = usersSnapshot.docs.map((doc: any) => doc.ref.delete());

    // Delete all invites belonging to this tenant
    const invitesSnapshot = await firebaseDb.collection('invites')
      .where('tenant', '==', tenantSlug)
      .get();
    const inviteDeletes = invitesSnapshot.docs.map((doc: any) => doc.ref.delete());

    // Delete all tenant resources
    const resourcesSnapshot = await firebaseDb.collection('tenantResources')
      .where('tenant', '==', tenantSlug)
      .get();
    const resourceDeletes = resourcesSnapshot.docs.map((doc: any) => doc.ref.delete());

    // Delete the tenant document
    const tenantDelete = firebaseDb.collection('tenants').doc(tenantId).delete();

    // Execute all deletes
    await Promise.all([...userDeletes, ...inviteDeletes, ...resourceDeletes, tenantDelete]);
  }
};

// ============================================================================
// TENANT RESOURCE SERVICE - Track which campaigns/agents belong to which tenant
// ============================================================================
const tenantResourceService = {
  // Register a resource (campaign/agent) to the current tenant
  registerResource: async (resourceType: 'campaign' | 'agent', resourceId: string): Promise<void> => {
    if (!firebaseDb) return;
    const tenant = getTenant();
    await firebaseDb.collection('tenantResources').doc(`${resourceType}_${resourceId}`).set({
      type: resourceType,
      resourceId: resourceId,
      tenant: tenant,
      createdAt: firebase.firestore.FieldValue.serverTimestamp()
    });
  },

  // Get all resource IDs of a type for the current tenant
  getResourceIds: async (resourceType: 'campaign' | 'agent'): Promise<Set<string>> => {
    if (!firebaseDb) return new Set();
    const tenant = getTenant();
    const snapshot = await firebaseDb.collection('tenantResources')
      .where('type', '==', resourceType)
      .where('tenant', '==', tenant)
      .get();
    const ids = new Set();
    snapshot.docs.forEach(doc => {
      const data = doc.data();
      if (data.resourceId) ids.add(data.resourceId);
    });
    return ids;
  },

  // Get ALL assigned resource IDs of a type (across all tenants)
  getAllAssignedIds: async (resourceType: 'campaign' | 'agent'): Promise<Set<string>> => {
    if (!firebaseDb) return new Set();
    const snapshot = await firebaseDb.collection('tenantResources')
      .where('type', '==', resourceType)
      .get();
    const ids = new Set();
    snapshot.docs.forEach(doc => {
      const data = doc.data();
      if (data.resourceId) ids.add(data.resourceId);
    });
    return ids;
  },

  // Delete a resource registration
  unregisterResource: async (resourceType: 'campaign' | 'agent', resourceId: string): Promise<void> => {
    if (!firebaseDb) return;
    await firebaseDb.collection('tenantResources').doc(`${resourceType}_${resourceId}`).delete();
  }
};

const COUNTRY_NAMES: Record<string, string> = {
  IN: 'India', US: 'United States', CA: 'Canada', GB: 'United Kingdom', AU: 'Australia',
  DE: 'Germany', FR: 'France', SG: 'Singapore', AE: 'UAE', SA: 'Saudi Arabia',
  JP: 'Japan', KR: 'South Korea', BR: 'Brazil', MX: 'Mexico', ZA: 'South Africa',
  NG: 'Nigeria', KE: 'Kenya', PH: 'Philippines', ID: 'Indonesia', MY: 'Malaysia',
  TH: 'Thailand', VN: 'Vietnam', NZ: 'New Zealand', IE: 'Ireland', NL: 'Netherlands',
  IT: 'Italy', ES: 'Spain', SE: 'Sweden', NO: 'Norway', DK: 'Denmark', FI: 'Finland',
  PL: 'Poland', PT: 'Portugal', CH: 'Switzerland', AT: 'Austria', BE: 'Belgium',
  IL: 'Israel', HK: 'Hong Kong', TW: 'Taiwan', CL: 'Chile', CO: 'Colombia', AR: 'Argentina'
};
const countryName = (code: string) => COUNTRY_NAMES[code] || code;

// Get current tenant's assigned phone numbers from Firestore
const getTenantPhoneNumbers = async (): Promise<Array<{ phone_number: string; country_code: string; allowed_countries: string[] }>> => {
  if (!firebaseDb) return [];
  try {
    const tenant = getTenant();
    const snapshot = await firebaseDb.collection('tenants')
      .where('slug', '==', tenant)
      .limit(1)
      .get();
    if (!snapshot.empty) {
      const data = snapshot.docs[0].data();
      // New format: array of phone number objects
      if (data.phoneNumbers && Array.isArray(data.phoneNumbers)) {
        return data.phoneNumbers;
      }
      // Backward compat: old single phoneNumber field
      if (data.phoneNumber) {
        return [{ phone_number: data.phoneNumber, country_code: data.phoneCountryCode || '', allowed_countries: [] }];
      }
    }
  } catch (err) {
    console.error('Error fetching tenant phone numbers:', err);
  }
  return [];
};

// ============================================================================
// TYPES
// ============================================================================
interface Agent {
  id: string;
  name: string;
  language: string;
  voice_persona: string;
  persona_name: string;
  status: string;
  agent_prompt?: string;
  introduction?: string;
  objective?: string;
  result_prompt?: string;
  result_schema?: Record<string, string>;
  custom_variables?: string[];
  created_at?: string;
}

interface Call {
  id: string;
  callee_name: string;
  mobile_number: string;
  agent_id: string;
  status: string;
  lifecycle_status: string;
  duration_minutes?: number;
  duration_seconds?: number;
  recording_url?: string;
  result?: Record<string, any>;
  created_at: string;
  started_at?: string;
  ended_at?: string;
  engagement_status?: string;
  answered_by?: string;
  custom_data?: Record<string, string>;
  agent?: { id: string; name: string };
}

// Fixed values from API for filters
const CALL_STATUSES = ['COMPLETED', 'IN_PROGRESS', 'NOT_CONNECTED', 'FAILED', 'SCHEDULED', 'CANCELLED'];
const ENGAGEMENT_STATUSES = ['ENGAGED', 'NOT_ENGAGED'];
const ANSWERED_BY_OPTIONS = ['HUMAN', 'VOICEMAIL', 'UNKNOWN'];

interface Campaign {
  id: string;
  name: string;
  status: string;
  description?: string;
  agent: {
    id: string;
    name: string;
    voice_persona: string;
  };
  total_call_count: number;
  connected_call_count: number;
  not_connected_call_count: number;
  failed_call_count: number;
  engaged_call_count: number;
  not_engaged_call_count: number;
  created_at: string;
  started_at?: string;
  ended_at?: string;
}

interface PhoneNumber {
  id: string;
  phone_number: string;
  country_code: string;
  allowed_countries: string[];
  provider: string;
  is_default: boolean;
  is_validated: boolean;
  created_at: string;
}

type TabType = 'agents' | 'calls' | 'campaigns';
type AgentViewType = 'list' | 'create' | 'edit' | 'view';
type CallViewType = 'history' | 'quick' | 'bulk';
type CampaignViewType = 'list' | 'create' | 'view';

// ============================================================================
// API FUNCTIONS
// ============================================================================

// Helper function for API calls with Firebase auth token
const apiFetch = async (url, options) => {
  const headers = new Headers(options?.headers);

  // Wait for Firebase auth to be ready before checking currentUser
  // This fixes race condition on page refresh where API calls happen before auth initializes
  await authReadyPromise;

  // Add Firebase ID token if user is authenticated
  const currentUser = firebaseAuth?.currentUser;
  if (currentUser) {
    try {
      const idToken = await currentUser.getIdToken();
      headers.set('Authorization', `Bearer ${idToken}`);
    } catch (e) {
      console.error('Failed to get ID token:', e);
    }
  }

  return fetch(url, { ...options, headers });
};

const api = {
  // Agents
  async listAgents(page = 1, pageSize = 20): Promise<{ count: number; results: Agent[] }> {
    const res = await apiFetch(`${CONFIG.BACKEND_URL}/agents?page=${page}&page_size=${pageSize}`);
    if (!res.ok) throw new Error('Failed to fetch agents');
    const data = await res.json();
    // Filter by tenant ownership
    const currentTenant = getTenant();
    const tenantAgentIds = await tenantResourceService.getResourceIds('agent');
    const allAssignedIds = await tenantResourceService.getAllAssignedIds('agent');

    const filtered = data.results.filter((a: Agent) => {
      // If resource is assigned to current tenant, show it
      if (tenantAgentIds.has(a.id)) return true;
      // If resource is unassigned AND current tenant is "demo", show it (legacy resources)
      if (currentTenant === 'demo' && !allAssignedIds.has(a.id)) return true;
      return false;
    });
    return { count: filtered.length, results: filtered };
  },

  async getAgent(id: string): Promise<Agent> {
    const res = await apiFetch(`${CONFIG.BACKEND_URL}/agents/${id}`);
    if (!res.ok) throw new Error('Failed to fetch agent');
    return res.json();
  },

  async createAgent(data: Partial<Agent>): Promise<Agent> {
    const res = await apiFetch(`${CONFIG.BACKEND_URL}/agents`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data),
    });
    if (!res.ok) {
      const err = await res.json();
      throw new Error(err.error || err.message || 'Failed to create agent');
    }
    const agent = await res.json();
    // Register agent to current tenant
    await tenantResourceService.registerResource('agent', agent.id);
    return agent;
  },

  async updateAgent(id: string, data: Partial<Agent>): Promise<Agent> {
    const res = await apiFetch(`${CONFIG.BACKEND_URL}/agents/${id}`, {
      method: 'PUT',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data),
    });
    if (!res.ok) {
      const err = await res.json();
      throw new Error(err.error || err.message || 'Failed to update agent');
    }
    return res.json();
  },

  // Calls
  async listCalls(params: {
    page?: number;
    pageSize?: number;
    status?: string[];
    engagementStatus?: string[];
    answeredBy?: string[];
    agentId?: string;
    campaignId?: string;
    createdAfter?: string;
    createdBefore?: string;
  }): Promise<{ count: number; results: Call[] }> {
    const searchParams = new URLSearchParams();
    searchParams.set('page', String(params.page || 1));
    searchParams.set('page_size', String(params.pageSize || 100));
    if (params.status?.length) params.status.forEach(s => searchParams.append('status', s));
    if (params.engagementStatus?.length) params.engagementStatus.forEach(s => searchParams.append('engagement_status', s));
    if (params.answeredBy?.length) params.answeredBy.forEach(s => searchParams.append('answered_by', s));
    if (params.agentId) searchParams.set('agent_id', params.agentId);
    if (params.campaignId) searchParams.set('campaign_id', params.campaignId);
    if (params.createdAfter) searchParams.set('created_after', params.createdAfter);
    if (params.createdBefore) searchParams.set('created_before', params.createdBefore);

    const res = await apiFetch(`${CONFIG.BACKEND_URL}/calls?${searchParams}`);
    if (!res.ok) throw new Error('Failed to fetch calls');
    const data = await res.json();
    // Filter by tenant's agents
    const currentTenant = getTenant();
    const tenantAgentIds = await tenantResourceService.getResourceIds('agent');
    const allAssignedAgentIds = await tenantResourceService.getAllAssignedIds('agent');

    const filtered = data.results.filter((c: Call) => {
      // If agent is assigned to current tenant, show the call
      if (tenantAgentIds.has(c.agent_id)) return true;
      // If agent is unassigned AND current tenant is "demo", show the call (legacy)
      if (currentTenant === 'demo' && !allAssignedAgentIds.has(c.agent_id)) return true;
      return false;
    });
    return { count: filtered.length, results: filtered };
  },

  // Fetch all calls (for export) - fetches all pages
  async listAllCalls(params: {
    status?: string[];
    engagementStatus?: string[];
    answeredBy?: string[];
    agentId?: string;
    campaignId?: string;
    createdAfter?: string;
    createdBefore?: string;
  }): Promise<Call[]> {
    const allCalls: Call[] = [];
    let page = 1;
    const pageSize = 100;
    let hasMore = true;

    while (hasMore) {
      const data = await this.listCalls({ ...params, page, pageSize });
      allCalls.push(...data.results);
      hasMore = data.results.length === pageSize;
      page++;
      // Safety limit to prevent infinite loops
      if (page > 100) break;
    }

    return allCalls;
  },

  async getCall(id: string): Promise<Call> {
    const res = await apiFetch(`${CONFIG.BACKEND_URL}/calls/${id}`);
    if (!res.ok) throw new Error('Failed to fetch call');
    return res.json();
  },

  async createCall(data: { agent_id: string; callee_name: string; mobile_number: string; custom_data?: Record<string, string>; timezone: string; from_phone_number?: string }): Promise<Call> {
    const res = await apiFetch(`${CONFIG.BACKEND_URL}/calls`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data),
    });
    if (!res.ok) {
      const err = await res.json();
      throw new Error(err.error || err.message || 'Failed to create call');
    }
    return res.json();
  },

  async createBulkCalls(data: { agent_id: string; data: Array<{ callee_name: string; mobile_number: string; custom_data?: Record<string, string> }>; timezone: string; from_phone_number?: string }): Promise<Call[]> {
    const res = await apiFetch(`${CONFIG.BACKEND_URL}/calls/bulk`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data),
    });
    if (!res.ok) {
      const err = await res.json();
      throw new Error(err.error || err.message || 'Failed to create bulk calls');
    }
    return res.json();
  },

  // Campaigns
  async listCampaigns(page = 1, pageSize = 20): Promise<{ count: number; results: Campaign[] }> {
    const res = await apiFetch(`${CONFIG.BACKEND_URL}/campaigns?page=${page}&page_size=${pageSize}`);
    if (!res.ok) throw new Error('Failed to fetch campaigns');
    const data = await res.json();
    // Filter by tenant ownership
    const currentTenant = getTenant();
    const tenantCampaignIds = await tenantResourceService.getResourceIds('campaign');
    const allAssignedIds = await tenantResourceService.getAllAssignedIds('campaign');

    const filtered = data.results.filter((c: Campaign) => {
      // If resource is assigned to current tenant, show it
      if (tenantCampaignIds.has(c.id)) return true;
      // If resource is unassigned AND current tenant is "demo", show it (legacy resources)
      if (currentTenant === 'demo' && !allAssignedIds.has(c.id)) return true;
      return false;
    });
    return { count: filtered.length, results: filtered };
  },

  async getCampaign(id: string): Promise<Campaign> {
    const res = await apiFetch(`${CONFIG.BACKEND_URL}/campaigns/${id}`);
    if (!res.ok) throw new Error('Failed to fetch campaign');
    return res.json();
  },

  async createCampaign(formData: FormData): Promise<Campaign> {
    const res = await apiFetch(`${CONFIG.BACKEND_URL}/campaigns`, {
      method: 'POST',
      body: formData,
    });
    if (!res.ok) {
      const err = await res.json();
      throw new Error(err.error || err.message || 'Failed to create campaign');
    }
    const campaign = await res.json();
    // Register campaign to current tenant
    await tenantResourceService.registerResource('campaign', campaign.id);
    return campaign;
  },

  // Phone Numbers
  async listNumbers(): Promise<PhoneNumber[]> {
    try {
      const res = await apiFetch(`${CONFIG.BACKEND_URL}/numbers/?page=1&page_size=100`);
      if (!res.ok) {
        console.warn('listNumbers failed:', res.status, res.statusText);
        return [];
      }
      const data = await res.json();
      console.log('listNumbers response:', data);
      const results = data.results || (Array.isArray(data) ? data : []);
      return results;
    } catch (err) {
      console.warn('listNumbers error:', err);
      return [];
    }
  },
};

// ============================================================================
// DATE & EXPORT UTILITIES
// ============================================================================
const getDateRange = (range: string): { start: string; end: string } | null => {
  const now = new Date();
  const end = now.toISOString();
  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
  let start: Date;

  switch (range) {
    case 'today':
      start = today;
      break;
    case 'yesterday':
      start = new Date(today.getTime() - 24 * 60 * 60 * 1000);
      break;
    case '7days':
      start = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
      break;
    case '30days':
      start = new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000);
      break;
    default:
      return null; // No filter
  }

  return { start: start.toISOString(), end };
};

const exportCallsToCSV = (calls: Call[], filename: string, agentsMap?: Map<string, string>) => {
  if (calls.length === 0) {
    return { success: false, error: 'No calls to export' };
  }

  // Collect all unique result keys across all calls for flat columns
  const resultKeysSet = new Set();
  calls.forEach(call => {
    if (call.result && typeof call.result === 'object') {
      Object.keys(call.result).forEach(key => resultKeysSet.add(key));
    }
  });
  const resultKeys = Array.from(resultKeysSet).sort();

  const baseHeaders = [
    'Call ID',
    'Callee Name',
    'Mobile Number',
    'Agent Name',
    'Status',
    'Lifecycle Status',
    'Duration (minutes)',
    'Duration (seconds)',
    'Engagement Status',
    'Answered By',
    'Created At',
    'Started At',
    'Ended At',
    'Recording URL',
    'Custom Data',
  ];

  // Append each result key as its own column (prefixed with "Result: ")
  const headers = [
    ...baseHeaders,
    ...resultKeys.map(key => `Result: ${key}`),
  ];

  const rows = calls.map(call => {
    const agentName = call.agent?.name || agentsMap?.get(call.agent_id) || call.agent_id;
    const baseRow = [
      call.id,
      call.callee_name,
      call.mobile_number,
      agentName,
      call.status,
      call.lifecycle_status,
      call.duration_minutes?.toFixed(2) || '',
      call.duration_seconds?.toString() || '',
      call.engagement_status || '',
      call.answered_by || '',
      call.created_at,
      call.started_at || '',
      call.ended_at || '',
      call.recording_url || '',
      call.custom_data ? JSON.stringify(call.custom_data) : '',
    ];

    // Flatten each result key into its own column
    const resultCells = resultKeys.map(key => {
      const val = call.result?.[key];
      if (val === undefined || val === null) return '';
      if (typeof val === 'object') return JSON.stringify(val);
      return String(val);
    });

    return [...baseRow, ...resultCells];
  });

  const csvContent = [
    headers.join(','),
    ...rows.map(row => row.map(cell => `"${String(cell).replace(/"/g, '""')}"`).join(','))
  ].join('\n');

  const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
  const link = document.createElement('a');
  link.href = URL.createObjectURL(blob);
  link.download = `${filename}_${new Date().toISOString().split('T')[0]}.csv`;
  link.click();
  URL.revokeObjectURL(link.href);
  return { success: true };
};

// ============================================================================
// UTILITY COMPONENTS
// ============================================================================
const LoadingSpinner = () => (
  <div className="flex items-center justify-center p-8">
    <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-secondary-500"></div>
  </div>
);

// Skeleton loader components for smoother loading states
const Skeleton = ({ className = '' }: { className?: string }) => (
  <div className={`bg-gray-200 rounded animate-pulse-soft ${className}`} />
);

const SkeletonCard = () => (
  <Card hover={false} className="p-6">
    <div className="flex items-center gap-4 mb-4">
      <Skeleton className="w-12 h-12 rounded-full" />
      <div className="flex-1">
        <Skeleton className="h-5 w-32 mb-2" />
        <Skeleton className="h-4 w-24" />
      </div>
    </div>
    <Skeleton className="h-4 w-full mb-2" />
    <Skeleton className="h-4 w-3/4" />
  </Card>
);

const SkeletonTable = ({ rows = 5 }: { rows?: number }) => (
  <div className="overflow-x-auto">
    <table className="w-full">
      <thead>
        <tr className="bg-gray-50">
          {[1, 2, 3, 4, 5].map(i => (
            <th key={i} className="px-4 py-3"><Skeleton className="h-4 w-20" /></th>
          ))}
        </tr>
      </thead>
      <tbody className="divide-y divide-gray-200">
        {Array.from({ length: rows }).map((_, i) => (
          <tr key={i}>
            {[1, 2, 3, 4, 5].map(j => (
              <td key={j} className="px-4 py-3"><Skeleton className="h-4 w-full" /></td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  </div>
);

const SkeletonStats = () => (
  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
    {[1, 2, 3, 4].map(i => (
      <Card key={i} hover={false} className="p-6">
        <Skeleton className="h-4 w-24 mb-2" />
        <Skeleton className="h-8 w-16" />
      </Card>
    ))}
  </div>
);

// Animated page wrapper for smooth transitions
const PageTransition = ({ children }: { children: React.ReactNode }) => (
  <div className="animate-fade-in">{children}</div>
);

const Alert = ({ type, message, onClose }: { type: 'success' | 'error'; message: string; onClose?: () => void }) => (
  <div className={`p-4 rounded-lg mb-4 flex items-center justify-between ${type === 'success' ? 'bg-green-100 text-green-800 border border-green-200' : 'bg-red-100 text-red-800 border border-red-200'}`}>
    <span>{message}</span>
    {onClose && <button onClick={onClose} className="ml-4 text-lg font-bold hover:opacity-70">&times;</button>}
  </div>
);

const Button = ({ children, onClick, variant = 'primary', disabled = false, className = '', type = 'button' }: {
  children: React.ReactNode;
  onClick?: () => void;
  variant?: 'primary' | 'secondary' | 'outline' | 'danger';
  disabled?: boolean;
  className?: string;
  type?: 'button' | 'submit';
}) => {
  const baseStyles = 'px-4 py-2 rounded-lg font-medium transition-all duration-150 disabled:opacity-50 disabled:cursor-not-allowed active:scale-[0.98] shadow-sm hover:shadow-md';
  const variants = {
    primary: 'bg-secondary-500 text-white hover:bg-secondary-600 shadow-secondary-500/25',
    secondary: 'bg-primary-500 text-white hover:bg-primary-600 shadow-primary-500/25',
    outline: 'border-2 border-secondary-500 text-secondary-500 hover:bg-secondary-50 shadow-none hover:shadow-sm',
    danger: 'bg-red-500 text-white hover:bg-red-600 shadow-red-500/25',
  };
  return (
    <button type={type} onClick={onClick} disabled={disabled} className={`${baseStyles} ${variants[variant]} ${className}`}>
      {children}
    </button>
  );
};

const Input = ({ label, ...props }: { label: string } & React.InputHTMLAttributes<HTMLInputElement>) => (
  <div className="mb-4">
    <label className="block text-sm font-medium text-gray-700 mb-1">{label}</label>
    <input {...props} className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-secondary-500 focus:border-secondary-500 outline-none transition-colors" />
  </div>
);

const Select = ({ label, options, ...props }: { label: string; options: { value: string; label: string }[] } & React.SelectHTMLAttributes<HTMLSelectElement>) => (
  <div className="mb-4">
    <label className="block text-sm font-medium text-gray-700 mb-1">{label}</label>
    <select {...props} className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-secondary-500 focus:border-secondary-500 outline-none transition-colors bg-white">
      {options.map(opt => <option key={opt.value} value={opt.value}>{opt.label}</option>)}
    </select>
  </div>
);

const TextArea = ({ label, ...props }: { label: string } & React.TextareaHTMLAttributes<HTMLTextAreaElement>) => (
  <div className="mb-4">
    <label className="block text-sm font-medium text-gray-700 mb-1">{label}</label>
    <textarea {...props} className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-secondary-500 focus:border-secondary-500 outline-none transition-colors resize-y" />
  </div>
);

const Card = ({ children, className = '', onClick, hover = true }: { children: React.ReactNode; className?: string; onClick?: () => void; hover?: boolean }) => (
  <div
    className={`bg-white rounded-xl shadow-md border border-gray-100 transition-all duration-200 ${hover ? 'hover:shadow-lg hover:-translate-y-0.5' : ''} ${onClick ? 'cursor-pointer' : ''} ${className}`}
    onClick={onClick}
  >
    {children}
  </div>
);

const StatusBadge = ({ status }: { status: string }) => {
  const colors: Record<string, string> = {
    ACTIVE: 'bg-green-100 text-green-800',
    DRAFT: 'bg-gray-100 text-gray-800',
    COMPLETED: 'bg-green-100 text-green-800',
    IN_PROGRESS: 'bg-blue-100 text-blue-800',
    NOT_STARTED: 'bg-gray-100 text-gray-800',
    SCHEDULED: 'bg-yellow-100 text-yellow-800',
    NOT_CONNECTED: 'bg-orange-100 text-orange-800',
    FAILED: 'bg-red-100 text-red-800',
    CANCELLED: 'bg-gray-100 text-gray-800',
  };
  return (
    <span className={`px-2 py-1 rounded-full text-xs font-medium ${colors[status] || 'bg-gray-100 text-gray-800'}`}>
      {status.replace(/_/g, ' ')}
    </span>
  );
};

// ============================================================================
// LOGIN SCREEN
// ============================================================================
// Signup Screen (for invited users)
const SignupScreen = ({ email, name, onComplete }: { email: string; name: string; onComplete: (role?: UserRole, name?: string) => void }) => {
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    // Strong password validation
    if (password.length < 8) {
      setError('Password must be at least 8 characters');
      return;
    }
    if (!/[A-Z]/.test(password)) {
      setError('Password must contain at least one uppercase letter');
      return;
    }
    if (!/[a-z]/.test(password)) {
      setError('Password must contain at least one lowercase letter');
      return;
    }
    if (!/[0-9]/.test(password)) {
      setError('Password must contain at least one number');
      return;
    }
    if (password !== confirmPassword) {
      setError('Passwords do not match');
      return;
    }

    setLoading(true);
    setError('');

    try {
      const userCredential = await authService.completeSignup(email, password, name);
      localStorage.setItem(STORAGE_KEYS.AUTHENTICATED, 'true');
      // Clear invite params from URL
      window.history.replaceState({}, '', window.location.pathname);
      // Get user role from verification
      const verification = await authService.verifyTenant(userCredential.user.uid);
      const userRole = verification.user?.role || 'user';
      const userName = verification.user?.name || name;
      onComplete(userRole, userName);
    } catch (err) {
      setError(err.message || 'Failed to create account');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-secondary-500 to-secondary-700 p-4">
      <Card className="w-full max-w-md p-8">
        <div className="text-center mb-8">
          <img src={brandingService.getBranding().logoUrl} alt={brandingService.getBranding().appName} className="h-16 object-contain mx-auto mb-4" />
          <h1 className="text-2xl font-bold text-gray-900">Welcome, {name}!</h1>
          <p className="text-gray-500 mt-2">Set up your password to get started</p>
        </div>

        <form onSubmit={handleSubmit}>
          {error && <Alert type="error" message={error} onClose={() => setError('')} />}
          <div className="mb-4">
            <Input
              label="Email"
              type="email"
              value={email}
              disabled
            />
          </div>
          <div className="mb-4">
            <Input
              label="Password"
              type="password"
              value={password}
              onChange={e => setPassword(e.target.value)}
              placeholder="Create a password"
              required
            />
          </div>
          <Input
            label="Confirm Password"
            type="password"
            value={confirmPassword}
            onChange={e => setConfirmPassword(e.target.value)}
            placeholder="Confirm your password"
            required
          />
          <Button type="submit" className="w-full mt-4" disabled={loading}>
            {loading ? 'Creating Account...' : 'Create Account'}
          </Button>
        </form>
      </Card>
    </div>
  );
};

const LoginScreen = ({ onLogin }: { onLogin: (role?: UserRole, name?: string) => void }) => {
  const [mode, setMode] = useState('login');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');
  const [success, setSuccess] = useState('');
  const [loading, setLoading] = useState(false);

  // Check for invite parameter in URL
  const urlParams = new URLSearchParams(window.location.search);
  const inviteEmail = urlParams.get('invite');

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError('');
    setSuccess('');
    setLoading(true);

    try {
      if (!isFirebaseConfigured()) {
        // Firebase not configured - show error instead of fallback
        setError('Authentication is not configured. Please contact your administrator.');
        return;
      } else {
        // Firebase mode
        const userCredential = await authService.signIn(email, password);

        // Verify user belongs to this tenant/subdomain and is active
        const verification = await authService.verifyTenant(userCredential.user.uid);
        if (!verification.valid) {
          await authService.signOut();
          if (verification.reason === 'inactive') {
            throw new Error('Your account has been deactivated. Please contact your administrator.');
          } else if (verification.reason === 'superadmin_wrong_domain') {
            throw new Error('Superadmin accounts can only sign in from the main domain (recex-ai.com). Please go to recex-ai.com to sign in.');
          } else if (verification.reason === 'tenant_not_found') {
            throw new Error('This organization no longer exists. Please contact your administrator.');
          } else if (verification.reason === 'tenant_inactive') {
            throw new Error('This organization has been deactivated. Please contact your administrator.');
          } else if (verification.reason === 'wrong_tenant') {
            throw new Error('Your account is not registered on this domain');
          } else {
            throw new Error('Your account is not registered on this domain');
          }
        }

        localStorage.setItem(STORAGE_KEYS.AUTHENTICATED, 'true');
        // Pass user role and name to the login handler
        const userRole = verification.user?.role || 'user';
        const userName = verification.user?.name || '';
        onLogin(userRole, userName);
      }
    } catch (err) {
      if (err.code === 'auth/user-not-found') {
        setError('No account found with this email');
      } else if (err.code === 'auth/wrong-password') {
        setError('Incorrect password');
      } else if (err.code === 'auth/invalid-credential') {
        setError('Invalid email or password');
      } else {
        setError(err.message || 'Failed to sign in');
      }
    } finally {
      setLoading(false);
    }
  };

  const handleForgotPassword = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!email) {
      setError('Please enter your email');
      return;
    }

    setError('');
    setLoading(true);

    try {
      await authService.sendPasswordReset(email);
      setSuccess('Password reset email sent! Check your inbox.');
    } catch (err) {
      setError(err.message || 'Failed to send reset email');
    } finally {
      setLoading(false);
    }
  };

  // If there's an invite, show signup form
  if (inviteEmail && isFirebaseConfigured()) {
    const inviteName = urlParams.get('name') || 'User';
    return <SignupScreen email={decodeURIComponent(inviteEmail)} name={inviteName} onComplete={onLogin} />;
  }

  return (
    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-secondary-500 to-secondary-700 p-4">
      <Card className="w-full max-w-md p-8">
        <div className="text-center mb-8">
          <img src={brandingService.getBranding().logoUrl} alt={brandingService.getBranding().appName} className="h-16 object-contain mx-auto mb-4" />
          <h1 className="text-2xl font-bold text-gray-900">{brandingService.getBranding().appName}</h1>
          <p className="text-gray-500 mt-2">
            {mode === 'login' ? 'Sign in to continue' : 'Reset your password'}
          </p>
        </div>

        {mode === 'login' ? (
          <form onSubmit={handleSubmit}>
            {error && <Alert type="error" message={error} onClose={() => setError('')} />}
            {success && <Alert type="success" message={success} onClose={() => setSuccess('')} />}

            {isFirebaseConfigured() ? (
              <>
                <div className="mb-4">
                  <Input
                    label="Email"
                    type="email"
                    value={email}
                    onChange={e => setEmail(e.target.value)}
                    placeholder="Enter your email"
                    required
                  />
                </div>
                <Input
                  label="Password"
                  type="password"
                  value={password}
                  onChange={e => setPassword(e.target.value)}
                  placeholder="Enter your password"
                  required
                />
                <Button type="submit" className="w-full mt-4" disabled={loading}>
                  {loading ? 'Signing in...' : 'Sign In'}
                </Button>
                <button
                  type="button"
                  onClick={() => setMode('forgot')}
                  className="w-full mt-3 text-sm text-secondary-600 hover:text-secondary-700"
                >
                  Forgot password?
                </button>
              </>
            ) : (
              <>
                <Input
                  label="Password"
                  type="password"
                  value={password}
                  onChange={e => setPassword(e.target.value)}
                  placeholder="Enter password"
                  required
                />
                <Button type="submit" className="w-full mt-4" disabled={loading}>
                  {loading ? 'Signing in...' : 'Sign In'}
                </Button>
                <p className="mt-4 text-xs text-gray-400 text-center">
                  Firebase not configured. Using demo mode.
                </p>
              </>
            )}
          </form>
        ) : (
          <form onSubmit={handleForgotPassword}>
            {error && <Alert type="error" message={error} onClose={() => setError('')} />}
            {success && <Alert type="success" message={success} onClose={() => setSuccess('')} />}

            <Input
              label="Email"
              type="email"
              value={email}
              onChange={e => setEmail(e.target.value)}
              placeholder="Enter your email"
              required
            />
            <Button type="submit" className="w-full mt-4" disabled={loading}>
              {loading ? 'Sending...' : 'Send Reset Link'}
            </Button>
            <button
              type="button"
              onClick={() => setMode('login')}
              className="w-full mt-3 text-sm text-secondary-600 hover:text-secondary-700"
            >
              Back to sign in
            </button>
          </form>
        )}
      </Card>
    </div>
  );
};

// ============================================================================
// AGENTS SECTION
// ============================================================================
// Voice persona options with visual data
const voicePersonas = [
  { id: 'NEHA', name: 'Neha', gender: 'Female', avatarUrl: '/images/neha.png' },
  { id: 'ROY', name: 'Roy', gender: 'Male', avatarUrl: '/images/roy.png' },
];

const languageOptions = [
  { value: 'ENGLISH', label: 'English' },
  { value: 'HINDI', label: 'Hindi' },
  { value: 'TAMIL', label: 'Tamil' },
  { value: 'KANNADA', label: 'Kannada' },
  { value: 'MARATHI', label: 'Marathi' },
  { value: 'TELUGU', label: 'Telugu' },
];

// Agent templates for quick-start creation
const agentTemplates = [
  {
    id: 'blank',
    name: 'Blank Agent',
    icon: '✏️',
    description: 'Start from scratch with a blank canvas',
    objective: '',
    agent_prompt: '',
    introduction: '',
    result_prompt: '',
    result_fields: [],
  },
  {
    id: 'lead_qualification',
    name: 'Lead Qualification',
    icon: '🎯',
    description: 'Qualify inbound leads by assessing interest, budget, and timeline',
    objective: 'Qualify leads by understanding their interest level, budget range, and purchase timeline',
    agent_prompt: 'You are a friendly sales qualification agent for {company}. Your goal is to have a natural conversation to understand the prospect\'s needs.\n\nKey areas to explore:\n1. What problem they are trying to solve\n2. Their budget range\n3. Their decision timeline\n4. Who the decision makers are\n\nBe conversational and helpful — never pushy. If they are not interested, thank them and end the call politely.',
    introduction: 'Hi {callee_name}, this is {persona_name} from {company}. I saw you recently showed interest in our product and I just wanted to quickly understand how we can help you. Do you have a couple of minutes?',
    result_prompt: 'Based on the conversation, determine the lead qualification status and key details.',
    result_fields: [
      { key: 'interest_level', description: 'high, medium, low, or not_interested' },
      { key: 'budget_range', description: 'Budget mentioned, if any' },
      { key: 'timeline', description: 'When they plan to purchase' },
      { key: 'next_step', description: 'Agreed next action, if any' },
    ],
  },
  {
    id: 'appointment_booking',
    name: 'Appointment Booking',
    icon: '📅',
    description: 'Schedule appointments or demos with interested prospects',
    objective: 'Book a meeting or demo appointment with the prospect',
    agent_prompt: 'You are a scheduling assistant for {company}. Your goal is to book a meeting or demo with the prospect.\n\nConversation flow:\n1. Introduce yourself and the purpose of the call\n2. Confirm their interest in a meeting/demo\n3. Suggest available time slots\n4. Confirm the booking details\n\nBe efficient but friendly. If they are busy, offer to call back at a better time.',
    introduction: 'Hi {callee_name}, this is {persona_name} from {company}. I\'m calling to schedule a quick demo of our solution. Would you have a few minutes to find a convenient time?',
    result_prompt: 'Extract the appointment details from the conversation.',
    result_fields: [
      { key: 'appointment_booked', description: 'yes or no' },
      { key: 'preferred_date', description: 'Date mentioned by prospect' },
      { key: 'preferred_time', description: 'Time mentioned by prospect' },
      { key: 'callback_requested', description: 'yes or no' },
    ],
  },
  {
    id: 'customer_feedback',
    name: 'Customer Feedback',
    icon: '⭐',
    description: 'Collect customer satisfaction feedback and NPS scores',
    objective: 'Collect customer feedback about their recent experience with our product or service',
    agent_prompt: 'You are a customer feedback agent for {company}. Your goal is to collect honest feedback about the customer\'s experience.\n\nConversation flow:\n1. Thank them for being a customer\n2. Ask about their overall experience (1-10 rating)\n3. Ask what they liked most\n4. Ask what could be improved\n5. Thank them for their time\n\nBe empathetic and non-defensive. If they have complaints, acknowledge them warmly.',
    introduction: 'Hi {callee_name}, this is {persona_name} from {company}. We truly value your feedback and I\'d love to hear about your recent experience with us. It will only take a couple of minutes — would that be okay?',
    result_prompt: 'Summarize the customer feedback from the conversation.',
    result_fields: [
      { key: 'satisfaction_score', description: 'Rating from 1-10' },
      { key: 'positive_feedback', description: 'What they liked' },
      { key: 'improvement_areas', description: 'What could be better' },
      { key: 'would_recommend', description: 'yes, no, or maybe' },
    ],
  },
  {
    id: 'payment_reminder',
    name: 'Payment Reminder',
    icon: '💳',
    description: 'Send gentle payment reminders for overdue invoices',
    objective: 'Remind customers about pending payments and understand any issues preventing payment',
    agent_prompt: 'You are a polite payment reminder agent for {company}. Your goal is to remind the customer about their pending payment.\n\nConversation flow:\n1. Greet and identify the purpose\n2. Mention the pending amount and due date\n3. Ask if they are aware of the pending payment\n4. Understand any issues or concerns\n5. Offer payment assistance if needed\n\nBe professional and empathetic. Never be aggressive or threatening. If they have difficulties, offer to connect them with support.',
    introduction: 'Hi {callee_name}, this is {persona_name} from {company}. I\'m reaching out regarding a pending payment on your account. Do you have a moment to discuss this?',
    result_prompt: 'Extract the payment status and any concerns from the conversation.',
    result_fields: [
      { key: 'payment_status', description: 'will_pay, already_paid, disputed, or unable_to_pay' },
      { key: 'promised_date', description: 'When they committed to pay' },
      { key: 'reason_for_delay', description: 'Why payment is pending' },
      { key: 'needs_followup', description: 'yes or no' },
    ],
  },
  {
    id: 'event_rsvp',
    name: 'Event RSVP',
    icon: '🎪',
    description: 'Invite contacts and confirm attendance for events',
    objective: 'Invite the contact to an upcoming event and confirm their attendance',
    agent_prompt: 'You are an event coordinator for {company}. Your goal is to invite the contact to an upcoming event and confirm their attendance.\n\nConversation flow:\n1. Introduce yourself and the event\n2. Share key event details (date, time, venue)\n3. Highlight what makes the event valuable\n4. Ask if they can attend\n5. Confirm registration details\n\nBe enthusiastic but not pushy. If they cannot attend, ask if they would like to be notified about future events.',
    introduction: 'Hi {callee_name}, this is {persona_name} from {company}. I\'m excited to invite you to our upcoming event! Do you have a quick moment to hear about it?',
    result_prompt: 'Extract the RSVP details from the conversation.',
    result_fields: [
      { key: 'rsvp_status', description: 'attending, not_attending, or maybe' },
      { key: 'number_of_guests', description: 'How many people attending' },
      { key: 'dietary_restrictions', description: 'Any food requirements' },
      { key: 'notify_future_events', description: 'yes or no' },
    ],
  },
];

// Helper: generate prompt suggestion based on objective text
const generatePromptSuggestion = (objective: string): string => {
  if (!objective.trim()) return '';
  return `You are a professional AI voice agent for {company}. Your objective is to ${objective.toLowerCase().replace(/\.$/, '')}.\n\nConversation guidelines:\n1. Be friendly, professional, and concise\n2. Listen actively and respond to the customer's concerns\n3. Stay focused on the objective\n4. If the customer is not interested, thank them politely and end the call\n\nUse {callee_name} to address the customer by name when appropriate.`;
};

const generateIntroSuggestion = (objective: string, personaName: string): string => {
  if (!objective.trim()) return '';
  const name = personaName || '{persona_name}';
  return `Hi {callee_name}, this is ${name} from {company}. I'm reaching out regarding ${objective.toLowerCase().replace(/\.$/, '')}. Do you have a moment?`;
};

// Visual Schema Builder component
const SchemaFieldBuilder = ({ fields, onChange }: {
  fields: Array<{ key: string; description: string }>;
  onChange: (fields: Array<{ key: string; description: string }>) => void;
}) => {
  const addField = () => {
    onChange([...fields, { key: '', description: '' }]);
  };

  const updateField = (index: number, prop: 'key' | 'description', value: string) => {
    const updated = fields.map((f, i) => i === index ? { ...f, [prop]: prop === 'key' ? value.replace(/[^a-zA-Z0-9_]/g, '_').toLowerCase() : value } : f);
    onChange(updated);
  };

  const removeField = (index: number) => {
    onChange(fields.filter((_, i) => i !== index));
  };

  return (
    <div>
      <div className="space-y-3">
        {fields.map((field, index) => (
          <div key={index} className="flex items-start gap-3 p-3 bg-gray-50 rounded-lg">
            <div className="flex-1">
              <input
                type="text"
                value={field.key}
                onChange={e => updateField(index, 'key', e.target.value)}
                placeholder="field_name"
                className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:ring-2 focus:ring-primary-500 focus:border-primary-500 font-mono"
              />
            </div>
            <div className="flex-[2]">
              <input
                type="text"
                value={field.description}
                onChange={e => updateField(index, 'description', e.target.value)}
                placeholder="Expected values, e.g. yes, no, or maybe"
                className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
              />
            </div>
            <button
              onClick={() => removeField(index)}
              className="p-1.5 text-gray-400 hover:text-red-500 transition-colors"
              title="Remove field"
            >
              <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
              </svg>
            </button>
          </div>
        ))}
      </div>
      <button
        onClick={addField}
        className="mt-3 flex items-center gap-2 text-sm text-primary-600 hover:text-primary-700 font-medium transition-colors"
      >
        <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
        </svg>
        Add Field
      </button>
    </div>
  );
};

// Create Agent Wizard - Multi-step visual wizard
const CreateAgentWizard = ({ onSave, onCancel }: {
  onSave: (data: Partial<Agent>) => Promise<void>;
  onCancel: () => void;
}) => {
  const [step, setStep] = useState(1);
  const [selectedTemplate, setSelectedTemplate] = useState('');
  const [formData, setFormData] = useState({
    name: '',
    language: 'ENGLISH',
    voice_persona: '',
    persona_name: '',
    agent_prompt: '',
    objective: '',
    introduction: '',
    result_prompt: '',
  });
  const [schemaFields, setSchemaFields] = useState([
    { key: 'interest_status', description: '' },
  ]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  const update = (field: string, value: string) => setFormData(prev => ({ ...prev, [field]: value }));

  // Apply a template to pre-fill all form fields
  const applyTemplate = (templateId: string) => {
    setSelectedTemplate(templateId);
    const template = agentTemplates.find(t => t.id === templateId);
    if (!template) return;
    if (templateId === 'blank') {
      setFormData(prev => ({
        ...prev,
        objective: '',
        agent_prompt: '',
        introduction: '',
        result_prompt: '',
      }));
      setSchemaFields([{ key: '', description: '' }]);
    } else {
      setFormData(prev => ({
        ...prev,
        objective: template.objective,
        agent_prompt: template.agent_prompt,
        introduction: template.introduction,
        result_prompt: template.result_prompt,
      }));
      setSchemaFields(template.result_fields.map(f => ({ ...f })));
    }
  };

  const handleSubmit = async () => {
    setLoading(true);
    setError('');
    try {
      // Build result_schema from visual fields
      const resultSchema: Record<string, string> = {};
      for (const field of schemaFields) {
        if (field.key.trim()) {
          resultSchema[field.key.trim()] = '';
        }
      }
      await onSave({ ...formData, result_schema: resultSchema });
    } catch (err) {
      setError(err instanceof Error ? err.message : 'An error occurred');
    } finally {
      setLoading(false);
    }
  };

  const stepTitles = ['Select Voice', 'Basic Info', 'Behavior', 'Results'];
  const isStep1Valid = formData.voice_persona && formData.language;
  const isStep2Valid = formData.name.trim() && formData.objective.trim();
  const isStep3Valid = formData.agent_prompt.trim() && formData.introduction.trim();

  const canProceed = () => {
    switch (step) {
      case 1: return isStep1Valid;
      case 2: return isStep2Valid;
      case 3: return isStep3Valid;
      case 4: return true;
      default: return false;
    }
  };

  return (
    <div>
      {/* Breadcrumb */}
      <div className="text-sm text-gray-500 mb-2">
        <span onClick={onCancel} className="cursor-pointer hover:text-gray-900 transition-colors">Agents</span> / <span className="text-gray-900">New Agent</span>
      </div>

      {/* Step indicator */}
      <div className="flex items-center gap-2 text-sm text-gray-500 mb-2">
        <span>Step {step} of 4</span>
        <span>•</span>
        <span>{stepTitles[step - 1]}</span>
      </div>

      {/* Title */}
      <h1 className="text-2xl font-bold text-gray-900 mb-1">
        {step === 1 ? 'Create New Agent' : formData.name || 'New Agent'}
      </h1>
      <p className="text-sm text-gray-500 mb-6">
        {step === 1 ? 'Select a voice persona for your agent' : `Voice: ${voicePersonas.find(v => v.id === formData.voice_persona)?.name || ''}`}
      </p>

      {error && <Alert type="error" message={error} onClose={() => setError('')} />}

      {/* Step progress bar */}
      <div className="flex gap-2 mb-8">
        {[1, 2, 3, 4].map(s => (
          <div
            key={s}
            className={`h-1 flex-1 rounded-full ${s <= step ? 'bg-primary-500' : 'bg-gray-200'}`}
          />
        ))}
      </div>

      <Card className="p-6">
        {/* Step 1: Template, Language and Voice Selection */}
        {step === 1 && (
          <div>
            {/* Template Selection */}
            <h3 className="text-lg font-semibold text-gray-900 mb-2">Start with a Template</h3>
            <p className="text-sm text-gray-600 mb-4">Pick a template to pre-fill your agent's prompts and result fields, or start blank</p>
            <div className="grid grid-cols-2 md:grid-cols-3 gap-3 mb-8">
              {agentTemplates.map(template => (
                <div
                  key={template.id}
                  onClick={() => applyTemplate(template.id)}
                  className={`p-3 rounded-lg border-2 cursor-pointer transition-all hover:shadow-sm ${
                    selectedTemplate === template.id
                      ? 'border-primary-500 bg-primary-50'
                      : 'border-gray-200 hover:border-gray-300'
                  }`}
                >
                  <div className="flex items-start gap-2">
                    <span className="text-lg">{template.icon}</span>
                    <div className="min-w-0">
                      <h4 className="font-medium text-gray-900 text-sm">{template.name}</h4>
                      <p className="text-xs text-gray-500 mt-0.5 line-clamp-2">{template.description}</p>
                    </div>
                  </div>
                  {selectedTemplate === template.id && (
                    <div className="mt-2 flex justify-end">
                      <div className="w-4 h-4 rounded-full bg-primary-500 flex items-center justify-center">
                        <svg className="w-2.5 h-2.5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
                        </svg>
                      </div>
                    </div>
                  )}
                </div>
              ))}
            </div>

            {/* Divider */}
            <div className="border-t border-gray-200 pt-6">
              <h3 className="text-lg font-semibold text-gray-900 mb-2">Select Language & Voice</h3>
              <p className="text-sm text-gray-600 mb-4">Choose the language and voice persona for your AI agent</p>

              <Select
                label="Language *"
                value={formData.language}
                onChange={e => update('language', e.target.value)}
                options={languageOptions}
              />

              <div className="mt-6">
                <label className="block text-sm font-medium text-gray-700 mb-3">Voice Persona *</label>
                <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                  {voicePersonas.map(persona => (
                    <div
                      key={persona.id}
                      onClick={() => update('voice_persona', persona.id)}
                      className={`p-4 rounded-xl border-2 cursor-pointer transition-all hover:shadow-md ${
                        formData.voice_persona === persona.id
                          ? 'border-primary-500 bg-primary-50'
                          : 'border-gray-200 hover:border-gray-300'
                      }`}
                    >
                      {/* Avatar */}
                      <img
                        src={persona.avatarUrl}
                        alt={persona.name}
                        className="w-20 h-20 mx-auto mb-3 rounded-full object-cover"
                      />

                      {/* Name */}
                      <div className="text-center">
                        <h4 className="font-semibold text-gray-900">{persona.name}</h4>
                      </div>

                      {/* Selection indicator */}
                      {formData.voice_persona === persona.id && (
                        <div className="mt-3 flex justify-center">
                          <div className="w-5 h-5 rounded-full bg-primary-500 flex items-center justify-center">
                            <svg className="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
                            </svg>
                          </div>
                        </div>
                      )}
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        )}

        {/* Step 2: Basic Info */}
        {step === 2 && (
          <div>
            <h3 className="text-lg font-semibold text-gray-900 mb-4">Basic Information</h3>
            <p className="text-sm text-gray-600 mb-6">Define your agent's identity and purpose</p>

            <Input
              label="Agent Name *"
              value={formData.name}
              onChange={e => update('name', e.target.value)}
              required
              maxLength={64}
              placeholder="e.g., Sales Assistant, Support Bot"
            />

            <Input
              label="Persona Name"
              value={formData.persona_name}
              onChange={e => update('persona_name', e.target.value)}
              placeholder="e.g., Seema, Raj - The name the agent uses for itself"
            />

            <TextArea
              label="Objective *"
              value={formData.objective}
              onChange={e => update('objective', e.target.value)}
              rows={3}
              required
              placeholder="What is the business goal of this agent? e.g., Qualify leads for product demo, Schedule appointments..."
            />

            {/* Tip box */}
            <div className="mt-4 p-3 bg-blue-50 border border-blue-200 rounded-lg">
              <div className="flex items-start gap-2">
                <svg className="w-4 h-4 text-blue-500 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                <p className="text-xs text-blue-700">
                  <strong>Tip:</strong> Write a clear, specific objective. It helps generate better agent prompts in the next step. For example: "Qualify inbound leads by assessing their interest level, budget, and purchase timeline."
                </p>
              </div>
            </div>
          </div>
        )}

        {/* Step 3: Behavior */}
        {step === 3 && (
          <div>
            <h3 className="text-lg font-semibold text-gray-900 mb-4">Agent Behavior</h3>
            <p className="text-sm text-gray-600 mb-6">Configure how your agent communicates</p>

            <div className="mb-1">
              <label className="block text-sm font-medium text-gray-700 mb-1">Agent Prompt *</label>
            </div>
            {/* Generate suggestion button — only show if prompt is empty and objective exists */}
            {!formData.agent_prompt.trim() && formData.objective.trim() && (
              <button
                onClick={() => {
                  update('agent_prompt', generatePromptSuggestion(formData.objective));
                  if (!formData.introduction.trim()) {
                    update('introduction', generateIntroSuggestion(formData.objective, formData.persona_name));
                  }
                }}
                className="mb-2 inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-primary-700 bg-primary-50 border border-primary-200 rounded-md hover:bg-primary-100 transition-colors"
              >
                <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
                </svg>
                Auto-generate from objective
              </button>
            )}
            <TextArea
              value={formData.agent_prompt}
              onChange={e => update('agent_prompt', e.target.value)}
              rows={6}
              required
              placeholder="System prompt that defines the agent's behavior, tone, and conversation style..."
            />

            <TextArea
              label="Introduction *"
              value={formData.introduction}
              onChange={e => update('introduction', e.target.value)}
              rows={3}
              required
              placeholder="Opening message when call connects, e.g.: Hi {callee_name}, this is {persona_name} from {company}..."
            />

            {/* Variable reference */}
            <div className="mt-4 p-3 bg-gray-50 border border-gray-200 rounded-lg">
              <h4 className="text-xs font-semibold text-gray-600 uppercase tracking-wide mb-2">Available Variables</h4>
              <div className="flex flex-wrap gap-2">
                {['{persona_name}', '{company}', '{callee_name}'].map(v => (
                  <code key={v} className="px-2 py-0.5 text-xs bg-white border border-gray-300 rounded text-gray-700">{v}</code>
                ))}
              </div>
              <p className="text-xs text-gray-500 mt-2">Use these in your prompt and introduction. They will be replaced with actual values during calls.</p>
            </div>
          </div>
        )}

        {/* Step 4: Results */}
        {step === 4 && (
          <div>
            <h3 className="text-lg font-semibold text-gray-900 mb-4">Result Configuration</h3>
            <p className="text-sm text-gray-600 mb-6">Define what data to extract from each call. These fields will appear in your call results.</p>

            <TextArea
              label="Result Prompt"
              value={formData.result_prompt}
              onChange={e => update('result_prompt', e.target.value)}
              rows={3}
              placeholder="Instructions for extracting results, e.g.: Based on the conversation, determine the customer's interest level and whether they want a callback..."
            />

            {/* Visual Schema Builder */}
            <div className="mt-6">
              <label className="block text-sm font-medium text-gray-700 mb-1">Result Fields</label>
              <p className="text-xs text-gray-500 mb-3">Define the fields to capture from each call. The field name is used as the key in call results.</p>

              <div className="mb-3 flex gap-3 text-xs font-medium text-gray-500 uppercase tracking-wide px-3">
                <div className="flex-1">Field Name</div>
                <div className="flex-[2]">Expected Values / Description</div>
                <div className="w-8"></div>
              </div>

              <SchemaFieldBuilder fields={schemaFields} onChange={setSchemaFields} />
            </div>

            {/* JSON Preview */}
            {schemaFields.some(f => f.key.trim()) && (
              <div className="mt-6 p-4 bg-gray-50 rounded-lg">
                <h4 className="text-xs font-semibold text-gray-600 uppercase tracking-wide mb-2">JSON Preview</h4>
                <pre className="text-xs text-gray-600 overflow-x-auto">
                  {JSON.stringify(
                    Object.fromEntries(schemaFields.filter(f => f.key.trim()).map(f => [f.key.trim(), ''])),
                    null,
                    2
                  )}
                </pre>
              </div>
            )}

            {/* Tip */}
            <div className="mt-4 p-3 bg-blue-50 border border-blue-200 rounded-lg">
              <div className="flex items-start gap-2">
                <svg className="w-4 h-4 text-blue-500 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                <p className="text-xs text-blue-700">
                  <strong>Tip:</strong> Use descriptive field names like <code className="bg-blue-100 px-1 rounded">interest_level</code> or <code className="bg-blue-100 px-1 rounded">callback_requested</code>. Add expected values in the description to guide the AI (e.g., "yes, no, or maybe").
                </p>
              </div>
            </div>
          </div>
        )}
      </Card>

      {/* Navigation buttons */}
      <div className="flex justify-between mt-6">
        <Button variant="outline" onClick={step === 1 ? onCancel : () => setStep(step - 1)}>
          {step === 1 ? 'Cancel' : 'Back'}
        </Button>

        {step < 4 ? (
          <Button onClick={() => setStep(step + 1)} disabled={!canProceed()}>
            Continue
          </Button>
        ) : (
          <Button onClick={handleSubmit} disabled={loading}>
            {loading ? 'Creating...' : 'Create Agent'}
          </Button>
        )}
      </div>
    </div>
  );
};

// Agent Form for editing (simpler single-page form)
const AgentForm = ({ agent, onSave, onCancel, isEdit = false }: {
  agent?: Agent;
  onSave: (data: Partial<Agent>) => Promise<void>;
  onCancel: () => void;
  isEdit?: boolean;
}) => {
  const [formData, setFormData] = useState({
    name: agent?.name || '',
    language: agent?.language || 'ENGLISH',
    voice_persona: agent?.voice_persona || 'NEHA',
    persona_name: agent?.persona_name || '',
    agent_prompt: agent?.agent_prompt || '',
    objective: agent?.objective || '',
    introduction: agent?.introduction || '',
    result_prompt: agent?.result_prompt || '',
    result_schema: JSON.stringify(agent?.result_schema || { interest_status: '' }, null, 2),
  });
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    setError('');
    try {
      let resultSchema;
      try {
        resultSchema = JSON.parse(formData.result_schema);
      } catch {
        throw new Error('Invalid JSON in result schema');
      }
      await onSave({ ...formData, result_schema: resultSchema });
    } catch (err) {
      setError(err instanceof Error ? err.message : 'An error occurred');
    } finally {
      setLoading(false);
    }
  };

  const update = (field: string, value: string) => setFormData(prev => ({ ...prev, [field]: value }));

  return (
    <form onSubmit={handleSubmit}>
      {error && <Alert type="error" message={error} onClose={() => setError('')} />}

      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <Input label="Agent Name *" value={formData.name} onChange={e => update('name', e.target.value)} required maxLength={64} />
        <Input label="Persona Name" value={formData.persona_name} onChange={e => update('persona_name', e.target.value)} placeholder="e.g., Seema, Raj" />
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <Select
          label="Language *"
          value={formData.language}
          onChange={e => update('language', e.target.value)}
          options={languageOptions}
        />
        <Select
          label="Voice Persona *"
          value={formData.voice_persona}
          onChange={e => update('voice_persona', e.target.value)}
          options={[
            { value: 'NEHA', label: 'Neha (Female)' },
            { value: 'ROY', label: 'Roy (Male)' },
          ]}
        />
      </div>

      <TextArea label="Objective *" value={formData.objective} onChange={e => update('objective', e.target.value)} rows={2} required placeholder="Business objective that guides the agent's responses" />
      <TextArea label="Agent Prompt *" value={formData.agent_prompt} onChange={e => update('agent_prompt', e.target.value)} rows={4} required placeholder="System prompt that defines the agent's behavior" />
      <TextArea label="Introduction *" value={formData.introduction} onChange={e => update('introduction', e.target.value)} rows={2} required placeholder="Opening message when call connects. Use {persona_name}, {company}, etc." />
      <TextArea label="Result Prompt" value={formData.result_prompt} onChange={e => update('result_prompt', e.target.value)} rows={2} placeholder="Instructions for generating structured results" />
      <TextArea label="Result Schema (JSON)" value={formData.result_schema} onChange={e => update('result_schema', e.target.value)} rows={4} placeholder='{"interest_status": "", "qualified": ""}' />

      <div className="flex gap-3 mt-6">
        <Button type="submit" disabled={loading}>{loading ? 'Saving...' : isEdit ? 'Update Agent' : 'Create Agent'}</Button>
        <Button variant="outline" onClick={onCancel}>Cancel</Button>
      </div>
    </form>
  );
};

const AgentsList = ({ onSelect, onCreate }: { onSelect: (id: string, mode: 'view' | 'edit') => void; onCreate: () => void }) => {
  const [agents, setAgents] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');

  useEffect(() => {
    loadAgents();
  }, []);

  const loadAgents = async () => {
    try {
      const data = await api.listAgents();
      setAgents(data.results);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'An error occurred');
    } finally {
      setLoading(false);
    }
  };

  if (loading) return <LoadingSpinner />;

  return (
    <div>
      <div className="flex justify-between items-center mb-6">
        <h2 className="text-xl font-semibold text-gray-900">Your Agents</h2>
        <Button onClick={onCreate}>+ Create Agent</Button>
      </div>

      {error && <Alert type="error" message={error} />}

      {agents.length === 0 ? (
        <Card className="p-8 text-center">
          <div className="text-gray-400 mb-4">
            <svg className="w-16 h-16 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z" />
            </svg>
          </div>
          <h3 className="text-lg font-medium text-gray-900 mb-2">No agents yet</h3>
          <p className="text-gray-500 mb-4">Create your first voice agent to get started</p>
          <Button onClick={onCreate}>Create Agent</Button>
        </Card>
      ) : (
        <div className="grid gap-4">
          {agents.map(agent => (
            <Card key={agent.id} className="p-4 hover:shadow-md transition-shadow">
              <div className="flex items-center justify-between">
                <div className="flex-1">
                  <div className="flex items-center gap-3">
                    <h3 className="font-medium text-gray-900">{agent.name}</h3>
                    <StatusBadge status={agent.status} />
                  </div>
                  <p className="text-sm text-gray-500 mt-1">
                    {agent.voice_persona} ({agent.persona_name || agent.voice_persona}) &bull; {agent.language}
                  </p>
                </div>
                <div className="flex gap-2">
                  <Button variant="outline" onClick={() => onSelect(agent.id, 'view')}>View</Button>
                  <Button variant="secondary" onClick={() => onSelect(agent.id, 'edit')}>Edit</Button>
                </div>
              </div>
            </Card>
          ))}
        </div>
      )}
    </div>
  );
};

const AgentDetail = ({ agentId, onBack, onEdit }: { agentId: string; onBack: () => void; onEdit: () => void }) => {
  const [agent, setAgent] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    api.getAgent(agentId).then(setAgent).finally(() => setLoading(false));
  }, [agentId]);

  if (loading) return <LoadingSpinner />;
  if (!agent) return <Alert type="error" message="Agent not found" />;

  return (
    <div>
      <button onClick={onBack} className="flex items-center text-secondary-500 hover:text-secondary-600 mb-4">
        <svg className="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" /></svg>
        Back to Agents
      </button>

      <Card className="p-6">
        <div className="flex justify-between items-start mb-6">
          <div>
            <h2 className="text-2xl font-bold text-gray-900">{agent.name}</h2>
            <div className="flex items-center gap-3 mt-2">
              <StatusBadge status={agent.status} />
              <span className="text-gray-500">{agent.voice_persona} &bull; {agent.language}</span>
            </div>
          </div>
          <Button onClick={onEdit}>Edit Agent</Button>
        </div>

        <div className="space-y-6">
          <div>
            <h4 className="font-medium text-gray-700 mb-2">Objective</h4>
            <p className="text-gray-600 bg-gray-50 p-3 rounded-lg">{agent.objective || '-'}</p>
          </div>
          <div>
            <h4 className="font-medium text-gray-700 mb-2">Agent Prompt</h4>
            <p className="text-gray-600 bg-gray-50 p-3 rounded-lg whitespace-pre-wrap">{agent.agent_prompt || '-'}</p>
          </div>
          <div>
            <h4 className="font-medium text-gray-700 mb-2">Introduction</h4>
            <p className="text-gray-600 bg-gray-50 p-3 rounded-lg">{agent.introduction || '-'}</p>
          </div>
          {agent.custom_variables && agent.custom_variables.length > 0 && (
            <div>
              <h4 className="font-medium text-gray-700 mb-2">Custom Variables</h4>
              <div className="flex flex-wrap gap-2">
                {agent.custom_variables.map(v => (
                  <span key={v} className="px-2 py-1 bg-secondary-100 text-secondary-700 rounded text-sm">{`{${v}}`}</span>
                ))}
              </div>
            </div>
          )}
          {agent.result_schema && (
            <div>
              <h4 className="font-medium text-gray-700 mb-2">Result Schema</h4>
              <pre className="text-gray-600 bg-gray-50 p-3 rounded-lg text-sm overflow-auto">{JSON.stringify(agent.result_schema, null, 2)}</pre>
            </div>
          )}
        </div>
      </Card>
    </div>
  );
};

const AgentsSection = () => {
  const [view, setView] = useState('list');
  const [selectedAgentId, setSelectedAgentId] = useState(null);
  const [successMsg, setSuccessMsg] = useState('');
  const [listKey, setListKey] = useState(0);

  const handleSelect = (id: string, mode: 'view' | 'edit') => {
    setSelectedAgentId(id);
    setView(mode);
  };

  const handleSaveNew = async (data: Partial<Agent>) => {
    await api.createAgent(data);
    setSuccessMsg('Agent created successfully!');
    setListKey(k => k + 1); // Force list reload
    setView('list');
  };

  const handleSaveEdit = async (data: Partial<Agent>) => {
    if (!selectedAgentId) return;
    await api.updateAgent(selectedAgentId, data);
    setSuccessMsg('Agent updated successfully!');
    setListKey(k => k + 1); // Force list reload
    setView('list');
  };

  return (
    <div>
      {successMsg && <Alert type="success" message={successMsg} onClose={() => setSuccessMsg('')} />}

      {view === 'list' && (
        <AgentsList key={listKey} onSelect={handleSelect} onCreate={() => setView('create')} />
      )}
      {view === 'create' && (
        <CreateAgentWizard onSave={handleSaveNew} onCancel={() => setView('list')} />
      )}
      {view === 'edit' && selectedAgentId && (
        <AgentEditWrapper agentId={selectedAgentId} onSave={handleSaveEdit} onCancel={() => setView('list')} />
      )}
      {view === 'view' && selectedAgentId && (
        <AgentDetail agentId={selectedAgentId} onBack={() => setView('list')} onEdit={() => setView('edit')} />
      )}
    </div>
  );
};

const AgentEditWrapper = ({ agentId, onSave, onCancel }: { agentId: string; onSave: (data: Partial<Agent>) => Promise<void>; onCancel: () => void }) => {
  const [agent, setAgent] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    api.getAgent(agentId).then(setAgent).finally(() => setLoading(false));
  }, [agentId]);

  if (loading) return <LoadingSpinner />;
  if (!agent) return <Alert type="error" message="Agent not found" />;

  return (
    <div>
      <h2 className="text-xl font-semibold text-gray-900 mb-6">Edit Agent: {agent.name}</h2>
      <Card className="p-6">
        <AgentForm agent={agent} onSave={onSave} onCancel={onCancel} isEdit />
      </Card>
    </div>
  );
};

// ============================================================================
// CALLS SECTION
// ============================================================================
const QuickCall = ({ agents, onSuccess }: { agents: Agent[]; onSuccess: () => void }) => {
  const [agentId, setAgentId] = useState('');
  const [selectedAgent, setSelectedAgent] = useState(null);
  const [calleeName, setCalleeName] = useState('');
  const [mobileNumber, setMobileNumber] = useState('');
  const [fromNumber, setFromNumber] = useState('');
  const [tenantNumbers, setTenantNumbers] = useState([]);
  const [timezone, setTimezone] = useState(getDefaultTimezone);
  const [customData, setCustomData] = useState({});
  const [loading, setLoading] = useState(false);
  const [loadingAgent, setLoadingAgent] = useState(false);
  const [error, setError] = useState('');
  const [success, setSuccess] = useState('');

  // Load tenant's assigned phone numbers
  useEffect(() => {
    getTenantPhoneNumbers().then(nums => {
      setTenantNumbers(nums);
      if (nums.length === 1) setFromNumber(nums[0].phone_number);
    });
  }, []);

  // Fetch agent details when agent is selected
  const handleAgentSelect = async (id: string) => {
    setAgentId(id);
    setCustomData({});
    if (id) {
      setLoadingAgent(true);
      try {
        const agent = await api.getAgent(id);
        setSelectedAgent(agent);
      } catch (err) {
        console.error(err);
        setSelectedAgent(null);
      } finally {
        setLoadingAgent(false);
      }
    } else {
      setSelectedAgent(null);
    }
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!agentId) { setError('Please select an agent'); return; }
    setLoading(true);
    setError('');
    try {
      const callData = {
        agent_id: agentId,
        callee_name: calleeName,
        mobile_number: mobileNumber,
        timezone,
        ...(fromNumber && { from_phone_number: fromNumber }),
        custom_data: Object.keys(customData).length > 0 ? customData : undefined
      };
      const call = await api.createCall(callData);
      setSuccess(`Call initiated! ID: ${call.id}`);
      setCalleeName('');
      setMobileNumber('');
      setCustomData({});
      onSuccess();
    } catch (err) {
      setError(err instanceof Error ? err.message : 'An error occurred');
    } finally {
      setLoading(false);
    }
  };

  const customVariables = selectedAgent?.custom_variables || [];

  return (
    <Card className="p-6">
      <h3 className="text-lg font-semibold text-gray-900 mb-4">Quick Call</h3>
      <p className="text-gray-500 mb-6">Make a single call to one contact</p>

      {error && <Alert type="error" message={error} onClose={() => setError('')} />}
      {success && <Alert type="success" message={success} onClose={() => setSuccess('')} />}

      <form onSubmit={handleSubmit}>
        <Select
          label="Select Agent *"
          value={agentId}
          onChange={e => handleAgentSelect(e.target.value)}
          options={[{ value: '', label: 'Choose an agent...' }, ...agents.filter(a => a.status === 'ACTIVE').map(a => ({ value: a.id, label: a.name }))]}
        />
        <Input label="Contact Name *" value={calleeName} onChange={e => setCalleeName(e.target.value)} required placeholder="John Doe" />
        <Input label="Phone Number *" value={mobileNumber} onChange={e => setMobileNumber(e.target.value)} required placeholder="+919876543210" />
        {tenantNumbers.length > 0 && (
          <Select
            label="Calling Number"
            value={fromNumber}
            onChange={e => setFromNumber(e.target.value)}
            options={[
              ...(tenantNumbers.length > 1 ? [{ value: '', label: 'Select calling number...' }] : []),
              ...tenantNumbers.map(n => ({
                value: n.phone_number,
                label: `${n.phone_number} · ${countryName(n.country_code)}${n.allowed_countries?.length ? ' (calls to: ' + n.allowed_countries.map(countryName).join(', ') + ')' : ''}`
              }))
            ]}
          />
        )}
        <Select
          label="Callee Timezone *"
          value={timezone}
          onChange={e => setTimezone(e.target.value)}
          options={SUPPORTED_TIMEZONES.map(tz => ({ value: tz.value, label: tz.label }))}
        />

        {/* Custom Variables */}
        {loadingAgent && <p className="text-sm text-gray-500 mb-4">Loading agent details...</p>}
        {customVariables.length > 0 && (
          <div className="mt-4 pt-4 border-t border-gray-200">
            <h4 className="text-sm font-medium text-gray-700 mb-3">Custom Variables</h4>
            {customVariables.map(varName => (
              <Input
                key={varName}
                label={varName}
                value={customData[varName] || ''}
                onChange={e => setCustomData(prev => ({ ...prev, [varName]: e.target.value }))}
                placeholder={`Enter ${varName}`}
              />
            ))}
          </div>
        )}

        <Button type="submit" disabled={loading} className="mt-2">{loading ? 'Initiating...' : 'Start Call'}</Button>
      </form>
    </Card>
  );
};

const BulkCalls = ({ agents, onSuccess }: { agents: Agent[]; onSuccess: () => void }) => {
  const [agentId, setAgentId] = useState('');
  const [selectedAgent, setSelectedAgent] = useState(null);
  const [contacts, setContacts] = useState('');
  const [fromNumber, setFromNumber] = useState('');
  const [tenantNumbers, setTenantNumbers] = useState([]);
  const [timezone, setTimezone] = useState(getDefaultTimezone);
  const [loading, setLoading] = useState(false);
  const [loadingAgent, setLoadingAgent] = useState(false);
  const [error, setError] = useState('');
  const [success, setSuccess] = useState('');

  // Load tenant's assigned phone numbers
  useEffect(() => {
    getTenantPhoneNumbers().then(nums => {
      setTenantNumbers(nums);
      if (nums.length === 1) setFromNumber(nums[0].phone_number);
    });
  }, []);

  // Fetch agent details when agent is selected
  const handleAgentSelect = async (id: string) => {
    setAgentId(id);
    if (id) {
      setLoadingAgent(true);
      try {
        const agent = await api.getAgent(id);
        setSelectedAgent(agent);
      } catch (err) {
        console.error(err);
        setSelectedAgent(null);
      } finally {
        setLoadingAgent(false);
      }
    } else {
      setSelectedAgent(null);
    }
  };

  const customVariables = selectedAgent?.custom_variables || [];

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!agentId) { setError('Please select an agent'); return; }

    const lines = contacts.trim().split('\n').filter(l => l.trim());
    if (lines.length === 0) { setError('Please enter at least one contact'); return; }

    // Parse CSV-style data: Name, Phone, CustomVar1, CustomVar2, ...
    const data = lines.map(line => {
      const parts = line.split(',').map(s => s.trim());
      const callData: any = {
        callee_name: parts[0] || 'Unknown',
        mobile_number: parts[1] || parts[0]
      };

      // Map additional columns to custom variables
      if (customVariables.length > 0 && parts.length > 2) {
        callData.custom_data = {};
        customVariables.forEach((varName, idx) => {
          if (parts[idx + 2]) {
            callData.custom_data[varName] = parts[idx + 2];
          }
        });
      }

      return callData;
    });

    setLoading(true);
    setError('');
    try {
      const calls = await api.createBulkCalls({
        agent_id: agentId,
        data,
        timezone,
        ...(fromNumber && { from_phone_number: fromNumber }),
      });
      setSuccess(`${calls.length} calls initiated successfully!`);
      setContacts('');
      onSuccess();
    } catch (err) {
      setError(err instanceof Error ? err.message : 'An error occurred');
    } finally {
      setLoading(false);
    }
  };

  // Generate placeholder based on custom variables
  const getPlaceholder = () => {
    if (customVariables.length === 0) {
      return "John Doe, +919876543210\nJane Smith, +919876543211\nBob Johnson, +919876543212";
    }
    const vars = customVariables.join(', ');
    return `Name, Phone, ${vars}\nJohn Doe, +919876543210, value1, value2\nJane Smith, +919876543211, value1, value2`;
  };

  return (
    <Card className="p-6">
      <h3 className="text-lg font-semibold text-gray-900 mb-4">Bulk Calls</h3>
      <p className="text-gray-500 mb-6">Call multiple contacts at once</p>

      {error && <Alert type="error" message={error} onClose={() => setError('')} />}
      {success && <Alert type="success" message={success} onClose={() => setSuccess('')} />}

      <form onSubmit={handleSubmit}>
        <Select
          label="Select Agent *"
          value={agentId}
          onChange={e => handleAgentSelect(e.target.value)}
          options={[{ value: '', label: 'Choose an agent...' }, ...agents.filter(a => a.status === 'ACTIVE').map(a => ({ value: a.id, label: a.name }))]}
        />

        {loadingAgent && <p className="text-sm text-gray-500 mb-4">Loading agent details...</p>}

        {selectedAgent && customVariables.length > 0 && (
          <div className="mb-4 p-3 bg-blue-50 border border-blue-200 rounded-lg">
            <p className="text-sm text-blue-800 font-medium mb-1">Custom variables required:</p>
            <p className="text-sm text-blue-600">{customVariables.join(', ')}</p>
            <p className="text-xs text-blue-500 mt-1">Include these as columns after Name and Phone</p>
          </div>
        )}

        {tenantNumbers.length > 0 && (
          <Select
            label="Calling Number"
            value={fromNumber}
            onChange={e => setFromNumber(e.target.value)}
            options={[
              ...(tenantNumbers.length > 1 ? [{ value: '', label: 'Select calling number...' }] : []),
              ...tenantNumbers.map(n => ({
                value: n.phone_number,
                label: `${n.phone_number} · ${countryName(n.country_code)}${n.allowed_countries?.length ? ' (calls to: ' + n.allowed_countries.map(countryName).join(', ') + ')' : ''}`
              }))
            ]}
          />
        )}
        <Select
          label="Callee Timezone *"
          value={timezone}
          onChange={e => setTimezone(e.target.value)}
          options={SUPPORTED_TIMEZONES.map(tz => ({ value: tz.value, label: tz.label }))}
        />

        <TextArea
          label={customVariables.length > 0
            ? `Contacts (Name, Phone, ${customVariables.join(', ')}) - one per line *`
            : "Contacts (Name, Phone - one per line) *"}
          value={contacts}
          onChange={e => setContacts(e.target.value)}
          rows={8}
          required
          placeholder={getPlaceholder()}
        />
        <Button type="submit" disabled={loading || loadingAgent} className="mt-2">{loading ? 'Initiating...' : 'Start Bulk Calls'}</Button>
      </form>
    </Card>
  );
};

const CallHistory = ({ agents }: { agents: Agent[] }) => {
  const [calls, setCalls] = useState([]);
  const [totalCount, setTotalCount] = useState(0);
  const [loading, setLoading] = useState(true);
  const [loadingMore, setLoadingMore] = useState(false);
  const [exporting, setExporting] = useState(false);
  const [exportError, setExportError] = useState('');
  const [page, setPage] = useState(1);
  const [filter, setFilter] = useState({
    status: '',
    engagementStatus: '',
    answeredBy: '',
    agentId: '',
    dateRange: '30days'
  });
  const [selectedCall, setSelectedCall] = useState(null);

  const getFilterParams = useCallback(() => {
    const dateRange = getDateRange(filter.dateRange);
    const params: any = {
      createdAfter: dateRange ? dateRange.start : undefined,
      createdBefore: dateRange ? dateRange.end : undefined,
    };
    if (filter.status) params.status = [filter.status];
    if (filter.engagementStatus) params.engagementStatus = [filter.engagementStatus];
    if (filter.answeredBy) params.answeredBy = [filter.answeredBy];
    if (filter.agentId) params.agentId = filter.agentId;
    return params;
  }, [filter]);

  const loadCalls = useCallback(async (resetPage = true) => {
    if (resetPage) {
      setLoading(true);
      setPage(1);
    } else {
      setLoadingMore(true);
    }
    try {
      const params = getFilterParams();
      const currentPage = resetPage ? 1 : page;
      const data = await api.listCalls({ ...params, page: currentPage, pageSize: 100 });
      if (resetPage) {
        setCalls(data.results);
      } else {
        setCalls(prev => [...prev, ...data.results]);
      }
      setTotalCount(data.count);
    } catch (err) {
      console.error(err);
    } finally {
      setLoading(false);
      setLoadingMore(false);
    }
  }, [filter, page, getFilterParams]);

  useEffect(() => { loadCalls(true); }, [filter]);

  const loadMore = async () => {
    const nextPage = page + 1;
    setPage(nextPage);
    setLoadingMore(true);
    try {
      const params = getFilterParams();
      const data = await api.listCalls({ ...params, page: nextPage, pageSize: 100 });
      setCalls(prev => [...prev, ...data.results]);
    } catch (err) {
      console.error(err);
    } finally {
      setLoadingMore(false);
    }
  };

  const handleExport = async () => {
    setExporting(true);
    setExportError('');
    try {
      const params = getFilterParams();
      const allCalls = await api.listAllCalls(params);
      const agentsMap = new Map(agents.map(a => [a.id, a.name]));
      const result = exportCallsToCSV(allCalls, 'call_history', agentsMap);
      if (!result.success && result.error) {
        setExportError(result.error);
      }
    } catch (err) {
      console.error(err);
      setExportError('Failed to export calls');
    } finally {
      setExporting(false);
    }
  };

  const hasMore = calls.length < totalCount;

  return (
    <div>
      {selectedCall ? (
        <CallDetail call={selectedCall} onBack={() => setSelectedCall(null)} agents={agents} />
      ) : (
        <>
          {exportError && <Alert type="error" message={exportError} onClose={() => setExportError('')} />}
          <div className="flex flex-wrap items-center gap-3 mb-6">
            <select
              value={filter.dateRange}
              onChange={e => setFilter(f => ({ ...f, dateRange: e.target.value }))}
              className="px-3 py-2 border border-gray-300 rounded-lg bg-white text-sm"
            >
              <option value="today">Today</option>
              <option value="yesterday">Yesterday</option>
              <option value="7days">Last 7 days</option>
              <option value="30days">Last 30 days</option>
              <option value="all">No filter</option>
            </select>
            <select
              value={filter.status}
              onChange={e => setFilter(f => ({ ...f, status: e.target.value }))}
              className="px-3 py-2 border border-gray-300 rounded-lg bg-white text-sm"
            >
              <option value="">All Statuses</option>
              {CALL_STATUSES.map(s => <option key={s} value={s}>{s.replace(/_/g, ' ')}</option>)}
            </select>
            <select
              value={filter.engagementStatus}
              onChange={e => setFilter(f => ({ ...f, engagementStatus: e.target.value }))}
              className="px-3 py-2 border border-gray-300 rounded-lg bg-white text-sm"
            >
              <option value="">All Engagement</option>
              {ENGAGEMENT_STATUSES.map(s => <option key={s} value={s}>{s.replace(/_/g, ' ')}</option>)}
            </select>
            <select
              value={filter.answeredBy}
              onChange={e => setFilter(f => ({ ...f, answeredBy: e.target.value }))}
              className="px-3 py-2 border border-gray-300 rounded-lg bg-white text-sm"
            >
              <option value="">Answered By</option>
              {ANSWERED_BY_OPTIONS.map(s => <option key={s} value={s}>{s}</option>)}
            </select>
            <select
              value={filter.agentId}
              onChange={e => setFilter(f => ({ ...f, agentId: e.target.value }))}
              className="px-3 py-2 border border-gray-300 rounded-lg bg-white text-sm"
            >
              <option value="">All Agents</option>
              {agents.map(a => <option key={a.id} value={a.id}>{a.name}</option>)}
            </select>
            <Button variant="outline" onClick={() => loadCalls(true)}>Refresh</Button>
            <Button variant="secondary" onClick={handleExport} disabled={totalCount === 0 || exporting}>
              {exporting ? 'Exporting...' : `Export All (${totalCount})`}
            </Button>
          </div>

          {(() => {
            // Apply client-side filters (status, engagement, answered_by, agent)
            const filteredCalls = calls.filter(call => {
              if (filter.status && call.status?.toUpperCase() !== filter.status.toUpperCase()) return false;
              if (filter.engagementStatus && call.engagement_status?.toUpperCase() !== filter.engagementStatus.toUpperCase()) return false;
              if (filter.answeredBy && call.answered_by?.toUpperCase() !== filter.answeredBy.toUpperCase()) return false;
              if (filter.agentId && call.agent_id !== filter.agentId) return false;
              return true;
            });

            return (
              <>
                <p className="text-sm text-gray-500 mb-4">
                  Showing {filteredCalls.length} of {totalCount} calls {filteredCalls.length !== calls.length && `(${calls.length} loaded, ${filteredCalls.length} matching filters)`}
                </p>

                {loading ? <SkeletonTable rows={5} /> : filteredCalls.length === 0 ? (
                  <Card className="p-8 text-center">
                    <p className="text-gray-500">No calls found</p>
                  </Card>
                ) : (
                  <>
                    <div className="overflow-x-auto">
                      <table className="w-full">
                        <thead>
                          <tr className="bg-gray-50">
                            <th className="px-4 py-3 text-left text-sm font-medium text-gray-700">Contact</th>
                            <th className="px-4 py-3 text-left text-sm font-medium text-gray-700">Phone</th>
                            <th className="px-4 py-3 text-left text-sm font-medium text-gray-700">Agent</th>
                            <th className="px-4 py-3 text-left text-sm font-medium text-gray-700">Status</th>
                            <th className="px-4 py-3 text-left text-sm font-medium text-gray-700">Engagement</th>
                            <th className="px-4 py-3 text-left text-sm font-medium text-gray-700">Duration</th>
                            <th className="px-4 py-3 text-left text-sm font-medium text-gray-700">Date</th>
                            <th className="px-4 py-3 text-left text-sm font-medium text-gray-700"></th>
                          </tr>
                        </thead>
                        <tbody className="divide-y divide-gray-200">
                          {filteredCalls.map(call => (
                            <tr key={call.id} className="hover:bg-gray-50 transition-colors">
                              <td className="px-4 py-3 text-sm">{call.callee_name}</td>
                              <td className="px-4 py-3 text-sm text-gray-500">{call.mobile_number}</td>
                              <td className="px-4 py-3 text-sm text-gray-500">{agents.find(a => a.id === call.agent_id)?.name || '-'}</td>
                              <td className="px-4 py-3"><StatusBadge status={call.status} /></td>
                              <td className="px-4 py-3 text-sm text-gray-500">{call.engagement_status || '-'}</td>
                              <td className="px-4 py-3 text-sm text-gray-500">{call.duration_minutes ? `${call.duration_minutes.toFixed(1)} min` : '-'}</td>
                              <td className="px-4 py-3 text-sm text-gray-500">{new Date(call.created_at).toLocaleDateString()}</td>
                              <td className="px-4 py-3"><Button variant="outline" onClick={() => setSelectedCall(call)}>View</Button></td>
                            </tr>
                          ))}
                        </tbody>
                      </table>
                    </div>

                    {hasMore && (
                      <div className="mt-6 text-center">
                        <Button variant="outline" onClick={loadMore} disabled={loadingMore}>
                          {loadingMore ? 'Loading...' : `Load More (${totalCount - calls.length} remaining)`}
                        </Button>
                      </div>
                    )}
                  </>
                )}
              </>
            );
          })()}
        </>
      )}
    </div>
  );
};

const CallDetail = ({ call: initialCall, onBack, agents, backLabel = 'Back to Call History' }: {
  call: Call;
  onBack: () => void;
  agents?: Agent[];
  backLabel?: string;
}) => {
  const [call, setCall] = useState(initialCall);
  const [loading, setLoading] = useState(true);

  // Fetch full call details to get custom_data
  useEffect(() => {
    api.getCall(initialCall.id)
      .then(fullCall => setCall(fullCall))
      .catch(console.error)
      .finally(() => setLoading(false));
  }, [initialCall.id]);

  const agentName = call.agent?.name || agents?.find(a => a.id === call.agent_id)?.name || call.agent_id;

  if (loading) return <LoadingSpinner />;

  return (
    <div>
      <button onClick={onBack} className="flex items-center text-secondary-500 hover:text-secondary-600 mb-4">
        <svg className="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" /></svg>
        {backLabel}
      </button>
      <Card className="p-6">
        <div className="flex justify-between items-start mb-6">
          <div>
            <h2 className="text-xl font-bold text-gray-900">{call.callee_name}</h2>
            <p className="text-gray-500">{call.mobile_number}</p>
          </div>
          <StatusBadge status={call.status} />
        </div>

        {/* Agent Info */}
        <div className="bg-secondary-50 border border-secondary-200 rounded-lg p-4 mb-6">
          <p className="text-xs text-secondary-600 mb-1">Agent</p>
          <p className="font-semibold text-secondary-800">{agentName}</p>
        </div>

        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
          <div className="bg-gray-50 p-3 rounded-lg">
            <p className="text-xs text-gray-500">Duration</p>
            <p className="font-medium">{call.duration_minutes ? `${call.duration_minutes.toFixed(1)} min` : '-'}</p>
          </div>
          <div className="bg-gray-50 p-3 rounded-lg">
            <p className="text-xs text-gray-500">Engagement</p>
            <p className="font-medium">{call.engagement_status || '-'}</p>
          </div>
          <div className="bg-gray-50 p-3 rounded-lg">
            <p className="text-xs text-gray-500">Answered By</p>
            <p className="font-medium">{call.answered_by || '-'}</p>
          </div>
          <div className="bg-gray-50 p-3 rounded-lg">
            <p className="text-xs text-gray-500">Created</p>
            <p className="font-medium">{new Date(call.created_at).toLocaleString()}</p>
          </div>
        </div>

        {/* Custom Variables / Data */}
        {call.custom_data && Object.keys(call.custom_data).length > 0 && (
          <div className="mb-6">
            <h4 className="font-medium text-gray-700 mb-2">Custom Variables</h4>
            <div className="bg-gray-50 p-3 rounded-lg">
              <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
                {Object.entries(call.custom_data).map(([key, value]) => (
                  <div key={key}>
                    <p className="text-xs text-gray-500">{key}</p>
                    <p className="font-medium text-sm">{value}</p>
                  </div>
                ))}
              </div>
            </div>
          </div>
        )}

        {call.recording_url && (
          <div className="mb-6">
            <h4 className="font-medium text-gray-700 mb-2">Recording</h4>
            <audio controls src={call.recording_url} className="w-full" />
          </div>
        )}
        {call.result && Object.keys(call.result).length > 0 && (
          <div>
            <h4 className="font-medium text-gray-700 mb-2">Call Result</h4>
            <pre className="bg-gray-50 p-3 rounded-lg text-sm overflow-auto">{JSON.stringify(call.result, null, 2)}</pre>
          </div>
        )}
      </Card>
    </div>
  );
};

const CallsSection = () => {
  const [view, setView] = useState('history');
  const [agents, setAgents] = useState([]);

  useEffect(() => {
    api.listAgents().then(data => setAgents(data.results)).catch(console.error);
  }, []);

  return (
    <div>
      <div className="flex gap-2 mb-6">
        <Button variant={view === 'history' ? 'primary' : 'outline'} onClick={() => setView('history')}>Call History</Button>
        <Button variant={view === 'quick' ? 'primary' : 'outline'} onClick={() => setView('quick')}>Quick Call</Button>
        <Button variant={view === 'bulk' ? 'primary' : 'outline'} onClick={() => setView('bulk')}>Bulk Calls</Button>
      </div>

      {view === 'history' && <CallHistory agents={agents} />}
      {view === 'quick' && <QuickCall agents={agents} onSuccess={() => setView('history')} />}
      {view === 'bulk' && <BulkCalls agents={agents} onSuccess={() => setView('history')} />}
    </div>
  );
};

// ============================================================================
// CAMPAIGNS SECTION
// ============================================================================

// CSV Parser utility
const parseCSV = (text: string): { headers: string[]; rows: string[][] } => {
  const lines = text.split('\n').filter(line => line.trim());
  if (lines.length === 0) return { headers: [], rows: [] };

  const parseRow = (row: string): string[] => {
    const result: string[] = [];
    let current = '';
    let inQuotes = false;

    for (let i = 0; i < row.length; i++) {
      const char = row[i];
      if (char === '"') {
        inQuotes = !inQuotes;
      } else if (char === ',' && !inQuotes) {
        result.push(current.trim());
        current = '';
      } else {
        current += char;
      }
    }
    result.push(current.trim());
    return result;
  };

  const headers = parseRow(lines[0]);
  const rows = lines.slice(1).map(parseRow);
  return { headers, rows };
};

const CreateCampaignWizard = ({ agents, onSuccess, onCancel }: { agents: Agent[]; onSuccess: () => void; onCancel: () => void }) => {
  const [step, setStep] = useState(1);
  const [name, setName] = useState('');
  const [agentId, setAgentId] = useState('');
  const [selectedAgent, setSelectedAgent] = useState(null);
  const [fromNumber, setFromNumber] = useState('');
  const [tenantNumbers, setTenantNumbers] = useState([]);
  const [file, setFile] = useState(null);
  const [csvData, setCsvData] = useState({ headers: [], rows: [] });
  const [columnMapping, setColumnMapping] = useState({});
  const [removeInvalidRows, setRemoveInvalidRows] = useState(true);
  const [removeDuplicates, setRemoveDuplicates] = useState(true);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  const [campaignTimezone, setCampaignTimezone] = useState(getDefaultTimezone);

  // Load tenant's assigned phone numbers
  useEffect(() => {
    getTenantPhoneNumbers().then(nums => {
      setTenantNumbers(nums);
      if (nums.length === 1) setFromNumber(nums[0].phone_number);
    });
  }, []);

  // Retry configuration
  const [enableRedials, setEnableRedials] = useState(false);
  const [maxRedialCount, setMaxRedialCount] = useState(2);
  const [redialInterval, setRedialInterval] = useState(6); // hours

  // Required fields for mapping
  const requiredFields = [
    { key: 'callee_name', label: 'Candidate Name', required: true },
    { key: 'mobile_number', label: 'Phone Number', required: true },
  ];

  // Get custom variables from agent
  const customVariables = selectedAgent?.custom_variables || [];

  // All fields that can be mapped
  const allMappableFields = [
    ...requiredFields,
    ...customVariables.map(v => ({ key: v, label: v, required: false }))
  ];

  // Handle agent selection
  const handleAgentSelect = async (id: string) => {
    setAgentId(id);
    if (id) {
      try {
        const agent = await api.getAgent(id);
        setSelectedAgent(agent);
      } catch (err) {
        console.error(err);
      }
    } else {
      setSelectedAgent(null);
    }
  };

  // Handle file upload and parsing
  const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
    const uploadedFile = e.target.files?.[0];
    if (!uploadedFile) return;

    setFile(uploadedFile);
    const reader = new FileReader();
    reader.onload = (event) => {
      const text = event.target?.result;
      if (typeof text === 'string') {
        const parsed = parseCSV(text);
        setCsvData(parsed);

        // Auto-map columns if names match
        const autoMapping = {};
        allMappableFields.forEach(field => {
          const matchingHeader = parsed.headers.find(h =>
            h.toLowerCase().replace(/[_\s]/g, '') === field.key.toLowerCase().replace(/[_\s]/g, '') ||
            h.toLowerCase().includes(field.key.toLowerCase())
          );
          if (matchingHeader) {
            autoMapping[field.key] = matchingHeader;
          }
        });
        setColumnMapping(autoMapping);
      }
    };
    reader.readAsText(uploadedFile);
  };

  // Update column mapping
  const updateMapping = (fieldKey: string, csvColumn: string) => {
    setColumnMapping(prev => ({
      ...prev,
      [fieldKey]: csvColumn || undefined
    }));
  };

  // Check if step 1 is valid
  const isStep1Valid = name.trim() && agentId;

  // Check if step 2 is valid
  const isStep2Valid = file && columnMapping['callee_name'] && columnMapping['mobile_number'];

  // Handle form submission
  const handleSubmit = async () => {
    if (!file || !isStep2Valid) return;

    setLoading(true);
    setError('');
    try {
      const formData = new FormData();
      formData.append('file', file);
      formData.append('data', JSON.stringify({
        name,
        agent_id: agentId,
        column_mapping: columnMapping,
        remove_invalid_rows: removeInvalidRows,
        remove_duplicate_phone_numbers: removeDuplicates,
        timezone: campaignTimezone,
        ...(fromNumber && { from_phone_number: fromNumber }),
        ...(enableRedials && {
          retry_config: {
            max_retry_count: maxRedialCount,
            retry_interval_hours: redialInterval,
          }
        }),
      }));
      await api.createCampaign(formData);
      onSuccess();
    } catch (err) {
      setError(err instanceof Error ? err.message : 'An error occurred');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div>
      {/* Breadcrumb */}
      <div className="text-sm text-gray-500 mb-2">
        <span onClick={onCancel} className="cursor-pointer hover:text-gray-900 transition-colors">Campaigns</span> / <span className="text-gray-900">New Campaign</span>
      </div>

      {/* Step indicator */}
      <div className="flex items-center gap-2 text-sm text-gray-500 mb-2">
        <span>Step {step} of 2</span>
        <span>•</span>
        <span>{step === 1 ? 'Choose Agent' : 'Calling list'}</span>
      </div>

      {/* Title */}
      <h1 className="text-2xl font-bold text-gray-900 mb-1">
        {step === 1 ? 'New Campaign' : name || 'New Campaign'}
      </h1>
      <p className="text-gray-500 mb-6">
        {step === 1 ? (agentId ? `Agent: ${agents.find(a => a.id === agentId)?.name}` : 'Agent not selected') : `Agent: ${agents.find(a => a.id === agentId)?.name}`}
      </p>

      {error && <Alert type="error" message={error} onClose={() => setError('')} />}

      {step === 1 && (
        <Card className="p-6 max-w-xl">
          <div className="mb-4">
            <label className="block text-sm font-medium text-gray-700 mb-1">
              Campaign name <span className="text-red-500">*</span>
            </label>
            <input
              type="text"
              value={name}
              onChange={e => setName(e.target.value)}
              placeholder="Eg: Hunar sourcing campaign..."
              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-secondary-500 focus:border-secondary-500 outline-none"
            />
          </div>

          <div className="mb-4">
            <label className="block text-sm font-medium text-gray-700 mb-1">
              Choose campaign Agent <span className="text-red-500">*</span>
            </label>
            <select
              value={agentId}
              onChange={e => handleAgentSelect(e.target.value)}
              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-secondary-500 focus:border-secondary-500 outline-none bg-white"
            >
              <option value="">Choose agent</option>
              {agents.filter(a => a.status === 'ACTIVE').map(a => <option key={a.id} value={a.id}>{a.name}</option>)}
            </select>
          </div>

          {tenantNumbers.length > 0 && (
            <div className="mb-4">
              <label className="block text-sm font-medium text-gray-700 mb-1">Calling Number</label>
              <select
                value={fromNumber}
                onChange={e => setFromNumber(e.target.value)}
                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-secondary-500 focus:border-secondary-500 outline-none bg-white"
              >
                {tenantNumbers.length > 1 && <option value="">Select calling number...</option>}
                {tenantNumbers.map(n => (
                  <option key={n.phone_number} value={n.phone_number}>
                    {n.phone_number} · {countryName(n.country_code)}{n.allowed_countries?.length ? ` (calls to: ${n.allowed_countries.map(countryName).join(', ')})` : ''}
                  </option>
                ))}
              </select>
            </div>
          )}

          <div className="mb-4">
            <label className="block text-sm font-medium text-gray-700 mb-1">
              Callee Timezone <span className="text-red-500">*</span>
            </label>
            <select
              value={campaignTimezone}
              onChange={e => setCampaignTimezone(e.target.value)}
              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-secondary-500 focus:border-secondary-500 outline-none bg-white"
            >
              {SUPPORTED_TIMEZONES.map(tz => (
                <option key={tz.value} value={tz.value}>{tz.label}</option>
              ))}
            </select>
            <p className="text-xs text-gray-500 mt-1">Calls outside 8am-8pm in this timezone will be scheduled for the next day</p>
          </div>

          {/* Retry Configuration */}
          <div className="mt-6 pt-6 border-t border-gray-200">
            <div className="flex items-center justify-between mb-4">
              <div>
                <label className="block text-sm font-medium text-gray-700">Enable Retries</label>
                <p className="text-xs text-gray-500">Automatically retry failed or unanswered calls</p>
              </div>
              <button
                type="button"
                onClick={() => setEnableRedials(!enableRedials)}
                className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${enableRedials ? 'bg-secondary-500' : 'bg-gray-300'}`}
              >
                <span className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${enableRedials ? 'translate-x-6' : 'translate-x-1'}`} />
              </button>
            </div>

            {enableRedials && (
              <div className="space-y-4 bg-gray-50 rounded-lg p-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Maximum Retry Count
                  </label>
                  <select
                    value={maxRedialCount}
                    onChange={e => setMaxRedialCount(Number(e.target.value))}
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-secondary-500 focus:border-secondary-500 outline-none bg-white"
                  >
                    <option value={1}>1 attempt</option>
                    <option value={2}>2 attempts</option>
                    <option value={3}>3 attempts</option>
                    <option value={4}>4 attempts</option>
                    <option value={5}>5 attempts</option>
                  </select>
                  <p className="text-xs text-gray-500 mt-1">Number of times to retry if call is not connected</p>
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Retry Interval
                  </label>
                  <select
                    value={redialInterval}
                    onChange={e => setRedialInterval(Number(e.target.value))}
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-secondary-500 focus:border-secondary-500 outline-none bg-white"
                  >
                    <option value={1}>1 hour</option>
                    <option value={2}>2 hours</option>
                    <option value={4}>4 hours</option>
                    <option value={6}>6 hours</option>
                    <option value={12}>12 hours</option>
                    <option value={24}>24 hours</option>
                  </select>
                  <p className="text-xs text-gray-500 mt-1">Time to wait between retry attempts</p>
                </div>
              </div>
            )}
          </div>
        </Card>
      )}

      {step === 2 && (
        <div className="grid grid-cols-2 gap-6">
          {/* Left side - Upload and mapping */}
          <Card className="p-6">
            <div className="mb-6">
              <div className="flex items-center justify-between mb-2">
                <label className="block text-sm font-medium text-gray-700">
                  CSV <span className="text-red-500">*</span>
                </label>
                <button className="text-sm text-gray-500 hover:text-gray-700 flex items-center gap-1">
                  Download CSV format
                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                  </svg>
                </button>
              </div>

              {!file ? (
                <label className="flex items-center justify-center w-full h-32 border-2 border-dashed border-gray-300 rounded-lg cursor-pointer hover:border-secondary-500 transition-colors">
                  <div className="text-center">
                    <svg className="w-8 h-8 mx-auto text-gray-400 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
                    </svg>
                    <p className="text-sm text-gray-500">Click to upload CSV</p>
                  </div>
                  <input type="file" accept=".csv" onChange={handleFileUpload} className="hidden" />
                </label>
              ) : (
                <div className="flex items-center justify-between p-3 bg-gray-50 rounded-lg border border-gray-200">
                  <div className="flex items-center gap-2">
                    <svg className="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                    </svg>
                    <span className="text-sm font-medium">{file.name}</span>
                    <span className="text-sm text-gray-500">{(file.size / 1024).toFixed(0)} KB</span>
                  </div>
                  <button onClick={() => { setFile(null); setCsvData({ headers: [], rows: [] }); setColumnMapping({}); }} className="text-gray-400 hover:text-gray-600">
                    <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                    </svg>
                  </button>
                </div>
              )}
            </div>

            {csvData.headers.length > 0 && (
              <>
                <div className="mb-6">
                  <label className="block text-sm font-medium text-gray-700 mb-3">
                    Map CSV Columns <span className="text-red-500">*</span>
                  </label>
                  <div className="space-y-3">
                    {allMappableFields.map(field => (
                      <div key={field.key} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                        <span className="text-sm text-gray-700">{field.key}</span>
                        <select
                          value={columnMapping[field.key] || ''}
                          onChange={e => updateMapping(field.key, e.target.value)}
                          className="px-3 py-1.5 border border-gray-300 rounded-lg bg-white text-sm min-w-40"
                        >
                          <option value="">Choose column</option>
                          {csvData.headers.map(h => <option key={h} value={h}>{h}</option>)}
                        </select>
                      </div>
                    ))}
                  </div>
                </div>

                <div className="space-y-3">
                  <label className="flex items-start gap-3 cursor-pointer">
                    <input
                      type="checkbox"
                      checked={removeInvalidRows}
                      onChange={e => setRemoveInvalidRows(e.target.checked)}
                      className="mt-0.5 w-4 h-4 text-secondary-500 rounded border-gray-300 focus:ring-secondary-500"
                    />
                    <div>
                      <p className="text-sm font-medium text-gray-700">Remove invalid rows</p>
                      <p className="text-xs text-gray-500">Automatically remove entries with invalid data (eg: incomplete numbers).</p>
                    </div>
                  </label>
                  <label className="flex items-start gap-3 cursor-pointer">
                    <input
                      type="checkbox"
                      checked={removeDuplicates}
                      onChange={e => setRemoveDuplicates(e.target.checked)}
                      className="mt-0.5 w-4 h-4 text-secondary-500 rounded border-gray-300 focus:ring-secondary-500"
                    />
                    <div>
                      <p className="text-sm font-medium text-gray-700">Remove duplicate phone numbers</p>
                      <p className="text-xs text-gray-500">Automatically remove numbers which occur more than once.</p>
                    </div>
                  </label>
                </div>
              </>
            )}
          </Card>

          {/* Right side - Preview */}
          <Card className="p-6">
            {csvData.headers.length > 0 ? (
              <>
                <div className="flex items-center justify-between mb-4">
                  <div className="flex items-center gap-2">
                    <svg className="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2" />
                    </svg>
                    <span className="text-sm font-medium">{file?.name}</span>
                  </div>
                  <span className="text-sm text-gray-500">{csvData.rows.length.toLocaleString()} entries</span>
                </div>
                <div className="overflow-x-auto max-h-96 overflow-y-auto">
                  <table className="w-full text-sm">
                    <thead className="sticky top-0 bg-gray-50">
                      <tr>
                        {csvData.headers.slice(0, 4).map(h => (
                          <th key={h} className="px-3 py-2 text-left font-medium text-gray-700 border-b">{h}</th>
                        ))}
                      </tr>
                    </thead>
                    <tbody>
                      {csvData.rows.slice(0, 10).map((row, i) => (
                        <tr key={i} className="border-b border-gray-100">
                          {row.slice(0, 4).map((cell, j) => (
                            <td key={j} className="px-3 py-2 text-gray-600">{cell}</td>
                          ))}
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
                {csvData.rows.length > 10 && (
                  <p className="text-xs text-gray-500 mt-2 text-center">Showing first 10 of {csvData.rows.length} rows</p>
                )}
              </>
            ) : (
              <div className="flex items-center justify-center h-64 text-gray-400">
                <div className="text-center">
                  <svg className="w-12 h-12 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                  </svg>
                  <p className="text-sm">Upload a CSV to see preview</p>
                </div>
              </div>
            )}
          </Card>
        </div>
      )}

      {/* Footer buttons */}
      <div className="flex items-center justify-between mt-8 pt-6 border-t border-gray-200">
        <button
          onClick={onCancel}
          className="px-4 py-2 text-red-600 hover:text-red-700 font-medium"
        >
          Cancel
        </button>
        <div className="flex items-center gap-3">
          {step > 1 && (
            <Button variant="outline" onClick={() => setStep(step - 1)}>
              Back
            </Button>
          )}
          {step === 1 ? (
            <Button onClick={() => setStep(2)} disabled={!isStep1Valid}>
              Proceed
            </Button>
          ) : (
            <Button onClick={handleSubmit} disabled={!isStep2Valid || loading}>
              {loading ? 'Creating...' : 'Create Campaign'}
            </Button>
          )}
        </div>
      </div>
    </div>
  );
};

const CampaignList = ({ onSelect, onCreate, agents }: { onSelect: (id: string) => void; onCreate: () => void; agents: Agent[] }) => {
  const [campaigns, setCampaigns] = useState([]);
  const [loading, setLoading] = useState(true);
  const [search, setSearch] = useState('');
  const [statusFilter, setStatusFilter] = useState('');
  const [agentFilter, setAgentFilter] = useState('');
  const [dateFilter, setDateFilter] = useState('30days');
  const [currentPage, setCurrentPage] = useState(1);
  const [sortOrder, setSortOrder] = useState('desc'); // 'asc' or 'desc' - Sort by start time
  const [exportError, setExportError] = useState('');
  const pageSize = 10;

  useEffect(() => {
    api.listCampaigns().then(data => setCampaigns(data.results)).catch(console.error).finally(() => setLoading(false));
  }, []);

  // Get date cutoff based on filter
  const getDateCutoff = () => {
    const now = new Date();
    const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
    switch (dateFilter) {
      case 'today': return today;
      case 'yesterday': return new Date(today.getTime() - 24 * 60 * 60 * 1000);
      case '7days': return new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
      case '30days': return new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000);
      default: return null; // no filter
    }
  };

  // Filter campaigns by date first
  const dateFilteredCampaigns = campaigns.filter(c => {
    const cutoff = getDateCutoff();
    if (!cutoff) return true;
    const campaignDate = new Date(c.created_at);
    return campaignDate >= cutoff;
  });

  // Calculate stats from date-filtered campaigns
  const stats = {
    totalCalls: dateFilteredCampaigns.reduce((sum, c) => sum + c.total_call_count, 0),
    connectedCalls: dateFilteredCampaigns.reduce((sum, c) => sum + c.connected_call_count, 0),
    engagedCalls: dateFilteredCampaigns.reduce((sum, c) => sum + c.engaged_call_count, 0),
    completedCampaigns: dateFilteredCampaigns.filter(c => c.status === 'COMPLETED').length,
    inProgressCampaigns: dateFilteredCampaigns.filter(c => c.status === 'IN_PROGRESS').length,
  };
  const connectionRate = stats.totalCalls > 0 ? Math.round((stats.connectedCalls / stats.totalCalls) * 100) : 0;
  const engagementRate = stats.connectedCalls > 0 ? Math.round((stats.engagedCalls / stats.connectedCalls) * 100) : 0;

  // Apply additional filters (search, status, agent)
  const filteredCampaigns = dateFilteredCampaigns
    .filter(c => {
      if (search && !c.name.toLowerCase().includes(search.toLowerCase())) return false;
      if (statusFilter && c.status !== statusFilter) return false;
      if (agentFilter && c.agent.id !== agentFilter) return false;
      return true;
    })
    .sort((a, b) => {
      const dateA = a.started_at ? new Date(a.started_at).getTime() : 0;
      const dateB = b.started_at ? new Date(b.started_at).getTime() : 0;
      return sortOrder === 'desc' ? dateB - dateA : dateA - dateB;
    });

  // Export campaigns to CSV
  const handleExportCampaigns = () => {
    setExportError('');
    if (filteredCampaigns.length === 0) {
      setExportError('No campaigns to export');
      return;
    }
    const headers = ['Name', 'Status', 'Agent', 'Total Calls', 'Connected', 'Not Connected', 'Failed', 'Engaged', 'Not Engaged', 'Created At', 'Started At'];
    const rows = filteredCampaigns.map(c => [
      c.name,
      c.status,
      c.agent.name,
      c.total_call_count,
      c.connected_call_count,
      c.not_connected_call_count,
      c.failed_call_count,
      c.engaged_call_count,
      c.not_engaged_call_count,
      c.created_at,
      c.started_at || ''
    ]);
    const csvContent = [
      headers.join(','),
      ...rows.map(row => row.map(cell => `"${String(cell).replace(/"/g, '""')}"`).join(','))
    ].join('\n');
    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = `campaigns_${new Date().toISOString().split('T')[0]}.csv`;
    link.click();
    URL.revokeObjectURL(link.href);
  };

  // Get greeting based on time
  const getGreeting = () => {
    const hour = new Date().getHours();
    if (hour < 12) return 'Good morning';
    if (hour < 17) return 'Good afternoon';
    return 'Good evening';
  };

  if (loading) return (
    <div>
      <div className="flex justify-between items-start mb-6">
        <div>
          <Skeleton className="h-4 w-24 mb-2" />
          <Skeleton className="h-8 w-48" />
        </div>
        <Skeleton className="h-10 w-40" />
      </div>
      <SkeletonStats />
      <SkeletonTable rows={5} />
    </div>
  );

  return (
    <PageTransition>
    <div>
      {exportError && <Alert type="error" message={exportError} onClose={() => setExportError('')} />}
      {/* Header */}
      <div className="flex justify-between items-start mb-6">
        <div>
          <p className="text-sm text-gray-500">All Campaigns</p>
          <h1 className="text-2xl font-bold text-gray-900">{getGreeting()}</h1>
        </div>
        <div className="flex items-center gap-3">
          <select
            value={dateFilter}
            onChange={e => { setDateFilter(e.target.value); setCurrentPage(1); }}
            className="px-3 py-2 border border-gray-300 rounded-lg bg-white text-sm"
          >
            <option value="today">Today</option>
            <option value="yesterday">Yesterday</option>
            <option value="7days">Last 7 days</option>
            <option value="30days">Last 30 days</option>
            <option value="all">No filter</option>
          </select>
          <Button onClick={onCreate}>+ New Campaign</Button>
        </div>
      </div>

      {/* Stats Cards */}
      <div className="grid grid-cols-4 gap-4 mb-8">
        <Card className="p-4">
          <div className="flex items-center justify-between mb-2">
            <p className="text-sm text-gray-500">Call connection rate</p>
            <svg className="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
          </div>
          <p className="text-3xl font-bold text-gray-900">{connectionRate}%</p>
          <div className="mt-2 h-1.5 bg-gray-200 rounded-full overflow-hidden">
            <div className="h-full bg-green-500 rounded-full" style={{ width: `${connectionRate}%` }}></div>
          </div>
        </Card>
        <Card className="p-4">
          <div className="flex items-center justify-between mb-2">
            <p className="text-sm text-gray-500">Engagement rate</p>
            <svg className="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
          </div>
          <p className="text-3xl font-bold text-gray-900">{engagementRate}%</p>
          <div className="mt-2 h-1.5 bg-gray-200 rounded-full overflow-hidden">
            <div className="h-full bg-secondary-500 rounded-full" style={{ width: `${engagementRate}%` }}></div>
          </div>
        </Card>
        <Card className="p-4">
          <div className="flex items-center justify-between mb-2">
            <p className="text-sm text-gray-500">Campaigns completed</p>
            <svg className="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
          </div>
          <p className="text-3xl font-bold text-gray-900">{stats.completedCampaigns}</p>
        </Card>
        <Card className="p-4">
          <div className="flex items-center justify-between mb-2">
            <p className="text-sm text-gray-500">Campaigns in progress</p>
            <svg className="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
          </div>
          <p className="text-3xl font-bold text-gray-900">{stats.inProgressCampaigns}</p>
        </Card>
      </div>

      {/* Filters Row */}
      <div className="flex items-center justify-between mb-4">
        <div className="flex items-center gap-3">
          <div className="relative">
            <svg className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
            </svg>
            <input
              type="text"
              placeholder="Search by campaign..."
              value={search}
              onChange={e => setSearch(e.target.value)}
              className="pl-9 pr-4 py-2 border border-gray-300 rounded-lg text-sm w-64 focus:ring-2 focus:ring-secondary-500 focus:border-secondary-500 outline-none"
            />
          </div>
          <select
            value={statusFilter}
            onChange={e => setStatusFilter(e.target.value)}
            className="px-3 py-2 border border-gray-300 rounded-lg bg-white text-sm"
          >
            <option value="">Status</option>
            <option value="COMPLETED">Completed</option>
            <option value="IN_PROGRESS">In Progress</option>
            <option value="NOT_STARTED">Not Started</option>
            <option value="FAILED">Failed</option>
          </select>
          <select
            value={agentFilter}
            onChange={e => setAgentFilter(e.target.value)}
            className="px-3 py-2 border border-gray-300 rounded-lg bg-white text-sm"
          >
            <option value="">Agent</option>
            {agents.map(a => <option key={a.id} value={a.id}>{a.name}</option>)}
          </select>
        </div>
        <Button variant="outline" onClick={handleExportCampaigns} disabled={filteredCampaigns.length === 0} className="flex items-center gap-2">
          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
          </svg>
          Export table
        </Button>
      </div>

      {/* Campaigns Table */}
      {(() => {
        const totalPages = Math.ceil(filteredCampaigns.length / pageSize);
        const paginatedCampaigns = filteredCampaigns.slice((currentPage - 1) * pageSize, currentPage * pageSize);

        if (filteredCampaigns.length === 0) {
          return (
            <Card className="p-8 text-center">
              <p className="text-gray-500 mb-4">{campaigns.length === 0 ? 'No campaigns yet' : 'No campaigns match your filters'}</p>
              {campaigns.length === 0 && <Button onClick={onCreate}>Create Campaign</Button>}
            </Card>
          );
        }
        return (
          <>
            <Card className="overflow-hidden">
              <table className="w-full">
                <thead>
                  <tr className="bg-gray-50 border-b border-gray-200">
                    <th className="px-4 py-3 text-left text-sm font-medium text-gray-700">Campaign name</th>
                    <th className="px-4 py-3 text-left text-sm font-medium text-gray-700">Status</th>
                    <th className="px-4 py-3 text-left text-sm font-medium text-gray-700">Calls completed</th>
                    <th className="px-4 py-3 text-left text-sm font-medium text-gray-700">
                      <button
                        onClick={() => setSortOrder(s => s === 'desc' ? 'asc' : 'desc')}
                        className="flex items-center gap-1 hover:text-secondary-600 transition-colors"
                      >
                        Start time
                        <svg className={`w-4 h-4 transition-transform ${sortOrder === 'asc' ? 'rotate-180' : ''}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                        </svg>
                      </button>
                    </th>
                    <th className="px-4 py-3 text-left text-sm font-medium text-gray-700">Agent</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-gray-200">
                  {paginatedCampaigns.map(campaign => (
                    <tr
                      key={campaign.id}
                      className="hover:bg-gray-50 cursor-pointer transition-colors"
                      onClick={() => onSelect(campaign.id)}
                    >
                      <td className="px-4 py-3">
                        <span className="text-secondary-600 font-medium hover:text-secondary-700">{campaign.name}</span>
                      </td>
                      <td className="px-4 py-3">
                        <StatusBadge status={campaign.status} />
                      </td>
                      <td className="px-4 py-3 text-sm text-gray-600">
                        {campaign.connected_call_count}/{campaign.total_call_count}
                      </td>
                      <td className="px-4 py-3 text-sm text-gray-600">
                        {campaign.started_at ? new Date(campaign.started_at).toLocaleString('en-US', { day: 'numeric', month: 'short', hour: 'numeric', minute: '2-digit', hour12: true }) : '-'}
                      </td>
                      <td className="px-4 py-3 text-sm text-gray-600">
                        {campaign.agent.name}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </Card>
            {/* Pagination */}
            {totalPages > 1 && (
              <div className="flex items-center justify-between mt-4">
                <p className="text-sm text-gray-500">
                  Showing {(currentPage - 1) * pageSize + 1} to {Math.min(currentPage * pageSize, filteredCampaigns.length)} of {filteredCampaigns.length} campaigns
                </p>
                <div className="flex items-center gap-2">
                  <Button variant="outline" onClick={() => setCurrentPage(p => Math.max(1, p - 1))} disabled={currentPage === 1}>
                    Previous
                  </Button>
                  <span className="text-sm text-gray-600">Page {currentPage} of {totalPages}</span>
                  <Button variant="outline" onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))} disabled={currentPage === totalPages}>
                    Next
                  </Button>
                </div>
              </div>
            )}
          </>
        );
      })()}
    </div>
    </PageTransition>
  );
};

const CampaignDetail = ({ campaignId, onBack }: { campaignId: string; onBack: () => void }) => {
  const [campaign, setCampaign] = useState(null);
  const [calls, setCalls] = useState([]);
  const [totalCount, setTotalCount] = useState(0);
  const [loading, setLoading] = useState(true);
  const [callsLoading, setCallsLoading] = useState(true);
  const [loadingMore, setLoadingMore] = useState(false);
  const [exporting, setExporting] = useState(false);
  const [exportError, setExportError] = useState('');
  const [page, setPage] = useState(1);
  const [filter, setFilter] = useState({
    status: '',
    engagementStatus: '',
    answeredBy: '',
    search: ''
  });
  const [selectedCall, setSelectedCall] = useState(null);

  useEffect(() => {
    api.getCampaign(campaignId).then(setCampaign).finally(() => setLoading(false));
  }, [campaignId]);

  const getFilterParams = useCallback(() => {
    const params: any = { campaignId };
    if (filter.status) params.status = [filter.status];
    if (filter.engagementStatus) params.engagementStatus = [filter.engagementStatus];
    if (filter.answeredBy) params.answeredBy = [filter.answeredBy];
    return params;
  }, [campaignId, filter]);

  const loadCalls = useCallback(async (resetPage = true) => {
    if (resetPage) {
      setCallsLoading(true);
      setPage(1);
    } else {
      setLoadingMore(true);
    }
    try {
      const params = getFilterParams();
      const currentPage = resetPage ? 1 : page;
      const data = await api.listCalls({ ...params, page: currentPage, pageSize: 100 });
      if (resetPage) {
        setCalls(data.results);
      } else {
        setCalls(prev => [...prev, ...data.results]);
      }
      setTotalCount(data.count);
    } catch (err) {
      console.error(err);
    } finally {
      setCallsLoading(false);
      setLoadingMore(false);
    }
  }, [filter, page, getFilterParams]);

  useEffect(() => { loadCalls(true); }, [filter, campaignId]);

  const loadMore = async () => {
    const nextPage = page + 1;
    setPage(nextPage);
    setLoadingMore(true);
    try {
      const params = getFilterParams();
      const data = await api.listCalls({ ...params, page: nextPage, pageSize: 100 });
      setCalls(prev => [...prev, ...data.results]);
    } catch (err) {
      console.error(err);
    } finally {
      setLoadingMore(false);
    }
  };

  const handleExport = async () => {
    if (!campaign) return;
    setExporting(true);
    setExportError('');
    try {
      const params = getFilterParams();
      const allCalls = await api.listAllCalls(params);
      const agentsMap = new Map([[campaign.agent.id, campaign.agent.name]]);
      const result = exportCallsToCSV(allCalls, `campaign_${campaign.name.replace(/\s+/g, '_')}`, agentsMap);
      if (!result.success && result.error) {
        setExportError(result.error);
      }
    } catch (err) {
      console.error(err);
      setExportError('Failed to export calls');
    } finally {
      setExporting(false);
    }
  };

  if (loading) return (
    <div>
      <div className="flex items-center gap-2 mb-6">
        <Skeleton className="w-5 h-5" />
        <Skeleton className="h-4 w-64" />
      </div>
      <div className="grid grid-cols-6 gap-4 mb-6">
        {[1, 2, 3, 4, 5, 6].map(i => (
          <Card key={i} hover={false} className="p-4">
            <Skeleton className="h-4 w-16 mb-2" />
            <Skeleton className="h-8 w-12" />
          </Card>
        ))}
      </div>
      <SkeletonTable rows={5} />
    </div>
  );
  if (!campaign) return <Alert type="error" message="Campaign not found" />;

  const stats = [
    { label: 'Total Calls', value: campaign.total_call_count, color: 'bg-gray-100 text-gray-800' },
    { label: 'Connected', value: campaign.connected_call_count, color: 'bg-green-100 text-green-800' },
    { label: 'Not Connected', value: campaign.not_connected_call_count, color: 'bg-orange-100 text-orange-800' },
    { label: 'Failed', value: campaign.failed_call_count, color: 'bg-red-100 text-red-800' },
    { label: 'Engaged', value: campaign.engaged_call_count, color: 'bg-blue-100 text-blue-800' },
    { label: 'Not Engaged', value: campaign.not_engaged_call_count, color: 'bg-yellow-100 text-yellow-800' },
  ];

  const hasMore = calls.length < totalCount;

  if (selectedCall) {
    return (
      <CallDetail
        call={selectedCall}
        onBack={() => setSelectedCall(null)}
        backLabel="Back to Campaign"
        agents={[{ id: campaign.agent.id, name: campaign.agent.name }]}
      />
    );
  }

  // Calculate percentages for progress bars
  const total = campaign.total_call_count || 1;
  const connectedPct = Math.round((campaign.connected_call_count / total) * 100);
  const notConnectedPct = Math.round((campaign.not_connected_call_count / total) * 100);
  const failedPct = Math.round((campaign.failed_call_count / total) * 100);
  const engagedTotal = campaign.engaged_call_count + campaign.not_engaged_call_count || 1;
  const engagedPct = Math.round((campaign.engaged_call_count / engagedTotal) * 100);
  const notEngagedPct = 100 - engagedPct;

  return (
    <PageTransition>
    <div>
      {exportError && <Alert type="error" message={exportError} onClose={() => setExportError('')} />}
      {/* Header with breadcrumb */}
      <div className="flex items-center justify-between mb-6">
        <div className="flex items-center gap-2">
          <button onClick={onBack} className="p-1 hover:bg-gray-100 rounded transition-colors">
            <svg className="w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
            </svg>
          </button>
          <nav className="text-sm text-gray-500">
            <span className="hover:text-gray-700 cursor-pointer transition-colors" onClick={onBack}>Dashboard</span>
            <span className="mx-2">/</span>
            <span className="hover:text-gray-700 cursor-pointer" onClick={onBack}>Campaigns</span>
            <span className="mx-2">/</span>
            <span className="text-gray-900 font-medium">{campaign.name}</span>
          </nav>
        </div>
        <div className="flex items-center gap-4">
          <div className="flex items-center gap-2">
            <span className="w-2 h-2 bg-green-500 rounded-full"></span>
            <span className="text-sm text-gray-600">Campaign progress</span>
            <div className="w-24 h-2 bg-gray-200 rounded-full overflow-hidden">
              <div
                className="h-full bg-secondary-500 rounded-full"
                style={{ width: `${Math.min(100, (campaign.connected_call_count / total) * 100)}%` }}
              ></div>
            </div>
            <span className="text-sm font-medium">{campaign.connected_call_count} / {campaign.total_call_count}</span>
          </div>
          <Button variant="outline" onClick={() => loadCalls(true)} className="flex items-center gap-2">
            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
            </svg>
            Refresh
          </Button>
        </div>
      </div>

      {/* Progress Bar Stats */}
      <div className="grid grid-cols-2 gap-6 mb-8">
        {/* Campaign Health */}
        <Card className="p-5">
          <div className="flex items-center gap-2 mb-4">
            <h3 className="text-sm font-medium text-gray-700">Campaign health</h3>
            <svg className="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
          </div>
          {/* Stacked progress bar */}
          <div className="h-3 rounded-full overflow-hidden flex mb-4">
            <div className="bg-green-500" style={{ width: `${connectedPct}%` }}></div>
            <div className="bg-blue-400" style={{ width: `${notConnectedPct}%` }}></div>
            <div className="bg-red-500" style={{ width: `${failedPct}%` }}></div>
          </div>
          <div className="flex items-center gap-6 text-sm">
            <div className="flex items-center gap-2">
              <span className="w-3 h-3 bg-green-500 rounded-sm"></span>
              <span className="text-gray-600">Connected: <strong>{connectedPct}%</strong></span>
            </div>
            <div className="flex items-center gap-2">
              <span className="w-3 h-3 bg-blue-400 rounded-sm"></span>
              <span className="text-gray-600">No answer: <strong>{notConnectedPct}%</strong></span>
            </div>
            <div className="flex items-center gap-2">
              <span className="w-3 h-3 bg-red-500 rounded-sm"></span>
              <span className="text-gray-600">Failed: <strong>{failedPct}%</strong></span>
            </div>
          </div>
        </Card>

        {/* Engagement Rate */}
        <Card className="p-5">
          <div className="flex items-center gap-2 mb-4">
            <h3 className="text-sm font-medium text-gray-700">Engagement rate</h3>
            <svg className="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
          </div>
          {/* Stacked progress bar */}
          <div className="h-3 rounded-full overflow-hidden flex mb-4">
            <div className="bg-green-500" style={{ width: `${engagedPct}%` }}></div>
            <div className="bg-red-400" style={{ width: `${notEngagedPct}%` }}></div>
          </div>
          <div className="flex items-center gap-6 text-sm">
            <div className="flex items-center gap-2">
              <span className="w-3 h-3 bg-green-500 rounded-sm"></span>
              <span className="text-gray-600">Engaged: <strong>{engagedPct}%</strong></span>
            </div>
            <div className="flex items-center gap-2">
              <span className="w-3 h-3 bg-red-400 rounded-sm"></span>
              <span className="text-gray-600">Not engaged: <strong>{notEngagedPct}%</strong></span>
            </div>
          </div>
        </Card>
      </div>

      {/* Filters Row */}
      <div className="flex flex-wrap items-center justify-between gap-4 mb-4">
        <div className="flex items-center gap-3">
          <div className="relative">
            <svg className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
            </svg>
            <input
              type="text"
              placeholder="Search by name or number..."
              value={filter.search}
              onChange={e => setFilter(f => ({ ...f, search: e.target.value }))}
              className="pl-9 pr-4 py-2 border border-gray-300 rounded-lg text-sm w-64 focus:ring-2 focus:ring-secondary-500 focus:border-secondary-500 outline-none"
            />
          </div>
          <select
            value={filter.status}
            onChange={e => setFilter(f => ({ ...f, status: e.target.value }))}
            className="px-3 py-2 border border-gray-300 rounded-lg bg-white text-sm"
          >
            <option value="">Status</option>
            {CALL_STATUSES.map(s => <option key={s} value={s}>{s.replace(/_/g, ' ')}</option>)}
          </select>
          <select
            value={filter.engagementStatus}
            onChange={e => setFilter(f => ({ ...f, engagementStatus: e.target.value }))}
            className="px-3 py-2 border border-gray-300 rounded-lg bg-white text-sm"
          >
            <option value="">Engagement</option>
            {ENGAGEMENT_STATUSES.map(s => <option key={s} value={s}>{s.replace(/_/g, ' ')}</option>)}
          </select>
          <select
            value={filter.answeredBy}
            onChange={e => setFilter(f => ({ ...f, answeredBy: e.target.value }))}
            className="px-3 py-2 border border-gray-300 rounded-lg bg-white text-sm"
          >
            <option value="">Call ended by</option>
            {ANSWERED_BY_OPTIONS.map(s => <option key={s} value={s}>{s}</option>)}
          </select>
        </div>
        <Button variant="outline" onClick={handleExport} disabled={totalCount === 0 || exporting} className="flex items-center gap-2">
          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
          </svg>
          {exporting ? 'Exporting...' : 'Export table'}
        </Button>
      </div>

      {(() => {
        // Apply client-side filters (status, engagement, answered_by, search)
        const filteredCalls = calls.filter(call => {
          if (filter.status && call.status?.toUpperCase() !== filter.status.toUpperCase()) return false;
          if (filter.engagementStatus && call.engagement_status?.toUpperCase() !== filter.engagementStatus.toUpperCase()) return false;
          if (filter.answeredBy && call.answered_by?.toUpperCase() !== filter.answeredBy.toUpperCase()) return false;
          if (filter.search) {
            const searchLower = filter.search.toLowerCase();
            if (!call.callee_name.toLowerCase().includes(searchLower) && !call.mobile_number.includes(filter.search)) {
              return false;
            }
          }
          return true;
        });

        if (callsLoading) return <LoadingSpinner />;
        if (filteredCalls.length === 0) {
          return (
            <Card className="p-8 text-center">
              <p className="text-gray-500">{filter.search ? 'No calls match your search' : 'No calls found in this campaign'}</p>
            </Card>
          );
        }
        return (
          <>
            <div className="overflow-x-auto">
              <table className="w-full">
                <thead>
                  <tr className="bg-gray-50">
                    <th className="px-4 py-3 text-left text-sm font-medium text-gray-700">Contact</th>
                    <th className="px-4 py-3 text-left text-sm font-medium text-gray-700">Phone</th>
                    <th className="px-4 py-3 text-left text-sm font-medium text-gray-700">Status</th>
                    <th className="px-4 py-3 text-left text-sm font-medium text-gray-700">Duration</th>
                    <th className="px-4 py-3 text-left text-sm font-medium text-gray-700">Engagement</th>
                    <th className="px-4 py-3 text-left text-sm font-medium text-gray-700">Answered By</th>
                    <th className="px-4 py-3 text-left text-sm font-medium text-gray-700">Date</th>
                    <th className="px-4 py-3 text-left text-sm font-medium text-gray-700"></th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-gray-200">
                  {filteredCalls.map(call => (
                    <tr key={call.id} className="hover:bg-gray-50 transition-colors">
                      <td className="px-4 py-3 text-sm">{call.callee_name}</td>
                      <td className="px-4 py-3 text-sm text-gray-500">{call.mobile_number}</td>
                      <td className="px-4 py-3"><StatusBadge status={call.status} /></td>
                      <td className="px-4 py-3 text-sm text-gray-500">{call.duration_minutes ? `${call.duration_minutes.toFixed(1)} min` : '-'}</td>
                      <td className="px-4 py-3 text-sm text-gray-500">{call.engagement_status || '-'}</td>
                      <td className="px-4 py-3 text-sm text-gray-500">{call.answered_by || '-'}</td>
                      <td className="px-4 py-3 text-sm text-gray-500">{new Date(call.created_at).toLocaleDateString()}</td>
                      <td className="px-4 py-3"><Button variant="outline" onClick={() => setSelectedCall(call)}>View</Button></td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>

            {hasMore && !filter.search && (
              <div className="mt-6 text-center">
                <Button variant="outline" onClick={loadMore} disabled={loadingMore}>
                  {loadingMore ? 'Loading...' : `Load More (${totalCount - calls.length} remaining)`}
                </Button>
              </div>
            )}
          </>
        );
      })()}
    </div>
    </PageTransition>
  );
};

const CampaignsSection = () => {
  const [view, setView] = useState('list');
  const [selectedCampaignId, setSelectedCampaignId] = useState(null);
  const [agents, setAgents] = useState([]);
  const [successMsg, setSuccessMsg] = useState('');
  const [listKey, setListKey] = useState(0);

  useEffect(() => {
    api.listAgents().then(data => setAgents(data.results)).catch(console.error);
  }, []);

  const handleCampaignCreated = () => {
    setSuccessMsg('Campaign created!');
    setListKey(k => k + 1); // Force list reload
    setView('list');
  };

  return (
    <div>
      {successMsg && <Alert type="success" message={successMsg} onClose={() => setSuccessMsg('')} />}

      {view === 'list' && (
        <CampaignList
          key={listKey}
          onSelect={id => { setSelectedCampaignId(id); setView('view'); }}
          onCreate={() => setView('create')}
          agents={agents}
        />
      )}
      {view === 'create' && (
        <CreateCampaignWizard
          agents={agents}
          onSuccess={handleCampaignCreated}
          onCancel={() => setView('list')}
        />
      )}
      {view === 'view' && selectedCampaignId && (
        <CampaignDetail campaignId={selectedCampaignId} onBack={() => setView('list')} />
      )}
    </div>
  );
};

// ============================================================================
// TENANTS SECTION (for superadmin to manage client tenants)
// ============================================================================
const TenantsSection = () => {
  const [tenants, setTenants] = useState([]);
  const [loading, setLoading] = useState(true);
  const [showCreateModal, setShowCreateModal] = useState(false);
  const [tenantName, setTenantName] = useState('');
  const [tenantSlug, setTenantSlug] = useState('');
  const [ownerEmail, setOwnerEmail] = useState('');
  const [ownerName, setOwnerName] = useState('');
  const [tenantTimezoneValue, setTenantTimezoneValue] = useState('Asia/Kolkata');
  const [selectedPhoneNumbers, setSelectedPhoneNumbers] = useState([]);
  const [editingTenant, setEditingTenant] = useState(null);
  const [editPhoneNumbers, setEditPhoneNumbers] = useState([]);
  const [availableNumbers, setAvailableNumbers] = useState([]);
  const [loadingNumbers, setLoadingNumbers] = useState(false);
  const [inviteLink, setInviteLink] = useState('');
  const [error, setError] = useState('');
  const [success, setSuccess] = useState('');

  // Fetch available phone numbers from Hunar API
  const loadPhoneNumbers = async () => {
    setLoadingNumbers(true);
    try {
      const numbers = await api.listNumbers();
      setAvailableNumbers(numbers);
    } catch (err) {
      console.error('Error loading phone numbers:', err);
    } finally {
      setLoadingNumbers(false);
    }
  };

  // Load tenants from Firestore
  const loadTenants = async () => {
    if (!firebaseDb) {
      setLoading(false);
      return;
    }

    try {
      const snapshot = await firebaseDb
        .collection('tenants')
        .orderBy('createdAt', 'desc')
        .get();

      const tenantsList = snapshot.docs.map((doc: any) => ({
        id: doc.id,
        ...doc.data()
      }));
      setTenants(tenantsList);
    } catch (err) {
      console.error('Error loading tenants:', err);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    loadTenants();
    loadPhoneNumbers();
  }, []);

  const handleCreateTenant = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!tenantName || !tenantSlug || !ownerEmail || !ownerName) {
      setError('Please fill in all fields');
      return;
    }

    // Validate slug format
    if (!/^[a-z0-9-]+$/.test(tenantSlug)) {
      setError('Subdomain can only contain lowercase letters, numbers, and hyphens');
      return;
    }

    // Check reserved domain names
    const RESERVED_DOMAINS = ['admin', 'api', 'www', 'app', 'mail', 'ftp', 'ssh', 'test', 'staging', 'dev', 'prod', 'cdn', 'static', 'assets', 'login', 'auth', 'oauth', 'signup', 'register'];
    if (RESERVED_DOMAINS.includes(tenantSlug.toLowerCase())) {
      setError('This subdomain is reserved and cannot be used');
      return;
    }

    // Validate email format
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(ownerEmail)) {
      setError('Please enter a valid email address');
      return;
    }

    try {
      setError('');

      // Check if slug already exists
      const existingTenant = tenants.find((t: any) => t.slug === tenantSlug);
      if (existingTenant) {
        setError('This subdomain is already in use');
        return;
      }

      // Create tenant document
      const tenantDoc: any = {
        name: tenantName,
        slug: tenantSlug,
        ownerEmail: ownerEmail,
        ownerName: ownerName,
        timezone: tenantTimezoneValue,
        status: 'active',
        createdAt: firebase.firestore.FieldValue.serverTimestamp()
      };
      if (selectedPhoneNumbers.length > 0) {
        tenantDoc.phoneNumbers = selectedPhoneNumbers.map(pn => {
          const num = availableNumbers.find((n: any) => n.phone_number === pn);
          return {
            phone_number: pn,
            country_code: num?.country_code || '',
            allowed_countries: num?.allowed_countries || []
          };
        });
      }
      const tenantRef = await firebaseDb.collection('tenants').add(tenantDoc);

      // Create invite for the tenant admin
      const inviteData = {
        email: ownerEmail,
        name: ownerName,
        role: 'admin',
        tenant: tenantSlug,
        status: 'pending',
        createdAt: firebase.firestore.FieldValue.serverTimestamp()
      };
      await firebaseDb.collection('invites').doc(`${tenantSlug}_${ownerEmail}`).set(inviteData);

      // Generate invite link for the tenant subdomain
      const tenantDomain = `${tenantSlug}.recex-ai.com`;
      const link = `https://${tenantDomain}/login?invite=${encodeURIComponent(ownerEmail)}`;
      setInviteLink(link);

      // Add to local state
      setTenants((prev: any) => [{
        id: tenantRef.id,
        name: tenantName,
        slug: tenantSlug,
        ownerEmail: ownerEmail,
        ownerName: ownerName,
        timezone: tenantTimezoneValue,
        phoneNumbers: tenantDoc.phoneNumbers || [],
        status: 'active',
        createdAt: new Date()
      }, ...prev]);

      setSuccess('Tenant created! Share the invite link with the admin.');
    } catch (err) {
      const message = err && typeof err === 'object' && 'message' in err ? err.message : 'Failed to create tenant';
      setError(message);
    }
  };

  const handleToggleStatus = async (tenantId: string, currentStatus: string) => {
    try {
      const newStatus = currentStatus === 'active' ? 'inactive' : 'active';
      await firebaseDb.collection('tenants').doc(tenantId).update({ status: newStatus });
      setTenants((prev: any) => prev.map((t: any) =>
        t.id === tenantId ? { ...t, status: newStatus } : t
      ));
    } catch (err) {
      console.error('Error toggling tenant status:', err);
    }
  };

  const handleSavePhoneNumbers = async () => {
    if (!editingTenant) return;
    try {
      const phoneNumbers = editPhoneNumbers.map(pn => {
        const num = availableNumbers.find((n: any) => n.phone_number === pn);
        return {
          phone_number: pn,
          country_code: num?.country_code || '',
          allowed_countries: num?.allowed_countries || []
        };
      });
      await firebaseDb.collection('tenants').doc(editingTenant.id).update({ phoneNumbers });
      setTenants((prev: any) => prev.map((t: any) =>
        t.id === editingTenant.id ? { ...t, phoneNumbers } : t
      ));
      setEditingTenant(null);
      setEditPhoneNumbers([]);
    } catch (err) {
      console.error('Error updating phone numbers:', err);
    }
  };

  const togglePhoneSelection = (phoneNumber: string, list: string[], setter: (v: string[]) => void) => {
    setter(list.includes(phoneNumber) ? list.filter(p => p !== phoneNumber) : [...list, phoneNumber]);
  };

  const handleDeleteTenant = async (tenantId: string, tenantSlug: string, tenantName: string) => {
    if (!confirm(`Are you sure you want to delete "${tenantName}"?\n\nThis will permanently delete:\n- The tenant\n- All users in this tenant\n- All pending invites\n- All resource associations\n\nThis action cannot be undone.`)) {
      return;
    }
    try {
      await authService.deleteTenant(tenantId, tenantSlug);
      setTenants((prev: any) => prev.filter((t: any) => t.id !== tenantId));
      setSuccess(`Tenant "${tenantName}" has been deleted.`);
    } catch (err) {
      console.error('Error deleting tenant:', err);
      setError('Failed to delete tenant');
    }
  };

  // Auto-generate slug from name
  const handleNameChange = (name: string) => {
    setTenantName(name);
    setTenantSlug(name.toLowerCase().replace(/[^a-z0-9]/g, '-').replace(/-+/g, '-').replace(/^-|-$/g, ''));
  };

  if (loading) {
    return (
      <div className="flex items-center justify-center h-64">
        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-500"></div>
      </div>
    );
  }

  return (
    <div>
      <div className="flex items-center justify-between mb-6">
        <div>
          <h1 className="text-2xl font-bold text-gray-900">Tenants</h1>
          <p className="text-gray-500 mt-1">Manage your client organizations</p>
        </div>
        <Button onClick={() => setShowCreateModal(true)}>
          <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
          </svg>
          Add Tenant
        </Button>
      </div>

      {success && <Alert type="success" message={success} onClose={() => setSuccess('')} />}

      {tenants.length === 0 ? (
        <Card className="p-12 text-center">
          <svg className="w-12 h-12 text-gray-400 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
          </svg>
          <h3 className="text-lg font-medium text-gray-900 mb-2">No tenants yet</h3>
          <p className="text-gray-500 mb-4">Create your first tenant to start onboarding clients</p>
          <Button onClick={() => setShowCreateModal(true)}>Add Tenant</Button>
        </Card>
      ) : (
        <div className="grid gap-4">
          {tenants.map((tenant: any) => (
            <Card key={tenant.id} className="p-4">
              <div className="flex items-center justify-between">
                <div>
                  <h3 className="text-lg font-medium text-gray-900">{tenant.name}</h3>
                  <p className="text-sm text-gray-500">
                    {tenant.slug}.recex-ai.com
                  </p>
                  {tenant.timezone && (
                    <p className="text-xs text-gray-400 mt-0.5">
                      {SUPPORTED_TIMEZONES.find(tz => tz.value === tenant.timezone)?.label || tenant.timezone}
                    </p>
                  )}
                  {(tenant.phoneNumbers?.length > 0 || tenant.phoneNumber) && (
                    <div className="flex flex-wrap gap-1 mt-1">
                      {(tenant.phoneNumbers || (tenant.phoneNumber ? [{ phone_number: tenant.phoneNumber, country_code: tenant.phoneCountryCode }] : [])).map((pn: any) => (
                        <span key={pn.phone_number} className="inline-flex items-center text-xs bg-gray-100 text-gray-600 px-2 py-0.5 rounded">
                          {pn.phone_number} · {countryName(pn.country_code)}
                        </span>
                      ))}
                    </div>
                  )}
                </div>
                <div className="flex items-center gap-4">
                  <button
                    onClick={() => {
                      setEditingTenant(tenant);
                      const currentNumbers = tenant.phoneNumbers?.map((pn: any) => pn.phone_number) || (tenant.phoneNumber ? [tenant.phoneNumber] : []);
                      setEditPhoneNumbers(currentNumbers);
                    }}
                    className="p-2 text-gray-400 hover:text-secondary-600 hover:bg-secondary-50 rounded-lg transition-colors"
                    title="Edit phone numbers"
                  >
                    <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                    </svg>
                  </button>
                  <button
                    onClick={() => handleToggleStatus(tenant.id, tenant.status)}
                    className={`px-3 py-1 text-xs rounded-full font-medium ${
                      tenant.status === 'active'
                        ? 'bg-green-100 text-green-700 hover:bg-green-200'
                        : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
                    }`}
                  >
                    {tenant.status}
                  </button>
                  <a
                    href={`https://${tenant.slug}.recex-ai.com`}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="text-secondary-500 hover:text-secondary-600"
                    title="Open tenant portal"
                  >
                    <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
                    </svg>
                  </a>
                  <button
                    onClick={() => handleDeleteTenant(tenant.id, tenant.slug, tenant.name)}
                    className="p-2 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors"
                    title="Delete tenant"
                  >
                    <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                    </svg>
                  </button>
                </div>
              </div>
            </Card>
          ))}
        </div>
      )}

      {/* Create Tenant Modal */}
      {showCreateModal && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
          <Card className="w-full max-w-md p-6">
            {inviteLink ? (
              // Show invite link after successful creation
              <div>
                <div className="flex items-center justify-center w-12 h-12 bg-green-100 rounded-full mx-auto mb-4">
                  <svg className="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                  </svg>
                </div>
                <h2 className="text-xl font-bold text-gray-900 mb-2 text-center">Tenant Created!</h2>
                <p className="text-gray-600 text-sm text-center mb-4">
                  Share this invite link with the admin of <strong>{tenantSlug}.recex-ai.com</strong>
                </p>
                <div className="p-3 bg-gray-50 rounded-lg mb-4">
                  <p className="text-xs text-gray-500 mb-1">Invite Link:</p>
                  <p className="text-sm font-mono text-gray-800 break-all">{inviteLink}</p>
                </div>
                <div className="flex gap-3">
                  <Button
                    variant="outline"
                    className="flex-1"
                    onClick={() => {
                      setShowCreateModal(false);
                      setInviteLink('');
                      setTenantName('');
                      setTenantSlug('');
                      setOwnerEmail('');
                      setOwnerName('');
                      setTenantTimezoneValue('Asia/Kolkata');
                      setSelectedPhoneNumbers([]);
                      setSuccess('');
                    }}
                  >
                    Close
                  </Button>
                  <Button
                    className="flex-1"
                    onClick={async () => {
                      await copyToClipboard(inviteLink);
                      setSuccess('Link copied!');
                      setTimeout(() => setSuccess(''), 2000);
                    }}
                  >
                    {success === 'Link copied!' ? 'Copied!' : 'Copy Link'}
                  </Button>
                </div>
              </div>
            ) : (
              // Show form for creating tenant
              <div>
                <h2 className="text-xl font-bold text-gray-900 mb-4">Add New Tenant</h2>
                <form onSubmit={handleCreateTenant}>
                  {error && <Alert type="error" message={error} onClose={() => setError('')} />}

                  <div className="mb-4">
                    <label className="block text-sm font-medium text-gray-700 mb-1">Company Name</label>
                    <input
                      type="text"
                      value={tenantName}
                      onChange={(e) => handleNameChange(e.target.value)}
                      placeholder="Acme Corp"
                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary-500"
                      required
                    />
                  </div>

                  <div className="mb-4">
                    <label className="block text-sm font-medium text-gray-700 mb-1">Subdomain</label>
                    <div className="flex items-center">
                      <input
                        type="text"
                        value={tenantSlug}
                        onChange={(e) => setTenantSlug(e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, ''))}
                        placeholder="acme"
                        className="flex-1 px-3 py-2 border border-gray-300 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-secondary-500"
                        required
                      />
                      <span className="px-3 py-2 bg-gray-100 border border-l-0 border-gray-300 rounded-r-lg text-gray-500 text-sm">
                        .recex-ai.com
                      </span>
                    </div>
                  </div>

                  <div className="mb-4">
                    <label className="block text-sm font-medium text-gray-700 mb-1">Timezone</label>
                    <select
                      value={tenantTimezoneValue}
                      onChange={(e) => setTenantTimezoneValue(e.target.value)}
                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary-500 bg-white"
                    >
                      {SUPPORTED_TIMEZONES.map(tz => (
                        <option key={tz.value} value={tz.value}>{tz.label}</option>
                      ))}
                    </select>
                    <p className="text-xs text-gray-500 mt-1">Used for 8am-8pm calling window enforcement</p>
                  </div>

                  <div className="mb-4">
                    <label className="block text-sm font-medium text-gray-700 mb-1">Calling Numbers</label>
                    {loadingNumbers ? (
                      <p className="text-sm text-gray-500 py-2">Loading available numbers...</p>
                    ) : availableNumbers.length === 0 ? (
                      <p className="text-sm text-gray-400 py-2">No phone numbers available</p>
                    ) : (
                      <div className="border border-gray-300 rounded-lg max-h-40 overflow-y-auto">
                        {availableNumbers.map((n: any) => (
                          <label key={n.id} className="flex items-center gap-3 px-3 py-2 hover:bg-gray-50 cursor-pointer border-b border-gray-100 last:border-b-0">
                            <input
                              type="checkbox"
                              checked={selectedPhoneNumbers.includes(n.phone_number)}
                              onChange={() => togglePhoneSelection(n.phone_number, selectedPhoneNumbers, setSelectedPhoneNumbers)}
                              className="w-4 h-4 text-secondary-500 rounded border-gray-300 focus:ring-secondary-500"
                            />
                            <div>
                              <p className="text-sm text-gray-800">{n.phone_number} · {countryName(n.country_code)}</p>
                              {n.allowed_countries?.length > 0 && (
                                <p className="text-xs text-gray-400">Calls to: {n.allowed_countries.map(countryName).join(', ')}</p>
                              )}
                            </div>
                          </label>
                        ))}
                      </div>
                    )}
                    <p className="text-xs text-gray-500 mt-1">Select calling numbers to assign to this tenant</p>
                  </div>

                  <div className="border-t border-gray-200 my-4 pt-4">
                    <p className="text-sm font-medium text-gray-700 mb-3">Tenant Admin (First User)</p>

                    <div className="mb-4">
                      <label className="block text-sm font-medium text-gray-700 mb-1">Admin Name</label>
                      <input
                        type="text"
                        value={ownerName}
                        onChange={(e) => setOwnerName(e.target.value)}
                        placeholder="John Doe"
                        className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary-500"
                        required
                      />
                    </div>

                    <div className="mb-4">
                      <label className="block text-sm font-medium text-gray-700 mb-1">Admin Email</label>
                      <input
                        type="email"
                        value={ownerEmail}
                        onChange={(e) => setOwnerEmail(e.target.value)}
                        placeholder="john@acme.com"
                        className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary-500"
                        required
                      />
                    </div>
                  </div>

                  <div className="flex justify-end gap-3 mt-6">
                    <Button variant="outline" type="button" onClick={() => { setShowCreateModal(false); setError(''); }}>
                      Cancel
                    </Button>
                    <Button type="submit">Create Tenant</Button>
                  </div>
                </form>
              </div>
            )}
          </Card>
        </div>
      )}

      {/* Edit Phone Numbers Modal */}
      {editingTenant && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
          <Card className="w-full max-w-md p-6">
            <h2 className="text-xl font-bold text-gray-900 mb-2">Edit Calling Numbers</h2>
            <p className="text-gray-500 text-sm mb-4">{editingTenant.name} ({editingTenant.slug}.recex-ai.com)</p>

            {loadingNumbers ? (
              <p className="text-sm text-gray-500 py-4">Loading available numbers...</p>
            ) : availableNumbers.length === 0 ? (
              <p className="text-sm text-gray-400 py-4">No phone numbers available</p>
            ) : (
              <div className="border border-gray-300 rounded-lg max-h-60 overflow-y-auto mb-4">
                {availableNumbers.map((n: any) => (
                  <label key={n.id} className="flex items-center gap-3 px-3 py-2 hover:bg-gray-50 cursor-pointer border-b border-gray-100 last:border-b-0">
                    <input
                      type="checkbox"
                      checked={editPhoneNumbers.includes(n.phone_number)}
                      onChange={() => togglePhoneSelection(n.phone_number, editPhoneNumbers, setEditPhoneNumbers)}
                      className="w-4 h-4 text-secondary-500 rounded border-gray-300 focus:ring-secondary-500"
                    />
                    <div>
                      <p className="text-sm text-gray-800">{n.phone_number} · {countryName(n.country_code)}</p>
                      {n.allowed_countries?.length > 0 && (
                        <p className="text-xs text-gray-400">Calls to: {n.allowed_countries.map(countryName).join(', ')}</p>
                      )}
                    </div>
                  </label>
                ))}
              </div>
            )}

            <div className="flex justify-end gap-3">
              <Button variant="outline" onClick={() => { setEditingTenant(null); setEditPhoneNumbers([]); }}>Cancel</Button>
              <Button onClick={handleSavePhoneNumbers}>Save</Button>
            </div>
          </Card>
        </div>
      )}
    </div>
  );
};

// ============================================================================
// USERS SECTION
// ============================================================================
const UsersSection = () => {
  const [users, setUsers] = useState([]);
  const [invites, setInvites] = useState([]);
  const [loading, setLoading] = useState(true);
  const [showInviteModal, setShowInviteModal] = useState(false);
  const [inviteEmail, setInviteEmail] = useState('');
  const [inviteName, setInviteName] = useState('');
  const [inviteLoading, setInviteLoading] = useState(false);
  const [error, setError] = useState('');
  const [success, setSuccess] = useState('');
  const [inviteLink, setInviteLink] = useState('');
  const [linkCopied, setLinkCopied] = useState(false);
  const [copiedInviteEmail, setCopiedInviteEmail] = useState('');

  // Check if current user is superadmin and on apex domain
  const isSuperadmin = localStorage.getItem(STORAGE_KEYS.USER_ROLE) === 'superadmin';
  const onApexDomain = isMainDomain();
  // On apex domain, superadmins see ALL users (read-only view)
  const isReadOnlyView = isSuperadmin && onApexDomain;

  const loadData = async () => {
    setLoading(true);
    try {
      // On apex domain, fetch all users across all tenants
      const fetchAllTenants = isReadOnlyView;
      const [usersData, invitesData] = await Promise.all([
        authService.getAllUsers(fetchAllTenants),
        authService.getPendingInvites(fetchAllTenants)
      ]);
      setUsers(usersData);
      setInvites(invitesData);
    } catch (err) {
      console.error('Error loading users:', err);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    if (isFirebaseConfigured()) {
      loadData();
    } else {
      setLoading(false);
    }
  }, []);

  const handleInvite = async (e: React.FormEvent) => {
    e.preventDefault();
    setInviteLoading(true);
    setError('');
    setInviteLink('');
    setLinkCopied(false);

    try {
      const link = await authService.inviteUser(inviteEmail, inviteName);
      setInviteLink(link);
      loadData();
    } catch (err) {
      setError(err.message || 'Failed to create invitation');
    } finally {
      setInviteLoading(false);
    }
  };

  const handleCopyLink = async () => {
    await copyToClipboard(inviteLink);
    setLinkCopied(true);
    setTimeout(() => setLinkCopied(false), 2000);
  };

  const handleCopyInviteLink = async (email: string, name: string) => {
    const link = generateInviteLink(email, name);
    await copyToClipboard(link);
    setCopiedInviteEmail(email);
    setTimeout(() => setCopiedInviteEmail(''), 2000);
  };

  const handleCloseInviteModal = () => {
    const wasInviteCreated = !!inviteLink;
    const invitedEmail = inviteEmail;
    setShowInviteModal(false);
    setInviteEmail('');
    setInviteName('');
    setInviteLink('');
    setLinkCopied(false);
    setError('');
    if (wasInviteCreated) {
      setSuccess(`Invitation created for ${invitedEmail}`);
    }
  };

  const handleRevokeInvite = async (email: string, tenant?: string) => {
    if (!confirm(`Revoke invitation for ${email}?`)) return;
    try {
      // Pass tenant for superadmin cross-tenant deletion
      await authService.revokeInvite(email, tenant);
      loadData();
      setSuccess(`Invitation for ${email} has been revoked.`);
    } catch (err) {
      setError(err.message || 'Failed to revoke invitation');
    }
  };

  const handleDeleteUser = async (user: AppUser) => {
    if (!confirm(`Are you sure you want to delete ${user.name} (${user.email})?\n\nThis will remove their access permanently. This action cannot be undone.`)) return;
    try {
      await authService.deleteUser(user.uid);
      loadData();
      setSuccess(`User ${user.name} has been deleted.`);
    } catch (err) {
      setError(err.message || 'Failed to delete user');
    }
  };

  const handleToggleUserStatus = async (user: AppUser) => {
    const action = user.status === 'active' ? 'deactivate' : 'reactivate';
    if (!confirm(`${action.charAt(0).toUpperCase() + action.slice(1)} ${user.name}?`)) return;
    try {
      if (user.status === 'active') {
        await authService.deactivateUser(user.uid);
      } else {
        await authService.reactivateUser(user.uid);
      }
      loadData();
    } catch (err) {
      setError(err.message || `Failed to ${action} user`);
    }
  };

  if (!isFirebaseConfigured()) {
    return (
      <div className="animate-fade-in">
        <div className="mb-6">
          <h1 className="text-2xl font-bold text-gray-900">User Management</h1>
          <p className="text-gray-500 mt-1">Manage users and invitations</p>
        </div>
        <Card className="p-8 text-center">
          <div className="w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center mx-auto mb-4">
            <svg className="w-8 h-8 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
            </svg>
          </div>
          <h2 className="text-lg font-semibold text-gray-900 mb-2">Firebase Not Configured</h2>
          <p className="text-gray-500 mb-4">
            To use user management, you need to configure Firebase.
          </p>
          <p className="text-sm text-gray-400">
            See FIREBASE_SETUP.md for instructions.
          </p>
        </Card>
      </div>
    );
  }

  if (loading) {
    return (
      <div className="animate-fade-in">
        <div className="mb-6">
          <h1 className="text-2xl font-bold text-gray-900">User Management</h1>
          <p className="text-gray-500 mt-1">Manage users and invitations</p>
        </div>
        <div className="space-y-4">
          {[1, 2, 3].map(i => (
            <div key={i} className="bg-white rounded-lg border border-gray-200 p-4 animate-pulse">
              <div className="flex items-center gap-4">
                <div className="w-10 h-10 bg-gray-200 rounded-full" />
                <div className="flex-1">
                  <div className="h-4 bg-gray-200 rounded w-1/3 mb-2" />
                  <div className="h-3 bg-gray-100 rounded w-1/4" />
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    );
  }

  return (
    <div className="animate-fade-in">
      {/* Header */}
      <div className="flex items-center justify-between mb-6">
        <div>
          <h1 className="text-2xl font-bold text-gray-900">User Management</h1>
          <p className="text-gray-500 mt-1">{users.length} users, {invites.length} pending invites</p>
        </div>
        {!isReadOnlyView && <Button onClick={() => setShowInviteModal(true)}>+ Invite User</Button>}
      </div>

      {isReadOnlyView && (
        <div className="mb-4 p-3 bg-blue-50 border border-blue-200 rounded-lg text-blue-700 text-sm">
          Read-only view: Showing all users across all tenants. Go to demo.recex-ai.com to manage users.
        </div>
      )}

      {success && <Alert type="success" message={success} onClose={() => setSuccess('')} />}
      {error && <Alert type="error" message={error} onClose={() => setError('')} />}

      {/* Pending Invites */}
      {invites.length > 0 && (
        <div className="mb-8">
          <h2 className="text-lg font-semibold text-gray-900 mb-4">Pending Invitations</h2>
          <div className="space-y-3">
            {invites.map(invite => (
              <Card key={invite.email} className="p-4">
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-3">
                    <div className="w-10 h-10 bg-yellow-100 rounded-full flex items-center justify-center">
                      <svg className="w-5 h-5 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                      </svg>
                    </div>
                    <div>
                      <p className="font-medium text-gray-900">{invite.name}</p>
                      <p className="text-sm text-gray-500">{invite.email}</p>
                      {isSuperadmin && invite.tenant && (
                        <p className="text-xs text-blue-600 mt-0.5">{invite.tenant}.recex-ai.com</p>
                      )}
                    </div>
                  </div>
                  <div className="flex items-center gap-2">
                    <span className="px-2 py-1 text-xs font-medium bg-yellow-100 text-yellow-800 rounded">
                      Pending
                    </span>
                    {!isReadOnlyView && (
                      <button
                        onClick={() => handleCopyInviteLink(invite.email, invite.name)}
                        className={`p-2 rounded-lg transition-colors ${copiedInviteEmail === invite.email ? 'text-green-600 bg-green-50' : 'text-gray-400 hover:text-secondary-600 hover:bg-secondary-50'}`}
                        title={copiedInviteEmail === invite.email ? 'Copied!' : 'Copy invite link'}
                      >
                        {copiedInviteEmail === invite.email ? (
                          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                          </svg>
                        ) : (
                          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
                          </svg>
                        )}
                      </button>
                    )}
                    <button
                      onClick={() => handleRevokeInvite(invite.email, invite.tenant)}
                      className="p-2 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors"
                      title="Revoke invitation"
                    >
                      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                      </svg>
                    </button>
                  </div>
                </div>
              </Card>
            ))}
          </div>
        </div>
      )}

      {/* Active Users */}
      <div>
        <h2 className="text-lg font-semibold text-gray-900 mb-4">Users</h2>
        {users.length === 0 ? (
          <Card className="p-8 text-center">
            <div className="w-12 h-12 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
              <svg className="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
              </svg>
            </div>
            <h3 className="text-lg font-medium text-gray-900 mb-2">No users yet</h3>
            <p className="text-gray-500 mb-4">
              {isReadOnlyView ? 'No users have registered across any tenant yet.' : 'Invite team members to collaborate on your campaigns'}
            </p>
            {!isReadOnlyView && <Button onClick={() => setShowInviteModal(true)}>+ Invite User</Button>}
          </Card>
        ) : (
          <div className="space-y-3">
            {users.map(user => (
              <Card key={user.uid} className="p-4">
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-3">
                    <div className={`w-10 h-10 rounded-full flex items-center justify-center text-white font-medium ${user.status === 'active' ? 'bg-secondary-500' : 'bg-gray-400'}`}>
                      {user.name?.charAt(0).toUpperCase() || 'U'}
                    </div>
                    <div>
                      <p className="font-medium text-gray-900">{user.name}</p>
                      <p className="text-sm text-gray-500">{user.email}</p>
                      {isSuperadmin && user.tenant && (
                        <p className="text-xs text-blue-600 mt-0.5">{user.tenant}.recex-ai.com</p>
                      )}
                    </div>
                  </div>
                  <div className="flex items-center gap-2">
                    {user.role && (
                      <span className="px-2 py-1 text-xs font-medium bg-blue-100 text-blue-800 rounded">
                        {user.role}
                      </span>
                    )}
                    <span className={`px-2 py-1 text-xs font-medium rounded ${user.status === 'active' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-600'}`}>
                      {user.status === 'active' ? 'Active' : 'Inactive'}
                    </span>
                    {!isReadOnlyView && (
                      <button
                        onClick={() => handleToggleUserStatus(user)}
                        className={`p-2 rounded-lg transition-colors ${user.status === 'active' ? 'text-gray-400 hover:text-red-600 hover:bg-red-50' : 'text-gray-400 hover:text-green-600 hover:bg-green-50'}`}
                        title={user.status === 'active' ? 'Deactivate user' : 'Reactivate user'}
                      >
                        {user.status === 'active' ? (
                          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
                          </svg>
                        ) : (
                          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                          </svg>
                        )}
                      </button>
                    )}
                    <button
                      onClick={() => handleDeleteUser(user)}
                      className="p-2 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors"
                      title="Delete user"
                    >
                      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                      </svg>
                    </button>
                  </div>
                </div>
              </Card>
            ))}
          </div>
        )}
      </div>

      {/* Invite Modal */}
      {showInviteModal && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50">
          <Card className="w-full max-w-md p-6">
            <div className="flex items-center justify-between mb-4">
              <h2 className="text-lg font-semibold text-gray-900">
                {inviteLink ? 'Invitation Created' : 'Invite User'}
              </h2>
              <button onClick={handleCloseInviteModal} className="p-1 text-gray-400 hover:text-gray-600">
                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                </svg>
              </button>
            </div>

            {inviteLink ? (
              <div>
                <div className="mb-4">
                  <div className="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-3">
                    <svg className="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                    </svg>
                  </div>
                  <p className="text-center text-gray-600 mb-4">
                    Share this link with <strong>{inviteName}</strong> to let them set up their account:
                  </p>
                  <div className="bg-gray-50 border border-gray-200 rounded-lg p-3 mb-3">
                    <p className="text-sm text-gray-700 break-all font-mono">{inviteLink}</p>
                  </div>
                </div>
                <div className="flex gap-3">
                  <Button type="button" variant="secondary" onClick={handleCloseInviteModal} className="flex-1">
                    Close
                  </Button>
                  <Button type="button" onClick={handleCopyLink} className="flex-1">
                    {linkCopied ? 'Copied!' : 'Copy Link'}
                  </Button>
                </div>
              </div>
            ) : (
              <form onSubmit={handleInvite}>
                {error && (
                  <div className="mb-4 p-3 bg-red-50 border border-red-200 rounded-lg text-red-700 text-sm">
                    {error}
                  </div>
                )}
                <div className="mb-4">
                  <Input
                    label="Name"
                    type="text"
                    value={inviteName}
                    onChange={e => setInviteName(e.target.value)}
                    placeholder="Enter user's name"
                    required
                  />
                </div>
                <div className="mb-4">
                  <Input
                    label="Email"
                    type="email"
                    value={inviteEmail}
                    onChange={e => setInviteEmail(e.target.value)}
                    placeholder="Enter user's email"
                    required
                  />
                </div>
                <div className="flex gap-3">
                  <Button type="button" variant="secondary" onClick={handleCloseInviteModal} className="flex-1">
                    Cancel
                  </Button>
                  <Button type="submit" className="flex-1" disabled={inviteLoading}>
                    {inviteLoading ? 'Creating...' : 'Create Invitation'}
                  </Button>
                </div>
              </form>
            )}
          </Card>
        </div>
      )}
    </div>
  );
};

// ============================================================================
// SIDEBAR COMPONENT
// ============================================================================
const Sidebar = ({ activeTab, onTabChange, onLogout, userRole, userName }: {
  activeTab: string;
  onTabChange: (tab: string) => void;
  onLogout: () => void;
  userRole?: UserRole;
  userName?: string;
}) => {
  // Define all possible nav items (simplified 3-role system: superadmin, admin, user)
  const allNavItems = [
    { id: 'campaigns', label: 'Campaigns', icon: 'M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z', roles: ['superadmin', 'admin', 'user'] },
    { id: 'agents', label: 'Agents', icon: 'M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z', roles: ['superadmin', 'admin', 'user'] },
    { id: 'calls', label: 'Calls', icon: 'M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z', roles: ['superadmin', 'admin', 'user'] },
    { id: 'tenants', label: 'Tenants', icon: 'M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4', roles: ['superadmin'] },
    { id: 'users', label: 'Users', icon: 'M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z', roles: ['superadmin', 'admin'] },
  ];

  // Filter nav items based on user role and domain
  const role = userRole || 'user';
  const onMainDomain = isMainDomain();
  const navItems = allNavItems.filter(item => {
    // Tenants tab only visible on main domain (recex-ai.com), not on tenant subdomains
    if (item.id === 'tenants' && !onMainDomain) {
      return false;
    }
    // On main domain, superadmins only see Tenants and Users tabs (not campaigns/agents/calls)
    if (onMainDomain && role === 'superadmin') {
      if (['campaigns', 'agents', 'calls'].includes(item.id)) {
        return false;
      }
    }
    return item.roles.includes(role);
  });

  return (
    <aside className="w-64 bg-white border-r border-gray-200 flex flex-col h-screen fixed left-0 top-0">
      {/* Logo */}
      <div className="p-4 border-b border-gray-200">
        <div className="flex items-center gap-3">
          <img src={brandingService.getBranding().logoUrl} alt={brandingService.getBranding().appName} className="h-10 object-contain" />
          <span className="text-lg font-bold text-gray-900">{brandingService.getBranding().appName}</span>
        </div>
      </div>

      {/* Navigation */}
      <nav className="flex-1 p-4">
        <p className="text-xs font-medium text-gray-400 uppercase tracking-wider mb-3">Platform</p>
        <div className="space-y-1">
          {navItems.map(item => (
            <button
              key={item.id}
              onClick={() => onTabChange(item.id)}
              className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors ${
                activeTab === item.id
                  ? 'bg-secondary-50 text-secondary-600 border border-secondary-200'
                  : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'
              }`}
            >
              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={item.icon} />
              </svg>
              {item.label}
            </button>
          ))}
        </div>
      </nav>

      {/* Bottom section */}
      <div className="p-4 border-t border-gray-200">
        {/* User profile */}
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="w-9 h-9 bg-secondary-500 rounded-full flex items-center justify-center text-white font-medium text-sm">
              {userName?.charAt(0).toUpperCase() || 'U'}
            </div>
            <div>
              <p className="text-sm font-medium text-gray-900">{userName || 'User'}</p>
              <p className="text-xs text-gray-500 capitalize">{role}</p>
            </div>
          </div>
          <button
            onClick={onLogout}
            className="p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"
            title="Logout"
          >
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
            </svg>
          </button>
        </div>
      </div>
    </aside>
  );
};

// ============================================================================
// MAIN APP
// ============================================================================
// Helper to get tab from URL hash
const getTabFromHash = () => {
  const hash = window.location.hash.slice(1); // Remove #
  const onMainDomain = isMainDomain();

  // On main domain: superadmins only have tenants/users tabs
  // On subdomains: no tenants tab
  if (onMainDomain) {
    // Default to tenants on main domain (superadmin landing page)
    const validTabs = ['tenants', 'users'];
    return validTabs.includes(hash) ? hash : 'tenants';
  } else {
    const validTabs = ['campaigns', 'agents', 'calls', 'users'];
    return validTabs.includes(hash) ? hash : 'campaigns';
  }
};

const App = () => {
  const [authenticated, setAuthenticated] = useState(() => localStorage.getItem(STORAGE_KEYS.AUTHENTICATED) === 'true');
  const [activeTab, setActiveTab] = useState(() => getTabFromHash());
  const [branding, setBranding] = useState(DEFAULT_BRANDING);
  const [brandingLoaded, setBrandingLoaded] = useState(false);
  const [userRole, setUserRole] = useState(() => {
    const stored = localStorage.getItem(STORAGE_KEYS.USER_ROLE);
    if (stored === 'superadmin' || stored === 'admin' || stored === 'user') {
      return stored;
    }
    return 'user';
  });
  const [userName, setUserName] = useState(() => localStorage.getItem(STORAGE_KEYS.USER_NAME) || '');
  const [authChecking, setAuthChecking] = useState(true);
  // 'valid' = tenant exists and is active, 'not_found' = no such tenant, 'inactive' = tenant deactivated, null = still checking
  const [tenantStatus, setTenantStatus] = useState(null);

  // Validate that the current subdomain corresponds to a real tenant in Firestore
  useEffect(() => {
    const checkTenantExists = async () => {
      // Main domain (recex-ai.com) is always valid
      if (isMainDomain()) {
        setTenantStatus('valid');
        return;
      }

      const currentTenant = getTenant();

      // "demo" subdomain is always valid (superadmin playground)
      if (currentTenant === 'demo') {
        setTenantStatus('valid');
        return;
      }

      // No Firestore means we can't validate - block (fail-closed)
      if (!firebaseDb) {
        setTenantStatus('not_found');
        return;
      }

      try {
        // Query the tenants collection for a document with matching slug
        const snapshot = await firebaseDb
          .collection('tenants')
          .where('slug', '==', currentTenant)
          .limit(1)
          .get();

        if (snapshot.empty) {
          setTenantStatus('not_found');
        } else {
          const tenantData = snapshot.docs[0].data();
          // Store tenant timezone if configured, for use in API calls
          if (tenantData.timezone) {
            setTenantTimezone(tenantData.timezone);
          }
          setTenantStatus(tenantData.status === 'inactive' ? 'inactive' : 'valid');
        }
      } catch (err) {
        console.error('Tenant validation failed:', err);
        // Fail-closed: block access on error to prevent unauthorized access
        setTenantStatus('not_found');
      }
    };

    checkTenantExists();
  }, []);

  // Sync Firebase auth state with app state on mount and on auth changes
  // This handles: session invalidation after password reset, expired tokens,
  // and re-verifying tenant access for cached sessions
  useEffect(() => {
    if (!firebaseAuth) {
      setAuthChecking(false);
      return;
    }

    const unsubscribe = firebaseAuth.onAuthStateChanged(async (user: any) => {
      if (!user) {
        // Firebase has no active session - clear app auth state
        if (authenticated) {
          localStorage.removeItem(STORAGE_KEYS.AUTHENTICATED);
          localStorage.removeItem(STORAGE_KEYS.USER_ROLE);
          localStorage.removeItem(STORAGE_KEYS.USER_NAME);
          setAuthenticated(false);
          setUserRole('user');
          setUserName('');
          window.history.replaceState({}, '', window.location.pathname);
        }
        setAuthChecking(false);
        return;
      }

      // Firebase has an active session - re-verify tenant access
      if (localStorage.getItem(STORAGE_KEYS.AUTHENTICATED) === 'true') {
        try {
          const verification = await authService.verifyTenant(user.uid);
          if (!verification.valid) {
            // User no longer has access to this tenant - sign out
            await authService.signOut();
            localStorage.removeItem(STORAGE_KEYS.AUTHENTICATED);
            localStorage.removeItem(STORAGE_KEYS.USER_ROLE);
            localStorage.removeItem(STORAGE_KEYS.USER_NAME);
            setAuthenticated(false);
            setUserRole('user');
            setUserName('');
            window.history.replaceState({}, '', window.location.pathname);
          } else if (verification.user) {
            // Update role/name in case they changed
            setUserRole(verification.user.role);
            setUserName(verification.user.name);
            localStorage.setItem(STORAGE_KEYS.USER_ROLE, verification.user.role);
            localStorage.setItem(STORAGE_KEYS.USER_NAME, verification.user.name);
          }
        } catch (err) {
          console.error('Tenant re-verification failed:', err);
        }
      }
      setAuthChecking(false);
    });

    return () => unsubscribe();
  }, []);

  // Load branding on mount
  useEffect(() => {
    brandingService.loadBranding().then((loadedBranding) => {
      setBranding(loadedBranding);
      brandingService.applyBranding(loadedBranding);
      setBrandingLoaded(true);
    });
  }, []);

  // Store user role when it changes
  useEffect(() => {
    localStorage.setItem(STORAGE_KEYS.USER_ROLE, userRole);
  }, [userRole]);

  // Store user name when it changes
  useEffect(() => {
    localStorage.setItem(STORAGE_KEYS.USER_NAME, userName);
  }, [userName]);

  // Counter to force section remount when clicking the already-active tab
  const [sectionResetKey, setSectionResetKey] = useState(0);

  // Handle tab change with URL update
  const handleTabChange = useCallback((tab: string) => {
    // Always increment reset key so clicking the active tab resets the section view
    setSectionResetKey(k => k + 1);
    setActiveTab(tab);
    window.history.pushState({ tab }, '', `#${tab}`);
  }, []);

  // Listen for browser back/forward navigation
  useEffect(() => {
    const handlePopState = () => {
      setActiveTab(getTabFromHash());
    };
    window.addEventListener('popstate', handlePopState);
    return () => window.removeEventListener('popstate', handlePopState);
  }, []);

  // Set initial URL hash if not present
  useEffect(() => {
    if (!window.location.hash && authenticated) {
      window.history.replaceState({ tab: 'campaigns' }, '', '#campaigns');
    }
  }, [authenticated]);

  const handleLogout = () => {
    localStorage.removeItem(STORAGE_KEYS.AUTHENTICATED);
    localStorage.removeItem(STORAGE_KEYS.USER_ROLE);
    localStorage.removeItem(STORAGE_KEYS.USER_NAME);
    setAuthenticated(false);
    setUserRole('user');
    setUserName('');
    // Clear hash on logout
    window.history.replaceState({}, '', window.location.pathname);
  };

  // Callback to set user role and name after login
  const handleLogin = (role: UserRole = 'user', name: string = '') => {
    setUserRole(role);
    setUserName(name);
    setAuthenticated(true);
  };

  const brandingContextValue = { branding, isLoading: !brandingLoaded };

  // Show loading screen while branding loads, auth is being re-verified, or tenant is being validated
  if (!brandingLoaded || authChecking || tenantStatus === null) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gray-50">
        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-400"></div>
      </div>
    );
  }

  // Show error page if the subdomain doesn't match any registered tenant
  if (tenantStatus === 'not_found') {
    const currentTenant = getTenant();
    return (
      <div className="min-h-screen flex items-center justify-center bg-gray-50">
        <div className="max-w-md w-full text-center p-8">
          <div className="mx-auto w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mb-6">
            <svg className="w-8 h-8 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
            </svg>
          </div>
          <h1 className="text-2xl font-bold text-gray-900 mb-2">Organization Not Found</h1>
          <p className="text-gray-600 mb-6">
            The organization <span className="font-semibold text-gray-800">"{currentTenant}"</span> does not exist.
          </p>
          <p className="text-sm text-gray-500 mb-8">
            Please check the URL and try again, or contact your administrator.
          </p>
          <a
            href="https://recex-ai.com"
            className="inline-block px-6 py-2.5 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 transition-colors"
          >
            Go to recex-ai.com
          </a>
        </div>
      </div>
    );
  }

  // Show error page if the tenant has been deactivated
  if (tenantStatus === 'inactive') {
    const currentTenant = getTenant();
    return (
      <div className="min-h-screen flex items-center justify-center bg-gray-50">
        <div className="max-w-md w-full text-center p-8">
          <div className="mx-auto w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center mb-6">
            <svg className="w-8 h-8 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z" />
            </svg>
          </div>
          <h1 className="text-2xl font-bold text-gray-900 mb-2">Organization Deactivated</h1>
          <p className="text-gray-600 mb-6">
            The organization <span className="font-semibold text-gray-800">"{currentTenant}"</span> has been deactivated.
          </p>
          <p className="text-sm text-gray-500 mb-8">
            Please contact your administrator for assistance.
          </p>
          <a
            href="https://recex-ai.com"
            className="inline-block px-6 py-2.5 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 transition-colors"
          >
            Go to recex-ai.com
          </a>
        </div>
      </div>
    );
  }

  if (!authenticated) {
    return (
      <BrandingContext.Provider value={brandingContextValue}>
        <LoginScreen onLogin={handleLogin} />
      </BrandingContext.Provider>
    );
  }

  return (
    <BrandingContext.Provider value={brandingContextValue}>
      <div className="min-h-screen bg-gray-50">
        {/* Sidebar */}
        <Sidebar activeTab={activeTab} onTabChange={handleTabChange} onLogout={handleLogout} userRole={userRole} userName={userName} />

        {/* Main Content */}
        <main className="ml-64 min-h-screen">
          <div className="p-8">
            {activeTab === 'agents' && <AgentsSection key={sectionResetKey} />}
            {activeTab === 'calls' && <CallsSection key={sectionResetKey} />}
            {activeTab === 'campaigns' && <CampaignsSection key={sectionResetKey} />}
            {activeTab === 'tenants' && isMainDomain() && <TenantsSection />}
            {activeTab === 'users' && <UsersSection />}
          </div>
        </main>
      </div>
    </BrandingContext.Provider>
  );
};

// Mount the app
const root = document.getElementById('root');
if (root) {
  createRoot(root).render(<App />);
}