'use client';

import { useState, useEffect } from 'react';
import {
  MonitorPlay,
  Plus,
  Search,
  Filter,
  Edit,
  Trash2,
  RefreshCw,
  Copy,
  Check,
  Wifi,
  WifiOff,
  AlertTriangle,
  Key,
  X,
  Activity,
  Image as ImageIcon
} from 'lucide-react';
import ProtectedRoute from '../../protected-route';
import SidebarLayout from '../../components/sidebar-layout';
import { useTranslations } from '../../hooks/useTranslations';

interface DeviceProfile {
  id: string;
  manufacturer: string;
  model: string;
  category: string;
  modality: string;
  supportedModalities: string[];
  description: string;
}

interface ImagingDevice {
  _id: string;
  deviceCode: string;
  name: string;
  aeTitle: string;
  manufacturer: string;
  model: string;
  modality: string;
  supportedModalities: string[];
  location: string;
  profileName: string;
  isActive: boolean;
  connectionStatus: string;
  lastSeenAt: string;
  lastImageAt: string;
  totalImagesReceived: number;
  imagesToday: number;
  apiKeyPrefix: string;
}

const MODALITY_NAMES: Record<string, string> = {
  CR: 'Computed Radiography',
  CT: 'CT Scan',
  MR: 'MRI',
  US: 'Ultrasound',
  MG: 'Mammography',
  XA: 'X-Ray Angiography',
  DX: 'Digital X-Ray',
  NM: 'Nuclear Medicine',
  PT: 'PET Scan',
  RF: 'Fluoroscopy',
  OT: 'Other',
};

