'use client';

import { useState, useEffect, Suspense } from 'react';
import { useSearchParams } from 'next/navigation';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Skeleton } from '@/components/ui/skeleton';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { CompanySelectorEnhanced } from '@/components/companies/company-selector-enhanced';
import { ThemeToggle } from '@/components/theme-toggle';
import { ConfigItemModal } from '@/components/configuration-items/config-item-modal';
import { ContactCell } from '@/components/configuration-items/contact-cell';
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
import { Checkbox } from '@/components/ui/checkbox';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import { ScrollArea } from '@/components/ui/scroll-area';
import { Calendar as CalendarComponent } from '@/components/ui/calendar';
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
import { 
  Server, 
  Monitor,
  HardDrive,
  Network,
  AlertCircle,
  CheckCircle,
  XCircle,
  RefreshCw,
  Search,
  Settings,
  Activity,
  Cpu,
  MemoryStick,
  Wifi,
  Shield,
  Calendar as CalendarIcon,
  Hash,
  Building2,
  ArrowLeft,
  Filter,
  ArrowUpDown,
  ArrowUp,
  ArrowDown,
  Users,
  Download,
  ChevronRight,
  Info,
  Power
} from 'lucide-react';
import { format } from 'date-fns';
import { ConfigurationItem } from '@/lib/types/autotask';
import { DattoRMMDevice } from '@/lib/types/datto-rmm';
import { AuvikDevice } from '@/lib/types/auvik';
import { AddigyDevice } from '@/lib/types/addigy';
import { useApi } from '@/lib/hooks/use-api';
import { RmmDispatchDialog } from '@/components/rmm/rmm-dispatch-dialog';

interface DeviceComparison {
  autotaskDevice?: ConfigurationItem;
  rmmDevice?: DattoRMMDevice;
  auvikDevice?: AuvikDevice;
  addigyDevice?: AddigyDevice;
  status: 'matched' | 'autotask-only' | 'rmm-only';
  matchedBy?: string;
}

function ConfigurationItemsContent() {
  const searchParams = useSearchParams();
  const [selectedCompany, setSelectedCompany] = useState<number | undefined>();
  const [selectedCompanyName, setSelectedCompanyName] = useState<string>('');
  const [searchTerm, setSearchTerm] = useState('');
  const [filterType, setFilterType] = useState<string>('all');
  const [configItems, setConfigItems] = useState<ConfigurationItem[]>([]);
  const [comparison, setComparison] = useState<DeviceComparison[]>([]);
  const [stats, setStats] = useState<any>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [viewMode, setViewMode] = useState<'autotask' | 'comparison'>('comparison');
  const [selectedItemId, setSelectedItemId] = useState<string | number | null>(null);
  const [selectedItem, setSelectedItem] = useState<DeviceComparison | null>(null);
  const [modalOpen, setModalOpen] = useState(false);
  const [adminExpanded, setAdminExpanded] = useState(false);
  const [selectedItems, setSelectedItems] = useState<Set<number>>(new Set());
  const [bulkProcessing, setBulkProcessing] = useState(false);
  const [lastSeenAfterDate, setLastSeenAfterDate] = useState<Date | undefined>();
  const [activeFilter, setActiveFilter] = useState<'active' | 'inactive' | 'all'>('active');
  const [displayLimit, setDisplayLimit] = useState(50); // Start with 50 items
  const [contacts, setContacts] = useState<Record<number, any>>({});
  const [filtersExpanded, setFiltersExpanded] = useState(false);
  const [sortField, setSortField] = useState<'name' | 'ip' | 'contact' | null>(null);
  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc');
  const [groupByContact, setGroupByContact] = useState(false);
  const [expandedContacts, setExpandedContacts] = useState<Set<number>>(new Set());
  const [exportModalOpen, setExportModalOpen] = useState(false);
  const [selectedExportFields, setSelectedExportFields] = useState<Set<string>>(new Set());
  const [configItemTypePicklist, setConfigItemTypePicklist] = useState<Record<number, string>>({});
  const [rmmDeviceTypePicklist, setRmmDeviceTypePicklist] = useState<Record<number, string>>({});
  const [forceRefresh, setForceRefresh] = useState(0);
  
  // Initialize company from URL params on mount
  useEffect(() => {
    const companyIdParam = searchParams.get('companyId');
    const companyNameParam = searchParams.get('companyName');
    
    if (companyIdParam) {
      setSelectedCompany(parseInt(companyIdParam));
      setSelectedCompanyName(companyNameParam || '');
    }
  }, [searchParams]);

  // Fetch configuration item type picklists on mount
  useEffect(() => {
    const fetchPicklists = async () => {
      try {
        // Fetch main type picklist
        const typeResponse = await fetch('/api/picklists?entity=ConfigurationItems&field=type');
        if (typeResponse.ok) {
          const typeData = await typeResponse.json();
          console.log('Config Item Type Picklist Response:', typeData);
          console.log('Config Item Type Picklist Values:', typeData.picklistValues);
          setConfigItemTypePicklist(typeData.picklistValues || {});
        } else {
          console.error('Failed to fetch config item type picklist:', typeResponse.status);
        }

        // Fetch RMM device type picklist
        const rmmTypeResponse = await fetch('/api/picklists?entity=ConfigurationItems&field=rmmDeviceAuditDeviceTypeID');
        if (rmmTypeResponse.ok) {
          const rmmTypeData = await rmmTypeResponse.json();
          console.log('RMM Device Type Picklist Response:', rmmTypeData);
          console.log('Setting rmmDeviceTypePicklist to:', rmmTypeData.picklistValues);
          setRmmDeviceTypePicklist(rmmTypeData.picklistValues || {});
          console.log('rmmDeviceTypePicklist state should now be set');
        }
      } catch (error) {
        console.error('Failed to fetch picklists:', error);
      }
    };
    fetchPicklists();
  }, []);

  // Fetch configuration items when company changes
  useEffect(() => {
    if (!selectedCompany) {
      setConfigItems([]);
      return;
    }

    const fetchConfigItems = async () => {
      setLoading(true);
      setError(null);
      try {
        // Fetch comparison data (includes both Autotask and RMM)
        // Add skipCache parameter when forceRefresh is triggered
        const skipCache = forceRefresh > 0 ? '&skipCache=true' : '';
        const response = await fetch(
          `/api/rmm-devices?companyId=${selectedCompany}&companyName=${encodeURIComponent(selectedCompanyName)}&activeFilter=${activeFilter}${skipCache}`
        );
        
        if (!response.ok) {
          throw new Error('Failed to fetch devices');
        }
        
        const data = await response.json();
        console.log('Sample autotask device:', data.comparison[0]?.autotaskDevice);
        console.log('configurationItemType (camelCase):', data.comparison[0]?.autotaskDevice?.configurationItemType);
        console.log('type field:', data.comparison[0]?.autotaskDevice?.type);
        console.log('configuration_item_type (snake_case):', data.comparison[0]?.autotaskDevice?.configuration_item_type);
        console.log('rmmDeviceAuditDeviceTypeID:', data.comparison[0]?.autotaskDevice?.rmmDeviceAuditDeviceTypeID);
        setComparison(data.comparison || []);
        setStats(data.stats);
        setContacts(data.contacts || {});
      } catch (err) {
        setError(err instanceof Error ? err.message : 'An error occurred');
        setComparison([]);
      } finally {
        setLoading(false);
      }
    };

    fetchConfigItems();
  }, [selectedCompany, selectedCompanyName, activeFilter, forceRefresh]);

  // Filter comparison items based on search and type
  const filteredComparison = comparison.filter((item: DeviceComparison) => {
    const deviceName = item.autotaskDevice?.referenceTitle || item.rmmDevice?.hostname || '';
    const serialNumber = item.autotaskDevice?.serialNumber || item.rmmDevice?.serialNumber || '';
    const searchLower = searchTerm.toLowerCase();
    
    const matchesSearch = deviceName.toLowerCase().includes(searchLower) || 
                         serialNumber.toLowerCase().includes(searchLower);

    const matchesType = filterType === 'all' || 
      (filterType === 'matched' && item.status === 'matched') ||
      (filterType === 'autotask-only' && item.status === 'autotask-only') ||
      (filterType === 'rmm-only' && item.status === 'rmm-only');

    // Filter by last seen date in RMM (after specified date)
    let matchesLastSeen = true;
    if (lastSeenAfterDate && item.rmmDevice?.lastSeen) {
      const lastSeenDate = new Date(item.rmmDevice.lastSeen);
      matchesLastSeen = lastSeenDate >= lastSeenAfterDate;
    }

    return matchesSearch && matchesType && matchesLastSeen;
  });

  // Sort filtered items
  const sortedComparison = [...filteredComparison].sort((a, b) => {
    if (!sortField) return 0;
    
    let aValue = '';
    let bValue = '';
    
    if (sortField === 'name') {
      aValue = (a.autotaskDevice?.referenceTitle || a.rmmDevice?.hostname || '').toLowerCase();
      bValue = (b.autotaskDevice?.referenceTitle || b.rmmDevice?.hostname || '').toLowerCase();
    } else if (sortField === 'ip') {
      aValue = (a.autotaskDevice?.rmmDeviceAuditIPAddress || a.rmmDevice?.intIpAddress || '').toLowerCase();
      bValue = (b.autotaskDevice?.rmmDeviceAuditIPAddress || b.rmmDevice?.intIpAddress || '').toLowerCase();
    } else if (sortField === 'contact') {
      const aContactId = a.autotaskDevice?.contactID;
      const bContactId = b.autotaskDevice?.contactID;
      const aContact = aContactId ? contacts[aContactId] : null;
      const bContact = bContactId ? contacts[bContactId] : null;
      aValue = aContact ? `${aContact.firstName || ''} ${aContact.lastName || ''}`.toLowerCase() : '';
      bValue = bContact ? `${bContact.firstName || ''} ${bContact.lastName || ''}`.toLowerCase() : '';
    }
    
    if (aValue < bValue) return sortDirection === 'asc' ? -1 : 1;
    if (aValue > bValue) return sortDirection === 'asc' ? 1 : -1;
    return 0;
  });

  // Group by contact if enabled
  const groupedByContact = groupByContact 
    ? sortedComparison.reduce((acc, item) => {
        const contactId = item.autotaskDevice?.contactID || 0;
        if (!acc[contactId]) {
          acc[contactId] = [];
        }
        acc[contactId].push(item);
        return acc;
      }, {} as Record<number, DeviceComparison[]>)
    : null;

  const displayComparison = sortedComparison;

  const handleSort = (field: 'name' | 'ip' | 'contact') => {
    if (sortField === field) {
      setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc');
    } else {
      setSortField(field);
      setSortDirection('asc');
    }
  };

  // Handle company selection
  const handleCompanyChange = (companyId: number | undefined, companyName?: string) => {
    setSelectedCompany(companyId);
    setSelectedCompanyName(companyName || '');
    setSelectedItems(new Set()); // Clear selections when company changes
  };

  const handleSelectItem = (itemId: number, checked: boolean) => {
    const newSelected = new Set(selectedItems);
    if (checked) {
      newSelected.add(itemId);
    } else {
      newSelected.delete(itemId);
    }
    setSelectedItems(newSelected);
  };

  const handleSelectAll = (checked: boolean) => {
    if (checked) {
      const allIds = new Set(
        filteredComparison
          .filter(item => item.autotaskDevice?.id)
          .map(item => item.autotaskDevice!.id)
      );
      setSelectedItems(allIds);
    } else {
      setSelectedItems(new Set());
    }
  };

  const handleBulkMakeInactive = async () => {
    if (selectedItems.size === 0) return;
    
    setBulkProcessing(true);
    try {
      const promises = Array.from(selectedItems).map(itemId =>
        fetch(`/api/configuration-items/${itemId}`, {
          method: 'PATCH',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ isActive: false }),
        })
      );
      
      await Promise.all(promises);
      
      // Refresh the data
      if (selectedCompany) {
        const response = await fetch(
          `/api/rmm-devices?companyId=${selectedCompany}&companyName=${encodeURIComponent(selectedCompanyName)}`
        );
        if (response.ok) {
          const data = await response.json();
          setComparison(data.comparison || []);
          setStats(data.stats);
        }
      }
      
      setSelectedItems(new Set());
      setAdminExpanded(false);
    } catch (err) {
      console.error('Bulk operation failed:', err);
      setError('Failed to make items inactive');
    } finally {
      setBulkProcessing(false);
    }
  };

  const getDeviceIcon = (item: ConfigurationItem) => {
    if (item.rmmDeviceAuditDeviceTypeID) {
      // You can map device type IDs to specific icons
      return <Monitor className="w-4 h-4" />;
    }
    if (item.dattoSerialNumber) {
      return <HardDrive className="w-4 h-4" />;
    }
    return <Server className="w-4 h-4" />;
  };

  const getRMMStatus = (item: ConfigurationItem) => {
    if (item.rmmDeviceUID) {
      return (
        <Badge variant="default" className="bg-green-600">
          <CheckCircle className="w-3 h-3 mr-1" />
          RMM Connected
        </Badge>
      );
    }
    return (
      <Badge variant="secondary">
        <XCircle className="w-3 h-3 mr-1" />
        No RMM
      </Badge>
    );
  };

  const getDattoStatus = (item: ConfigurationItem) => {
    if (item.dattoSerialNumber) {
      return (
        <Badge variant="default" className="bg-blue-600">
          <Shield className="w-3 h-3 mr-1" />
          Datto Protected
        </Badge>
      );
    }
    return null;
  };

  // Define available fields for export
  const exportFields = [
    { key: 'status', label: 'Match Status' },
    { key: 'deviceName', label: 'Device Name' },
    { key: 'serialNumber', label: 'Serial Number' },
    { key: 'ipAddress', label: 'IP Address' },
    { key: 'contact', label: 'Contact Name' },
    { key: 'configurationItemType', label: 'Configuration Item Type' },
    { key: 'psaId', label: 'PSA ID' },
    { key: 'rmmId', label: 'RMM ID' },
    { key: 'referenceNumber', label: 'Reference Number' },
    { key: 'location', label: 'Location' },
    { key: 'isActive', label: 'Active Status' },
    { key: 'modelNumber', label: 'Model Number' },
    { key: 'macAddress', label: 'MAC Address' },
    { key: 'installDate', label: 'Install Date' },
    { key: 'warrantyExpiration', label: 'Warranty Expiration' },
    { key: 'rmmDeviceUID', label: 'RMM Device UID' },
    { key: 'lastSeen', label: 'RMM Last Seen' },
    { key: 'operatingSystem', label: 'Operating System' },
    { key: 'matchType', label: 'Match Type' },
  ];

  const toggleExportField = (fieldKey: string) => {
    const newSelected = new Set(selectedExportFields);
    if (newSelected.has(fieldKey)) {
      newSelected.delete(fieldKey);
    } else {
      newSelected.add(fieldKey);
    }
    setSelectedExportFields(newSelected);
  };

  const toggleAllExportFields = () => {
    if (selectedExportFields.size === exportFields.length) {
      setSelectedExportFields(new Set());
    } else {
      setSelectedExportFields(new Set(exportFields.map(f => f.key)));
    }
  };

  const handleExport = () => {
    if (selectedExportFields.size === 0 || displayComparison.length === 0) return;

    const headers = exportFields.filter(f => selectedExportFields.has(f.key)).map(f => f.label);
    const rows = displayComparison.map(item => {
      return exportFields.filter(f => selectedExportFields.has(f.key)).map(f => {
        let value = '';
        switch (f.key) {
          case 'status':
            value = item.status === 'matched' ? 'Matched' : item.status === 'autotask-only' ? 'Autotask Only' : 'RMM Only';
            break;
          case 'deviceName':
            value = item.autotaskDevice?.referenceTitle || item.rmmDevice?.hostname || '';
            break;
          case 'serialNumber':
            value = item.autotaskDevice?.serialNumber || item.rmmDevice?.serialNumber || '';
            break;
          case 'ipAddress':
            value = item.autotaskDevice?.rmmDeviceAuditIPAddress || item.rmmDevice?.intIpAddress || '';
            break;
          case 'contact':
            const contactId = item.autotaskDevice?.contactID;
            const contact = contactId ? contacts[contactId] : null;
            value = contact ? `${contact.firstName || ''} ${contact.lastName || ''}`.trim() : '';
            break;
          case 'configurationItemType':
            // Prioritize rmmDeviceAuditDeviceTypeID since it has picklist values
            const rmmTypeValue = item.autotaskDevice?.rmmDeviceAuditDeviceTypeID;
            if (rmmTypeValue) {
              value = rmmDeviceTypePicklist[rmmTypeValue] || rmmTypeValue.toString();
            }
            break;
          case 'psaId':
            value = item.autotaskDevice?.id?.toString() || '';
            break;
          case 'rmmId':
            value = item.rmmDevice?.uid || '';
            break;
          case 'referenceNumber':
            value = item.autotaskDevice?.referenceNumber || '';
            break;
          case 'location':
            value = item.autotaskDevice?.location || '';
            break;
          case 'isActive':
            value = item.autotaskDevice?.isActive ? 'Active' : 'Inactive';
            break;
          case 'modelNumber':
            value = item.autotaskDevice?.modelNumber || '';
            break;
          case 'macAddress':
            value = item.autotaskDevice?.macAddress || '';
            break;
          case 'installDate':
            value = item.autotaskDevice?.installDate ? format(new Date(item.autotaskDevice.installDate), 'yyyy-MM-dd') : '';
            break;
          case 'warrantyExpiration':
            value = item.autotaskDevice?.warrantyExpirationDate ? format(new Date(item.autotaskDevice.warrantyExpirationDate), 'yyyy-MM-dd') : '';
            break;
          case 'rmmDeviceUID':
            value = item.autotaskDevice?.rmmDeviceUID || '';
            break;
          case 'lastSeen':
            value = item.rmmDevice?.lastSeen ? format(new Date(item.rmmDevice.lastSeen), 'yyyy-MM-dd HH:mm:ss') : '';
            break;
          case 'operatingSystem':
            value = item.rmmDevice?.operatingSystem || '';
            break;
          case 'matchType':
            value = item.matchedBy || '';
            break;
        }
        if (value && (value.includes(',') || value.includes('\n') || value.includes('"'))) {
          return `"${value.replace(/"/g, '""')}"`;
        }
        return value;
      });
    });

    const csvContent = [headers.join(','), ...rows.map(row => row.join(','))].join('\n');
    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
    const link = document.createElement('a');
    const url = URL.createObjectURL(blob);
    link.setAttribute('href', url);
    const filename = `config-items-${selectedCompanyName || selectedCompany}-${format(new Date(), 'yyyy-MM-dd')}.csv`;
    link.setAttribute('download', filename);
    link.style.visibility = 'hidden';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    setExportModalOpen(false);
  };

  return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
        <div className="container flex h-16 items-center">
          <div className="flex flex-1 items-center justify-between">
            <div className="flex items-center space-x-4">
              <Button variant="ghost" size="sm" asChild>
                <a href="/">
                  <ArrowLeft className="w-4 h-4 mr-2" />
                  Back to Dashboard
                </a>
              </Button>
              <div className="flex items-center space-x-3">
                <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-gradient-to-br from-purple-600 to-purple-700 text-white shadow-lg">
                  <Server className="h-5 w-5" />
                </div>
                <div>
                  <h1 className="text-xl font-semibold tracking-tight">
                    Configuration Items
                  </h1>
                  <p className="text-xs text-muted-foreground">Autotask & RMM Device Management</p>
                </div>
              </div>
            </div>
            <div className="flex items-center space-x-2">
              {selectedCompany && filteredComparison.length > 0 && (
                <Button 
                  variant="outline" 
                  size="icon"
                  onClick={() => setAdminExpanded(!adminExpanded)}
                  className={`border-orange-500 ${adminExpanded ? 'bg-orange-50 dark:bg-orange-950/20' : ''}`}
                >
                  <Shield className="h-4 w-4 text-orange-600" />
                </Button>
              )}
              <Button 
                variant="ghost" 
                size="icon" 
                onClick={() => selectedCompany && setForceRefresh(prev => prev + 1)}
                disabled={!selectedCompany || loading}
              >
                <RefreshCw className={`h-4 w-4 ${loading ? 'animate-spin' : ''}`} />
              </Button>
              <ThemeToggle />
              <Button 
                size="sm" 
                className="bg-gradient-to-r from-purple-600 to-purple-700 text-white hover:from-purple-700 hover:to-purple-800"
                onClick={() => setExportModalOpen(true)}
                disabled={!selectedCompany || displayComparison.length === 0}
              >
                <Download className="w-4 h-4 mr-2" />
                Export
              </Button>
            </div>
          </div>
        </div>
      </header>

      {/* Main Content */}
      <main className="container mx-auto px-4 py-8">
        {/* Compact Company Selector & Filters */}
        <Card className="mb-6 border-0 shadow-lg">
          <CardContent className="pt-6">
            <div className="space-y-4">
              {/* Company Selector Row */}
              <div className="flex flex-wrap items-center gap-3">
                <Building2 className="h-5 w-5 text-muted-foreground flex-shrink-0" />
                <div className="w-full sm:flex-1 sm:min-w-[280px] sm:max-w-[500px]">
                  <CompanySelectorEnhanced
                    value={selectedCompany}
                    onValueChange={handleCompanyChange}
                    label=""
                  />
                </div>
                {selectedCompany && (
                  <div className="flex items-center gap-2 px-3 py-1.5 bg-primary/10 rounded-md flex-shrink-0">
                    <Server className="h-4 w-4 text-primary" />
                    <span className="text-xs font-medium num">
                      PSA {stats?.totalAutotask || 0} · RMM {stats?.totalRmm || 0} · NMS {stats?.totalAuvik || 0} · ARMM {stats?.totalAddigy || 0}
                    </span>
                  </div>
                )}
              </div>

              {/* Collapsible Filters */}
              {selectedCompany && (
                <Collapsible open={filtersExpanded} onOpenChange={setFiltersExpanded}>
                  <div className="flex items-center justify-between">
                    <CollapsibleTrigger asChild>
                      <Button variant="ghost" size="sm" className="gap-2">
                        <Filter className="h-4 w-4" />
                        {filtersExpanded ? 'Hide Filters' : 'Show Filters'}
                        <ChevronRight className={`h-4 w-4 transition-transform ${filtersExpanded ? 'rotate-90' : ''}`} />
                      </Button>
                    </CollapsibleTrigger>
                  </div>
                  <CollapsibleContent>
                    <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mt-4 pt-4 border-t">
                <div className="space-y-2">
                  <Label htmlFor="search">Search Devices</Label>
                  <div className="relative">
                    <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
                    <Input
                      id="search"
                      placeholder="Search by name, serial, IP..."
                      value={searchTerm}
                      onChange={(e) => setSearchTerm(e.target.value)}
                      className="pl-8"
                    />
                  </div>
                </div>
                <div className="space-y-2">
                  <Label>PSA Status</Label>
                  <Select value={activeFilter} onValueChange={(value: 'active' | 'inactive' | 'all') => setActiveFilter(value)}>
                    <SelectTrigger>
                      <SelectValue placeholder="Select status" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="active">Active Only</SelectItem>
                      <SelectItem value="inactive">Inactive Only</SelectItem>
                      <SelectItem value="all">All (Active & Inactive)</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div className="space-y-2">
                  <Label>Device Type</Label>
                  <Select value={filterType} onValueChange={setFilterType}>
                    <SelectTrigger>
                      <SelectValue placeholder="Select device type" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="all">All Devices</SelectItem>
                      <SelectItem value="matched">Matched (In Both)</SelectItem>
                      <SelectItem value="autotask-only">Autotask Only</SelectItem>
                      <SelectItem value="rmm-only">RMM Only</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div className="space-y-2">
                  <Label>Last Seen After</Label>
                  <Popover>
                    <PopoverTrigger asChild>
                      <Button
                        variant="outline"
                        className={`w-full justify-start text-left font-normal ${!lastSeenAfterDate && "text-muted-foreground"}`}
                      >
                        <CalendarIcon className="mr-2 h-4 w-4" />
                        {lastSeenAfterDate ? format(lastSeenAfterDate, "PPP") : "Pick a date"}
                      </Button>
                    </PopoverTrigger>
                    <PopoverContent className="w-auto p-0" align="start">
                      <CalendarComponent
                        mode="single"
                        selected={lastSeenAfterDate}
                        onSelect={setLastSeenAfterDate}
                        initialFocus
                      />
                    </PopoverContent>
                  </Popover>
                  {lastSeenAfterDate && (
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => setLastSeenAfterDate(undefined)}
                      className="w-full"
                    >
                      Clear Filter
                    </Button>
                  )}
                </div>
                    </div>
                  </CollapsibleContent>
                </Collapsible>
              )}
            </div>
          </CardContent>
        </Card>

        {/* Admin Section - Appears when shield icon is clicked */}
        {selectedCompany && filteredComparison.length > 0 && adminExpanded && (
          <Card className="mb-6 border-0 shadow-lg border-l-4 border-l-orange-500">
            <CardContent className="pt-6">
              <div className="flex items-center justify-between p-4 bg-orange-50 dark:bg-orange-950/20 rounded-lg border border-orange-200 dark:border-orange-800">
                <div>
                  <p className="font-medium flex items-center gap-2">
                    <Shield className="w-4 h-4 text-orange-600" />
                    Bulk Actions
                  </p>
                  <p className="text-sm text-muted-foreground">
                    {selectedItems.size} device{selectedItems.size !== 1 ? 's' : ''} selected
                  </p>
                </div>
                <div className="flex gap-2">
                  <Button
                    variant="destructive"
                    onClick={handleBulkMakeInactive}
                    disabled={selectedItems.size === 0 || bulkProcessing}
                  >
                    {bulkProcessing ? (
                      <>
                        <RefreshCw className="w-4 h-4 mr-2 animate-spin" />
                        Processing...
                      </>
                    ) : (
                      <>
                        <Power className="w-4 h-4 mr-2" />
                        Make Inactive ({selectedItems.size})
                      </>
                    )}
                  </Button>
                </div>
              </div>
            </CardContent>
          </Card>
        )}

        {/* Configuration Items Table */}
        {selectedCompany && (
          <Card className="border-0 shadow-lg">
            <CardHeader className="bg-gradient-to-r from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800 rounded-t-lg">
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-4">
                  <CardTitle className="text-lg flex items-center gap-2">
                    <Server className="w-5 h-5 text-purple-600" />
                    Device Comparison
                    <Badge variant="secondary" className="ml-2">{displayComparison.length}</Badge>
                  </CardTitle>
                  {selectedCompany && stats && (
                    <div className="flex items-center gap-3 text-sm">
                      <div className="flex items-center gap-1.5">
                        <span className="text-muted-foreground">PSA:</span>
                        <span className="font-semibold">{stats.totalAutotask || 0}</span>
                      </div>
                      <span className="text-muted-foreground">|</span>
                      <div className="flex items-center gap-1.5">
                        <span className="text-muted-foreground">RMM:</span>
                        <span className="font-semibold">{stats.totalRmm || 0}</span>
                      </div>
                      <span className="text-muted-foreground">|</span>
                      <div className="flex items-center gap-1.5">
                        <span className="text-muted-foreground">NMS:</span>
                        <span className="font-semibold">{stats.totalAuvik || 0}</span>
                      </div>
                      <span className="text-muted-foreground">|</span>
                      <div className="flex items-center gap-1.5">
                        <span className="text-muted-foreground">ARMM:</span>
                        <span className="font-semibold">{stats.totalAddigy || 0}</span>
                      </div>
                      <span className="text-muted-foreground">|</span>
                      <div className="flex items-center gap-1.5">
                        <CheckCircle className="h-3.5 w-3.5 text-green-600" />
                        <span className="text-muted-foreground">Matched:</span>
                        <span className="font-semibold">{stats.matched || 0}</span>
                      </div>
                    </div>
                  )}
                </div>
                {loading && (
                  <div className="flex items-center gap-2 text-sm text-muted-foreground">
                    <RefreshCw className="w-4 h-4 animate-spin" />
                    Loading...
                  </div>
                )}
              </div>
            </CardHeader>
            <CardContent className="pt-6">
              {loading ? (
                <div className="space-y-2">
                  {[1, 2, 3].map(i => (
                    <Skeleton key={i} className="h-12 w-full" />
                  ))}
                </div>
              ) : error ? (
                <div className="text-red-500 flex items-center gap-2">
                  <AlertCircle className="w-4 h-4" />
                  Error: {error}
                </div>
              ) : displayComparison.length === 0 ? (
                <div className="text-center py-12 text-muted-foreground">
                  {!selectedCompany ? (
                    <div>
                      <Server className="w-12 h-12 mx-auto mb-4 opacity-50" />
                      <p>Select a company to view configuration items</p>
                    </div>
                  ) : searchTerm || filterType !== 'all' ? (
                    <div>
                      <Search className="w-12 h-12 mx-auto mb-4 opacity-50" />
                      <p>No devices found matching your filters</p>
                    </div>
                  ) : (
                    <div>
                      <Server className="w-12 h-12 mx-auto mb-4 opacity-50" />
                      <p>No configuration items found for this company</p>
                    </div>
                  )}
                </div>
              ) : (
                <div className="overflow-x-auto">
                  <Table>
                    <TableHeader>
                      <TableRow>
                        <TableHead className="w-12">
                          <Checkbox
                            checked={selectedItems.size === filteredComparison.filter(i => i.autotaskDevice).length && selectedItems.size > 0}
                            onCheckedChange={handleSelectAll}
                          />
                        </TableHead>
                        <TableHead>Status</TableHead>
                        <TableHead className="max-w-[250px]">
                          <Button variant="ghost" size="sm" className="h-8 px-2" onClick={() => handleSort('name')}>
                            Device Name
                            {sortField === 'name' && (sortDirection === 'asc' ? <ArrowUp className="ml-2 h-3 w-3" /> : <ArrowDown className="ml-2 h-3 w-3" />)}
                            {sortField !== 'name' && <ArrowUpDown className="ml-2 h-3 w-3 opacity-50" />}
                          </Button>
                        </TableHead>
                        <TableHead className="w-32">Serial Number</TableHead>
                        <TableHead>
                          <Button variant="ghost" size="sm" className="h-8 px-2" onClick={() => handleSort('ip')}>
                            IP Address
                            {sortField === 'ip' && (sortDirection === 'asc' ? <ArrowUp className="ml-2 h-3 w-3" /> : <ArrowDown className="ml-2 h-3 w-3" />)}
                            {sortField !== 'ip' && <ArrowUpDown className="ml-2 h-3 w-3 opacity-50" />}
                          </Button>
                        </TableHead>
                        <TableHead>
                          <div className="flex items-center gap-1">
                            <Button variant="ghost" size="sm" className="h-8 px-2" onClick={() => handleSort('contact')}>
                              Contact
                              {sortField === 'contact' && (sortDirection === 'asc' ? <ArrowUp className="ml-2 h-3 w-3" /> : <ArrowDown className="ml-2 h-3 w-3" />)}
                              {sortField !== 'contact' && <ArrowUpDown className="ml-2 h-3 w-3 opacity-50" />}
                            </Button>
                            <Button
                              variant={groupByContact ? "default" : "ghost"}
                              size="sm"
                              className="h-8 px-2"
                              onClick={() => setGroupByContact(!groupByContact)}
                            >
                              <Users className="h-3 w-3" />
                            </Button>
                          </div>
                        </TableHead>
                        <TableHead className="w-32">Type</TableHead>
                        <TableHead>PSA</TableHead>
                        <TableHead>RMM</TableHead>
                        <TableHead>NMS</TableHead>
                        <TableHead>ARMM</TableHead>
                        <TableHead className="w-32">Actions</TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {groupByContact && groupedByContact ? (
                        Object.entries(groupedByContact).map(([contactIdStr, items]) => {
                          const contactId = parseInt(contactIdStr);
                          const contact = contactId ? contacts[contactId] : null;
                          const contactName = contact ? `${contact.firstName || ''} ${contact.lastName || ''}`.trim() : 'No Contact';
                          const isExpanded = expandedContacts.has(contactId);
                          
                          return (
                            <>
                              <TableRow 
                                key={`contact-${contactId}`}
                                className="bg-muted/30 font-semibold cursor-pointer hover:bg-muted/50"
                                onClick={() => {
                                  const newExpanded = new Set(expandedContacts);
                                  if (isExpanded) {
                                    newExpanded.delete(contactId);
                                  } else {
                                    newExpanded.add(contactId);
                                  }
                                  setExpandedContacts(newExpanded);
                                }}
                              >
                                <TableCell colSpan={12}>
                                  <div className="flex items-center gap-2">
                                    <ChevronRight className={`h-4 w-4 transition-transform ${isExpanded ? 'rotate-90' : ''}`} />
                                    <Users className="h-4 w-4" />
                                    <span>{contactName}</span>
                                    <Badge variant="secondary" className="ml-2">{items.length}</Badge>
                                  </div>
                                </TableCell>
                              </TableRow>
                              {isExpanded && items.map((item: DeviceComparison, index: number) => (
                        <TableRow 
                          key={`comparison-${index}`}
                          className="cursor-pointer hover:bg-muted/50"
                          onClick={(e) => {
                            // Don't open modal if clicking checkbox or button
                            const target = e.target as HTMLElement;
                            if (target.closest('input[type="checkbox"]') || target.closest('button')) return;
                            // For RMM-only devices, use a special ID since there's no Autotask record
                            const itemId = item.autotaskDevice?.id || 'rmm-only';
                            setSelectedItemId(itemId);
                            setSelectedItem(item);
                            setModalOpen(true);
                          }}
                        >
                          <TableCell>
                            {item.autotaskDevice?.id && (
                              <Checkbox
                                checked={selectedItems.has(item.autotaskDevice.id)}
                                onCheckedChange={(checked) => handleSelectItem(item.autotaskDevice!.id, checked as boolean)}
                              />
                            )}
                          </TableCell>
                          <TableCell>
                            {item.status === 'matched' && (
                              <Badge variant="default" className="bg-green-600">
                                <CheckCircle className="w-3 h-3 mr-1" />
                                Matched
                              </Badge>
                            )}
                            {item.status === 'autotask-only' && (
                              <Badge variant="secondary">
                                <Server className="w-3 h-3 mr-1" />
                                AT Only
                              </Badge>
                            )}
                            {item.status === 'rmm-only' && (
                              <Badge variant="outline">
                                <Monitor className="w-3 h-3 mr-1" />
                                {item.addigyDevice && !item.rmmDevice ? 'ARMM Only' : 'RMM Only'}
                              </Badge>
                            )}
                          </TableCell>
                          <TableCell className="max-w-[250px]">
                            <div className="flex items-center gap-2">
                              <Server className="w-4 h-4 flex-shrink-0" />
                              <div className="min-w-0 flex-1">
                                <div className="font-medium truncate">
                                  {item.autotaskDevice?.referenceTitle || 
                                   item.rmmDevice?.hostname || 
                                   item.auvikDevice?.deviceName ||
                                   item.addigyDevice?.['Device Name'] ||
                                   'Unknown Device'}
                                </div>
                                {(item.autotaskDevice?.rmmDeviceAuditHostname || item.rmmDevice?.description || item.auvikDevice?.description) && (
                                  <div className="text-xs text-muted-foreground truncate">
                                    {item.autotaskDevice?.rmmDeviceAuditHostname || item.rmmDevice?.description || item.auvikDevice?.description}
                                  </div>
                                )}
                              </div>
                            </div>
                          </TableCell>
                          <TableCell className="font-mono text-sm w-32">
                            {item.autotaskDevice?.serialNumber || 
                             item.rmmDevice?.serialNumber || 
                             item.auvikDevice?.serialNumber ||
                             item.addigyDevice?.['Serial Number'] ||
                             '-'}
                          </TableCell>
                          <TableCell className="font-mono text-sm">
                            {item.autotaskDevice?.rmmDeviceAuditIPAddress || 
                             item.rmmDevice?.intIpAddress || 
                             item.auvikDevice?.ipAddresses?.[0] ||
                             item.addigyDevice?.['IP Address'] ||
                             '-'}
                          </TableCell>
                          <TableCell>
                            <ContactCell contactId={item.autotaskDevice?.contactID} contacts={contacts} />
                          </TableCell>
                          <TableCell className="w-32">
                            {(() => {
                              // Prioritize rmmDeviceAuditDeviceTypeID since it has picklist values
                              const rmmTypeValue = item.autotaskDevice?.rmmDeviceAuditDeviceTypeID;
                              
                              if (rmmTypeValue) {
                                const label = rmmDeviceTypePicklist[rmmTypeValue];
                                if (!label && typeof window !== 'undefined') {
                                  console.log('Missing label for rmmTypeValue:', rmmTypeValue, 'picklist:', rmmDeviceTypePicklist);
                                }
                                return (
                                  <Badge variant="outline" className="text-xs truncate max-w-[120px]" title={label || rmmTypeValue.toString()}>
                                    {label || rmmTypeValue}
                                  </Badge>
                                );
                              }
                              return <span className="text-muted-foreground">-</span>;
                            })()}
                          </TableCell>
                          <TableCell>
                            {item.autotaskDevice ? (
                              <CheckCircle className="w-4 h-4 text-green-600" />
                            ) : (
                              <XCircle className="w-4 h-4 text-gray-400" />
                            )}
                          </TableCell>
                          <TableCell>
                            {item.rmmDevice ? (
                              <CheckCircle className="w-4 h-4 text-green-600" />
                            ) : (
                              <XCircle className="w-4 h-4 text-gray-400" />
                            )}
                          </TableCell>
                          <TableCell>
                            {item.auvikDevice ? (
                              <CheckCircle className="w-4 h-4 text-green-600" />
                            ) : (
                              <XCircle className="w-4 h-4 text-gray-400" />
                            )}
                          </TableCell>
                          <TableCell>
                            {item.addigyDevice ? (
                              <CheckCircle className="w-4 h-4 text-green-600" />
                            ) : (
                              <XCircle className="w-4 h-4 text-gray-400" />
                            )}
                          </TableCell>
                          <TableCell className="w-32" onClick={(e) => e.stopPropagation()}>
                            {item.rmmDevice?.uid ? (
                              <RmmDispatchDialog
                                deviceUid={item.rmmDevice.uid}
                                hostname={item.rmmDevice.hostname ?? null}
                                companyId={selectedCompany ?? null}
                              />
                            ) : (
                              <span className="text-xs text-muted-foreground">—</span>
                            )}
                          </TableCell>
                        </TableRow>
                              ))}
                            </>
                          );
                        })
                      ) : (
                        displayComparison.slice(0, displayLimit).map((item: DeviceComparison, index: number) => (
                          <TableRow 
                            key={`comparison-${index}`}
                            className="cursor-pointer hover:bg-muted/50"
                            onClick={(e) => {
                              // Don't open modal if clicking checkbox or button
                              const target = e.target as HTMLElement;
                              if (target.closest('input[type="checkbox"]') || target.closest('button')) return;
                              // For RMM-only devices, use a special ID since there's no Autotask record
                              const itemId = item.autotaskDevice?.id || 'rmm-only';
                              setSelectedItemId(itemId);
                              setSelectedItem(item);
                              setModalOpen(true);
                            }}
                          >
                            <TableCell>
                              {item.autotaskDevice?.id && (
                                <Checkbox
                                  checked={selectedItems.has(item.autotaskDevice.id)}
                                  onCheckedChange={(checked) => handleSelectItem(item.autotaskDevice!.id, checked as boolean)}
                                />
                              )}
                            </TableCell>
                            <TableCell>
                              {item.status === 'matched' && (
                                <Badge variant="default" className="bg-green-600">
                                  <CheckCircle className="w-3 h-3 mr-1" />
                                  Matched
                                </Badge>
                              )}
                              {item.status === 'autotask-only' && (
                                <Badge variant="secondary">
                                  <Server className="w-3 h-3 mr-1" />
                                  AT Only
                                </Badge>
                              )}
                              {item.status === 'rmm-only' && (
                                <Badge variant="outline">
                                  <Monitor className="w-3 h-3 mr-1" />
                                  {item.addigyDevice && !item.rmmDevice ? 'ARMM Only' : 'RMM Only'}
                                </Badge>
                              )}
                            </TableCell>
                            <TableCell className="max-w-[250px]">
                              <div className="flex items-center gap-2">
                                <Server className="w-4 h-4 flex-shrink-0" />
                                <div className="min-w-0 flex-1">
                                  <div className="font-medium truncate">
                                    {item.autotaskDevice?.referenceTitle || 
                                     item.rmmDevice?.hostname || 
                                     item.auvikDevice?.deviceName ||
                                     item.addigyDevice?.['Device Name'] ||
                                     'Unknown Device'}
                                  </div>
                                  {(item.autotaskDevice?.rmmDeviceAuditHostname || item.rmmDevice?.description || item.auvikDevice?.description) && (
                                    <div className="text-xs text-muted-foreground truncate">
                                      {item.autotaskDevice?.rmmDeviceAuditHostname || item.rmmDevice?.description || item.auvikDevice?.description}
                                    </div>
                                  )}
                                </div>
                              </div>
                            </TableCell>
                            <TableCell className="font-mono text-sm w-32">
                              {item.autotaskDevice?.serialNumber || 
                               item.rmmDevice?.serialNumber || 
                               item.auvikDevice?.serialNumber ||
                               item.addigyDevice?.['Serial Number'] ||
                               '-'}
                            </TableCell>
                            <TableCell className="font-mono text-sm">
                              {item.autotaskDevice?.rmmDeviceAuditIPAddress || 
                               item.rmmDevice?.intIpAddress || 
                               item.auvikDevice?.ipAddresses?.[0] ||
                               item.addigyDevice?.['IP Address'] ||
                               '-'}
                            </TableCell>
                            <TableCell>
                              <ContactCell contactId={item.autotaskDevice?.contactID} contacts={contacts} />
                            </TableCell>
                            <TableCell className="w-32">
                              {(() => {
                                const typeValue = item.autotaskDevice?.type || item.autotaskDevice?.configuration_item_type;
                                const typeLabel = typeValue ? (configItemTypePicklist[typeValue] || typeValue) : null;
                                return typeLabel ? (
                                  <Badge variant="outline" className="text-xs truncate max-w-[120px]" title={typeLabel.toString()}>
                                    {typeLabel}
                                  </Badge>
                                ) : (
                                  <span className="text-muted-foreground">-</span>
                                );
                              })()}
                            </TableCell>
                            <TableCell>
                              {item.autotaskDevice ? (
                                <CheckCircle className="w-4 h-4 text-green-600" />
                              ) : (
                                <XCircle className="w-4 h-4 text-gray-400" />
                              )}
                            </TableCell>
                            <TableCell>
                              {item.rmmDevice ? (
                                <CheckCircle className="w-4 h-4 text-green-600" />
                              ) : (
                                <XCircle className="w-4 h-4 text-gray-400" />
                              )}
                            </TableCell>
                            <TableCell>
                              {item.auvikDevice ? (
                                <CheckCircle className="w-4 h-4 text-green-600" />
                              ) : (
                                <XCircle className="w-4 h-4 text-gray-400" />
                              )}
                            </TableCell>
                            <TableCell>
                              {item.addigyDevice ? (
                                <CheckCircle className="w-4 h-4 text-green-600" />
                              ) : (
                                <XCircle className="w-4 h-4 text-gray-400" />
                              )}
                            </TableCell>
                            <TableCell className="w-32" onClick={(e) => e.stopPropagation()}>
                              {item.rmmDevice?.uid ? (
                                <RmmDispatchDialog
                                  deviceUid={item.rmmDevice.uid}
                                  hostname={item.rmmDevice.hostname ?? null}
                                  companyId={selectedCompany ?? null}
                                />
                              ) : (
                                <span className="text-xs text-muted-foreground">—</span>
                              )}
                            </TableCell>
                          </TableRow>
                        ))
                      )}
                    </TableBody>
                  </Table>
                  
                  {/* Load More Button */}
                  {filteredComparison.length > displayLimit && (
                    <div className="flex justify-center py-4">
                      <Button
                        variant="outline"
                        onClick={() => setDisplayLimit(prev => prev + 50)}
                      >
                        Load More ({filteredComparison.length - displayLimit} remaining)
                      </Button>
                    </div>
                  )}
                </div>
              )}
            </CardContent>
          </Card>
        )}

        {/* Info Card when no company selected */}
        {!selectedCompany && (
          <Card className="border-0 shadow-lg">
            <CardContent className="py-12">
              <div className="text-center">
                <div className="flex justify-center mb-4">
                  <div className="flex h-16 w-16 items-center justify-center rounded-full bg-purple-100 dark:bg-purple-900">
                    <Info className="h-8 w-8 text-purple-600" />
                  </div>
                </div>
                <h3 className="text-lg font-semibold mb-2">Get Started</h3>
                <p className="text-muted-foreground mb-4 max-w-md mx-auto">
                  Select a company from the dropdown above to view and manage their configuration items.
                  You can compare devices between Autotask and RMM systems.
                </p>
                <div className="flex justify-center gap-4 mt-6">
                  <div className="flex items-center gap-2 text-sm text-muted-foreground">
                    <CheckCircle className="w-4 h-4 text-green-600" />
                    View Autotask devices
                  </div>
                  <div className="flex items-center gap-2 text-sm text-muted-foreground">
                    <CheckCircle className="w-4 h-4 text-green-600" />
                    Check RMM status
                  </div>
                  <div className="flex items-center gap-2 text-sm text-muted-foreground">
                    <CheckCircle className="w-4 h-4 text-green-600" />
                    Monitor Datto devices
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        )}
      </main>

      {/* Configuration Item Detail Modal */}
      <ConfigItemModal
        itemId={selectedItemId}
        type="autotask"
        open={modalOpen}
        rmmDevice={selectedItem?.rmmDevice}
        auvikDevice={selectedItem?.auvikDevice}
        addigyDevice={selectedItem?.addigyDevice}
        onOpenChange={(open) => {
          setModalOpen(open);
          // Refresh data when modal closes
          if (!open && selectedCompany) {
            fetch(
              `/api/rmm-devices?companyId=${selectedCompany}&companyName=${encodeURIComponent(selectedCompanyName)}&activeFilter=${activeFilter}`
            )
              .then(res => res.json())
              .then(data => {
                setComparison(data.comparison || []);
                setStats(data.stats);
              })
              .catch(err => console.error('Failed to refresh data:', err));
          }
        }}
      />

      {/* Export Modal */}
      <Dialog open={exportModalOpen} onOpenChange={setExportModalOpen}>
        <DialogContent className="max-w-2xl">
          <DialogHeader>
            <DialogTitle>Export Configuration Items</DialogTitle>
            <DialogDescription>
              Select the fields you want to include in the CSV export. Exporting {displayComparison.length} device{displayComparison.length !== 1 ? 's' : ''}.
            </DialogDescription>
          </DialogHeader>
          
          <div className="space-y-4">
            <div className="flex items-center justify-between pb-2 border-b">
              <div className="flex items-center space-x-2">
                <Checkbox
                  id="select-all-export"
                  checked={selectedExportFields.size === exportFields.length}
                  onCheckedChange={toggleAllExportFields}
                />
                <Label htmlFor="select-all-export" className="font-semibold cursor-pointer">
                  Select All ({selectedExportFields.size}/{exportFields.length})
                </Label>
              </div>
            </div>
            
            <ScrollArea className="h-[400px] pr-4">
              <div className="grid grid-cols-2 gap-3">
                {exportFields.map((field) => (
                  <div key={field.key} className="flex items-center space-x-2">
                    <Checkbox
                      id={`export-${field.key}`}
                      checked={selectedExportFields.has(field.key)}
                      onCheckedChange={() => toggleExportField(field.key)}
                    />
                    <Label 
                      htmlFor={`export-${field.key}`}
                      className="text-sm cursor-pointer font-normal"
                    >
                      {field.label}
                    </Label>
                  </div>
                ))}
              </div>
            </ScrollArea>
          </div>
          
          <DialogFooter>
            <Button 
              variant="outline" 
              onClick={() => setExportModalOpen(false)}
            >
              Cancel
            </Button>
            <Button 
              onClick={handleExport}
              disabled={selectedExportFields.size === 0}
              className="bg-gradient-to-r from-purple-600 to-purple-700 text-white hover:from-purple-700 hover:to-purple-800"
            >
              <Download className="w-4 h-4 mr-2" />
              Export CSV ({selectedExportFields.size} fields)
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}

export default function ConfigurationItemsPage() {
  return (
    <Suspense fallback={<div className="p-8">Loading...</div>}>
      <ConfigurationItemsContent />
    </Suspense>
  );
}