export default function ImagingDevicesPage() {
  const { t, translationsLoaded } = useTranslations();
  const [devices, setDevices] = useState<ImagingDevice[]>([]);
  const [profiles, setProfiles] = useState<DeviceProfile[]>([]);
  const [loading, setLoading] = useState(true);
  const [searchTerm, setSearchTerm] = useState('');
  const [modalityFilter, setModalityFilter] = useState('all');
  const [statusFilter, setStatusFilter] = useState('all');
  const [stats, setStats] = useState({ total: 0, active: 0, online: 0, offline: 0 });
  
  // Modal states
  const [showAddModal, setShowAddModal] = useState(false);
  const [showApiKeyModal, setShowApiKeyModal] = useState(false);
  const [newApiKey, setNewApiKey] = useState('');
  const [copiedKey, setCopiedKey] = useState(false);
  
  // Form state
  const [formData, setFormData] = useState({
    deviceCode: '',
    name: '',
    aeTitle: '',
    profileId: '',
    manufacturer: '',
    model: '',
    serialNumber: '',
    modality: 'CT',
    location: '',
    notes: '',
  });

  useEffect(() => {
    fetchDevices();
    fetchProfiles();
  }, [modalityFilter, statusFilter]);

  const fetchDevices = async () => {
    try {
      setLoading(true);
      const params = new URLSearchParams();
      if (modalityFilter !== 'all') params.append('modality', modalityFilter);
      if (statusFilter !== 'all') params.append('status', statusFilter);
      if (searchTerm) params.append('search', searchTerm);

      const response = await fetch(`/api/imaging/devices?${params.toString()}`);
      if (response.ok) {
        const data = await response.json();
        setDevices(data.devices || []);
        setStats(data.stats || { total: 0, active: 0, online: 0, offline: 0 });
      }
    } catch (error) {
      console.error('Error fetching devices:', error);
    } finally {
      setLoading(false);
    }
  };

  const fetchProfiles = async () => {
    try {
      const response = await fetch('/api/imaging/devices?action=profiles');
      if (response.ok) {
        const data = await response.json();
        setProfiles(data.profiles || []);
      }
    } catch (error) {
      console.error('Error fetching profiles:', error);
    }
  };

  const handleSearch = () => {
    fetchDevices();
  };

  const handleKeyPress = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter') {
      handleSearch();
    }
  };

  const handleProfileSelect = (profileId: string) => {
    const profile = profiles.find(p => p.id === profileId);
    if (profile) {
      setFormData({
        ...formData,
        profileId,
        manufacturer: profile.manufacturer,
        model: profile.model,
        modality: profile.modality,
        name: `${profile.manufacturer} ${profile.model}`,
        aeTitle: profile.model.toUpperCase().replace(/[^A-Z0-9]/g, '').substring(0, 16),
      });
    }
  };

  const handleAddDevice = async (e: React.FormEvent) => {
    e.preventDefault();
    try {
      const response = await fetch('/api/imaging/devices', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(formData),
      });

      if (response.ok) {
        const data = await response.json();
        setNewApiKey(data.device.apiKey);
        setShowAddModal(false);
        setShowApiKeyModal(true);
        fetchDevices();
        // Reset form
        setFormData({
          deviceCode: '',
          name: '',
          aeTitle: '',
          profileId: '',
          manufacturer: '',
          model: '',
          serialNumber: '',
          modality: 'CT',
          location: '',
          notes: '',
        });
      } else {
        const error = await response.json();
        alert(error.error || 'Failed to add device');
      }
    } catch (error) {
      console.error('Error adding device:', error);
      alert('Failed to add device');
    }
  };

  const handleRegenerateKey = async (deviceId: string) => {
    if (!confirm('Are you sure you want to regenerate the API key? The old key will stop working immediately.')) {
      return;
    }

    try {
      const response = await fetch(`/api/imaging/devices/${deviceId}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ action: 'regenerate-key' }),
      });

      if (response.ok) {
        const data = await response.json();
        setNewApiKey(data.device.apiKey);
        setShowApiKeyModal(true);
      }
    } catch (error) {
      console.error('Error regenerating API key:', error);
    }
  };

  const handleToggleStatus = async (deviceId: string) => {
    try {
      const response = await fetch(`/api/imaging/devices/${deviceId}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ action: 'toggle-status' }),
      });

      if (response.ok) {
        fetchDevices();
      }
    } catch (error) {
      console.error('Error toggling device status:', error);
    }
  };

  const handleDeleteDevice = async (deviceId: string) => {
    if (!confirm('Are you sure you want to delete this device? This action cannot be undone.')) {
      return;
    }

    try {
      const response = await fetch(`/api/imaging/devices/${deviceId}`, {
        method: 'DELETE',
      });

      if (response.ok) {
        fetchDevices();
      }
    } catch (error) {
      console.error('Error deleting device:', error);
    }
  };

  const copyToClipboard = (text: string) => {
    navigator.clipboard.writeText(text);
    setCopiedKey(true);
    setTimeout(() => setCopiedKey(false), 2000);
  };

  const getStatusIcon = (status: string) => {
    switch (status) {
      case 'online':
        return <Wifi className="h-4 w-4 text-green-500" />;
      case 'error':
        return <AlertTriangle className="h-4 w-4 text-red-500" />;
      default:
        return <WifiOff className="h-4 w-4 text-gray-400" />;
    }
  };

  const getStatusBadge = (status: string) => {
    const styles: Record<string, string> = {
      online: 'bg-green-100 text-green-800',
      offline: 'bg-gray-100 text-gray-800',
      error: 'bg-red-100 text-red-800',
    };
    return styles[status] || styles.offline;
  };

  const formatLastSeen = (dateStr: string) => {
    if (!dateStr) return 'Never';
    const date = new Date(dateStr);
    const now = new Date();
    const diff = now.getTime() - date.getTime();
    const minutes = Math.floor(diff / 60000);
    const hours = Math.floor(diff / 3600000);
    const days = Math.floor(diff / 86400000);

    if (minutes < 1) return 'Just now';
    if (minutes < 60) return `${minutes}m ago`;
    if (hours < 24) return `${hours}h ago`;
    return `${days}d ago`;
  };

  if (!translationsLoaded) {
    return <div className="flex items-center justify-center h-screen">Loading...</div>;
  }

  return (
    <ProtectedRoute requiredRoles={['admin']}>
      <SidebarLayout title={t('imaging.connectedDevices')} description={t('imaging.connectedDevicesDescription')}>
        <div className="space-y-6">
          {/* Header Actions */}
          <div className="flex justify-end">
            <button
              onClick={() => setShowAddModal(true)}
              className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
            >
              <Plus className="h-4 w-4" />
              Add Device
            </button>
          </div>

          {/* Stats Cards */}
          <div className="grid grid-cols-1 sm:grid-cols-4 gap-4">
            <div className="bg-white rounded-lg shadow-sm p-4 border border-gray-200">
              <div className="flex items-center justify-between">
                <span className="text-sm text-gray-500">Total Devices</span>
                <MonitorPlay className="h-5 w-5 text-gray-400" />
              </div>
              <p className="text-2xl font-bold text-gray-900 mt-1">{stats.total}</p>
            </div>
            <div className="bg-white rounded-lg shadow-sm p-4 border border-gray-200">
              <div className="flex items-center justify-between">
                <span className="text-sm text-gray-500">Active</span>
                <Activity className="h-5 w-5 text-blue-500" />
              </div>
              <p className="text-2xl font-bold text-gray-900 mt-1">{stats.active}</p>
            </div>
            <div className="bg-white rounded-lg shadow-sm p-4 border border-gray-200">
              <div className="flex items-center justify-between">
                <span className="text-sm text-gray-500">Online</span>
                <Wifi className="h-5 w-5 text-green-500" />
              </div>
              <p className="text-2xl font-bold text-green-600 mt-1">{stats.online}</p>
            </div>
            <div className="bg-white rounded-lg shadow-sm p-4 border border-gray-200">
              <div className="flex items-center justify-between">
                <span className="text-sm text-gray-500">Offline</span>
                <WifiOff className="h-5 w-5 text-gray-400" />
              </div>
              <p className="text-2xl font-bold text-gray-600 mt-1">{stats.offline}</p>
            </div>
          </div>

          {/* Filters */}
          <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
            <div className="flex flex-col sm:flex-row gap-4">
              <div className="flex-1 relative">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
                <input
                  type="text"
                  placeholder="Search devices..."
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                  onKeyPress={handleKeyPress}
                  className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                />
              </div>
              <select
                value={modalityFilter}
                onChange={(e) => setModalityFilter(e.target.value)}
                className="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
              >
                <option value="all">All Modalities</option>
                {Object.entries(MODALITY_NAMES).map(([id, name]) => (
                  <option key={id} value={id}>{name}</option>
                ))}
              </select>
              <select
                value={statusFilter}
                onChange={(e) => setStatusFilter(e.target.value)}
                className="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
              >
                <option value="all">All Status</option>
                <option value="active">Active</option>
                <option value="inactive">Inactive</option>
              </select>
              <button
                onClick={handleSearch}
                className="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200"
              >
                <Filter className="h-4 w-4" />
              </button>
            </div>
          </div>

          {/* Devices Table */}
          <div className="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
            {loading ? (
              <div className="p-8 text-center">
                <RefreshCw className="h-8 w-8 animate-spin mx-auto text-gray-400" />
                <p className="mt-2 text-gray-500">Loading devices...</p>
              </div>
            ) : devices.length === 0 ? (
              <div className="p-8 text-center">
                <MonitorPlay className="h-12 w-12 mx-auto text-gray-400" />
                <p className="mt-2 text-gray-500">No imaging devices found</p>
                <button
                  onClick={() => setShowAddModal(true)}
                  className="mt-4 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
                >
                  Add Your First Device
                </button>
              </div>
            ) : (
              <div className="overflow-x-auto">
                <table className="w-full">
                  <thead className="bg-gray-50">
                    <tr>
                      <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Status</th>
                      <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Device</th>
                      <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">AE Title</th>
                      <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Modality</th>
                      <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Location</th>
                      <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Images</th>
                      <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Last Seen</th>
                      <th className="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">Actions</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-gray-200">
                    {devices.map((device) => (
                      <tr key={device._id} className="hover:bg-gray-50">
                        <td className="px-4 py-3">
                          <div className="flex items-center gap-2">
                            {getStatusIcon(device.connectionStatus)}
                            <span className={`px-2 py-1 text-xs rounded-full ${getStatusBadge(device.connectionStatus)}`}>
                              {device.connectionStatus}
                            </span>
                          </div>
                        </td>
                        <td className="px-4 py-3">
                          <div>
                            <p className="font-medium text-gray-900">{device.name}</p>
                            <p className="text-sm text-gray-500">{device.deviceCode} • {device.manufacturer} {device.model}</p>
                          </div>
                        </td>
                        <td className="px-4 py-3">
                          <code className="px-2 py-1 bg-gray-100 rounded text-sm font-mono">
                            {device.aeTitle}
                          </code>
                        </td>
                        <td className="px-4 py-3">
                          <span className="px-2 py-1 bg-purple-100 text-purple-800 rounded text-sm">
                            {device.modality}
                          </span>
                        </td>
                        <td className="px-4 py-3 text-gray-600">{device.location || '-'}</td>
                        <td className="px-4 py-3">
                          <div className="flex items-center gap-2">
                            <ImageIcon className="h-4 w-4 text-gray-400" />
                            <span className="text-gray-900">{device.totalImagesReceived}</span>
                            <span className="text-xs text-gray-500">({device.imagesToday} today)</span>
                          </div>
                        </td>
                        <td className="px-4 py-3 text-gray-600">
                          {formatLastSeen(device.lastSeenAt)}
                        </td>
                        <td className="px-4 py-3">
                          <div className="flex items-center justify-end gap-2">
                            <button
                              onClick={() => handleRegenerateKey(device._id)}
                              className="p-1 text-gray-400 hover:text-blue-600"
                              title="Regenerate API Key"
                            >
                              <Key className="h-4 w-4" />
                            </button>
                            <button
                              onClick={() => handleToggleStatus(device._id)}
                              className="p-1 text-gray-400 hover:text-yellow-600"
                              title={device.isActive ? 'Deactivate' : 'Activate'}
                            >
                              {device.isActive ? <WifiOff className="h-4 w-4" /> : <Wifi className="h-4 w-4" />}
                            </button>
                            <button
                              onClick={() => handleDeleteDevice(device._id)}
                              className="p-1 text-gray-400 hover:text-red-600"
                              title="Delete Device"
                            >
                              <Trash2 className="h-4 w-4" />
                            </button>
                          </div>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            )}
          </div>
        </div>

        {/* Add Device Modal */}
        {showAddModal && (
          <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
            <div className="bg-white rounded-lg shadow-lg w-full max-w-2xl max-h-[90vh] overflow-y-auto m-4">
              <div className="flex items-center justify-between p-4 border-b border-gray-200">
                <h2 className="text-lg font-semibold text-gray-900">Add Imaging Device</h2>
                <button onClick={() => setShowAddModal(false)} className="text-gray-400 hover:text-gray-600">
                  <X className="h-5 w-5" />
                </button>
              </div>
              <form onSubmit={handleAddDevice} className="p-4 space-y-4">
                {/* Device Profile Selection */}
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Device Profile (Optional)
                  </label>
                  <select
                    value={formData.profileId}
                    onChange={(e) => handleProfileSelect(e.target.value)}
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                  >
                    <option value="">Select a pre-configured device...</option>
                    {profiles.map((profile) => (
                      <option key={profile.id} value={profile.id}>
                        {profile.manufacturer} {profile.model} ({profile.modality})
                      </option>
                    ))}
                  </select>
                  <p className="text-xs text-gray-500 mt-1">Or enter device details manually below</p>
                </div>

                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                      Device Code *
                    </label>
                    <input
                      type="text"
                      value={formData.deviceCode}
                      onChange={(e) => setFormData({ ...formData, deviceCode: e.target.value.toUpperCase() })}
                      placeholder="e.g., CT-001"
                      required
                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                      AE Title *
                    </label>
                    <input
                      type="text"
                      value={formData.aeTitle}
                      onChange={(e) => setFormData({ ...formData, aeTitle: e.target.value.toUpperCase() })}
                      placeholder="e.g., CT_SCANNER_1"
                      required
                      maxLength={16}
                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 font-mono"
                    />
                    <p className="text-xs text-gray-500 mt-1">DICOM Application Entity Title (max 16 chars)</p>
                  </div>
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Device Name *
                  </label>
                  <input
                    type="text"
                    value={formData.name}
                    onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                    placeholder="e.g., CT Scanner Room 1"
                    required
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                  />
                </div>

                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                      Manufacturer *
                    </label>
                    <input
                      type="text"
                      value={formData.manufacturer}
                      onChange={(e) => setFormData({ ...formData, manufacturer: e.target.value })}
                      placeholder="e.g., Siemens"
                      required
                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                      Model *
                    </label>
                    <input
                      type="text"
                      value={formData.model}
                      onChange={(e) => setFormData({ ...formData, model: e.target.value })}
                      placeholder="e.g., SOMATOM Force"
                      required
                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                    />
                  </div>
                </div>

                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                      Modality *
                    </label>
                    <select
                      value={formData.modality}
                      onChange={(e) => setFormData({ ...formData, modality: e.target.value })}
                      required
                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                    >
                      {Object.entries(MODALITY_NAMES).map(([id, name]) => (
                        <option key={id} value={id}>{name} ({id})</option>
                      ))}
                    </select>
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                      Serial Number
                    </label>
                    <input
                      type="text"
                      value={formData.serialNumber}
                      onChange={(e) => setFormData({ ...formData, serialNumber: e.target.value })}
                      placeholder="Optional"
                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                    />
                  </div>
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Location
                  </label>
                  <input
                    type="text"
                    value={formData.location}
                    onChange={(e) => setFormData({ ...formData, location: e.target.value })}
                    placeholder="e.g., Radiology Department, Room 101"
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Notes
                  </label>
                  <textarea
                    value={formData.notes}
                    onChange={(e) => setFormData({ ...formData, notes: e.target.value })}
                    placeholder="Optional notes about this device..."
                    rows={2}
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                  />
                </div>

                <div className="flex justify-end gap-3 pt-4 border-t border-gray-200">
                  <button
                    type="button"
                    onClick={() => setShowAddModal(false)}
                    className="px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-lg"
                  >
                    Cancel
                  </button>
                  <button
                    type="submit"
                    className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
                  >
                    Add Device
                  </button>
                </div>
              </form>
            </div>
          </div>
        )}

        {/* API Key Modal */}
        {showApiKeyModal && (
          <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
            <div className="bg-white rounded-lg shadow-lg w-full max-w-lg m-4 p-6">
              <div className="text-center mb-4">
                <div className="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-3">
                  <Key className="h-6 w-6 text-green-600" />
                </div>
                <h2 className="text-lg font-semibold text-gray-900">API Key Generated</h2>
                <p className="text-sm text-gray-500 mt-1">
                  Save this API key securely. It will not be shown again.
                </p>
              </div>

              <div className="bg-gray-100 rounded-lg p-4 mb-4">
                <div className="flex items-center justify-between gap-2">
                  <code className="text-sm font-mono text-gray-900 break-all">
                    {newApiKey}
                  </code>
                  <button
                    onClick={() => copyToClipboard(newApiKey)}
                    className="flex-shrink-0 p-2 hover:bg-gray-200 rounded"
                  >
                    {copiedKey ? (
                      <Check className="h-4 w-4 text-green-500" />
                    ) : (
                      <Copy className="h-4 w-4 text-gray-500" />
                    )}
                  </button>
                </div>
              </div>

              <div className="bg-blue-50 rounded-lg p-4 mb-4">
                <h3 className="font-medium text-blue-900 mb-2">Setup Instructions</h3>
                <ol className="text-sm text-blue-800 space-y-2">
                  <li>1. Configure your DICOM modality or middleware to send images to:</li>
                  <li className="ml-4 font-mono bg-blue-100 p-2 rounded">
                    POST {typeof window !== 'undefined' ? window.location.origin : ''}/api/dicom/stow
                  </li>
                  <li>2. Set the API key in the request header:</li>
                  <li className="ml-4 font-mono bg-blue-100 p-2 rounded">
                    X-Device-API-Key: {newApiKey.substring(0, 20)}...
                  </li>
                  <li>3. Send DICOM files as multipart/related or application/dicom</li>
                </ol>
              </div>

              <button
                onClick={() => setShowApiKeyModal(false)}
                className="w-full px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
              >
                Done
              </button>
            </div>
          </div>
        )}
      </SidebarLayout>
    </ProtectedRoute>
  );
}